@veltra/desktop 1.7.5 → 1.7.6

package/dist/components/code-editor/code-editor.js

@@ -1,18 +1,21 @@
-import _sfc_main$1 from "../scroll/scroll.js";
-import _sfc_main$2 from "../select/select.js";
+import _sfc_main$1 from "../icon/icon.js";
+import _sfc_main$2 from "../scroll/scroll.js";
+import _sfc_main$3 from "../select/select.js";
 import { Compartment, EditorState } from "../../node_modules/.bun/@codemirror_state@6.7.1/node_modules/@codemirror/state/dist/index.js";
 import { EditorView, tooltips } from "../../node_modules/.bun/@codemirror_view@6.43.9/node_modules/@codemirror/view/dist/index.js";
 import { oneDark } from "../../node_modules/.bun/@codemirror_theme-one-dark@6.1.3/node_modules/@codemirror/theme-one-dark/dist/index.js";
 import { basicSetup } from "./basic-setup.js";
 import { loadLanguage } from "./lang-loaders.js";
 import { buildFullDoc, extractBodyFromText, getShellRanges, mapSelectionToBody, shellExtension, textEqualsShellDoc } from "./shell-extension.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { useFormFallbackProps } from "@veltra/compositions";
 import { bem, injectFormContext, zIndex } from "@veltra/utils";
+import { Close, ZoomIn } from "@veltra/icons/normal";
 //#region src/components/code-editor/code-editor.vue
 const _hoisted_1 = { ref: "container" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UCodeEditor",
+	inheritAttrs: false,
 	__name: "code-editor",
 	props: /*@__PURE__*/ mergeModels({
 		modelValue: {},
@@ -24,6 +27,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		zoomable: {
+			type: Boolean,
+			default: true
+		},
 		defaultLines: { default: 8 },
 		tips: {},
 		span: {},
@@ -60,11 +67,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			disabled: false,
 			readonly: false
 		});
+		/** 放大状态：复用同一组件根 DOM / 同一 EditorView 实例，Teleport 移入 body 全屏遮罩 */
+		const zoomed = shallowRef(false);
+		/** 放大期间原位置占位的高度（取放大前组件根高度） */
+		const placeholderHeight = shallowRef("");
+		/** 放大遮罩的 z 轴层级，进入放大时取一次，避免渲染期反复自增 */
+		const zoomZIndex = shallowRef();
+		const rootRef = useTemplateRef("root");
+		const zoomWrapRef = useTemplateRef("zoomWrap");
 		const className = computed(() => [
 			cls.b,
 			bem.is("disabled", disabled.value),
 			bem.is("readonly", readonly.value),
-			bem.is("dark", props.dark)
+			bem.is("dark", props.dark),
+			bem.is("zoomed", zoomed.value)
 		]);
 		const rootStyle = computed(() => ({ "--u-code-editor-default-lines": Math.max(1, props.defaultLines) }));
 		const langs = computed(() => props.langs ?? []);
@@ -77,6 +93,29 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const activeLang = computed(() => lang.value ?? langs.value[0]);
 		/** 仅一种语言时，在选择器位置展示名称 */
 		const langLabel = computed(() => langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : void 0);
+		/** 语言标识或放大/关闭按钮任一存在时才渲染工具栏 */
+		const hasToolbar = computed(() => showLangSelect.value || !!langLabel.value || props.zoomable || zoomed.value);
+		function enterZoom() {
+			if (disabled.value || zoomed.value) return;
+			const root = rootRef.value;
+			if (root) placeholderHeight.value = `${root.offsetHeight}px`;
+			zoomZIndex.value = zIndex();
+			zoomed.value = true;
+			editor.value?.dispatch({ effects: tooltipThemeCompartment.reconfigure(EditorView.theme({ ".cm-tooltip": { zIndex: zIndex() } })) });
+			nextTick(() => zoomWrapRef.value?.focus());
+		}
+		function exitZoom() {
+			if (!zoomed.value) return;
+			zoomed.value = false;
+		}
+		/** 放大期间锁定 body 滚动，退出后恢复原值 */
+		let prevBodyOverflow = "";
+		watch(zoomed, (v) => {
+			if (v) {
+				prevBodyOverflow = document.body.style.overflow;
+				document.body.style.overflow = "hidden";
+			} else document.body.style.overflow = prevBodyOverflow;
+		});
 		const shellConfig = computed(() => ({
 			prefix: props.prefix ?? "",
 			suffix: props.suffix ?? ""
@@ -88,6 +127,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const readOnlyCompartment = new Compartment();
 		const langCompartment = new Compartment();
 		const shellCompartment = new Compartment();
+		const tooltipThemeCompartment = new Compartment();
 		/** 聚焦时的正文快照，用于失焦时判断是否触发 change */
 		let focusSnapshot = "";
 		/**
@@ -108,7 +148,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return [
 				basicSetup,
 				tooltips({ parent: document.body }),
-				EditorView.theme({ ".cm-tooltip": { zIndex: zIndex() } }),
+				tooltipThemeCompartment.of(EditorView.theme({ ".cm-tooltip": { zIndex: zIndex() } })),
 				themeCompartment.of(props.dark ? oneDark : []),
 				editableCompartment.of(EditorView.editable.of(!disabled.value)),
 				readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),
@@ -246,14 +286,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			});
 			lastEditorBody = body;
 		}, { immediate: true });
-		onBeforeUnmount(destroyEditor);
+		onBeforeUnmount(() => {
+			destroyEditor();
+			if (zoomed.value) document.body.style.overflow = prevBodyOverflow;
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(_sfc_main$1), {
-				class: normalizeClass(className.value),
-				style: normalizeStyle(rootStyle.value),
-				onKeyup: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {}, ["stop"]), ["enter"]))
-			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, null, 512), showLangSelect.value ? (openBlock(), createBlock(unref(_sfc_main$2), {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createCommentVNode(" 放大时原位置的等高占位，避免页面布局位移 "),
+				zoomed.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("placeholder")),
+					style: normalizeStyle({ height: placeholderHeight.value })
+				}, null, 6)) : createCommentVNode("v-if", true),
+				(openBlock(), createBlock(Teleport, {
+					to: "body",
+					disabled: !zoomed.value
+				}, [createElementVNode("div", {
+					ref: "zoomWrap",
+					class: normalizeClass([unref(cls).e("zoom-wrap"), unref(bem).is("zoomed", zoomed.value)]),
+					style: normalizeStyle(zoomed.value ? { zIndex: zoomZIndex.value } : void 0),
+					tabindex: "-1",
+					onKeyup: withKeys(exitZoom, ["esc"])
+				}, [createElementVNode("div", mergeProps({ ref: "root" }, _ctx.$attrs, {
+					class: className.value,
+					style: rootStyle.value,
+					onKeyup: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {}, ["stop"]), ["enter"]))
+				}), [hasToolbar.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("toolbar"))
+				}, [showLangSelect.value ? (openBlock(), createBlock(unref(_sfc_main$3), {
 					key: 0,
 					class: normalizeClass(unref(cls).e("lang-select")),
 					modelValue: lang.value,
@@ -270,9 +331,27 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				])) : langLabel.value ? (openBlock(), createElementBlock("span", {
 					key: 1,
 					class: normalizeClass(unref(cls).e("lang-label"))
-				}, toDisplayString(langLabel.value), 3)) : createCommentVNode("v-if", true)]),
-				_: 1
-			}, 8, ["class", "style"]);
+				}, toDisplayString(langLabel.value), 3)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(cls).e("toolbar-actions")) }, [zoomed.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 0,
+					class: normalizeClass(unref(cls).e("btn-close")),
+					title: "关闭",
+					onClick: exitZoom
+				}, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				}, 8, ["class"])) : __props.zoomable ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 1,
+					class: normalizeClass([unref(cls).e("btn-zoom"), unref(bem).is("disabled", unref(disabled))]),
+					title: "放大",
+					onClick: enterZoom
+				}, {
+					default: withCtx(() => [createVNode(unref(ZoomIn))]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("v-if", true)], 2)], 2)) : createCommentVNode("v-if", true), createVNode(unref(_sfc_main$2), { class: normalizeClass(unref(cls).e("scroll")) }, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, null, 512)]),
+					_: 1
+				}, 8, ["class"])], 16)], 38)], 8, ["disabled"]))
+			], 64);
 		};
 	}
 });

package/dist/components/code-editor/code-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.js","names":[],"sources":["../../../src/components/code-editor/code-editor.vue"],"sourcesContent":["<template>\n  <u-scroll :class=\"className\" :style=\"rootStyle\" @keyup.enter.stop>\n    <div ref=\"container\"></div>\n\n    <u-select\n      v-if=\"showLangSelect\"\n      :class=\"cls.e('lang-select')\"\n      v-model=\"lang\"\n      size=\"small\"\n      :options=\"langOptions\"\n      :clearable=\"false\"\n      :disabled=\"disabled\"\n    />\n    <span v-else-if=\"langLabel\" :class=\"cls.e('lang-label')\">{{ langLabel }}</span>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Compartment, EditorState, type Extension, type Text } from '@codemirror/state'\nimport { oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, tooltips } from '@codemirror/view'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem, injectFormContext, zIndex } from '@veltra/utils'\nimport {\n  computed,\n  onBeforeUnmount,\n  shallowRef,\n  useTemplateRef,\n  watch,\n  type CSSProperties\n} from 'vue'\n\nimport type { CodeEditorEmits, CodeEditorLang, CodeEditorProps } from '../../types'\nimport { UScroll } from '../scroll'\nimport { USelect } from '../select'\nimport { basicSetup } from './basic-setup'\nimport { loadLanguage } from './lang-loaders'\nimport {\n  buildFullDoc,\n  extractBodyFromText,\n  getShellRanges,\n  mapSelectionToBody,\n  shellExtension,\n  textEqualsShellDoc,\n  type ShellConfig\n} from './shell-extension'\n\ndefineOptions({ name: 'UCodeEditor' })\n\nconst props = withDefaults(defineProps<CodeEditorProps>(), {\n  disabled: undefined,\n  readonly: undefined,\n  dark: false,\n  defaultLines: 8\n})\n\nconst emit = defineEmits<CodeEditorEmits>()\n\nconst model = defineModel<string>()\nconst lang = defineModel<CodeEditorLang>('lang')\n\nconst cls = bem('code-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  disabled: false,\n  readonly: false\n})\n\nconst className = computed<string[]>(() => [\n  cls.b,\n  bem.is('disabled', disabled.value),\n  bem.is('readonly', readonly.value),\n  bem.is('dark', props.dark)\n])\n\nconst rootStyle = computed<CSSProperties>(() => ({\n  '--u-code-editor-default-lines': Math.max(1, props.defaultLines)\n}))\n\nconst langs = computed(() => props.langs ?? [])\n\nconst showLangSelect = computed(() => langs.value.length > 1)\n\nconst langOptions = computed(() =>\n  langs.value.map((value) => ({ label: value.toUpperCase(), value }))\n)\n\n/** 实际生效的语言：优先 lang model，否则回落 langs[0] */\nconst activeLang = computed<CodeEditorLang | undefined>(() => lang.value ?? langs.value[0])\n\n/** 仅一种语言时，在选择器位置展示名称 */\nconst langLabel = computed(() =>\n  langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined\n)\n\nconst shellConfig = computed<ShellConfig>(() => ({\n  prefix: props.prefix ?? '',\n  suffix: props.suffix ?? ''\n}))\n\nconst containerRef = useTemplateRef('container')\nconst editor = shallowRef<EditorView | null>(null)\n\nconst themeCompartment = new Compartment()\nconst editableCompartment = new Compartment()\nconst readOnlyCompartment = new Compartment()\nconst langCompartment = new Compartment()\nconst shellCompartment = new Compartment()\n\n/** 聚焦时的正文快照，用于失焦时判断是否触发 change */\nlet focusSnapshot = ''\n\n/**\n * 编辑器最近一次写出的正文引用。\n * 用于短路 model → doc 同步，避免每次按键对整篇文档做 O(n) 相等比较。\n */\nlet lastEditorBody: string | undefined\n\n/** 上一帧是否处于 IME composition，用于在 composition 结束时补一次 model 同步 */\nlet wasComposing = false\n\n/** 将编辑器正文写回 v-model（跳过与上次相同的值，避免多余更新） */\nfunction writeModelFromDoc(doc: Text) {\n  const nextBody = extractBodyFromText(doc, shellConfig.value)\n  if (nextBody === lastEditorBody && nextBody === model.value) return\n  lastEditorBody = nextBody\n  model.value = nextBody\n}\n\nfunction buildExtensions(): Extension[] {\n  return [\n    basicSetup,\n    tooltips({ parent: document.body }),\n    EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } }),\n    themeCompartment.of(props.dark ? oneDark : []),\n    editableCompartment.of(EditorView.editable.of(!disabled.value)),\n    readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),\n    langCompartment.of([]),\n    shellCompartment.of(shellExtension(shellConfig.value)),\n    EditorView.updateListener.of((update) => {\n      const composing = update.view.composing\n\n      // IME 进行中不写回，避免中间态触发父级重渲染；结束后再统一同步\n      if (update.docChanged && !composing) {\n        writeModelFromDoc(update.state.doc)\n      } else if (wasComposing && !composing) {\n        writeModelFromDoc(update.state.doc)\n      }\n      wasComposing = composing\n\n      if (!update.focusChanged) return\n      if (update.view.hasFocus) {\n        focusSnapshot = extractBodyFromText(update.state.doc, shellConfig.value)\n        return\n      }\n      const current = extractBodyFromText(update.state.doc, shellConfig.value)\n      if (current !== focusSnapshot) {\n        emit('change', current)\n      }\n    })\n  ]\n}\n\nlet editorToken = 0\nlet langToken = 0\n\nasync function applyLanguage() {\n  const view = editor.value\n  if (!view) return\n  const myToken = ++langToken\n  const language = activeLang.value\n\n  if (!language) {\n    if (myToken !== langToken || editor.value !== view) return\n    view.dispatch({ effects: langCompartment.reconfigure([]) })\n    return\n  }\n\n  const ext = await loadLanguage(language)\n  if (myToken !== langToken || editor.value !== view) return\n  view.dispatch({ effects: langCompartment.reconfigure(ext) })\n}\n\nfunction destroyEditor() {\n  ++editorToken\n  ++langToken\n  editor.value?.destroy()\n  editor.value = null\n  lastEditorBody = undefined\n  wasComposing = false\n}\n\nfunction createEditor() {\n  destroyEditor()\n  const myToken = ++editorToken\n  const parent = containerRef.value\n  if (!parent) return\n\n  const config = shellConfig.value\n  const body = model.value ?? ''\n  const doc = buildFullDoc(body, config)\n  const { bodyStart } = getShellRanges(doc.length, config)\n  lastEditorBody = body\n\n  const view = new EditorView({\n    doc,\n    selection: { anchor: bodyStart, head: bodyStart },\n    extensions: buildExtensions(),\n    parent\n  })\n\n  if (myToken !== editorToken) {\n    view.destroy()\n    return\n  }\n\n  editor.value = view\n  applyLanguage()\n}\n\n/**\n * 将 model 正文同步为完整文档；可选同时 reconfigure shell，\n * 避免 prefix/suffix 变更时「先改扩展、后改文档」导致选区越界。\n */\nfunction syncDocFromModel(\n  view: EditorView,\n  body: string,\n  config: ShellConfig,\n  options?: { reconfigureShell?: boolean; prevShell?: ShellConfig }\n) {\n  const current = view.state.doc\n  const docChanged = !textEqualsShellDoc(current, body, config)\n  const reconfigureShell = options?.reconfigureShell ?? false\n\n  if (!docChanged && !reconfigureShell) return\n\n  const nextDoc = buildFullDoc(body, config)\n  const prevShell = options?.prevShell ?? config\n  const prevRanges = getShellRanges(current.length, prevShell)\n  const nextRanges = getShellRanges(nextDoc.length, config)\n  const selection = mapSelectionToBody(view.state.selection, prevRanges, nextRanges, nextDoc.length)\n\n  view.dispatch({\n    ...(docChanged\n      ? {\n          changes: { from: 0, to: current.length, insert: nextDoc },\n          selection,\n          // 仅外壳变更时滚入视口；外部 model 回写不应打断用户滚动位置\n          ...(reconfigureShell ? { scrollIntoView: true } : {})\n        }\n      : { selection }),\n    ...(reconfigureShell ? { effects: shellCompartment.reconfigure(shellExtension(config)) } : {}),\n    // 绕过 shell 的 change/transactionFilter，避免全量替换被拦截或选区被错误钳制\n    filter: false\n  })\n}\n\nwatch(\n  containerRef,\n  (el) => {\n    if (el) createEditor()\n    else destroyEditor()\n  },\n  { immediate: true, flush: 'post' }\n)\n\nwatch(activeLang, applyLanguage)\n\n/** langs 变化时，若当前 lang 未设或不在列表中则纠正为 langs[0] */\nwatch(\n  langs,\n  (list) => {\n    if (!list.length) return\n    if (!lang.value || !list.includes(lang.value)) {\n      lang.value = list[0]\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.dark,\n  (dark) => {\n    editor.value?.dispatch({ effects: themeCompartment.reconfigure(dark ? oneDark : []) })\n  }\n)\n\nwatch(disabled, (v) => {\n  editor.value?.dispatch({ effects: editableCompartment.reconfigure(EditorView.editable.of(!v)) })\n})\n\nwatch(readonly, (v) => {\n  editor.value?.dispatch({ effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(v)) })\n})\n\nwatch(\n  [model, editor, shellConfig],\n  ([v, e], [, , prevShell]) => {\n    if (!e) return\n    // IME 组字中不接受外部回写，避免打断输入\n    if (e.composing) return\n    const config = shellConfig.value\n    const shellChanged =\n      !prevShell || prevShell.prefix !== config.prefix || prevShell.suffix !== config.suffix\n    // 编辑器自身写出的 model 无需回写文档\n    if (!shellChanged && v === lastEditorBody) return\n    const body = v ?? ''\n    syncDocFromModel(e, body, config, {\n      reconfigureShell: shellChanged,\n      prevShell: prevShell ?? config\n    })\n    lastEditorBody = body\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(destroyEditor)\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"code-editor.js","names":["$attrs"],"sources":["../../../src/components/code-editor/code-editor.vue"],"sourcesContent":["<template>\n  <!-- 放大时原位置的等高占位，避免页面布局位移 -->\n  <div v-if=\"zoomed\" :class=\"cls.e('placeholder')\" :style=\"{ height: placeholderHeight }\" />\n\n  <Teleport to=\"body\" :disabled=\"!zoomed\">\n    <div\n      ref=\"zoomWrap\"\n      :class=\"[cls.e('zoom-wrap'), bem.is('zoomed', zoomed)]\"\n      :style=\"zoomed ? { zIndex: zoomZIndex } : undefined\"\n      tabindex=\"-1\"\n      @keyup.esc=\"exitZoom\"\n    >\n      <div ref=\"root\" v-bind=\"$attrs\" :class=\"className\" :style=\"rootStyle\" @keyup.enter.stop>\n        <div v-if=\"hasToolbar\" :class=\"cls.e('toolbar')\">\n          <u-select\n            v-if=\"showLangSelect\"\n            :class=\"cls.e('lang-select')\"\n            v-model=\"lang\"\n            size=\"small\"\n            :options=\"langOptions\"\n            :clearable=\"false\"\n            :disabled=\"disabled\"\n          />\n          <span v-else-if=\"langLabel\" :class=\"cls.e('lang-label')\">{{ langLabel }}</span>\n\n          <div :class=\"cls.e('toolbar-actions')\">\n            <u-icon v-if=\"zoomed\" :class=\"cls.e('btn-close')\" title=\"关闭\" @click=\"exitZoom\">\n              <Close />\n            </u-icon>\n            <u-icon\n              v-else-if=\"zoomable\"\n              :class=\"[cls.e('btn-zoom'), bem.is('disabled', disabled)]\"\n              title=\"放大\"\n              @click=\"enterZoom\"\n            >\n              <ZoomIn />\n            </u-icon>\n          </div>\n        </div>\n\n        <u-scroll :class=\"cls.e('scroll')\">\n          <div ref=\"container\"></div>\n        </u-scroll>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Compartment, EditorState, type Extension, type Text } from '@codemirror/state'\nimport { oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, tooltips } from '@codemirror/view'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { ZoomIn, Close } from '@veltra/icons/normal'\nimport { bem, injectFormContext, zIndex } from '@veltra/utils'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  shallowRef,\n  useTemplateRef,\n  watch,\n  type CSSProperties\n} from 'vue'\n\nimport type { CodeEditorEmits, CodeEditorLang, CodeEditorProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UScroll } from '../scroll'\nimport { USelect } from '../select'\nimport { basicSetup } from './basic-setup'\nimport { loadLanguage } from './lang-loaders'\nimport {\n  buildFullDoc,\n  extractBodyFromText,\n  getShellRanges,\n  mapSelectionToBody,\n  shellExtension,\n  textEqualsShellDoc,\n  type ShellConfig\n} from './shell-extension'\n\ndefineOptions({ name: 'UCodeEditor', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<CodeEditorProps>(), {\n  disabled: undefined,\n  readonly: undefined,\n  dark: false,\n  zoomable: true,\n  defaultLines: 8\n})\n\nconst emit = defineEmits<CodeEditorEmits>()\n\nconst model = defineModel<string>()\nconst lang = defineModel<CodeEditorLang>('lang')\n\nconst cls = bem('code-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  disabled: false,\n  readonly: false\n})\n\n/** 放大状态：复用同一组件根 DOM / 同一 EditorView 实例，Teleport 移入 body 全屏遮罩 */\nconst zoomed = shallowRef(false)\n\n/** 放大期间原位置占位的高度（取放大前组件根高度） */\nconst placeholderHeight = shallowRef('')\n\n/** 放大遮罩的 z 轴层级，进入放大时取一次，避免渲染期反复自增 */\nconst zoomZIndex = shallowRef<number>()\n\nconst rootRef = useTemplateRef<HTMLElement>('root')\nconst zoomWrapRef = useTemplateRef<HTMLElement>('zoomWrap')\n\nconst className = computed<string[]>(() => [\n  cls.b,\n  bem.is('disabled', disabled.value),\n  bem.is('readonly', readonly.value),\n  bem.is('dark', props.dark),\n  bem.is('zoomed', zoomed.value)\n])\n\nconst rootStyle = computed<CSSProperties>(() => ({\n  '--u-code-editor-default-lines': Math.max(1, props.defaultLines)\n}))\n\nconst langs = computed(() => props.langs ?? [])\n\nconst showLangSelect = computed(() => langs.value.length > 1)\n\nconst langOptions = computed(() =>\n  langs.value.map((value) => ({ label: value.toUpperCase(), value }))\n)\n\n/** 实际生效的语言：优先 lang model，否则回落 langs[0] */\nconst activeLang = computed<CodeEditorLang | undefined>(() => lang.value ?? langs.value[0])\n\n/** 仅一种语言时，在选择器位置展示名称 */\nconst langLabel = computed(() =>\n  langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined\n)\n\n/** 语言标识或放大/关闭按钮任一存在时才渲染工具栏 */\nconst hasToolbar = computed(\n  () => showLangSelect.value || !!langLabel.value || props.zoomable || zoomed.value\n)\n\nfunction enterZoom() {\n  if (disabled.value || zoomed.value) return\n  const root = rootRef.value\n  if (root) placeholderHeight.value = `${root.offsetHeight}px`\n  zoomZIndex.value = zIndex()\n  zoomed.value = true\n  // 遮罩层级高于创建编辑器时写入的 tooltip 层级，同步抬升避免补全提示被遮罩盖住\n  editor.value?.dispatch({\n    effects: tooltipThemeCompartment.reconfigure(\n      EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })\n    )\n  })\n  // 对齐 dialog 先例：放大按钮（u-icon）不可聚焦，点击后焦点在 body 上，\n  // keyup 不会向下经过遮罩，需主动聚焦遮罩，Esc 才能冒泡到 keyup.esc\n  nextTick(() => zoomWrapRef.value?.focus())\n}\n\nfunction exitZoom() {\n  if (!zoomed.value) return\n  zoomed.value = false\n}\n\n/** 放大期间锁定 body 滚动，退出后恢复原值 */\nlet prevBodyOverflow = ''\n\nwatch(zoomed, (v) => {\n  if (v) {\n    prevBodyOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n  } else {\n    document.body.style.overflow = prevBodyOverflow\n  }\n})\n\nconst shellConfig = computed<ShellConfig>(() => ({\n  prefix: props.prefix ?? '',\n  suffix: props.suffix ?? ''\n}))\n\nconst containerRef = useTemplateRef('container')\nconst editor = shallowRef<EditorView | null>(null)\n\nconst themeCompartment = new Compartment()\nconst editableCompartment = new Compartment()\nconst readOnlyCompartment = new Compartment()\nconst langCompartment = new Compartment()\nconst shellCompartment = new Compartment()\nconst tooltipThemeCompartment = new Compartment()\n\n/** 聚焦时的正文快照，用于失焦时判断是否触发 change */\nlet focusSnapshot = ''\n\n/**\n * 编辑器最近一次写出的正文引用。\n * 用于短路 model → doc 同步，避免每次按键对整篇文档做 O(n) 相等比较。\n */\nlet lastEditorBody: string | undefined\n\n/** 上一帧是否处于 IME composition，用于在 composition 结束时补一次 model 同步 */\nlet wasComposing = false\n\n/** 将编辑器正文写回 v-model（跳过与上次相同的值，避免多余更新） */\nfunction writeModelFromDoc(doc: Text) {\n  const nextBody = extractBodyFromText(doc, shellConfig.value)\n  if (nextBody === lastEditorBody && nextBody === model.value) return\n  lastEditorBody = nextBody\n  model.value = nextBody\n}\n\nfunction buildExtensions(): Extension[] {\n  return [\n    basicSetup,\n    tooltips({ parent: document.body }),\n    tooltipThemeCompartment.of(EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })),\n    themeCompartment.of(props.dark ? oneDark : []),\n    editableCompartment.of(EditorView.editable.of(!disabled.value)),\n    readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),\n    langCompartment.of([]),\n    shellCompartment.of(shellExtension(shellConfig.value)),\n    EditorView.updateListener.of((update) => {\n      const composing = update.view.composing\n\n      // IME 进行中不写回，避免中间态触发父级重渲染；结束后再统一同步\n      if (update.docChanged && !composing) {\n        writeModelFromDoc(update.state.doc)\n      } else if (wasComposing && !composing) {\n        writeModelFromDoc(update.state.doc)\n      }\n      wasComposing = composing\n\n      if (!update.focusChanged) return\n      if (update.view.hasFocus) {\n        focusSnapshot = extractBodyFromText(update.state.doc, shellConfig.value)\n        return\n      }\n      const current = extractBodyFromText(update.state.doc, shellConfig.value)\n      if (current !== focusSnapshot) {\n        emit('change', current)\n      }\n    })\n  ]\n}\n\nlet editorToken = 0\nlet langToken = 0\n\nasync function applyLanguage() {\n  const view = editor.value\n  if (!view) return\n  const myToken = ++langToken\n  const language = activeLang.value\n\n  if (!language) {\n    if (myToken !== langToken || editor.value !== view) return\n    view.dispatch({ effects: langCompartment.reconfigure([]) })\n    return\n  }\n\n  const ext = await loadLanguage(language)\n  if (myToken !== langToken || editor.value !== view) return\n  view.dispatch({ effects: langCompartment.reconfigure(ext) })\n}\n\nfunction destroyEditor() {\n  ++editorToken\n  ++langToken\n  editor.value?.destroy()\n  editor.value = null\n  lastEditorBody = undefined\n  wasComposing = false\n}\n\nfunction createEditor() {\n  destroyEditor()\n  const myToken = ++editorToken\n  const parent = containerRef.value\n  if (!parent) return\n\n  const config = shellConfig.value\n  const body = model.value ?? ''\n  const doc = buildFullDoc(body, config)\n  const { bodyStart } = getShellRanges(doc.length, config)\n  lastEditorBody = body\n\n  const view = new EditorView({\n    doc,\n    selection: { anchor: bodyStart, head: bodyStart },\n    extensions: buildExtensions(),\n    parent\n  })\n\n  if (myToken !== editorToken) {\n    view.destroy()\n    return\n  }\n\n  editor.value = view\n  applyLanguage()\n}\n\n/**\n * 将 model 正文同步为完整文档；可选同时 reconfigure shell，\n * 避免 prefix/suffix 变更时「先改扩展、后改文档」导致选区越界。\n */\nfunction syncDocFromModel(\n  view: EditorView,\n  body: string,\n  config: ShellConfig,\n  options?: { reconfigureShell?: boolean; prevShell?: ShellConfig }\n) {\n  const current = view.state.doc\n  const docChanged = !textEqualsShellDoc(current, body, config)\n  const reconfigureShell = options?.reconfigureShell ?? false\n\n  if (!docChanged && !reconfigureShell) return\n\n  const nextDoc = buildFullDoc(body, config)\n  const prevShell = options?.prevShell ?? config\n  const prevRanges = getShellRanges(current.length, prevShell)\n  const nextRanges = getShellRanges(nextDoc.length, config)\n  const selection = mapSelectionToBody(view.state.selection, prevRanges, nextRanges, nextDoc.length)\n\n  view.dispatch({\n    ...(docChanged\n      ? {\n          changes: { from: 0, to: current.length, insert: nextDoc },\n          selection,\n          // 仅外壳变更时滚入视口；外部 model 回写不应打断用户滚动位置\n          ...(reconfigureShell ? { scrollIntoView: true } : {})\n        }\n      : { selection }),\n    ...(reconfigureShell ? { effects: shellCompartment.reconfigure(shellExtension(config)) } : {}),\n    // 绕过 shell 的 change/transactionFilter，避免全量替换被拦截或选区被错误钳制\n    filter: false\n  })\n}\n\nwatch(\n  containerRef,\n  (el) => {\n    if (el) createEditor()\n    else destroyEditor()\n  },\n  { immediate: true, flush: 'post' }\n)\n\nwatch(activeLang, applyLanguage)\n\n/** langs 变化时，若当前 lang 未设或不在列表中则纠正为 langs[0] */\nwatch(\n  langs,\n  (list) => {\n    if (!list.length) return\n    if (!lang.value || !list.includes(lang.value)) {\n      lang.value = list[0]\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.dark,\n  (dark) => {\n    editor.value?.dispatch({ effects: themeCompartment.reconfigure(dark ? oneDark : []) })\n  }\n)\n\nwatch(disabled, (v) => {\n  editor.value?.dispatch({ effects: editableCompartment.reconfigure(EditorView.editable.of(!v)) })\n})\n\nwatch(readonly, (v) => {\n  editor.value?.dispatch({ effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(v)) })\n})\n\nwatch(\n  [model, editor, shellConfig],\n  ([v, e], [, , prevShell]) => {\n    if (!e) return\n    // IME 组字中不接受外部回写，避免打断输入\n    if (e.composing) return\n    const config = shellConfig.value\n    const shellChanged =\n      !prevShell || prevShell.prefix !== config.prefix || prevShell.suffix !== config.suffix\n    // 编辑器自身写出的 model 无需回写文档\n    if (!shellChanged && v === lastEditorBody) return\n    const body = v ?? ''\n    syncDocFromModel(e, body, config, {\n      reconfigureShell: shellChanged,\n      prevShell: prevShell ?? config\n    })\n    lastEditorBody = body\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  destroyEditor()\n  if (zoomed.value) document.body.style.overflow = prevBodyOverflow\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,MAAM,QAAQ;EAQd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAmB,SAAA,YAAC;EAClC,MAAM,OAAO,SAA2B,SAAC,MAAM;EAE/C,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GAC5E,UAAU;GACV,UAAU;EACZ,CAAC;;EAGD,MAAM,SAAS,WAAW,KAAK;;EAG/B,MAAM,oBAAoB,WAAW,EAAE;;EAGvC,MAAM,aAAa,WAAmB;EAEtC,MAAM,UAAU,eAA4B,MAAM;EAClD,MAAM,cAAc,eAA4B,UAAU;EAE1D,MAAM,YAAY,eAAyB;GACzC,IAAI;GACJ,IAAI,GAAG,YAAY,SAAS,KAAK;GACjC,IAAI,GAAG,YAAY,SAAS,KAAK;GACjC,IAAI,GAAG,QAAQ,MAAM,IAAI;GACzB,IAAI,GAAG,UAAU,OAAO,KAAK;EAC/B,CAAC;EAED,MAAM,YAAY,gBAA+B,EAC/C,iCAAiC,KAAK,IAAI,GAAG,MAAM,YAAY,EACjE,EAAE;EAEF,MAAM,QAAQ,eAAe,MAAM,SAAS,CAAC,CAAC;EAE9C,MAAM,iBAAiB,eAAe,MAAM,MAAM,SAAS,CAAC;EAE5D,MAAM,cAAc,eAClB,MAAM,MAAM,KAAK,WAAW;GAAE,OAAO,MAAM,YAAY;GAAG;EAAM,EAAE,CACpE;;EAGA,MAAM,aAAa,eAA2C,KAAK,SAAS,MAAM,MAAM,EAAE;;EAG1F,MAAM,YAAY,eAChB,MAAM,MAAM,WAAW,KAAK,WAAW,QAAQ,WAAW,MAAM,YAAY,IAAI,KAAA,CAClF;;EAGA,MAAM,aAAa,eACX,eAAe,SAAS,CAAC,CAAC,UAAU,SAAS,MAAM,YAAY,OAAO,KAC9E;EAEA,SAAS,YAAY;GACnB,IAAI,SAAS,SAAS,OAAO,OAAO;GACpC,MAAM,OAAO,QAAQ;GACrB,IAAI,MAAM,kBAAkB,QAAQ,GAAG,KAAK,aAAa;GACzD,WAAW,QAAQ,OAAO;GAC1B,OAAO,QAAQ;GAEf,OAAO,OAAO,SAAS,EACrB,SAAS,wBAAwB,YAC/B,WAAW,MAAM,EAAE,eAAe,EAAE,QAAQ,OAAO,EAAE,EAAE,CAAC,CAC1D,EACF,CAAC;GAGD,eAAe,YAAY,OAAO,MAAM,CAAC;EAC3C;EAEA,SAAS,WAAW;GAClB,IAAI,CAAC,OAAO,OAAO;GACnB,OAAO,QAAQ;EACjB;;EAGA,IAAI,mBAAmB;EAEvB,MAAM,SAAS,MAAM;GACnB,IAAI,GAAG;IACL,mBAAmB,SAAS,KAAK,MAAM;IACvC,SAAS,KAAK,MAAM,WAAW;GACjC,OACE,SAAS,KAAK,MAAM,WAAW;EAEnC,CAAC;EAED,MAAM,cAAc,gBAA6B;GAC/C,QAAQ,MAAM,UAAU;GACxB,QAAQ,MAAM,UAAU;EAC1B,EAAE;EAEF,MAAM,eAAe,eAAe,WAAW;EAC/C,MAAM,SAAS,WAA8B,IAAI;EAEjD,MAAM,mBAAmB,IAAI,YAAY;EACzC,MAAM,sBAAsB,IAAI,YAAY;EAC5C,MAAM,sBAAsB,IAAI,YAAY;EAC5C,MAAM,kBAAkB,IAAI,YAAY;EACxC,MAAM,mBAAmB,IAAI,YAAY;EACzC,MAAM,0BAA0B,IAAI,YAAY;;EAGhD,IAAI,gBAAgB;;;;;EAMpB,IAAI;;EAGJ,IAAI,eAAe;;EAGnB,SAAS,kBAAkB,KAAW;GACpC,MAAM,WAAW,oBAAoB,KAAK,YAAY,KAAK;GAC3D,IAAI,aAAa,kBAAkB,aAAa,MAAM,OAAO;GAC7D,iBAAiB;GACjB,MAAM,QAAQ;EAChB;EAEA,SAAS,kBAA+B;GACtC,OAAO;IACL;IACA,SAAS,EAAE,QAAQ,SAAS,KAAK,CAAC;IAClC,wBAAwB,GAAG,WAAW,MAAM,EAAE,eAAe,EAAE,QAAQ,OAAO,EAAE,EAAE,CAAC,CAAC;IACpF,iBAAiB,GAAG,MAAM,OAAO,UAAU,CAAC,CAAC;IAC7C,oBAAoB,GAAG,WAAW,SAAS,GAAG,CAAC,SAAS,KAAK,CAAC;IAC9D,oBAAoB,GAAG,YAAY,SAAS,GAAG,SAAS,KAAK,CAAC;IAC9D,gBAAgB,GAAG,CAAC,CAAC;IACrB,iBAAiB,GAAG,eAAe,YAAY,KAAK,CAAC;IACrD,WAAW,eAAe,IAAI,WAAW;KACvC,MAAM,YAAY,OAAO,KAAK;KAG9B,IAAI,OAAO,cAAc,CAAC,WACxB,kBAAkB,OAAO,MAAM,GAAG;UAC7B,IAAI,gBAAgB,CAAC,WAC1B,kBAAkB,OAAO,MAAM,GAAG;KAEpC,eAAe;KAEf,IAAI,CAAC,OAAO,cAAc;KAC1B,IAAI,OAAO,KAAK,UAAU;MACxB,gBAAgB,oBAAoB,OAAO,MAAM,KAAK,YAAY,KAAK;MACvE;KACF;KACA,MAAM,UAAU,oBAAoB,OAAO,MAAM,KAAK,YAAY,KAAK;KACvE,IAAI,YAAY,eACd,KAAK,UAAU,OAAO;IAE1B,CAAC;GACH;EACF;EAEA,IAAI,cAAc;EAClB,IAAI,YAAY;EAEhB,eAAe,gBAAgB;GAC7B,MAAM,OAAO,OAAO;GACpB,IAAI,CAAC,MAAM;GACX,MAAM,UAAU,EAAE;GAClB,MAAM,WAAW,WAAW;GAE5B,IAAI,CAAC,UAAU;IACb,IAAI,YAAY,aAAa,OAAO,UAAU,MAAM;IACpD,KAAK,SAAS,EAAE,SAAS,gBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC;IAC1D;GACF;GAEA,MAAM,MAAM,MAAM,aAAa,QAAQ;GACvC,IAAI,YAAY,aAAa,OAAO,UAAU,MAAM;GACpD,KAAK,SAAS,EAAE,SAAS,gBAAgB,YAAY,GAAG,EAAE,CAAC;EAC7D;EAEA,SAAS,gBAAgB;GACvB,EAAE;GACF,EAAE;GACF,OAAO,OAAO,QAAQ;GACtB,OAAO,QAAQ;GACf,iBAAiB,KAAA;GACjB,eAAe;EACjB;EAEA,SAAS,eAAe;GACtB,cAAc;GACd,MAAM,UAAU,EAAE;GAClB,MAAM,SAAS,aAAa;GAC5B,IAAI,CAAC,QAAQ;GAEb,MAAM,SAAS,YAAY;GAC3B,MAAM,OAAO,MAAM,SAAS;GAC5B,MAAM,MAAM,aAAa,MAAM,MAAM;GACrC,MAAM,EAAE,cAAc,eAAe,IAAI,QAAQ,MAAM;GACvD,iBAAiB;GAEjB,MAAM,OAAO,IAAI,WAAW;IAC1B;IACA,WAAW;KAAE,QAAQ;KAAW,MAAM;IAAU;IAChD,YAAY,gBAAgB;IAC5B;GACF,CAAC;GAED,IAAI,YAAY,aAAa;IAC3B,KAAK,QAAQ;IACb;GACF;GAEA,OAAO,QAAQ;GACf,cAAc;EAChB;;;;;EAMA,SAAS,iBACP,MACA,MACA,QACA,SACA;GACA,MAAM,UAAU,KAAK,MAAM;GAC3B,MAAM,aAAa,CAAC,mBAAmB,SAAS,MAAM,MAAM;GAC5D,MAAM,mBAAmB,SAAS,oBAAoB;GAEtD,IAAI,CAAC,cAAc,CAAC,kBAAkB;GAEtC,MAAM,UAAU,aAAa,MAAM,MAAM;GACzC,MAAM,YAAY,SAAS,aAAa;GACxC,MAAM,aAAa,eAAe,QAAQ,QAAQ,SAAS;GAC3D,MAAM,aAAa,eAAe,QAAQ,QAAQ,MAAM;GACxD,MAAM,YAAY,mBAAmB,KAAK,MAAM,WAAW,YAAY,YAAY,QAAQ,MAAM;GAEjG,KAAK,SAAS;IACZ,GAAI,aACA;KACE,SAAS;MAAE,MAAM;MAAG,IAAI,QAAQ;MAAQ,QAAQ;KAAQ;KACxD;KAEA,GAAI,mBAAmB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,IACA,EAAE,UAAU;IAChB,GAAI,mBAAmB,EAAE,SAAS,iBAAiB,YAAY,eAAe,MAAM,CAAC,EAAE,IAAI,CAAC;IAE5F,QAAQ;GACV,CAAC;EACH;EAEA,MACE,eACC,OAAO;GACN,IAAI,IAAI,aAAa;QAChB,cAAc;EACrB,GACA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC;EAEA,MAAM,YAAY,aAAa;;EAG/B,MACE,QACC,SAAS;GACR,IAAI,CAAC,KAAK,QAAQ;GAClB,IAAI,CAAC,KAAK,SAAS,CAAC,KAAK,SAAS,KAAK,KAAK,GAC1C,KAAK,QAAQ,KAAK;EAEtB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,YACQ,MAAM,OACX,SAAS;GACR,OAAO,OAAO,SAAS,EAAE,SAAS,iBAAiB,YAAY,OAAO,UAAU,CAAC,CAAC,EAAE,CAAC;EACvF,CACF;EAEA,MAAM,WAAW,MAAM;GACrB,OAAO,OAAO,SAAS,EAAE,SAAS,oBAAoB,YAAY,WAAW,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;EACjG,CAAC;EAED,MAAM,WAAW,MAAM;GACrB,OAAO,OAAO,SAAS,EAAE,SAAS,oBAAoB,YAAY,YAAY,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;EACjG,CAAC;EAED,MACE;GAAC;GAAO;GAAQ;EAAW,IAC1B,CAAC,GAAG,IAAI,KAAK,eAAe;GAC3B,IAAI,CAAC,GAAG;GAER,IAAI,EAAE,WAAW;GACjB,MAAM,SAAS,YAAY;GAC3B,MAAM,eACJ,CAAC,aAAa,UAAU,WAAW,OAAO,UAAU,UAAU,WAAW,OAAO;GAElF,IAAI,CAAC,gBAAgB,MAAM,gBAAgB;GAC3C,MAAM,OAAO,KAAK;GAClB,iBAAiB,GAAG,MAAM,QAAQ;IAChC,kBAAkB;IAClB,WAAW,aAAa;GAC1B,CAAC;GACD,iBAAiB;EACnB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,sBAAsB;GACpB,cAAc;GACd,IAAI,OAAO,OAAO,SAAS,KAAK,MAAM,WAAW;EACnD,CAAC;;;IAxZC,mBAAA,wBAAA;IACW,OAAA,SAAX,UAAA,GAAA,mBAA0F,OAAA;;KAAtE,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;KAAkB,OAAK,eAAA,EAAA,QAAY,kBAAA,MAAiB,CAAA;;KAEpF,UAAA,GAAA,YAyCW,UAAA;KAzCD,IAAG;KAAQ,UAAQ,CAAG,OAAA;IAC9B,GAAA,CAAA,mBAuCM,OAAA;KAtCJ,KAAI;KACH,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA,GAAe,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,OAAA,KAAM,CAAA,CAAA;KACnD,OAAK,eAAE,OAAA,QAAM,EAAA,QAAa,WAAA,MAAU,IAAK,KAAA,CAAS;KACnD,UAAS;KACR,SAAK,SAAM,UAAQ,CAAA,KAAA,CAAA;IAEpB,GAAA,CAAA,mBA+BM,OA/BN,WA+BM,EA/BD,KAAI,OAAM,GAASA,KAAAA,QAAM;KAAG,OAAO,UAAA;KAAY,OAAO,UAAA;KAAY,SAAK,OAAA,OAAA,OAAA,KAAA,SAAA,oBAAN,CAAA,GAAiB,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;IAC1E,CAAA,GAAA,CAAA,WAAA,SAAX,UAAA,GAAA,mBAyBM,OAAA;;KAzBkB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA;IAE1B,GAAA,CAAA,eAAA,SADR,UAAA,GAAA,YAQE,MAAA,WAAA,GAAA;;KANC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;KACJ,YAAA,KAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAI,QAAA;KACb,MAAK;KACJ,SAAS,YAAA;KACT,WAAW;KACX,UAAU,MAAA,QAAA;;;;;;IAEI,CAAA,KAAA,UAAA,SAAjB,UAAA,GAAA,mBAA+E,QAAA;;KAAlD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,YAAA,CAAA;IAAmB,GAAA,gBAAA,UAAA,KAAS,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAErE,mBAYM,OAAA,EAZA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,iBAAA,CAAA,EAAA,GACF,CAAA,OAAA,SAAd,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAFc,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,WAAA,CAAA;KAAe,OAAM;KAAM,SAAO;;KACnE,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;IAGE,GAAA,GAAA,CAAA,OAAA,CAAA,KAAA,QAAA,YADb,UAAA,GAAA,YAOS,MAAA,WAAA,GAAA;;KALN,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,UAAA,GAAc,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,MAAA,QAAA,CAAQ,CAAA,CAAA;KACvD,OAAM;KACL,SAAO;;KAER,SAAA,cAAU,CAAV,YAAU,MAAA,MAAA,CAAA,CAAA,CAAA;;IAKhB,GAAA,GAAA,CAAA,OAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAAA,YAEW,MAAA,WAAA,GAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA;KACrB,SAAA,cAA2B,CAA3B,mBAA2B,OAA3B,YAA2B,MAAA,GAAA,CAAA,CAAA"}

package/dist/components/code-editor/style.js

@@ -1,2 +1,3 @@
+import "../icon/style.js";
 import "../select/style.js";
 import "./style2.css";

package/dist/components/code-editor/style2.css

@@ -27,6 +27,8 @@
   --u-code-editor-active-bg: var(--u-color-primary-a-6);
   --u-code-editor-selection-bg: var(--u-color-primary-a-16);
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-height: 480px;
   border-radius: var(--u-radius-default);
@@ -39,28 +41,67 @@
 .u-code-editor:hover, .u-code-editor:focus-within {
   border-color: var(--u-color-primary);
 }
+.u-code-editor__toolbar {
+  flex-shrink: 0;
+  padding: 4px var(--u-gap-small);
+  border-bottom: 1px solid var(--u-code-editor-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-code-editor__toolbar-actions {
+  margin-left: auto;
+  gap: var(--u-gap-small);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
 .u-code-editor__lang-select {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  z-index: 2;
   width: 88px;
   border: none;
 }
-.u-code-editor__lang-select input {
-  text-align: right;
-}
 .u-code-editor__lang-label {
-  position: absolute;
-  top: 2px;
-  right: 8px;
-  z-index: 2;
   font-size: 12px;
-  line-height: 24px;
   color: var(--u-code-editor-gutter-fg);
-  pointer-events: none;
   user-select: none;
 }
+.u-code-editor__btn-zoom, .u-code-editor__btn-close {
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--u-code-editor-gutter-fg);
+  transition: color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-code-editor__btn-zoom:hover, .u-code-editor__btn-close:hover {
+  color: var(--u-color-primary);
+}
+.u-code-editor__btn-zoom.is-disabled, .u-code-editor__btn-close.is-disabled {
+  cursor: not-allowed;
+}
+.u-code-editor__btn-zoom.is-disabled:hover, .u-code-editor__btn-close.is-disabled:hover {
+  color: var(--u-code-editor-gutter-fg);
+}
+.u-code-editor__scroll {
+  flex: 1;
+  min-height: 0;
+}
+.u-code-editor__placeholder {
+  box-sizing: border-box;
+  width: 100%;
+}
+.u-code-editor__zoom-wrap {
+  display: contents;
+}
+.u-code-editor__zoom-wrap.is-zoomed {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.32);
+  outline: none;
+}
 .u-code-editor .cm-editor {
   background: transparent;
   color: var(--u-code-editor-fg);
@@ -113,6 +154,13 @@
   --u-code-editor-active-bg: rgba(255, 255, 255, 0.04);
   --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
 }
+.u-code-editor.is-zoomed {
+  width: 80vw;
+  height: 80vh;
+  max-height: none;
+  border-radius: var(--u-radius-large);
+  box-shadow: var(--u-shadow-lg);
+}
 .u-code-editor.is-disabled {
   background-color: var(--u-color-disabled);
   box-shadow: none;

package/dist/types/code-editor.d.ts

@@ -5,7 +5,7 @@ type CodeEditorLang = 'js' | 'sql' | 'java' | 'json' | 'markdown' | 'spel' | 'ba
 interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string;
   /**
-   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器；
+   * 可选语言列表。长度大于 1 时在顶部工具栏显示内置语言选择器；
    * 仅一种语言时显示语言名称标签
    */
   langs?: CodeEditorLang[];
@@ -17,6 +17,8 @@ interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   suffix?: string;
   /** 是否使用暗色主题 */
   dark?: boolean;
+  /** 是否显示放大按钮，默认 true；false 时不渲染放大按钮 */
+  zoomable?: boolean;
   /**
    * 默认显示的行数，用于撑起编辑器最小高度，超出后滚动
    * @default 8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.5",
-    "@veltra/directives": "^1.7.5",
+    "@veltra/compositions": "^1.7.6",
+    "@veltra/directives": "^1.7.6",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.4",
-    "@veltra/styles": "^1.7.5",
-    "@veltra/utils": "^1.7.5",
+    "@veltra/styles": "^1.7.6",
+    "@veltra/utils": "^1.7.6",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/code-editor/code-editor.vue

@@ -1,18 +1,49 @@
 <template>
-  <u-scroll :class="className" :style="rootStyle" @keyup.enter.stop>
-    <div ref="container"></div>
-
-    <u-select
-      v-if="showLangSelect"
-      :class="cls.e('lang-select')"
-      v-model="lang"
-      size="small"
-      :options="langOptions"
-      :clearable="false"
-      :disabled="disabled"
-    />
-    <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
-  </u-scroll>
+  <!-- 放大时原位置的等高占位，避免页面布局位移 -->
+  <div v-if="zoomed" :class="cls.e('placeholder')" :style="{ height: placeholderHeight }" />
+
+  <Teleport to="body" :disabled="!zoomed">
+    <div
+      ref="zoomWrap"
+      :class="[cls.e('zoom-wrap'), bem.is('zoomed', zoomed)]"
+      :style="zoomed ? { zIndex: zoomZIndex } : undefined"
+      tabindex="-1"
+      @keyup.esc="exitZoom"
+    >
+      <div ref="root" v-bind="$attrs" :class="className" :style="rootStyle" @keyup.enter.stop>
+        <div v-if="hasToolbar" :class="cls.e('toolbar')">
+          <u-select
+            v-if="showLangSelect"
+            :class="cls.e('lang-select')"
+            v-model="lang"
+            size="small"
+            :options="langOptions"
+            :clearable="false"
+            :disabled="disabled"
+          />
+          <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
+
+          <div :class="cls.e('toolbar-actions')">
+            <u-icon v-if="zoomed" :class="cls.e('btn-close')" title="关闭" @click="exitZoom">
+              <Close />
+            </u-icon>
+            <u-icon
+              v-else-if="zoomable"
+              :class="[cls.e('btn-zoom'), bem.is('disabled', disabled)]"
+              title="放大"
+              @click="enterZoom"
+            >
+              <ZoomIn />
+            </u-icon>
+          </div>
+        </div>
+
+        <u-scroll :class="cls.e('scroll')">
+          <div ref="container"></div>
+        </u-scroll>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
@@ -20,9 +51,11 @@ import { Compartment, EditorState, type Extension, type Text } from '@codemirror
 import { oneDark } from '@codemirror/theme-one-dark'
 import { EditorView, tooltips } from '@codemirror/view'
 import { useFormFallbackProps } from '@veltra/compositions'
+import { ZoomIn, Close } from '@veltra/icons/normal'
 import { bem, injectFormContext, zIndex } from '@veltra/utils'
 import {
   computed,
+  nextTick,
   onBeforeUnmount,
   shallowRef,
   useTemplateRef,
@@ -31,6 +64,7 @@ import {
 } from 'vue'
 
 import type { CodeEditorEmits, CodeEditorLang, CodeEditorProps } from '../../types'
+import { UIcon } from '../icon'
 import { UScroll } from '../scroll'
 import { USelect } from '../select'
 import { basicSetup } from './basic-setup'
@@ -45,12 +79,13 @@ import {
   type ShellConfig
 } from './shell-extension'
 
-defineOptions({ name: 'UCodeEditor' })
+defineOptions({ name: 'UCodeEditor', inheritAttrs: false })
 
 const props = withDefaults(defineProps<CodeEditorProps>(), {
   disabled: undefined,
   readonly: undefined,
   dark: false,
+  zoomable: true,
   defaultLines: 8
 })
 
@@ -68,11 +103,24 @@ const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   readonly: false
 })
 
+/** 放大状态：复用同一组件根 DOM / 同一 EditorView 实例，Teleport 移入 body 全屏遮罩 */
+const zoomed = shallowRef(false)
+
+/** 放大期间原位置占位的高度（取放大前组件根高度） */
+const placeholderHeight = shallowRef('')
+
+/** 放大遮罩的 z 轴层级，进入放大时取一次，避免渲染期反复自增 */
+const zoomZIndex = shallowRef<number>()
+
+const rootRef = useTemplateRef<HTMLElement>('root')
+const zoomWrapRef = useTemplateRef<HTMLElement>('zoomWrap')
+
 const className = computed<string[]>(() => [
   cls.b,
   bem.is('disabled', disabled.value),
   bem.is('readonly', readonly.value),
-  bem.is('dark', props.dark)
+  bem.is('dark', props.dark),
+  bem.is('zoomed', zoomed.value)
 ])
 
 const rootStyle = computed<CSSProperties>(() => ({
@@ -95,6 +143,45 @@ const langLabel = computed(() =>
   langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined
 )
 
+/** 语言标识或放大/关闭按钮任一存在时才渲染工具栏 */
+const hasToolbar = computed(
+  () => showLangSelect.value || !!langLabel.value || props.zoomable || zoomed.value
+)
+
+function enterZoom() {
+  if (disabled.value || zoomed.value) return
+  const root = rootRef.value
+  if (root) placeholderHeight.value = `${root.offsetHeight}px`
+  zoomZIndex.value = zIndex()
+  zoomed.value = true
+  // 遮罩层级高于创建编辑器时写入的 tooltip 层级，同步抬升避免补全提示被遮罩盖住
+  editor.value?.dispatch({
+    effects: tooltipThemeCompartment.reconfigure(
+      EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })
+    )
+  })
+  // 对齐 dialog 先例：放大按钮（u-icon）不可聚焦，点击后焦点在 body 上，
+  // keyup 不会向下经过遮罩，需主动聚焦遮罩，Esc 才能冒泡到 keyup.esc
+  nextTick(() => zoomWrapRef.value?.focus())
+}
+
+function exitZoom() {
+  if (!zoomed.value) return
+  zoomed.value = false
+}
+
+/** 放大期间锁定 body 滚动，退出后恢复原值 */
+let prevBodyOverflow = ''
+
+watch(zoomed, (v) => {
+  if (v) {
+    prevBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = prevBodyOverflow
+  }
+})
+
 const shellConfig = computed<ShellConfig>(() => ({
   prefix: props.prefix ?? '',
   suffix: props.suffix ?? ''
@@ -108,6 +195,7 @@ const editableCompartment = new Compartment()
 const readOnlyCompartment = new Compartment()
 const langCompartment = new Compartment()
 const shellCompartment = new Compartment()
+const tooltipThemeCompartment = new Compartment()
 
 /** 聚焦时的正文快照，用于失焦时判断是否触发 change */
 let focusSnapshot = ''
@@ -133,7 +221,7 @@ function buildExtensions(): Extension[] {
   return [
     basicSetup,
     tooltips({ parent: document.body }),
-    EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } }),
+    tooltipThemeCompartment.of(EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })),
     themeCompartment.of(props.dark ? oneDark : []),
     editableCompartment.of(EditorView.editable.of(!disabled.value)),
     readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),
@@ -316,5 +404,8 @@ watch(
   { immediate: true }
 )
 
-onBeforeUnmount(destroyEditor)
+onBeforeUnmount(() => {
+  destroyEditor()
+  if (zoomed.value) document.body.style.overflow = prevBodyOverflow
+})
 </script>

package/src/components/code-editor/style.scss

@@ -16,6 +16,8 @@ $root-name: code-editor;
   --u-code-editor-selection-bg: #{fn.color-a(color, 16, primary)};
 
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-height: 480px;
   border-radius: fn.use-var(radius, default);
@@ -32,31 +34,77 @@ $root-name: code-editor;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.e(toolbar) {
+    flex-shrink: 0;
+    padding: 4px fn.use-var(gap, small);
+    border-bottom: 1px solid var(--u-code-editor-border);
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.e(toolbar-actions) {
+    margin-left: auto;
+    gap: fn.use-var(gap, small);
+    @include m.flex;
+  }
+
   @include m.e(lang-select) {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    z-index: 2;
     width: 88px;
     border: none;
-
-    input {
-      text-align: right;
-    }
   }
 
   @include m.e(lang-label) {
-    position: absolute;
-    top: 2px;
-    right: 8px;
-    z-index: 2;
     font-size: 12px;
-    line-height: 24px;
     color: var(--u-code-editor-gutter-fg);
-    pointer-events: none;
     user-select: none;
   }
 
+  @include m.e(btn-zoom, btn-close) {
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--u-code-editor-gutter-fg);
+    transition: color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--u-code-editor-gutter-fg);
+      }
+    }
+  }
+
+  // 编辑器滚动区：工具栏在其之外，任何滚动位置都不遮挡代码
+  @include m.e(scroll) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  // 放大时原位置的等高占位，撑起布局避免位移
+  @include m.e(placeholder) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  // 放大遮罩：平时 display: contents 不参与布局，放大时成为 body 下的全屏遮罩
+  @include m.e(zoom-wrap) {
+    display: contents;
+
+    @include m.is(zoomed) {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.32);
+      // 遮罩主动聚焦承接 Esc（对齐 dialog 遮罩），不显示焦点框
+      outline: none;
+    }
+  }
+
   .cm-editor {
     background: transparent;
     color: var(--u-code-editor-fg);
@@ -127,6 +175,15 @@ $root-name: code-editor;
     --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
   }
 
+  // 放大态：遮罩内视觉居中，脱离 480px 最大高度限制
+  @include m.is(zoomed) {
+    width: 80vw;
+    height: 80vh;
+    max-height: none;
+    border-radius: fn.use-var(radius, large);
+    box-shadow: fn.use-var(shadow, lg);
+  }
+
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
     box-shadow: none;

package/src/components/code-editor/style.ts

@@ -1,2 +1,3 @@
+import '../icon/style'
 import '../select/style'
 import './style.scss'

package/src/types/code-editor.ts

@@ -14,7 +14,7 @@ export type CodeEditorLang =
 export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   modelValue?: string
   /**
-   * 可选语言列表。长度大于 1 时在编辑器右上角显示内置语言选择器；
+   * 可选语言列表。长度大于 1 时在顶部工具栏显示内置语言选择器；
    * 仅一种语言时显示语言名称标签
    */
   langs?: CodeEditorLang[]
@@ -26,6 +26,8 @@ export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
   suffix?: string
   /** 是否使用暗色主题 */
   dark?: boolean
+  /** 是否显示放大按钮，默认 true；false 时不渲染放大按钮 */
+  zoomable?: boolean
   /**
    * 默认显示的行数，用于撑起编辑器最小高度，超出后滚动
    * @default 8