yh-codemirror 1.0.8 → 1.0.10

package/CodeMirror.vue

@@ -101,6 +101,12 @@
             class="ai-history-q"
             @click="toggleHistoryItem(item.id)">
             <span class="ai-history-time">{{ item.time }}</span>
+            <span
+              v-if="item.location"
+              class="ai-history-loc"
+              :title="item.location"
+              >{{ item.location }}</span
+            >
             <span class="ai-history-text">{{ item.prompt }}</span>
             <span class="ai-history-toggle">{{ expandedHistoryId === item.id ? '收起' : '展开' }}</span>
           </div>
@@ -138,10 +144,10 @@
         @click="openAi()"
         >AI</span
       >
-      <i
+      <!-- <i
         title="全屏"
         class="iconfont icon-fullscreen"
-        @click="fullscreen"></i>
+        @click="fullscreen"></i> -->
       <i
         title="美化"
         class="iconfont icon-magic-stick"
@@ -168,6 +174,7 @@ import {ref, onMounted, onBeforeUnmount, nextTick, toRaw} from 'vue';
 import type {Extension} from 'codemirror';
 import {EditorView, basicSetup} from 'codemirror';
 import {ViewUpdate, keymap} from '@codemirror/view';
+import {indentWithTab} from '@codemirror/commands';
 import {EditorState, EditorSelection} from '@codemirror/state';
 import {javascriptLanguage} from '@codemirror/lang-javascript';
 import {solarizedDark} from 'cm6-theme-solarized-dark';
@@ -175,6 +182,7 @@ import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
 import {tags} from '@lezer/highlight';
 import {getCodeLanguagePlugin} from './util';
 import type {AiCodeEditParams, AiCodeEditRequest} from './util';
+import {createArgCompletion} from './arg-completion';
 import {aiHistory, pushAiHistory, clearAiHistory} from './ai-history';
 import {watch, computed} from 'vue';
 // @ts-ignore
@@ -218,8 +226,7 @@ const props = withDefaults(
     /** 编辑器主题：dark（默认）或 light */
     theme?: 'dark' | 'light';
     /**
-     * AI 面板尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'，
-     * 否则 12px 字号 + 2 行输入框在大面板里会显得很局促。
+     * AI 面板尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'
      */
     aiPanelSize?: 'normal' | 'large';
     /**
@@ -228,6 +235,26 @@ const props = withDefaults(
      * 由宿主去拉配置；不传就不触发该事件。
      */
     aiWindowId?: string | number;
+    /**
+     * 这条提问来自哪里（宿主传入，如「区域名称 · 数据初始化」）。
+     * 组件只负责原样记进历史并在问题前显示，不解析它的含义
+     */
+    aiLocation?: string;
+    /**
+     * 方法参数候选：给某个方法的第 N 个字符串参数提供候选值。
+     * 组件不认识任何业务概念，方法名 / 参数下标 / 候选均由宿主配置；
+     * 不传或传空数组时不提示，也不影响语言自带的关键字 / 变量补全。
+     */
+    argCompletions?: Array<{
+      /** 方法名，如 showModal */
+      fn: string;
+      /** 参数下标（0 基），1 表示第 2 个参数 */
+      arg: number;
+      /** 候选值；字符串数组或带说明的对象数组 */
+      options: Array<string | {label: string; detail?: string}>;
+      /** 候选项的统一说明（可选），显示在列表右侧 */
+      detail?: string;
+    }>;
   }>(),
   {
     modelValue: '',
@@ -239,6 +266,8 @@ const props = withDefaults(
     theme: 'dark',
     aiPanelSize: 'normal',
     aiWindowId: '',
+    aiLocation: '',
+    argCompletions: () => [],
   }
 );
 
@@ -487,7 +516,7 @@ const submitAi = async () => {
     view.focus();
     const appliedText = view.state.sliceDoc(range.from, range.to);
     // 记录历史问答（含 AI 最终写入编辑器的完整文本，撤销了也能在这里找回原文）
-    pushAiHistory({prompt, scope: aiScopeText.value, answer: appliedText});
+    pushAiHistory({prompt, scope: aiScopeText.value, location: props.aiLocation, answer: appliedText});
     emits('ai-apply', {prompt, text: appliedText});
     ElMessage({
       message: 'AI 修改已应用',
@@ -566,6 +595,10 @@ const onEditorBtnClick = (type) => {
 onMounted(() => {
   const extensions: Extension[] = [
     basicSetup,
+    // Tab 缩进必须显式加：CodeMirror 6 为了不让键盘用户被困在编辑区，默认不把 Tab
+    // 绑给缩进，事件冒泡到浏览器就变成「跳到下一个表单项」。
+    // 缩进宽度用默认 indentUnit（2 空格），与 codeBeautifyConfig.indent_size 一致。
+    keymap.of([indentWithTab]),
     props.theme === 'light' ? lightThemeExtension : solarizedDark,
     EditorView.lineWrapping,
     EditorView.updateListener.of((v: ViewUpdate) => {
@@ -602,6 +635,16 @@ onMounted(() => {
     }
   }
 
+  // 方法参数补全：只在宿主配置过的「方法 + 参数下标」的字符串字面量内出候选
+  // （showModal 的 vuePath、setValue 的字段名、success 的 type 都走这里）。
+  // 宿主没配时补全源第一行就返回 null，不扫文档，因此这里无条件挂上，
+  // 配置异步就绪也不用重建编辑器。
+  extensions.push(
+    javascriptLanguage.data.of({
+      autocomplete: createArgCompletion(() => props.argCompletions),
+    })
+  );
+
   if (aiEnabled.value) {
     extensions.push(
       keymap.of([
@@ -662,19 +705,30 @@ defineExpose({
   &.is-light {
     background-color: #fff;
     .cm-editor {
+      border: 1px solid var(--el-border-color-light);
+      border-radius: 8px;
+      cursor: text;
+      width: 100%;
+      overflow: auto;
+      .cm-gutters.cm-gutters-before {
+        background-color: #fafcff;
+      }
       .cm-line.cm-activeLine::before {
-        background-color: #f0f2f5;
+        background-color: #f1f7ff;
       }
       .cm-activeLineGutter {
-        background-color: #f0f2f5;
+        background-color: #f1f7ff;
       }
       .cm-selectionBackground {
         background-color: #d4e7f9 !important;
       }
-      &.cm-focused .cm-selectionBackground {
-        background-color: #b3d8ff !important;
+      &.cm-focused {
+        outline: none;
+        box-shadow: 1px 1px 8px #b1c7db;
+        .cm-selectionBackground {
+          background-color: #b3d8ff !important;
+        }
       }
-      // 双击选词后其它同名 occurrence（highlightSelectionMatches）：用暖色，和蓝色选区、中性当前行都区分开
       .cm-selectionMatch {
         background-color: #ffe9c2;
       }
@@ -745,6 +799,10 @@ defineExpose({
       .ai-history-q {
         color: #333;
       }
+      .ai-history-loc {
+        background: rgba(64, 158, 255, 0.14);
+        color: #1a6fc4;
+      }
       .ai-history-label .ai-history-scope {
         color: #606266;
       }
@@ -770,16 +828,6 @@ defineExpose({
       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;
@@ -791,19 +839,12 @@ defineExpose({
       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;
@@ -1023,6 +1064,19 @@ defineExpose({
         font-size: 11px;
         opacity: 0.55;
       }
+      .ai-history-loc {
+        flex: none;
+        max-width: 45%;
+        padding: 0 5px;
+        border-radius: 2px;
+        background: rgba(64, 158, 255, 0.22);
+        color: #3070af;
+        font-size: 11px;
+        line-height: 16px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
       .ai-history-text {
         flex: 1;
         overflow: hidden;
@@ -1068,9 +1122,6 @@ defineExpose({
       word-break: break-all;
     }
   }
-  /* 放大场景（window-form 的「放大」抽屉）：编辑区撑满整个抽屉，AI 面板仍是 12px / 2 行会显得很局促，
-     这里整体提一档字号、加两行输入高度、面板内边距与历史面板高度同步放大。
-     选择器带 .is-ai-large 是为了权重高于上面 .is-light 里的同名规则，不依赖书写顺序。 */
   &.is-ai-large {
     .ai-prompt-panel,
     .ai-history-panel {

package/README.md

@@ -1,102 +1,162 @@
-# yh-codemirror
-
-Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等基础能力之上，提供 **AI 提示编辑**（选中或整篇代码 → 自然语言描述 → AI 改写回写）。
-
-## 基础用法
-
-```vue
-<yh-codemirror
-  v-model="code"
-  :height="500"
-  language="javascript"
-  :autocomplete="{javascript: myCompletionSource}">
-</yh-codemirror>
-```
-
-## AI 提示编辑
-
-组件本身**不内置任何 AI 服务**（保持零业务依赖），由宿主通过 `aiRequest` 注入请求实现。传入 `aiRequest` 即自动启用：
-
-- 编辑器右下角出现 `AI` 入口按钮
-- 快捷键 `Ctrl+I`（Mac `Cmd+I`，可通过 `aiHotkey` 改）唤起输入框
-- 有选区 → 只改写选中代码；无选区 → 按 `aiScope` 作用于整个文档或光标处插入
-- `Enter` 发送、`Esc` 取消；请求中按钮变「停止」，可中断
-- 支持流式：调用 `onChunk` 逐段返回，编辑器实时写入；非流式则直接返回完整替换文本
-- 自动剥离模型常见的 ` ```lang ... ``` ` 包裹
-- 通过 dispatch 写入，保留 CodeMirror 撤销栈，可 `Ctrl+Z` 回退
-- **历史问答**：输入框右上角「历史」可查看本轮会话问过的问题与 AI 的完整回答（可展开、可复制、可清空）
-
-历史记录存在 `ai-history.js` 的模块级单例里（上限 50 条，最新在前）。之所以不放组件内：
-配置面板里的编辑器会随切换配置项反复卸载重建，组件内的 ref 一卸载就没了。
-代价是同一页面所有编辑器共用一份（未做分组），所以每条都带时间与问题原文；需要按字段分组时再给 `pushAiHistory` 加 key 维度。
-
-### Props
-
-| 参数            | 类型                              | 默认值     | 说明                                                   |
-| --------------- | --------------------------------- | ---------- | ------------------------------------------------------ |
-| `aiRequest`     | `AiCodeEditRequest`               | -          | AI 请求函数，传入即启用 AI 编辑                        |
-| `aiHotkey`      | `string`                          | `'Mod-i'`  | 唤起输入框的快捷键（CodeMirror 键位语法）              |
-| `aiPlaceholder` | `string`                          | 见源码     | 输入框占位提示                                         |
-| `aiScope`       | `'document' \| 'cursor'`          | `'document'` | 无选区时的作用范围                                   |
-| `aiPanelSize`   | `'normal' \| 'large'`             | `'normal'` | AI 输入框 / 历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 `large` |
-| `aiWindowId`    | `string \| number`                | `''`       | AI 上下文用的「所属窗口 ID」。组件不认识任何业务接口，只在 AI 被唤起时通过 `ai-activate` 把它抛给宿主，由宿主去取窗口配置 |
-
-### Events
-
-| 事件             | 参数                          | 说明                     |
-| ---------------- | ----------------------------- | ------------------------ |
-| `update:modelValue` | `string`                   | 代码变更（原有）         |
-| `ai-activate`    | `string \| number`             | AI 面板刚打开（携带 `aiWindowId`），宿主可趁此时预取上下文；`aiWindowId` 为空时不触发 |
-| `ai-apply`       | `{prompt, text}`              | AI 结果已写入编辑器      |
-| `ai-error`       | `Error`                       | AI 请求失败              |
-
-### Expose
-
-`openAi(prompt?)`、`closeAi()`、`stopAi()`、`getView()`。
-
-### 接入示例（非流式）
-
-```ts
-import {YhCodemirror} from 'yh-codemirror';
-import type {AiCodeEditRequest} from 'yh-codemirror';
-
-const aiRequest: AiCodeEditRequest = async ({prompt, code, selectedCode, language, signal}) => {
-  const res = await fetch('/api/ai/code-edit', {
-    method: 'POST',
-    signal,
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({prompt, code, selectedCode, language}),
-  });
-  if (!res.ok) {
-    throw new Error('AI 请求失败');
-  }
-  const data = await res.json();
-  // 返回「作用范围的完整替换文本」，组件负责写入
-  return data.code;
-};
-```
-
-### 接入示例（流式 SSE）
-
-```ts
-const aiRequest: AiCodeEditRequest = async ({prompt, selectedCode, signal, onChunk}) => {
-  const res = await fetch('/api/ai/code-edit/stream', {
-    method: 'POST',
-    signal,
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({prompt, code: selectedCode}),
-  });
-  const reader = res.body!.getReader();
-  const decoder = new TextDecoder();
-  while (true) {
-    const {done, value} = await reader.read();
-    if (done) {
-      break;
-    }
-    onChunk?.(decoder.decode(value, {stream: true}));
-  }
-  // 走 onChunk 时返回值可为空，组件已实时写入编辑器
-};
-```
-
-> 提示：流式场景下 `onChunk` 传入的是增量片段，组件按累积文本整体覆盖作用区间，因此服务端无需自行做 diff。
+# yh-codemirror
+
+Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等基础能力之上，提供 **AI 提示编辑**（选中或整篇代码 → 自然语言描述 → AI 改写回写）。
+
+## 基础用法
+
+```vue
+<yh-codemirror
+  v-model="code"
+  :height="500"
+  language="javascript"
+  :autocomplete="{javascript: myCompletionSource}">
+</yh-codemirror>
+```
+
+`language` 支持 `javascript / sql / css / java / html / json`，可传数组；不在列表内会取不到语言插件。
+`autocomplete` 只对 `javascript` 生效（按语言名取，如 `{javascript: myCompletionSource}`）。
+不传 `aiRequest` 就是一个纯编辑器，不会出现任何 AI 入口。
+
+## 方法参数补全
+
+```vue
+<yh-codemirror
+  v-model="code"
+  language="javascript"
+  :arg-completions="argCompletions" />
+```
+
+某个方法的第 N 个字符串参数要给候选值，就配一条 `{fn, arg, options}`。组件按「调用名 + 参数下标」匹配，只在对应的字符串字面量内弹候选，其他位置一律不介入，JS 关键字与变量补全照旧：
+
+```js
+const argCompletions = [
+  // showModal(title, vuePath, params)：第 2 个参数是页面路径
+  {fn: 'showModal', arg: 1, options: vuePathOptions, detail: 'vue 页面路径'},
+  // setValue(fieldName, value)：第 1 个参数是表单字段名
+  {fn: 'setValue', arg: 0, options: fieldNames, detail: '表单字段'},
+  // success(msg, type)：第 2 个参数是枚举值
+  {
+    fn: 'success',
+    arg: 1,
+    options: ['info', 'success', 'warning', 'error', 'loading'],
+    detail: '提示类型',
+  },
+];
+```
+
+| 字段      | 类型                                   | 说明                                                         |
+| --------- | -------------------------------------- | ------------------------------------------------------------ |
+| `fn`      | `string`                               | 方法名，如 `showModal`；兼容 `this.openModal(...)` 这类写法   |
+| `arg`     | `number`                               | 参数下标，从 0 开始；`1` 表示第 2 个参数                     |
+| `options` | `(string \| {label, detail})[]`        | 候选值                                                       |
+| `detail`  | `string`                               | 可选，候选项右侧的统一说明                                   |
+
+候选项写成 `{label, detail}` 时可以逐条给不同的右侧说明，`detail` 为空或没写才回落到外层那条统一说明。适合「值本身是英文、但用户认的是中文」的场景，比如字段名：
+
+```js
+// 右侧显示「单价(元)」这类表单标题，插入的仍然是 PRICE
+{fn: 'setValue', arg: 0, detail: '表单字段', options: [
+  {label: 'PRICE', detail: '单价(元)'},
+  {label: 'QTY', detail: '数量'},
+]},
+```
+
+> 注意：过滤（敲字缩小候选）只按 `label` 匹配，`detail` 只负责展示，输入中文不会筛出对应字段。
+
+- 候选清单由宿主注入，组件不认识 `$components`、字段、枚举这些业务概念；清单要按配置里该填的形式给（如 `basic/sysBasePage/orgManage.vue`，不含 `/src/view` 前缀）
+- 传空数组或不传即不提示；清单异步就绪也生效，不需要重建编辑器
+- 支持单双引号、模板字符串、跨行调用；`//`、`/* */` 注释里出现的同名文本不会触发
+- 已输入的字符作为过滤词（模糊匹配），选中后替换引号内的内容
+
+## AI 提示编辑
+
+组件本身**不内置任何 AI 服务**（保持零业务依赖），由宿主通过 `aiRequest` 注入请求实现。传入 `aiRequest` 即自动启用：
+
+- 编辑器右下角出现 `AI` 入口按钮
+- 快捷键 `Ctrl+I`（Mac `Cmd+I`，可通过 `aiHotkey` 改）唤起输入框
+- 有选区 → 只改写选中代码；无选区 → 按 `aiScope` 作用于整个文档或光标处插入
+- `Enter` 发送、`Esc` 取消；请求中按钮变「停止」，可中断
+- 支持流式：调用 `onChunk` 逐段返回，编辑器实时写入；非流式则直接返回完整替换文本
+- 自动剥离模型常见的 ` ```lang ... ``` ` 包裹
+- 通过 dispatch 写入，保留 CodeMirror 撤销栈，可 `Ctrl+Z` 回退
+- **历史问答**：输入框右上角「历史」可查看本轮会话问过的问题与 AI 的完整回答（可展开、可复制、可清空），
+  每条前面会显示宿主传入的 `aiLocation`，建议格式「区域名称 · <按钮/查询条件/字段名称 + 类型> · 编辑器字段名」
+  （如「区域信息 · 事件按钮 · 点击事件」「区域信息 · 名称字段 · 字段值更改」；
+  直接在区域事件里提问时没有中间层，就是「区域信息 · 数据初始化」）
+
+历史记录存在 `ai-history.js` 的模块级单例里（上限 50 条，最新在前）。之所以不放组件内：
+配置面板里的编辑器会随切换配置项反复卸载重建，组件内的 ref 一卸载就没了。
+代价是同一页面所有编辑器共用一份（未做分组），所以每条都带时间、问题原文和 `aiLocation`——
+没有归属信息时，一堆「把名称标红」的提问根本分不清是哪块配置。
+
+### Props
+
+| 参数            | 类型                              | 默认值     | 说明                                                   |
+| --------------- | --------------------------------- | ---------- | ------------------------------------------------------ |
+| `aiRequest`     | `AiCodeEditRequest`               | -          | AI 请求函数，传入即启用 AI 编辑                        |
+| `aiHotkey`      | `string`                          | `'Mod-i'`  | 唤起输入框的快捷键（CodeMirror 键位语法）              |
+| `aiPlaceholder` | `string`                          | 见源码     | 输入框占位提示                                         |
+| `aiScope`       | `'document' \| 'cursor'`          | `'document'` | 无选区时的作用范围                                   |
+| `aiPanelSize`   | `'normal' \| 'large'`             | `'normal'` | AI 输入框 / 历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 `large` |
+| `aiWindowId`    | `string \| number`                | `''`       | AI 上下文用的「所属窗口 ID」。组件不认识任何业务接口，只在 AI 被唤起时通过 `ai-activate` 把它抛给宿主，由宿主去取窗口配置 |
+| `aiLocation`    | `string`                          | `''`       | 这条提问来自哪里（建议「区域名 · 按钮/查询条件/字段名 + 类型 · 编辑器字段名」，如「区域信息 · 事件按钮 · 点击事件」，名称一律取 NAME）。组件只原样记进历史并显示在问题前，不解析其含义 |
+
+### Events
+
+| 事件             | 参数                          | 说明                     |
+| ---------------- | ----------------------------- | ------------------------ |
+| `update:modelValue` | `string`                   | 代码变更（原有）         |
+| `ai-activate`    | `string \| number`             | AI 面板刚打开（携带 `aiWindowId`），宿主可趁此时预取上下文；`aiWindowId` 为空时不触发 |
+| `ai-apply`       | `{prompt, text}`              | AI 结果已写入编辑器      |
+| `ai-error`       | `Error`                       | AI 请求失败              |
+
+### Expose
+
+`openAi(prompt?)`、`closeAi()`、`stopAi()`、`getView()`。
+
+### 接入示例（非流式）
+
+```ts
+import {YhCodemirror} from 'yh-codemirror';
+import type {AiCodeEditRequest} from 'yh-codemirror';
+
+const aiRequest: AiCodeEditRequest = async ({prompt, code, selectedCode, language, signal}) => {
+  const res = await fetch('/api/ai/code-edit', {
+    method: 'POST',
+    signal,
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({prompt, code, selectedCode, language}),
+  });
+  if (!res.ok) {
+    throw new Error('AI 请求失败');
+  }
+  const data = await res.json();
+  // 返回「作用范围的完整替换文本」，组件负责写入
+  return data.code;
+};
+```
+
+### 接入示例（流式 SSE）
+
+```ts
+const aiRequest: AiCodeEditRequest = async ({prompt, selectedCode, signal, onChunk}) => {
+  const res = await fetch('/api/ai/code-edit/stream', {
+    method: 'POST',
+    signal,
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({prompt, code: selectedCode}),
+  });
+  const reader = res.body!.getReader();
+  const decoder = new TextDecoder();
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    onChunk?.(decoder.decode(value, {stream: true}));
+  }
+  // 走 onChunk 时返回值可为空，组件已实时写入编辑器
+};
+```
+
+> 提示：流式场景下 `onChunk` 传入的是增量片段，组件按累积文本整体覆盖作用区间，因此服务端无需自行做 diff。

package/ai-history.js

@@ -1,39 +1,40 @@
-/**
- * AI 问答历史（模块级单例）。
- *
- * 代价是同一页面里所有编辑器共用一份历史（未做分组），所以每条都带上时间与问题原文，
- * 靠问题内容本身区分是哪个字段的提问。需要按字段分组时再给 pushAiHistory 加 key 维度。
- */
-import {ref} from 'vue';
-
-/** 最多保留多少条（超出丢最旧的） */
-const MAX_HISTORY = 50;
-
-/**
- * @type {import('vue').Ref<Array<{id:number, time:string, prompt:string, scope:string, answer:string}>>}
- * 最新的排在最前面
- */
-export const aiHistory = ref([]);
-
-let seed = 0;
-
-const nowText = () => {
-  const d = new Date();
-  const pad = (n) => String(n).padStart(2, '0');
-  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(
-    d.getSeconds()
-  )}`;
-};
-
-/** 追加一条：{prompt, scope, answer} */
-export const pushAiHistory = ({prompt, scope = '', answer = ''}) => {
-  if (!prompt && !answer) return;
-  aiHistory.value = [{id: ++seed, time: nowText(), prompt, scope, answer}, ...aiHistory.value].slice(
-    0,
-    MAX_HISTORY
-  );
-};
-
-export const clearAiHistory = () => {
-  aiHistory.value = [];
-};
+/**
+ * AI 问答历史（模块级单例）。
+ *
+ * 同一页面里所有编辑器共用一份历史（未做分组），所以每条都要带上：
+ *   - location：这条提问来自哪里（宿主传入，如「区域名称 · 数据初始化」）
+ *   - time / prompt：时间与问题原文。
+ */
+import {ref} from 'vue';
+
+/** 最多保留多少条（超出丢最旧的） */
+const MAX_HISTORY = 50;
+
+/**
+ * @type {import('vue').Ref<Array<{id:number, time:string, prompt:string, scope:string, location:string, answer:string}>>}
+ * 最新的排在最前面
+ */
+export const aiHistory = ref([]);
+
+let seed = 0;
+
+const nowText = () => {
+  const d = new Date();
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(
+    d.getSeconds()
+  )}`;
+};
+
+/** 追加一条：{prompt, scope, location, answer} */
+export const pushAiHistory = ({prompt, scope = '', location = '', answer = ''}) => {
+  if (!prompt && !answer) return;
+  aiHistory.value = [
+    {id: ++seed, time: nowText(), prompt, scope, location, answer},
+    ...aiHistory.value,
+  ].slice(0, MAX_HISTORY);
+};
+
+export const clearAiHistory = () => {
+  aiHistory.value = [];
+};

package/arg-completion.js

@@ -0,0 +1,156 @@
+/**
+ * 方法参数补全：给「某个方法的第 N 个字符串参数」提供候选值。
+ *
+ * 组件不认识任何业务概念——哪些方法、第几个参数、候选取自哪里，全部由宿主通过
+ * argCompletions 传进来。vuePath、字段名、枚举值都走同一条通道，加新方法只需加一条配置。
+ */
+
+/** 候选弹出后继续输入这些字符不必重新查询，CodeMirror 本地过滤即可 */
+const VALID_FOR = /^[\w$./\\-]*$/;
+
+const IDENT_RE = /[\w$]/;
+
+/** 取 `(` 前面的调用名（兼容 this.openModal / a.b.openModal 这类写法） */
+function readCallee(text, openParen) {
+  let i = openParen - 1;
+  while (i >= 0 && /\s/.test(text[i])) {
+    i--;
+  }
+  const end = i;
+  while (i >= 0 && IDENT_RE.test(text[i])) {
+    i--;
+  }
+  return i === end ? '' : text.slice(i + 1, end + 1);
+}
+
+/**
+ * 从文档开头扫到光标，定位光标所在的字符串字面量属于哪个调用的第几个实参。
+ * 之所以全量扫而不是只看当前行：参数多时手写换行很常见
+ * （showModal( 换行 "报表", 换行 "basic/xxx.vue"）。
+ *
+ * @param {string} text 文档全文（或 0 到光标的片段）
+ * @param {number} pos 光标偏移
+ * @returns {null | {fn: string, arg: number, from: number}}
+ *          fn 调用名；arg 参数下标（0 基）；from 字符串内容起点（引号后一位）
+ */
+export function locateStringArg(text, pos) {
+  // 括号栈：name 非空表示是调用括号，comma 记录它已过的实参个数
+  const stack = [];
+  let inString = false;
+  let quote = '';
+  let stringStart = -1;
+  let lineComment = false;
+  let blockComment = false;
+
+  for (let i = 0; i < pos; i++) {
+    const c = text[i];
+
+    if (lineComment) {
+      if (c === '\n') {
+        lineComment = false;
+      }
+      continue;
+    }
+    if (blockComment) {
+      if (c === '*' && text[i + 1] === '/') {
+        blockComment = false;
+        i++;
+      }
+      continue;
+    }
+    if (inString) {
+      if (c === '\\') {
+        // 转义字符：连同下一个字符一起跳过，否则 "a\"b" 会被当成提前闭合
+        i++;
+        continue;
+      }
+      if (c === quote) {
+        inString = false;
+        quote = '';
+        stringStart = -1;
+      }
+      continue;
+    }
+    if (c === '/' && text[i + 1] === '/') {
+      lineComment = true;
+      i++;
+      continue;
+    }
+    if (c === '/' && text[i + 1] === '*') {
+      blockComment = true;
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'" || c === '`') {
+      inString = true;
+      quote = c;
+      stringStart = i;
+      continue;
+    }
+    if (c === '(') {
+      stack.push({name: readCallee(text, i), comma: 0});
+      continue;
+    }
+    if (c === '[' || c === '{') {
+      // 只压栈不认名：多维数组 / 对象字面量里的逗号不该算到外层调用头上
+      stack.push({name: '', comma: 0});
+      continue;
+    }
+    if (c === ')' || c === ']' || c === '}') {
+      stack.pop();
+      continue;
+    }
+    if (c === ',' && stack.length) {
+      stack[stack.length - 1].comma++;
+    }
+  }
+
+  if (!inString || stringStart < 0) {
+    return null;
+  }
+  const top = stack[stack.length - 1];
+  if (!top || !top.name) {
+    return null;
+  }
+  return {fn: top.name, arg: top.comma, from: stringStart + 1};
+}
+
+/** 把宿主给的候选统一成 CodeMirror 的选项结构 */
+function toOptions(item) {
+  const detail = item.detail;
+  return (item.options || []).map((opt) =>
+    typeof opt === 'string'
+      ? detail
+        ? {label: opt, type: 'text', detail}
+        : {label: opt, type: 'text'}
+      : {label: opt.label, type: 'text', detail: opt.detail || detail}
+  );
+}
+
+/**
+ * 生成 CodeMirror 补全源。
+ * @param {() => Array<{fn: string, arg: number, options: any[], detail?: string}>} getItems
+ *        每次触发实时读取，宿主异步就绪也生效
+ */
+export function createArgCompletion(getItems) {
+  return (context) => {
+    const items = (typeof getItems === 'function' ? getItems() : getItems) || [];
+    // 宿主没配任何候选：连文档都不扫
+    if (!items.length) {
+      return null;
+    }
+    const hit = locateStringArg(context.state.doc.sliceString(0, context.pos), context.pos);
+    if (!hit) {
+      return null;
+    }
+    const item = items.find((it) => it.fn === hit.fn && it.arg === hit.arg);
+    if (!item) {
+      return null;
+    }
+    const options = toOptions(item);
+    if (!options.length) {
+      return null;
+    }
+    return {from: hit.from, options, validFor: VALID_FOR};
+  };
+}

package/index.ts

@@ -1,3 +1,4 @@
 import YhCodemirror from './CodeMirror.vue';
 export {YhCodemirror};
 export type {AiCodeEditParams, AiCodeEditRequest} from './util';
+export {createArgCompletion, locateStringArg} from './arg-completion';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-codemirror",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "wraper codemirror with vue3",
   "type": "module",
   "exports": {
@@ -14,15 +14,17 @@
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/commands": "^6.0.0",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-java": "^6.0.1",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.7.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/language": "^6.10.2",
     "@codemirror/view": "^6.28.2",
     "@lezer/highlight": "^1.2.0",
-    "cm6-theme-solarized-dark": "^0.1.0",
+    "cm6-theme-solarized-dark": "^0.2.0",
     "codemirror": "^6.0.1",
     "js-beautify": "^1.15.1"
   },

package/util.ts

@@ -3,6 +3,7 @@ import { java } from "@codemirror/lang-java";
 import { css } from "@codemirror/lang-css";
 import { sql } from "@codemirror/lang-sql";
 import { html } from "@codemirror/lang-html";
+import { json } from "@codemirror/lang-json";
 
 const plugins = {
   javascript: () => javascript(),
@@ -10,6 +11,7 @@ const plugins = {
   css: () => css(),
   java: () => java(),
   html: () => html(),
+  json: () => json(),
 };
 
 /**
@@ -39,5 +41,6 @@ export type AiCodeEditRequest = (
 ) => Promise<string | void | {text?: string; code?: string; content?: string}>;
 
 export const getCodeLanguagePlugin = function (language) {
-  return plugins[language]();
+  // 未知语言（含 undefined）回落 javascript：直接取会拿到 undefined，CM6 会抛 extension 错误
+  return (plugins[language] || plugins.javascript)();
 };

package/.workbuddy/memory/2026-09-28.md

@@ -1,19 +0,0 @@
-# 2026-09-28
-
-## yh-codemirror 1.0.7 接入 AI 提示代码编辑
-
-- 设计取舍：该包必须保持零业务依赖（deps 仅 codemirror 系列 + js-beautify，peer 仅 vue/element-plus），
-  因此**不直接依赖 yh-ai**（会拖入 axios/yh-client/yh-pub），改为宿主通过 `aiRequest` 回调注入 AI 能力。
-  传入 `aiRequest` 即启用，未传时行为与旧版完全一致（向后兼容）。
-- 实现要点：
-  - 作用范围：有选区→选区；无选区→按 `aiScope`（默认 document）整篇或光标插入。
-  - 写回用 `view.dispatch({changes:{from,to,insert}})`，保留撤销栈；流式时区间 to 随写入长度前移。
-  - 流式：宿主调 `onChunk(chunk)` 增量返回，组件累积后整体覆盖区间；非流式则取返回值字符串。
-  - `AbortController` + signal 支持中断（停止按钮 / Esc / 卸载）。
-  - 自动剥离模型输出的 ```lang 围栏。
-  - 快捷键用 `keymap.of`（注意：`keymap` 不从 `codemirror` 导出，必须从 `@codemirror/view` 导入）。
-  - 新增事件 `ai-apply` / `ai-error`，expose `openAi/closeAi/stopAi/getView`。
-- 新增 README.md（接入示例：非流式 + SSE 流式）、CHANGELOG.md；version 1.0.6 → 1.0.7。
-- 验证：临时 .smoke 工程用 vite 4 + @vitejs/plugin-vue 构建通过（1663 modules）。
-  注意：root node_modules 的 vue 是 3.2.47，与 element-plus 内部 @vueuse 不兼容（hasInjectionContext 缺失），
-  **冒烟构建要把 vue alias 指向 web-new/node_modules/vue（3.5.13）**。

package/CHANGELOG.md

@@ -1,44 +0,0 @@
-# CHANGELOG
-
-## 1.0.7
-
-- 2026-10-08 15:06 feature: 新增 `aiWindowId` 入参与 `ai-activate` 事件
-  - AI 面板打开时把 `aiWindowId` 通过 `ai-activate` 抛给宿主，宿主可趁用户还没打字时预取上下文
-  - 组件本身不认识任何业务接口（保持零依赖），窗口配置怎么取、怎么缓存完全由宿主决定
-  - `aiWindowId` 为空时不触发事件
-- 2026-09-30 18:54 feature: 新增 `aiPanelSize` 尺寸档位（`'normal' | 'large'`）
-  - 放大场景（window-form 的「放大」抽屉）传 `large`：面板内边距 6/8 → 10/12、字号 12 → 14px、
-    输入框 2 行 → 4 行、历史面板 max-height 62% → 72%（代码区 170px → 300px）
-  - 抽屉里的编辑区撑满整个抽屉，AI 面板还是 12px / 2 行会显得很局促
-- 2026-09-30 18:45 feature: 新增「历史问答」查看入口（AI 输入框右上角「历史」）
-  - 每次 AI 成功写入后记录 `{时间, 问题, 作用范围, 回答}`，列表可展开查看完整问答、一键复制回答、清空
-  - 历史存在新增的 `ai-history.js` **模块级单例**（上限 50 条，最新在前）；
-    不放组件内是因为配置面板里的编辑器会随切换配置项反复卸载重建，组件 ref 一卸载历史就没了
-- 2026-09-30 18:26 fix: 选中区被当前行整块盖住（真正的根因是**绘制层级**，不是配色）
-  - CM6 的选区画在 `.cm-selectionLayer` 上：`drawSelection` 内部 `above:false` → z-index 取 `-1-pos`（负数），
-    它和 `.cm-content` 同在 `.cm-scroller`（`position:relative; z-index:0`）这个层叠上下文里
-  - 按 CSS 绘制顺序「负 z-index 后代 → in-flow 块 → 行内内容」，`.cm-line` 作为普通 in-flow 块
-    **画在选区层之上**；只要给 `.cm-line` 设不透明背景，选区就被完全遮住
-  - baseTheme 自带的 `&light .cm-activeLine:#cceeff44` / `&dark:#99eeff33` 是半透明的才不会遮，
-    solarizedDark 的 `.cm-activeLine:#173541` 和它的 `selection:#173541` 一样是不透明的同色 —— 这才是最初「看不出来」的根源
-  - 解法：当前行高亮挪到 `.cm-line.cm-activeLine::before`（`z-index:-100`），
-    同时把 `.cm-activeLine` 自身清成 `transparent`；绘制顺序变成「当前行底(-100) → 选区(-2) → 文字」
-- 2026-09-28 10:04 feature: 新增 AI 提示代码编辑能力（回调注入 `aiRequest`，不引入任何 AI 服务依赖）
-  - 支持选区 / 整篇 / 光标插入三种作用范围（`aiScope`）
-  - 支持流式回写（`onChunk` 实时写入编辑器）
-  - 支持中断（`AbortSignal` + 停止按钮 / Esc）
-  - 新增 `ai-apply`、`ai-error` 事件与 `openAi / closeAi / stopAi / getView` 暴露方法
-  - 新增快捷键 `Mod-i` 唤起 AI 输入框（`aiHotkey` 可配）
-  - 回写走 dispatch，保留撤销栈；自动剥离 ```lang 代码围栏
-- 2026-09-28 10:04 docs: 新增 README.md 说明 AI 接入方式（非流式 / SSE 流式示例）
-- 2026-09-30 18:08 fix: 拖选/双击选词仍然和当前行同色（上一版权重不够）
-  - CM 6.39 的 baseTheme 用 `&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`
-    （5 个类 + 子代选择器）给了默认色 `#d7d4f0` / `#233`，权重高于组件规则，堆类名盖不住
-  - 选区色改带 `!important`（不跟它的 DOM 结构绑死），当前行仍用选择器权重覆盖
-  - 补回浅色 `.cm-selectionMatch`（双击选词后其它同名 occurrence），改用暖色 `#ffe9c2` 与蓝色选区区分
-  - solarizedDark 的 `selection` 与 `activeLine` 都是 `#173541`，浅色主题又是 `#b3d8ff` / `#e8f4ff` 同一蓝色系
-  - 改为「当前行 = 中性色，选中 = 蓝色」，并区分聚焦/失焦两档选中色
-  - 配色统一挪到组件 `<style>`（带 `.cm-editor` / `.cm-editor.cm-focused` 前缀，权重高于外部主题），
-    `lightTheme` 里不再重复维护
-- 2026-09-30 17:54 feature: 编辑器未聚焦时隐藏右下角功能按钮栏（`.editor-operation-btn.is-hidden`）
-  - 按钮栏加 `@mousedown.prevent`，避免点按钮瞬间编辑器失焦导致按钮隐藏、click 落空