yh-codemirror 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 1.0.10
+
+- 2026-10-09 15:51 feature: `language` 新增 `json`；未知语言回落 `javascript`
+  - slw 的图表配置编辑器要用 JSON 语法高亮，之前只能靠宿主额外传 extensions
+  - `getCodeLanguagePlugin` 原来直接 `plugins[language]()`，未知语言（含 undefined）返回 undefined，
+    CM6 会抛 `Unrecognized extension value in extension set`，改为回落 javascript
+
 ## 1.0.7
 
 - 2026-10-08 15:06 feature: 新增 `aiWindowId` 入参与 `ai-activate` 事件

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"
@@ -218,8 +224,7 @@ const props = withDefaults(
     /** 编辑器主题：dark（默认）或 light */
     theme?: 'dark' | 'light';
     /**
-     * AI 面板尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'，
-     * 否则 12px 字号 + 2 行输入框在大面板里会显得很局促。
+     * AI 面板尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'
      */
     aiPanelSize?: 'normal' | 'large';
     /**
@@ -228,6 +233,11 @@ const props = withDefaults(
      * 由宿主去拉配置；不传就不触发该事件。
      */
     aiWindowId?: string | number;
+    /**
+     * 这条提问来自哪里（宿主传入，如「区域名称 · 数据初始化」）。
+     * 组件只负责原样记进历史并在问题前显示，不解析它的含义
+     */
+    aiLocation?: string;
   }>(),
   {
     modelValue: '',
@@ -239,6 +249,7 @@ const props = withDefaults(
     theme: 'dark',
     aiPanelSize: 'normal',
     aiWindowId: '',
+    aiLocation: '',
   }
 );
 
@@ -487,7 +498,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 修改已应用',
@@ -662,19 +673,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 +767,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 +796,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 +807,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 +1032,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 +1090,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

@@ -13,6 +13,10 @@ Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等
 </yh-codemirror>
 ```
 
+`language` 支持 `javascript / sql / css / java / html / json`，可传数组；不在列表内会取不到语言插件。
+`autocomplete` 只对 `javascript` 生效（按语言名取，如 `{javascript: myCompletionSource}`）。
+不传 `aiRequest` 就是一个纯编辑器，不会出现任何 AI 入口。
+
 ## AI 提示编辑
 
 组件本身**不内置任何 AI 服务**（保持零业务依赖），由宿主通过 `aiRequest` 注入请求实现。传入 `aiRequest` 即自动启用：
@@ -24,11 +28,15 @@ Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等
 - 支持流式：调用 `onChunk` 逐段返回，编辑器实时写入；非流式则直接返回完整替换文本
 - 自动剥离模型常见的 ` ```lang ... ``` ` 包裹
 - 通过 dispatch 写入，保留 CodeMirror 撤销栈，可 `Ctrl+Z` 回退
-- **历史问答**：输入框右上角「历史」可查看本轮会话问过的问题与 AI 的完整回答（可展开、可复制、可清空）
+- **历史问答**：输入框右上角「历史」可查看本轮会话问过的问题与 AI 的完整回答（可展开、可复制、可清空），
+  每条前面会显示宿主传入的 `aiLocation`，建议格式「区域名称 · <按钮/查询条件/字段名称 + 类型> · 编辑器字段名」
+  （如「区域信息 · 事件按钮 · 点击事件」「区域信息 · 名称字段 · 字段值更改」；
+  直接在区域事件里提问时没有中间层，就是「区域信息 · 数据初始化」）
 
 历史记录存在 `ai-history.js` 的模块级单例里（上限 50 条，最新在前）。之所以不放组件内：
 配置面板里的编辑器会随切换配置项反复卸载重建，组件内的 ref 一卸载就没了。
-代价是同一页面所有编辑器共用一份（未做分组），所以每条都带时间与问题原文；需要按字段分组时再给 `pushAiHistory` 加 key 维度。
+代价是同一页面所有编辑器共用一份（未做分组），所以每条都带时间、问题原文和 `aiLocation`——
+没有归属信息时，一堆「把名称标红」的提问根本分不清是哪块配置。
 
 ### Props
 
@@ -40,6 +48,7 @@ Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等
 | `aiScope`       | `'document' \| 'cursor'`          | `'document'` | 无选区时的作用范围                                   |
 | `aiPanelSize`   | `'normal' \| 'large'`             | `'normal'` | AI 输入框 / 历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 `large` |
 | `aiWindowId`    | `string \| number`                | `''`       | AI 上下文用的「所属窗口 ID」。组件不认识任何业务接口，只在 AI 被唤起时通过 `ai-activate` 把它抛给宿主，由宿主去取窗口配置 |
+| `aiLocation`    | `string`                          | `''`       | 这条提问来自哪里（建议「区域名 · 按钮/查询条件/字段名 + 类型 · 编辑器字段名」，如「区域信息 · 事件按钮 · 点击事件」，名称一律取 NAME）。组件只原样记进历史并显示在问题前，不解析其含义 |
 
 ### Events
 

package/ai-history.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-codemirror",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "wraper codemirror with vue3",
   "type": "module",
   "exports": {
@@ -17,6 +17,7 @@
     "@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",

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)();
 };