yh-codemirror 1.0.6 → 1.0.7

package/CodeMirror.vue

@@ -1,283 +1,1164 @@
-<template>
-  <div
-    class="yh-code-mirror-container"
-    ref="YhCodemirrorContainer"
-    :style="codeMirrorStyle">
-    <div class="code-slot">
-      <slot name="pre-code"></slot>
-    </div>
-    <div
-      class="codemirror-editor"
-      ref="codeMirrorEditorRef"
-      :style="codeMirrorEditorStyle"></div>
-    <div class="code-slot">
-      <slot name="next-code"></slot>
-    </div>
-    <div class="editor-operation-btn">
-      <i
-        title="全屏"
-        class="iconfont icon-fullscreen"
-        @click="fullscreen"></i>
-      <i
-        title="美化"
-        class="iconfont icon-magic-stick"
-        @click="onEditorBtnClick('beautify')"></i>
-      <i
-        title="全选"
-        class="iconfont icon-check-square"
-        @click="onEditorBtnClick('checkAll')"></i>
-      <i
-        title="复制"
-        class="iconfont icon-document-copy"
-        @click="onEditorBtnClick('copy')"></i>
-      <i
-        title="清空"
-        class="iconfont icon-clear"
-        @click="onEditorBtnClick('clear')"></i>
-      <slot name="operation-btn"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import {ref, onMounted, toRaw} from 'vue';
-// @ts-ignore
-import type {Extension} from 'codemirror';
-import {EditorView, basicSetup} from 'codemirror';
-import {ViewUpdate} from '@codemirror/view';
-import {EditorState, EditorSelection} from '@codemirror/state';
-import {javascriptLanguage} from '@codemirror/lang-javascript';
-import {solarizedDark} from 'cm6-theme-solarized-dark';
-import {getCodeLanguagePlugin} from './util';
-import {watch, computed} from 'vue';
-// @ts-ignore
-import {js_beautify} from 'js-beautify';
-import {ElMessage} from 'element-plus';
-
-const YhCodemirrorContainer = ref();
-function fullscreen() {
-  if (document.fullscreenElement && document.fullscreenElement === YhCodemirrorContainer.value) {
-    document.exitFullscreen();
-  } else {
-    YhCodemirrorContainer.value.requestFullscreen();
-  }
-}
-
-const codeMirrorEditorRef = ref();
-
-let view: null | EditorView = null;
-let state: null | EditorState = null;
-// js-beautify 自定义配置
-const codeBeautifyConfig = {
-  indent_size: 2,
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string;
-    language?: string | string[];
-    autocomplete?: any;
-    height?: number;
-  }>(),
-  {
-    modelValue: '',
-    language: 'javascript',
-    autocomplete: {},
-  }
-);
-
-const codeMirrorStyle = computed(() => {
-  let style: any = {};
-  if (props.height !== undefined && !isNaN(props.height)) {
-    style.height = `${props.height}px`;
-    style.display = 'flex';
-    style.flexDirection = 'column';
-  }
-  return style;
-});
-
-const codeMirrorEditorStyle = computed(() => {
-  let style: any = {};
-  if (props.height !== undefined && !isNaN(props.height)) {
-    style.flex = `1`;
-    style.overflow = 'auto';
-  }
-  return style;
-});
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (view && state && val != view.state.doc.toString()) {
-      let end = view.state.doc.toString().length;
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: end,
-            insert: val,
-          },
-        ],
-      });
-    }
-  }
-);
-
-const emits = defineEmits(['update:modelValue']);
-
-// 代码编辑器操作按钮
-const onEditorBtnClick = (type) => {
-  if (view) {
-    const state = toRaw(view.state);
-    const pos = state.doc.toString().length;
-    if (type == 'beautify') {
-      const beautifyCode = js_beautify(props.modelValue, codeBeautifyConfig);
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: pos,
-            insert: beautifyCode,
-          },
-        ],
-      });
-    } else if (type == 'checkAll') {
-      const tr = state.update({
-        // selection: EditorSelection.cursor(pos), // 设置光标
-        selection: EditorSelection.range(0, pos),
-        scrollIntoView: true,
-      });
-      view.dispatch(tr);
-    } else if (type == 'copy') {
-      let selectedText = '';
-      if (state.selection.ranges.some((range) => !range.empty)) {
-        const selection = state.selection.ranges[0];
-        selectedText = state.sliceDoc(selection.from, selection.to);
-      } else {
-        selectedText = state.doc.toString();
-      }
-      navigator.clipboard.writeText(selectedText);
-      ElMessage({
-        message: '复制成功！',
-        type: 'success',
-      });
-    } else if (type == 'clear') {
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: pos,
-            insert: '',
-          },
-        ],
-      });
-    }
-    view.focus();
-  }
-};
-
-onMounted(() => {
-  const extensions: Extension[] = [
-    basicSetup,
-    solarizedDark,
-    EditorView.lineWrapping,
-    EditorView.updateListener.of((v: ViewUpdate) => {
-      if (v.docChanged) {
-        emits('update:modelValue', v.state.doc.toString());
-      }
-    }),
-  ];
-  const language = props.language;
-  if (language) {
-    if (Array.isArray(language)) {
-      language.forEach((l) => {
-        extensions.push(getCodeLanguagePlugin(l));
-        if (props.autocomplete[l] && l === 'javascript') {
-          extensions.push(
-            javascriptLanguage.data.of({
-              autocomplete: props.autocomplete[l],
-            })
-          );
-        }
-      });
-    } else {
-      extensions.push(getCodeLanguagePlugin(language));
-      if (props.autocomplete[language] && language === 'javascript') {
-        extensions.push(
-          javascriptLanguage.data.of({
-            autocomplete: props.autocomplete[language],
-          })
-        );
-      }
-    }
-  }
-
-  state = EditorState.create({
-    doc: props.modelValue,
-    extensions,
-  });
-  if (state) {
-    view = new EditorView({
-      state: state,
-      parent: codeMirrorEditorRef.value,
-    });
-  }
-});
-</script>
-<style lang="scss">
-.yh-code-mirror-container {
-  width: 100%;
-  position: relative;
-  background-color: #173541;
-  .code-slot {
-    width: 100%;
-    font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
-    line-height: 25px;
-    font-size: 12px;
-    padding-left: 29.77px;
-    color: #ffffff;
-  }
-  .cm-editor {
-    .cm-line {
-      font-size: 16px;
-      line-height: 25px;
-      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
-    }
-  }
-  .codemirror-editor {
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-      background-color: #173541;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #f5f5f5;
-      &:hover {
-        background-color: #fff;
-      }
-    }
-  }
-  .editor-operation-btn {
-    position: absolute;
-    bottom: 1px;
-    right: 1px;
-    padding: 0 3px;
-    display: flex;
-    align-items: center;
-    border-radius: 3px;
-    opacity: 0.5;
-    background: #409eff;
-    transition: all 0.3s ease;
-    i {
-      font-size: 16px;
-      color: #fff;
-      margin: 0 5px;
-      cursor: pointer;
-      line-height: 24px;
-    }
-    &:hover {
-      opacity: 1;
-      background: #409eff;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="yh-code-mirror-container"
+    :class="{'is-light': props.theme === 'light', 'is-ai-large': props.aiPanelSize === 'large'}"
+    ref="YhCodemirrorContainer"
+    :style="codeMirrorStyle">
+    <div class="code-slot">
+      <slot name="pre-code"></slot>
+    </div>
+    <div
+      class="codemirror-editor"
+      ref="codeMirrorEditorRef"
+      :style="codeMirrorEditorStyle"></div>
+    <div class="code-slot">
+      <slot name="next-code"></slot>
+    </div>
+    <div v-if="aiEnabled && aiVisible" class="ai-prompt-panel">
+      <div class="ai-panel-head">
+        <span class="ai-tag">AI</span>
+        <span class="ai-scope">将修改{{ aiScopeText }}</span>
+        <span
+          class="ai-history-entry"
+          :class="{'is-active': aiHistoryVisible}"
+          title="查看历史问答"
+          @click="aiHistoryVisible = !aiHistoryVisible"
+          >历史{{ aiHistory.length ? `(${aiHistory.length})` : '' }}</span
+        >
+        <span
+          class="ai-close"
+          title="关闭"
+          @click="closeAi"
+          >×</span
+        >
+      </div>
+      <textarea
+        ref="aiInputRef"
+        v-model="aiPrompt"
+        class="ai-input"
+        :rows="aiInputRows"
+        :disabled="aiLoading"
+        :placeholder="aiPlaceholder"
+        @keydown.enter.exact.prevent="submitAi"
+        @keydown.esc.stop.prevent="closeAi"></textarea>
+      <div class="ai-panel-foot">
+        <span class="ai-tip">{{
+          aiLoading ? (aiStreaming ? '生成中…' : 'AI 正在处理…') : 'Enter 发送 / Esc 取消'
+        }}</span>
+        <span
+          v-if="!aiLoading"
+          class="ai-btn"
+          :class="{'is-disabled': !aiPrompt.trim()}"
+          @click="submitAi"
+          >生成</span
+        >
+        <span
+          v-else
+          class="ai-btn danger"
+          @click="stopAi"
+          >停止</span
+        >
+      </div>
+      <div
+        v-if="aiError"
+        class="ai-error">
+        {{ aiError }}
+      </div>
+    </div>
+    <!-- 历史问答：和输入框互斥展示，关掉输入框时不影响单独查看 -->
+    <div
+      v-if="aiEnabled && aiHistoryVisible"
+      class="ai-history-panel">
+      <div class="ai-history-head">
+        <span class="ai-tag">历史</span>
+        <span class="ai-scope">{{ aiHistory.length ? `共 ${aiHistory.length} 条问答` : '暂无记录' }}</span>
+        <span
+          v-if="aiHistory.length"
+          class="ai-btn plain"
+          @click="clearHistory"
+          >清空</span
+        >
+        <span
+          class="ai-close"
+          title="关闭"
+          @click="aiHistoryVisible = false"
+          >×</span
+        >
+      </div>
+      <div
+        v-if="!aiHistory.length"
+        class="ai-history-empty">
+        还没有历史记录，问点什么试试
+      </div>
+      <div
+        v-else
+        class="ai-history-list">
+        <div
+          v-for="item in aiHistory"
+          :key="item.id"
+          class="ai-history-item">
+          <div
+            class="ai-history-q"
+            @click="toggleHistoryItem(item.id)">
+            <span class="ai-history-time">{{ item.time }}</span>
+            <span class="ai-history-text">{{ item.prompt }}</span>
+            <span class="ai-history-toggle">{{ expandedHistoryId === item.id ? '收起' : '展开' }}</span>
+          </div>
+          <div
+            v-if="expandedHistoryId === item.id"
+            class="ai-history-body">
+            <div class="ai-history-label">
+              问题<span class="ai-history-scope">{{ item.scope }}</span>
+            </div>
+            <pre class="ai-history-pre">{{ item.prompt }}</pre>
+            <div class="ai-history-label">
+              回答
+              <span
+                class="ai-btn plain"
+                @click="copyHistoryAnswer(item.answer)"
+                >复制</span
+              >
+            </div>
+            <pre class="ai-history-pre is-answer">{{ item.answer }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 未聚焦时隐藏（.is-hidden）：按钮栏会挡住代码尾部，只在编辑时露出来。
+         @mousedown.prevent 阻止默认的焦点转移，否则点按钮的瞬间编辑器失焦、按钮立刻隐藏，
+         mouseup 落不到按钮上，点击会失效。 -->
+    <div
+      class="editor-operation-btn"
+      :class="{'is-hidden': !editorFocused}"
+      @mousedown.prevent>
+      <span
+        v-if="aiEnabled"
+        class="ai-entry"
+        :title="`AI 编辑（${aiHotkeyLabel}）`"
+        @click="openAi()"
+        >AI</span
+      >
+      <i
+        title="全屏"
+        class="iconfont icon-fullscreen"
+        @click="fullscreen"></i>
+      <i
+        title="美化"
+        class="iconfont icon-magic-stick"
+        @click="onEditorBtnClick('beautify')"></i>
+      <i
+        title="全选"
+        class="iconfont icon-check-square"
+        @click="onEditorBtnClick('checkAll')"></i>
+      <i
+        title="复制"
+        class="iconfont icon-document-copy"
+        @click="onEditorBtnClick('copy')"></i>
+      <i
+        title="清空"
+        class="iconfont icon-clear"
+        @click="onEditorBtnClick('clear')"></i>
+      <slot name="operation-btn"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref, onMounted, onBeforeUnmount, nextTick, toRaw} from 'vue';
+// @ts-ignore
+import type {Extension} from 'codemirror';
+import {EditorView, basicSetup} from 'codemirror';
+import {ViewUpdate, keymap} from '@codemirror/view';
+import {EditorState, EditorSelection} from '@codemirror/state';
+import {javascriptLanguage} from '@codemirror/lang-javascript';
+import {solarizedDark} from 'cm6-theme-solarized-dark';
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
+import {getCodeLanguagePlugin} from './util';
+import type {AiCodeEditParams, AiCodeEditRequest} from './util';
+import {aiHistory, pushAiHistory, clearAiHistory} from './ai-history';
+import {watch, computed} from 'vue';
+// @ts-ignore
+import {js_beautify} from 'js-beautify';
+import {ElMessage} from 'element-plus';
+
+const YhCodemirrorContainer = ref();
+function fullscreen() {
+  if (document.fullscreenElement && document.fullscreenElement === YhCodemirrorContainer.value) {
+    document.exitFullscreen();
+  } else {
+    YhCodemirrorContainer.value.requestFullscreen();
+  }
+}
+
+const codeMirrorEditorRef = ref();
+/** 编辑器是否持有焦点：决定右下角功能按钮栏是否显示 */
+const editorFocused = ref(false);
+
+let view: null | EditorView = null;
+let state: null | EditorState = null;
+// js-beautify 自定义配置
+const codeBeautifyConfig = {
+  indent_size: 2,
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    language?: string | string[];
+    autocomplete?: any;
+    height?: number;
+    /** AI 请求函数；传入即启用 AI 提示编辑。返回完整替换文本，流式输出时通过 onChunk 回调 */
+    aiRequest?: AiCodeEditRequest;
+    /** 唤起 AI 输入框的快捷键（CodeMirror 键位语法），默认 Mod-i（Win: Ctrl+I / Mac: Cmd+I） */
+    aiHotkey?: string;
+    /** AI 输入框占位提示 */
+    aiPlaceholder?: string;
+    /** 无选中时 AI 的作用范围：document 整个文档 / cursor 光标处插入 */
+    aiScope?: 'document' | 'cursor';
+    /** 编辑器主题：dark（默认）或 light */
+    theme?: 'dark' | 'light';
+    /**
+     * AI 输入框/历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'，
+     * 否则 12px 字号 + 2 行输入框在大面板里会显得很局促。
+     */
+    aiPanelSize?: 'normal' | 'large';
+  }>(),
+  {
+    modelValue: '',
+    language: 'javascript',
+    autocomplete: {},
+    aiHotkey: 'Mod-i',
+    aiPlaceholder: '描述你想要的修改，如：给这个函数加上异常处理',
+    aiScope: 'document',
+    theme: 'dark',
+    aiPanelSize: 'normal',
+  }
+);
+
+// 浅色主题（匹配原 window-form.vue 的浅色调）
+const lightTheme = EditorView.theme(
+  {
+    '&': {color: '#333', backgroundColor: '#fff'},
+    '.cm-content': {caretColor: '#333'},
+    '.cm-cursor, .cm-dropCursor': {borderLeftColor: '#333'},
+    // 选中区/当前行的配色不在这里写：solarizedDark 这类外部主题要靠更高权重的选择器覆盖，
+    // 统一放在组件 <style> 里的 ".cm-editor .cm-selectionBackground / .cm-activeLine" 规则中，避免两处维护。
+    '.cm-panels': {backgroundColor: '#f5f5f5', color: '#333'},
+    '.cm-gutters': {
+      backgroundColor: '#f5f5f5',
+      color: '#888',
+      borderRight: '1px solid #e0e0e0',
+    },
+    // .cm-activeLineGutter 同 .cm-activeLine，见上面注释，统一在 <style> 里维护
+    '.cm-tooltip': {border: '1px solid #ddd', backgroundColor: '#fff'},
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: '#fff',
+      borderBottomColor: '#fff',
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {backgroundColor: '#e8f4ff', color: '#333'},
+    },
+  },
+  {dark: false}
+);
+
+const lightHighlightStyle = HighlightStyle.define([
+  {tag: tags.keyword, color: '#0000ff'},
+  {tag: tags.string, color: '#008000'},
+  {tag: tags.comment, color: '#808080', fontStyle: 'italic'},
+  {tag: tags.function(tags.variableName), color: '#795e26'},
+  {tag: tags.number, color: '#098658'},
+  {tag: tags.operator, color: '#333'},
+  {tag: tags.className, color: '#267f99'},
+  {tag: tags.tagName, color: '#0000ff'},
+  {tag: tags.attributeName, color: '#e50000'},
+  {tag: [tags.variableName], color: '#333'},
+  {tag: tags.bool, color: '#0000ff'},
+  {tag: tags.null, color: '#0000ff'},
+]);
+
+const lightThemeExtension = [lightTheme, syntaxHighlighting(lightHighlightStyle)];
+
+const codeMirrorStyle = computed(() => {
+  let style: any = {};
+  if (props.height !== undefined && !isNaN(props.height)) {
+    style.height = `${props.height}px`;
+    style.display = 'flex';
+    style.flexDirection = 'column';
+  }
+  return style;
+});
+
+const codeMirrorEditorStyle = computed(() => {
+  let style: any = {};
+  if (props.height !== undefined && !isNaN(props.height)) {
+    style.flex = `1`;
+    style.overflow = 'auto';
+  }
+  return style;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (view && state && val != view.state.doc.toString()) {
+      let end = view.state.doc.toString().length;
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: end,
+            insert: val,
+          },
+        ],
+      });
+    }
+  }
+);
+
+const emits = defineEmits(['update:modelValue', 'ai-apply', 'ai-error']);
+
+/* ------------------------------ AI 提示编辑 ------------------------------ */
+const aiEnabled = computed(() => typeof props.aiRequest === 'function');
+const aiHotkeyLabel = computed(() =>
+  props.aiHotkey.replace('Mod-', navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+')
+);
+const aiVisible = ref(false);
+const aiPrompt = ref('');
+const aiLoading = ref(false);
+const aiStreaming = ref(false);
+const aiError = ref('');
+const aiScopeText = ref('');
+const aiInputRef = ref();
+// 放大档位下输入框多给两行，配合 .is-ai-large 的字号提升
+const aiInputRows = computed(() => (props.aiPanelSize === 'large' ? 4 : 2));
+// 历史问答（模块级单例，见 ./ai-history）
+const aiHistoryVisible = ref(false);
+const expandedHistoryId = ref<number | null>(null);
+const toggleHistoryItem = (id: number) => {
+  expandedHistoryId.value = expandedHistoryId.value === id ? null : id;
+};
+const clearHistory = () => {
+  clearAiHistory();
+  expandedHistoryId.value = null;
+};
+const copyHistoryAnswer = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text || '');
+    ElMessage({message: '已复制回答', type: 'success'});
+  } catch (e) {
+    ElMessage({message: '复制失败，请手动选中复制', type: 'warning'});
+  }
+};
+// 当前 AI 作用区间（流式过程中 to 会随写入推进）
+let aiRange: {from: number; to: number} | null = null;
+let aiAbort: AbortController | null = null;
+
+/** 打开 AI 输入框：有选区则作用于选区，否则按 aiScope 处理 */
+const openAi = (presetPrompt?: string) => {
+  if (!aiEnabled.value || !view) {
+    return;
+  }
+  const st = toRaw(view.state);
+  const sel = st.selection.main;
+  if (!sel.empty) {
+    aiRange = {from: sel.from, to: sel.to};
+    const lines = st.doc.lineAt(sel.to).number - st.doc.lineAt(sel.from).number + 1;
+    aiScopeText.value = `选中的 ${lines} 行代码`;
+  } else if (props.aiScope === 'cursor') {
+    aiRange = {from: sel.head, to: sel.head};
+    aiScopeText.value = '在光标处插入';
+  } else {
+    aiRange = {from: 0, to: st.doc.length};
+    aiScopeText.value = '整个文档';
+  }
+  aiPrompt.value = presetPrompt || '';
+  aiError.value = '';
+  aiLoading.value = false;
+  aiVisible.value = true;
+  nextTick(() => {
+    aiInputRef.value && aiInputRef.value.focus();
+  });
+};
+
+const closeAi = () => {
+  if (!aiVisible.value) {
+    return;
+  }
+  stopAi();
+  aiVisible.value = false;
+  aiRange = null;
+  view && view.focus();
+};
+
+const stopAi = () => {
+  if (aiAbort) {
+    aiAbort.abort();
+    aiAbort = null;
+  }
+  aiLoading.value = false;
+  aiStreaming.value = false;
+};
+
+/** 把文本写入区间；流式场景下区间终点随写入长度前移 */
+const writeRange = (range: {from: number; to: number}, text: string) => {
+  if (!view) {
+    return;
+  }
+  const to = Math.min(range.to, view.state.doc.length);
+  view.dispatch({
+    changes: {from: range.from, to, insert: text},
+    selection: EditorSelection.range(range.from, range.from + text.length),
+    scrollIntoView: true,
+  });
+  range.to = range.from + text.length;
+};
+
+/** 兼容模型常见的 ```lang ... ``` 包裹输出 */
+const stripCodeFence = (text: string) => {
+  const trimmed = (text || '').replace(/\r\n/g, '\n').trim();
+  const matched = trimmed.match(/^```[a-zA-Z0-9_+\-]*[ \t]*\n([\s\S]*?)\n?```$/);
+  return matched ? matched[1] : trimmed;
+};
+
+const submitAi = async () => {
+  const prompt = aiPrompt.value.trim();
+  if (!prompt || !view || !aiRange || !props.aiRequest || aiLoading.value) {
+    return;
+  }
+  const range = {...aiRange};
+  const st = toRaw(view.state);
+  range.from = Math.max(0, Math.min(range.from, st.doc.length));
+  range.to = Math.max(range.from, Math.min(range.to, st.doc.length));
+  const selectedCode = st.sliceDoc(range.from, range.to);
+
+  aiLoading.value = true;
+  aiStreaming.value = false;
+  aiError.value = '';
+  const controller = new AbortController();
+  aiAbort = controller;
+  let streamed = false;
+  let acc = '';
+  const onChunk = (chunk: string) => {
+    if (chunk === undefined || chunk === null) {
+      return;
+    }
+    streamed = true;
+    aiStreaming.value = true;
+    acc += chunk;
+    writeRange(range, acc);
+  };
+
+  const params: AiCodeEditParams = {
+    prompt,
+    code: st.doc.toString(),
+    selectedCode,
+    language: props.language,
+    signal: controller.signal,
+    onChunk,
+  };
+
+  try {
+    const res: any = await props.aiRequest(params);
+    if (controller.signal.aborted) {
+      return;
+    }
+    if (!streamed) {
+      const text = typeof res === 'string' ? res : res?.text ?? res?.code ?? res?.content ?? '';
+      writeRange(range, stripCodeFence(text));
+    } else {
+      writeRange(range, stripCodeFence(acc));
+    }
+    aiLoading.value = false;
+    aiStreaming.value = false;
+    aiVisible.value = false;
+    aiRange = null;
+    view.focus();
+    const appliedText = view.state.sliceDoc(range.from, range.to);
+    // 记录历史问答（含 AI 最终写入编辑器的完整文本，撤销了也能在这里找回原文）
+    pushAiHistory({prompt, scope: aiScopeText.value, answer: appliedText});
+    emits('ai-apply', {prompt, text: appliedText});
+    ElMessage({
+      message: 'AI 修改已应用',
+      type: 'success',
+    });
+  } catch (err: any) {
+    aiLoading.value = false;
+    aiStreaming.value = false;
+    if (err?.name === 'AbortError' || controller.signal.aborted) {
+      aiError.value = '已取消';
+      return;
+    }
+    const message = err?.message || 'AI 请求失败';
+    aiError.value = message;
+    emits('ai-error', err);
+    ElMessage({
+      message,
+      type: 'error',
+    });
+  } finally {
+    aiAbort = null;
+  }
+};
+
+// 代码编辑器操作按钮
+const onEditorBtnClick = (type) => {
+  if (view) {
+    const state = toRaw(view.state);
+    const pos = state.doc.toString().length;
+    if (type == 'beautify') {
+      const beautifyCode = js_beautify(props.modelValue, codeBeautifyConfig);
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: pos,
+            insert: beautifyCode,
+          },
+        ],
+      });
+    } else if (type == 'checkAll') {
+      const tr = state.update({
+        // selection: EditorSelection.cursor(pos), // 设置光标
+        selection: EditorSelection.range(0, pos),
+        scrollIntoView: true,
+      });
+      view.dispatch(tr);
+    } else if (type == 'copy') {
+      let selectedText = '';
+      if (state.selection.ranges.some((range) => !range.empty)) {
+        const selection = state.selection.ranges[0];
+        selectedText = state.sliceDoc(selection.from, selection.to);
+      } else {
+        selectedText = state.doc.toString();
+      }
+      navigator.clipboard.writeText(selectedText);
+      ElMessage({
+        message: '复制成功！',
+        type: 'success',
+      });
+    } else if (type == 'clear') {
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: pos,
+            insert: '',
+          },
+        ],
+      });
+    }
+    view.focus();
+  }
+};
+
+onMounted(() => {
+  const extensions: Extension[] = [
+    basicSetup,
+    props.theme === 'light' ? lightThemeExtension : solarizedDark,
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((v: ViewUpdate) => {
+      if (v.docChanged) {
+        emits('update:modelValue', v.state.doc.toString());
+      }
+      if (v.focusChanged) {
+        editorFocused.value = v.view.hasFocus;
+      }
+    }),
+  ];
+  const language = props.language;
+  if (language) {
+    if (Array.isArray(language)) {
+      language.forEach((l) => {
+        extensions.push(getCodeLanguagePlugin(l));
+        if (props.autocomplete[l] && l === 'javascript') {
+          extensions.push(
+            javascriptLanguage.data.of({
+              autocomplete: props.autocomplete[l],
+            })
+          );
+        }
+      });
+    } else {
+      extensions.push(getCodeLanguagePlugin(language));
+      if (props.autocomplete[language] && language === 'javascript') {
+        extensions.push(
+          javascriptLanguage.data.of({
+            autocomplete: props.autocomplete[language],
+          })
+        );
+      }
+    }
+  }
+
+  if (aiEnabled.value) {
+    extensions.push(
+      keymap.of([
+        {
+          key: props.aiHotkey,
+          run: () => {
+            openAi();
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          run: () => {
+            if (aiVisible.value) {
+              closeAi();
+              return true;
+            }
+            return false;
+          },
+        },
+      ])
+    );
+  }
+
+  state = EditorState.create({
+    doc: props.modelValue,
+    extensions,
+  });
+  if (state) {
+    view = new EditorView({
+      state: state,
+      parent: codeMirrorEditorRef.value,
+    });
+    editorFocused.value = view.hasFocus;
+  }
+});
+
+onBeforeUnmount(() => {
+  stopAi();
+});
+
+defineExpose({
+  /** 唤起 AI 编辑输入框（可预填提示词） */
+  openAi,
+  /** 关闭 AI 编辑输入框 */
+  closeAi,
+  /** 中断进行中的 AI 请求 */
+  stopAi,
+  /** 获取 CodeMirror 实例 */
+  getView: () => view,
+});
+</script>
+<style lang="scss">
+.yh-code-mirror-container {
+  width: 100%;
+  position: relative;
+  background-color: #173541;
+  &.is-light {
+    background-color: #fff;
+    .cm-editor {
+      .cm-line.cm-activeLine::before {
+        background-color: #f0f2f5;
+      }
+      .cm-activeLineGutter {
+        background-color: #f0f2f5;
+      }
+      .cm-selectionBackground {
+        background-color: #d4e7f9 !important;
+      }
+      &.cm-focused .cm-selectionBackground {
+        background-color: #b3d8ff !important;
+      }
+      // 双击选词后其它同名 occurrence（highlightSelectionMatches）：用暖色，和蓝色选区、中性当前行都区分开
+      .cm-selectionMatch {
+        background-color: #ffe9c2;
+      }
+    }
+    .code-slot {
+      color: #333;
+    }
+    .codemirror-editor {
+      &::-webkit-scrollbar {
+        background-color: #f5f5f5;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #c1c1c1;
+        &:hover {
+          background-color: #a8a8a8;
+        }
+      }
+    }
+    .ai-prompt-panel {
+      background: rgba(255, 255, 255, 0.98);
+      border-color: #409eff;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+      .ai-panel-head {
+        color: #333;
+      }
+      .ai-input {
+        border-color: #dcdfe6;
+        background: #fff;
+        color: #333;
+        &:focus {
+          border-color: #409eff;
+        }
+      }
+      .ai-panel-foot {
+        color: #606266;
+        .ai-btn.is-disabled {
+          background: #c0c4cc;
+        }
+      }
+      .ai-error {
+        color: #f56c6c;
+      }
+      .ai-history-entry {
+        border-color: #dcdfe6;
+        color: #606266;
+        &:hover,
+        &.is-active {
+          color: #fff;
+        }
+      }
+    }
+    .ai-history-panel {
+      background: rgba(255, 255, 255, 0.98);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+      .ai-history-head {
+        color: #333;
+      }
+      .ai-btn.plain {
+        border-color: #dcdfe6;
+        color: #606266;
+      }
+      .ai-history-empty {
+        color: #606266;
+      }
+      .ai-history-item {
+        border-top-color: #ebeef5;
+      }
+      .ai-history-q {
+        color: #333;
+      }
+      .ai-history-label .ai-history-scope {
+        color: #606266;
+      }
+      .ai-history-pre {
+        background: #f5f7fa;
+        color: #333;
+      }
+    }
+  }
+  .code-slot {
+    width: 100%;
+    font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+    line-height: 25px;
+    font-size: 12px;
+    padding-left: 29.77px;
+    color: #ffffff;
+  }
+  .cm-editor {
+    .cm-line {
+      // 给下面的 .cm-activeLine::before 当定位父级
+      position: relative;
+      font-size: 16px;
+      line-height: 25px;
+      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+    }
+    /* 当前行高亮 vs 选中区，必须一眼能区分 —— 这里真正的坑不是配色而是**绘制层级**：
+       CM6 的选区画在 .cm-selectionLayer 上（drawSelection 内部 above:false，z-index 取 -1-pos，是负数），
+       它和 .cm-content 同在 .cm-scroller 这个层叠上下文里；而 .cm-line 是普通 in-flow 块，
+       按 CSS 绘制顺序「负 z-index 后代 → in-flow 块 → 行内内容」，**in-flow 块画在选区层之上**。
+       所以给 .cm-line 设不透明背景会把选区整块盖掉 —— baseTheme 自带的
+       &light .cm-activeLine: #cceeff44 / &dark: #99eeff33 是半透明的，才不会盖住，
+       之前改成了不透明色，选区就被糊掉了。
+       解法：把当前行高亮挪到 ::before 上并压到 z-index:-100，绘制顺序变成
+         当前行底(-100) → 选区层(-2) → 文字
+       选中区永远压在当前行高亮之上，同时仍然在文字之下。 */
+    .cm-line.cm-activeLine::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -100;
+      pointer-events: none;
+      background-color: #173541;
+    }
+    // 当前行高亮改由上面的 ::before 承载；这里必须把主题自带的**不透明**底色清掉，
+    // 否则它作为 in-flow 块的背景仍然会盖住选区层（solarizedDark 的 .cm-activeLine 就是 #173541，
+    // 和它的 selection 同色，这正是最初「选中区看不出来」的根源）。
+    .cm-activeLine {
+      background-color: transparent;
+    }
+    .cm-activeLineGutter {
+      background-color: #173541;
+    }
+    /* 选区色必须带 !important：CM 6.39 的 baseTheme 把默认色写成了
+       "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground"
+       这种「5 个类 + 子代选择器」，权重高于本组件、也高于 solarizedDark 自带的主题，
+       光堆类名盖不住；用 !important 也不用跟它的 DOM 结构绑死。 */
+    .cm-selectionBackground {
+      /* 失焦：压暗一档 */
+      background-color: #204a5a !important;
+    }
+    &.cm-focused .cm-selectionBackground {
+      /* 双击选词、拖选都走这个色，和当前行的中性色明确区分 */
+      background-color: #2c6076 !important;
+    }
+  }
+  .codemirror-editor {
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      background-color: #173541;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #f5f5f5;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+  .ai-prompt-panel {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 34px;
+    z-index: 10;
+    padding: 6px 8px;
+    border: 1px solid #409eff;
+    border-radius: 4px;
+    background: rgba(15, 43, 54, 0.96);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    .ai-panel-head {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #fff;
+      .ai-tag {
+        margin-right: 6px;
+        padding: 0 4px;
+        border-radius: 2px;
+        background: #409eff;
+        font-size: 11px;
+        line-height: 16px;
+      }
+      .ai-scope {
+        flex: 1;
+        opacity: 0.7;
+      }
+      .ai-history-entry {
+        margin-right: 8px;
+        padding: 0 4px;
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        border-radius: 2px;
+        font-size: 11px;
+        line-height: 15px;
+        cursor: pointer;
+        opacity: 0.8;
+        &:hover,
+        &.is-active {
+          border-color: #409eff;
+          background: #409eff;
+          opacity: 1;
+        }
+      }
+      .ai-close {
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 16px;
+        opacity: 0.7;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .ai-input {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      margin: 5px 0;
+      padding: 4px 6px;
+      border: 1px solid #2f5d6c;
+      border-radius: 3px;
+      background: #173541;
+      color: #fff;
+      font-size: 12px;
+      line-height: 18px;
+      resize: vertical;
+      outline: none;
+      overflow-wrap: break-word;
+      word-break: break-all;
+      &:focus {
+        border-color: #409eff;
+      }
+      &:disabled {
+        opacity: 0.6;
+      }
+    }
+    .ai-panel-foot {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #fff;
+      .ai-tip {
+        opacity: 0.6;
+      }
+      .ai-btn {
+        padding: 1px 10px;
+        border-radius: 3px;
+        background: #409eff;
+        cursor: pointer;
+        &.danger {
+          background: #f56c6c;
+        }
+        &.is-disabled {
+          background: #6b7c85;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .ai-error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #f56c6c;
+      word-break: break-all;
+    }
+  }
+  .ai-history-panel {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 34px;
+    z-index: 11;
+    display: flex;
+    flex-direction: column;
+    max-height: 62%;
+    padding: 6px 8px;
+    border: 1px solid #409eff;
+    border-radius: 4px;
+    background: rgba(15, 43, 54, 0.98);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    .ai-history-head {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #fff;
+      .ai-tag {
+        margin-right: 6px;
+        padding: 0 4px;
+        border-radius: 2px;
+        background: #409eff;
+        font-size: 11px;
+        line-height: 16px;
+      }
+      .ai-scope {
+        flex: 1;
+        opacity: 0.7;
+      }
+      .ai-btn.plain {
+        margin-right: 8px;
+      }
+      .ai-close {
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 16px;
+        opacity: 0.7;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .ai-btn.plain {
+      padding: 1px 6px;
+      border: 1px solid rgba(255, 255, 255, 0.35);
+      border-radius: 3px;
+      background: transparent;
+      font-size: 11px;
+      cursor: pointer;
+      &:hover {
+        border-color: #409eff;
+        color: #409eff;
+      }
+    }
+    .ai-history-empty {
+      padding: 12px 0;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      opacity: 0.6;
+    }
+    .ai-history-list {
+      flex: 1;
+      margin-top: 4px;
+      overflow-y: auto;
+    }
+    .ai-history-item {
+      border-top: 1px solid rgba(255, 255, 255, 0.12);
+      &:first-child {
+        border-top: none;
+      }
+    }
+    .ai-history-q {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 0;
+      color: #fff;
+      font-size: 12px;
+      cursor: pointer;
+      &:hover {
+        background: rgba(64, 158, 255, 0.15);
+      }
+      .ai-history-time {
+        flex: none;
+        font-size: 11px;
+        opacity: 0.55;
+      }
+      .ai-history-text {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .ai-history-toggle {
+        flex: none;
+        font-size: 11px;
+        color: #409eff;
+      }
+    }
+    .ai-history-body {
+      padding-bottom: 6px;
+    }
+    .ai-history-label {
+      display: flex;
+      align-items: center;
+      margin: 2px 0;
+      color: #409eff;
+      font-size: 11px;
+      .ai-history-scope {
+        margin-left: 6px;
+        color: #fff;
+        opacity: 0.6;
+      }
+      .ai-btn.plain {
+        margin-left: auto;
+      }
+    }
+    .ai-history-pre {
+      max-height: 170px;
+      margin: 0 0 6px;
+      padding: 4px 6px;
+      overflow: auto;
+      border-radius: 3px;
+      background: #173541;
+      color: #fff;
+      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+      font-size: 12px;
+      line-height: 18px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+  /* 放大场景（window-form 的「放大」抽屉）：编辑区撑满整个抽屉，AI 面板仍是 12px / 2 行会显得很局促，
+     这里整体提一档字号、加两行输入高度、面板内边距与历史面板高度同步放大。
+     选择器带 .is-ai-large 是为了权重高于上面 .is-light 里的同名规则，不依赖书写顺序。 */
+  &.is-ai-large {
+    .ai-prompt-panel,
+    .ai-history-panel {
+      left: 12px;
+      right: 12px;
+      bottom: 46px;
+      padding: 10px 12px;
+      border-radius: 6px;
+      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
+    }
+    .ai-prompt-panel {
+      .ai-panel-head,
+      .ai-panel-foot {
+        font-size: 14px;
+      }
+      .ai-tag {
+        font-size: 12px;
+        line-height: 18px;
+      }
+      .ai-history-entry {
+        font-size: 12px;
+        line-height: 18px;
+      }
+      .ai-input {
+        margin: 8px 0;
+        padding: 6px 8px;
+        font-size: 14px;
+        line-height: 22px;
+      }
+      .ai-btn {
+        padding: 3px 14px;
+        font-size: 14px;
+      }
+      .ai-error {
+        font-size: 14px;
+      }
+    }
+    .ai-history-panel {
+      max-height: 72%;
+      .ai-history-head,
+      .ai-history-q {
+        font-size: 14px;
+      }
+      .ai-history-toggle,
+      .ai-history-time {
+        font-size: 12px;
+      }
+      .ai-history-label {
+        font-size: 12px;
+        .ai-btn.plain {
+          font-size: 12px;
+        }
+      }
+      .ai-history-pre {
+        max-height: 300px;
+        padding: 6px 8px;
+        font-size: 13px;
+        line-height: 21px;
+      }
+    }
+  }
+  .editor-operation-btn {
+    position: absolute;
+    bottom: 1px;
+    right: 1px;
+    padding: 0 3px;
+    display: flex;
+    align-items: center;
+    border-radius: 3px;
+    opacity: 0.5;
+    background: #409eff;
+    transition: all 0.3s ease;
+    i {
+      font-size: 16px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+      line-height: 24px;
+    }
+    .ai-entry {
+      margin: 0 5px;
+      padding: 0 4px;
+      border-radius: 2px;
+      background: rgba(255, 255, 255, 0.22);
+      color: #fff;
+      font-size: 12px;
+      font-weight: bolder;
+      line-height: 18px;
+      cursor: pointer;
+    }
+    &:hover {
+      opacity: 1;
+      background: #409eff;
+    }
+    /* 未聚焦：淡出并停止接收事件（仅用 opacity:0 会留下一个看不见但能点到的区域） */
+    &.is-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+</style>