yh-codemirror 1.0.6 → 1.0.8

package/README.md

@@ -0,0 +1,102 @@
+# 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。

package/ai-history.js

@@ -0,0 +1,39 @@
+/**
+ * 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 = [];
+};

package/index.ts

@@ -0,0 +1,3 @@
+import YhCodemirror from './CodeMirror.vue';
+export {YhCodemirror};
+export type {AiCodeEditParams, AiCodeEditRequest} from './util';

package/package.json

@@ -1,27 +1,35 @@
-{
-  "name": "yh-codemirror",
-  "version": "1.0.6",
-  "description": "wraper codemirror with vue3",
-  "main": "index.js",
-  "scripts": {
-    "pub": "npm publish --registry https://registry.npmjs.org/ && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/"
-  },
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.16.3",
-    "@codemirror/lang-css": "^6.2.1",
-    "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-sql": "^6.7.0",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/view": "^6.28.2",
-    "codemirror": "^6.0.1",
-    "js-beautify": "^1.15.1"
-  },
-  "peerDependencies": {
-    "vue-i18n": "^9.8.0",
-    "vue": "^3.0.0",
-    "element-plus": "^2.3.8"
-  },
-  "author": "Liubin"
+{
+  "name": "yh-codemirror",
+  "version": "1.0.8",
+  "description": "wraper codemirror with vue3",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    }
+  },
+  "scripts": {
+    "pub": "npm publish --registry https://registry.npmjs.org/ && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@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",
+    "codemirror": "^6.0.1",
+    "js-beautify": "^1.15.1"
+  },
+  "peerDependencies": {
+    "vue-i18n": "^9.8.0",
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
+  },
+  "author": "Liubin"
 }

package/util.ts

@@ -1,17 +1,43 @@
-import { javascript } from "@codemirror/lang-javascript";
-import { java } from "@codemirror/lang-java";
-import { css } from "@codemirror/lang-css";
-import { sql } from "@codemirror/lang-sql";
-import { html } from "@codemirror/lang-html";
-
-const plugins = {
-  javascript: () => javascript(),
-  sql: () => sql(),
-  css: () => css(),
-  java: () => java(),
-  html: () => html(),
-};
-
-export const getCodeLanguagePlugin = function (language) {
-  return plugins[language]();
-};
+import { javascript } from "@codemirror/lang-javascript";
+import { java } from "@codemirror/lang-java";
+import { css } from "@codemirror/lang-css";
+import { sql } from "@codemirror/lang-sql";
+import { html } from "@codemirror/lang-html";
+
+const plugins = {
+  javascript: () => javascript(),
+  sql: () => sql(),
+  css: () => css(),
+  java: () => java(),
+  html: () => html(),
+};
+
+/**
+ * AI 提示编辑：宿主注入的请求参数
+ */
+export interface AiCodeEditParams {
+  /** 用户输入的提示词 */
+  prompt: string;
+  /** 编辑器全文代码 */
+  code: string;
+  /** 本次作用范围的代码（有选区=选中内容；无选区=全文或空串） */
+  selectedCode: string;
+  /** 当前编辑器语言 */
+  language?: string | string[];
+  /** 用于中断请求（用户点“停止”/关闭面板时触发） */
+  signal: AbortSignal;
+  /** 流式输出回调：逐段返回内容，组件会实时写入编辑器 */
+  onChunk?: (chunk: string) => void;
+}
+
+/**
+ * AI 提示编辑：宿主注入的请求函数。
+ * 返回值需为「作用范围的完整替换文本」；若走流式（onChunk 逐段返回），返回值可为空。
+ */
+export type AiCodeEditRequest = (
+  params: AiCodeEditParams
+) => Promise<string | void | {text?: string; code?: string; content?: string}>;
+
+export const getCodeLanguagePlugin = function (language) {
+  return plugins[language]();
+};