real-vue-ai-editor 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# Real Vue AI Editor
+
+Vue 3 组件版 AI 富文本 / Markdown 编辑器（基于 [Aied](../aied) 核心）。
+
+- 中文文档：[使用文档.md](./使用文档.md)
+- 在线演示：`npm install && npm run dev`
+- 免构建 CDN 演示：打开 [demo/cdn.html](./demo/cdn.html)
+
+## 安装
+
+```bash
+npm install real-vue-ai-editor
+```
+
+本地演示：
+
+```bash
+cd real-vue-ai-editor
+npm install
+npm run dev
+```
+
+## 组件用法
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { AiEditor } from "real-vue-ai-editor";
+import "real-vue-ai-editor/style.css";
+
+const html = ref("<p>hello</p>");
+</script>
+
+<template>
+  <AiEditor
+    v-model="html"
+    mode="rich"
+    :height="420"
+    :config="{
+      aiUrl: '/api/ai/chat',
+      uploadUrl: '/api/upload'
+    }"
+  />
+</template>
+```
+
+## AI 配置优先级
+
+1. `mockAi` / `config.mockAi`（演示 / 单测）
+2. `provider` / `config.provider`（浏览器直连 OpenAI 兼容接口）
+3. `aiUrl` / `config.aiUrl`（后端代理，推荐上线）
+
+直连时 API Key 会暴露在前端，且可能遇到 CORS，请仅用于本地演示。

package/dist/assets/real-vue-ai-editor.css

@@ -0,0 +1 @@
+.aie-wrap{--aie-border: #e5e6eb;--aie-bg: #f7f8fa;--aie-text: #4e5969;--aie-text-strong: #1d2129;--aie-muted: #86909c;--aie-primary: #165dff;--aie-hover: #e8eaed;border:1px solid var(--aie-border);border-radius:6px;background:#fff;overflow:visible;margin-bottom:8px;font-family:PingFang SC,Microsoft YaHei,Segoe UI,sans-serif;box-shadow:0 1px 2px #00000008;position:relative;z-index:2}.aie-toolbar{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--aie-bg);border-bottom:1px solid var(--aie-border);min-height:58px;overflow:visible;position:relative;z-index:5}.aie-tools{display:flex;align-items:stretch;flex:1;min-width:0;flex-wrap:wrap;gap:0;padding-bottom:2px;overflow:visible}.aie-tools::-webkit-scrollbar{height:4px}.aie-tools::-webkit-scrollbar-thumb{background:#c9cdd4;border-radius:4px}.aie-group{display:flex;align-items:stretch;flex:0 0 auto}.aie-sep{width:1px;margin:8px 4px;background:#dde0e5;flex:0 0 1px;align-self:stretch}.aie-tool{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--aie-text);cursor:pointer;min-width:42px;height:50px;padding:4px 5px 2px;border-radius:4px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;transition:background .12s,color .12s;-webkit-user-select:none;user-select:none;flex:0 0 auto}.aie-tool:hover,.aie-drop.open>.aie-drop-toggle,.aie-tool.is-active{background:var(--aie-hover);color:var(--aie-text-strong)}.aie-tool:active{background:#dde1e6}.aie-tool-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;height:20px;width:26px}.aie-tool-ico svg{width:17px;height:17px;fill:currentColor}.aie-tool-ico .aie-caret{position:absolute;right:-3px;bottom:-2px;width:10px;height:10px;opacity:.65}.aie-tool-txt{font-size:11px;color:var(--aie-muted);white-space:nowrap;letter-spacing:0}.aie-tool:hover .aie-tool-txt,.aie-drop.open .aie-tool-txt,.aie-tool.is-active .aie-tool-txt{color:var(--aie-text)}.aie-wrap.is-md .aie-rich-only,.aie-drop-menu.aie-md-mode .aie-rich-only{display:none!important}.aie-drop{position:relative;z-index:1}.aie-drop.open{z-index:20}.aie-drop-menu{display:none;position:absolute;top:calc(100% + 2px);left:0;z-index:19891050;min-width:132px;padding:6px;background:#fff;border:1px solid var(--aie-border);border-radius:8px;box-shadow:0 8px 24px #0000001f}.aie-drop-menu.aie-drop-fixed{position:fixed!important;display:block!important;z-index:19891050!important}.aie-drop.open .aie-drop-menu{display:block}.aie-drop-menu.aie-swatches{display:none;grid-template-columns:repeat(5,1fr);gap:6px;min-width:148px;padding:10px}.aie-drop.open .aie-drop-menu.aie-swatches{display:grid}.aie-drop-menu.aie-swatches.aie-drop-fixed{display:grid!important}.aie-swatch{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.08);cursor:pointer;padding:0}.aie-swatch:hover{transform:scale(1.08)}.aie-drop-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;font-size:13px;color:var(--aie-text-strong);border-radius:4px;cursor:pointer}.aie-drop-item:hover{background:#f2f3f5}.aie-modes{display:flex;align-items:center;gap:2px;flex-shrink:0;background:#fff;border:1px solid var(--aie-border);border-radius:6px;padding:2px}.aie-modes .aie-mode,.aie-modes .aie-ai-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--aie-text);font-size:12px;line-height:1;padding:7px 10px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.aie-modes .aie-mode:hover{background:var(--aie-hover)}.aie-modes .aie-mode.active{background:#e8f3ff;color:var(--aie-primary);font-weight:600}.aie-modes .aie-ai-toggle{background:linear-gradient(135deg,#165dff,#6aa1ff);color:#fff;margin-left:2px}.aie-modes .aie-ai-toggle:hover{filter:brightness(1.05)}.aie-modes .aie-ai-toggle svg{width:13px;height:13px;fill:currentColor}.aie-ai-panel{padding:10px 12px;background:linear-gradient(180deg,#f5f8ff,#eef4ff);border-bottom:1px solid #d6e4ff}.aie-ai-gen{margin-bottom:10px;padding:10px;background:#fff;border:1px solid #d6e4ff;border-radius:8px}.aie-ai-gen-label{font-size:13px;font-weight:600;color:#1d2129;margin-bottom:8px}.aie-ai-gen-row{display:flex;gap:8px;align-items:stretch}.aie-ai-desc{flex:1;min-height:58px;border:1px solid #c9d8f0;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.5;resize:vertical;outline:none;color:#1d2129;font-family:inherit}.aie-ai-desc:focus{border-color:var(--aie-primary);box-shadow:0 0 0 3px #165dff1f}.aie-ai-generate{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:linear-gradient(135deg,#165dff,#6aa1ff);color:#fff;border-radius:8px;padding:0 16px;min-width:96px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}.aie-ai-generate:hover{filter:brightness(1.05)}.aie-ai-tips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.aie-ai-tip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px dashed #c9d8f0;background:#f8fbff;color:#3b82f6;font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer}.aie-ai-tip:hover{border-style:solid;background:#e8f3ff}.aie-ai-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.aie-ai-actions-label{font-size:12px;color:#64748b;margin-right:2px}.aie-ai-panel button[data-ai]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #c9d8f0;background:#fff;color:#334155;font-size:12px;line-height:1;padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .12s}.aie-ai-panel button[data-ai]:hover{border-color:var(--aie-primary);color:var(--aie-primary);background:#e8f3ff}.aie-ai-panel button:disabled{opacity:.5;cursor:not-allowed}.aie-ai-custom{display:flex;gap:8px;margin-top:8px}.aie-ai-prompt{flex:1;height:34px;border:1px solid #c9d8f0;border-radius:8px;padding:0 12px;outline:none;background:#fff}.aie-ai-prompt:focus{border-color:var(--aie-primary);box-shadow:0 0 0 3px #165dff1f}.aie-ai-run{background:var(--aie-primary)!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:0 16px!important;height:34px;cursor:pointer}.aie-ai-status{margin-top:8px;font-size:12px;color:#64748b;min-height:16px}.aie-loading:after{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;border:2px solid var(--aie-primary);border-top-color:transparent;border-radius:50%;animation:aie-spin .7s linear infinite;vertical-align:-1px}@keyframes aie-spin{to{transform:rotate(360deg)}}.aie-body{position:relative;background:#fff}.aie-rich,.aie-md,.aie-preview{width:100%;height:100%;box-sizing:border-box;padding:16px 18px;overflow:auto;outline:none;border:0;resize:none;font-size:14px;line-height:1.75;color:var(--aie-text-strong)}.aie-md{font-family:Consolas,Courier New,monospace;background:#fafbfc;line-height:1.6}.aie-rich:empty:before,.aie-rich.aie-placeholder:before{content:attr(data-placeholder);color:#c0c4cc;pointer-events:none}.aie-rich p,.aie-preview p{margin:0 0 .75em}.aie-rich ul,.aie-preview ul{list-style:disc outside!important;padding-left:1.6em!important;margin:0 0 .75em!important}.aie-rich ol,.aie-preview ol{list-style:decimal outside!important;padding-left:1.6em!important;margin:0 0 .75em!important}.aie-rich li,.aie-preview li{display:list-item!important;list-style:inherit!important;margin:.2em 0}.aie-rich hr,.aie-preview hr,.aie-hr{display:block!important;width:100%!important;height:0!important;margin:1em 0!important;padding:0!important;border:0!important;border-top:1px solid #c9cdd4!important;overflow:visible!important;background:transparent!important;clear:both}.aie-rich h1,.aie-rich h2,.aie-rich h3,.aie-preview h1,.aie-preview h2,.aie-preview h3{margin:.85em 0 .4em;line-height:1.3}.aie-rich img,.aie-preview img,.aie-rich video,.aie-preview video{max-width:100%;height:auto;border-radius:4px}.aie-rich blockquote,.aie-preview blockquote{margin:.6em 0;padding:.45em .9em;border-left:3px solid var(--aie-primary);background:#f6f8fa;color:#57606a}.aie-rich pre,.aie-preview pre{background:#0d1117;color:#e6edf3;padding:12px;border-radius:6px;overflow:auto;font-size:13px}.aie-rich code,.aie-preview code{font-family:Consolas,Courier New,monospace;font-size:.92em}.aie-rich :not(pre)>code,.aie-preview :not(pre)>code{background:#eff2f5;padding:1px 5px;border-radius:3px;color:#cf222e}.aie-table{border-collapse:collapse;width:100%;margin:8px 0}.aie-table th,.aie-table td{border:1px solid #dde0e5;padding:6px 10px;min-width:60px}.aie-table th{background:#f7f8fa}.aie-formula{display:inline-block;padding:0 6px;margin:0 2px;background:#f2f3f5;border-radius:3px;font-family:Times New Roman,serif}.aie-empty{color:#8b949e}.aie-footer{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;border-top:1px solid var(--aie-border);background:#fafbfc;font-size:12px;color:var(--aie-muted)}.aie-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;z-index:19891030;display:flex;align-items:center;justify-content:center;animation:aie-fade .15s ease}@keyframes aie-fade{0%{opacity:0}to{opacity:1}}.aie-modal{width:420px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;box-shadow:0 16px 40px #0000002e;overflow:hidden}.aie-modal-hd{padding:14px 16px;font-size:15px;font-weight:600;color:#1d2129!important;border-bottom:1px solid var(--aie-border);background:#fff}.aie-modal-bd{padding:16px;background:#fff}.aie-modal-bd label{display:block;font-size:13px;color:#4e5969!important;margin-bottom:6px;font-weight:500}.aie-modal-bd .aie-input{width:100%;box-sizing:border-box;height:36px;border:1px solid #c9cdd4!important;border-radius:6px;padding:0 10px;margin-bottom:12px;outline:none;color:#1d2129!important;background:#fff!important;caret-color:#1d2129}.aie-modal-bd .aie-input::placeholder{color:#c0c4cc!important}.aie-modal-bd .aie-input:focus{border-color:var(--aie-primary)!important;box-shadow:0 0 0 3px #165dff1f}.aie-modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px;background:#fff}.aie-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #c9cdd4;background:#fff;color:#1d2129!important;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer}.aie-btn-primary{background:var(--aie-primary)!important;border-color:var(--aie-primary)!important;color:#fff!important}.aie-toast{position:fixed;left:50%;top:72px;transform:translate(-50%);background:#1d2129eb;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;z-index:19891040;pointer-events:none;animation:aie-fade .15s ease}.aie-hist-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:19891020;display:flex;align-items:center;justify-content:center}.aie-hist-box{width:420px;max-width:90vw;max-height:70vh;background:#fff;border-radius:8px;padding:16px;box-shadow:0 12px 32px #00000029;display:flex;flex-direction:column}.aie-hist-title{font-size:15px;font-weight:600;margin-bottom:10px}.aie-hist-list{overflow:auto;flex:1}.aie-hist-item{padding:8px 10px;border-radius:4px;cursor:pointer;font-size:13px;color:#4e5969}.aie-hist-item:hover{background:#f2f3f5}.aie-hist-close{margin-top:12px;align-self:flex-end;border:1px solid #e5e6eb;background:#fff;border-radius:4px;padding:6px 14px;cursor:pointer}.layui-form .aie-wrap,.layui-input-block .aie-wrap{width:100%;max-width:100%}@media(max-width:720px){.aie-toolbar{flex-wrap:wrap}.aie-modes{width:100%;justify-content:flex-end}}.rvae-root[data-v-119e901d]{width:100%}.rvae-textarea[data-v-119e901d]{display:none;width:100%;min-height:120px}