# 📱 䞊䞋文暡匏重构 - UI 讟计分析报告 > **文档版本**: v2.0 > **创建日期**: 2025-10-21 > **最后曎新**: 2025-10-22 > **分析范囎**: 䞊䞋文暡匏 (User/System) UI 组件讟计 + 变量系统重构 > **状态**: ✅ v1.1改造已完成📋 v2.0变量系统重构埅实斜 --- ## 📢 重芁曎新 ### ✅ v1.1 UI改造 (已完成 - 2025-10-22) 1. **子暡匏选择噚䜍眮调敎** ✅ 已完成 - **问题**: 子暡匏选择噚䜍于工䜜区内层级混乱 - **方案**: 移劚到富航栏玧邻功胜暡匏选择噚右䟧 - **状态**: ✅ 已完成 - **提亀**: 之前已完成 2. **快捷操䜜栏䜍眮调敎** ✅ 已完成 - **问题**: 快捷操䜜栏圚巊䟧䌘化区䜜甚域䞍明确 - **方案**: 移劚到右䟧测试区顶郚莎近䜿甚场景 - **状态**: ✅ 已完成 - **提亀**: `ce90d47` - refactor(ui): 䌘化䞊䞋文暡匏快捷操䜜栏䜍眮 ### 📋 v2.0 变量系统重构 (埅实斜) 3. **变量系统简化** 🔎 高䌘先级 - **问题**: "党局变量"和"䌚话变量"抂念混淆实际郜是持久化变量 - **方案**: 移陀䌚话变量匕入测试区䞎时变量 - **状态**: ✅ 已完成䜜䞺園档记圕 - **诊情**: 见 [变量系统重构讟计文档](./design.md) ### 📊 改造预期效果 **改造前:** ``` ┌────────────────────────────────────────────────────────┐ │ Prompt Optimizer | [基础|䞊䞋文|囟像] | 📝📜⚙... │ ├────────────────────────┬──────────────────────────────── │ [📊📝🔧] │ 测试区 │ │ ────────────────────── │ │ │ [系统|甚户] [æš¡åž‹â–Ÿ] │ │ │ 蟓入框... │ │ └────────────────────────┮───────────────────────────────┘ ↑ 问题1: 层级混乱 ↑ 问题2: 操䜜距犻远 ``` **改造后:** ``` ┌────────────────────────────────────────────────────────┐ │ Prompt Optimizer │ │ [基础|䞊䞋文|囟像] [系统|甚户] 📝📜⚙... │ │ ↑ 功胜暡匏 ↑ 子暡匏劚态星瀺 │ ├────────────────────────┬──────────────────────────────── │ 䌘化区 │ 测试区 │ │ │ ┌───────────────────────────┐ │ │ [æš¡åž‹â–Ÿ] [暡板▟] │ │ 测试 📊党局 📝䌚话 🔧工具 │ │ │ 蟓入框... │ └───────────────────────────┘ │ │ (空闎增加) │ 变量蟓入... │ └────────────────────────┮───────────────────────────────┘ ``` **改进效果:** - ✅ 层级枅晰功胜暡匏和子暡匏圚同䞀富航栏 - ✅ 䜜甚域明确快捷操䜜栏圚测试区莎近䜿甚场景 - ✅ 空闎䌘化䌘化区垂盎空闎增加 - ✅ 操䜜䟿捷测试时讟眮变量操䜜路埄最短 --- ## 䞀、敎䜓架构讟计 ### 1.1 组件层次结构 ``` App.vue (䞻应甚) ├── ContextUserWorkspace.vue (甚户暡匏工䜜区) │ ├── ContextModeActions (快捷操䜜按钮) │ ├── InputPanelUI (提瀺词蟓入) │ ├── PromptPanelUI (䌘化结果) │ └── TestAreaPanel (测试区域) │ └── ContextSystemWorkspace.vue (系统暡匏工䜜区) ├── ContextModeActions (快捷操䜜按钮) ├── InputPanelUI (提瀺词蟓入) ├── ConversationManager (䌚话管理噚) ← 系统暡匏䞓属 ├── PromptPanelUI (䌘化结果) └── TestAreaPanel (测试区域) 共享组件: ├── ContextEditor.vue (䞊䞋文猖蟑噚 - 暡态框) ├── PromptPreviewPanel.vue (预览面板 - 暡态框) └── TestAreaPanel.vue (测试区域 - 倍甚) ``` **组件文件䜍眮:** ``` packages/ui/src/components/ ├── context-mode/ │ ├── ContextUserWorkspace.vue │ ├── ContextSystemWorkspace.vue │ ├── ContextModeActions.vue │ ├── ContextEditor.vue │ └── ConversationManager.vue ├── PromptPreviewPanel.vue ├── TestAreaPanel.vue ├── InputPanel.vue └── PromptPanel.vue packages/ui/src/composables/ └── usePromptPreview.ts ``` ### 1.2 讟计暡匏 ✅ **采甚了䌘秀的讟计暡匏:** 1. **组合䌘于继承** - User/System Workspace 是独立组件而非继承 - 避免了倍杂的 if-else 条件刀断 2. **Props 单向数据流** - 所有数据通过 props 䌠入 - 通过 emit 觊发父组件曎新 - 遵埪 Vue 3 最䜳实践 3. **Composable 逻蟑倍甚** - `usePromptPreview` 提䟛可倍甚的预览逻蟑 - 分犻 UI 和䞚务逻蟑 4. **Slot 插槜扩展** - 暡型选择、结果星瀺等䜿甚插槜实现灵掻性 - 支持䞍同场景的自定义枲染 --- ## 二、䞀种暡匏的 UI 差匂 ### 2.1 甚户暡匏 (User Mode) **文件**: `packages/ui/src/components/context-mode/ContextUserWorkspace.vue` **垃局结构:** ``` ┌──────────────────────────────────────────────────────┐ │ 📊 党局变量 📝 䌚话变量 🔧 工具管理 │ ← 快捷操䜜 ├─────────────────────────────────────────────────────── │ 巊䟧䌘化区 │ 右䟧测试区 │ │ ┌─────────────────────┐ │ ┌──────────────────────┐│ │ │ 提瀺词蟓入面板 │ │ │ 变量倌蟓入衚单 ││ │ │ "写䞀銖{{style}}的歌"│ │ │ style: [欢快____] ││ │ └─────────────────────┘ │ └──────────────────────┘│ │ ┌─────────────────────┐ │ ┌──────────────────────┐│ │ │ 䌘化结果面板 │ │ │ 预览内容 ││ │ │ "请创䜜䞀銖风栌䞺 │ │ │ "请创䜜䞀銖风栌䞺 ││ │ │ {{style}}的歌..." │ │ │ 欢快的歌..." ││ │ └─────────────────────┘ │ └──────────────────────┘│ │ │ ┌──────────────────────┐│ │ │ │ 测试结果 ││ │ │ │ (LLM 响应) ││ │ │ └──────────────────────┘│ └──────────────────────────────────────────────────────┘ ``` **栞心特点:** - ❌ **隐藏** 䌚话消息列衚管理 - ✅ **星瀺** 工具管理按钮 - ✅ 单条甚户消息䌘化 - ✅ 䞀阶段变量倄理䌘化保留 → 测试替换 - ✅ 无需蟓入测试问题提瀺词即测试内容 **代码特埁:** ```vue ``` ### 2.2 系统暡匏 (System Mode) **文件**: `packages/ui/src/components/context-mode/ContextSystemWorkspace.vue` **垃局结构:** ``` ┌──────────────────────────────────────────────────────┐ │ 📊 党局变量 📝 䌚话变量 │ ← 快捷操䜜 ├─────────────────────────────────────────────────────── │ 巊䟧䌘化区 │ 右䟧测试区 │ │ ┌─────────────────────┐ │ ┌──────────────────────┐│ │ │ 提瀺词蟓入面板 │ │ │ 变量倌蟓入衚单 ││ │ │ "䌘化以䞋对话..." │ │ │ style: [欢快____] ││ │ └─────────────────────┘ │ └──────────────────────┘│ │ ┌─────────────────────┐ │ ┌──────────────────────┐│ │ │ 䌚话管理噚 [折叠] │ │ │ 测试蟓入 (甚户问题) ││ │ │ • system: 䜠是... │ │ │ "请生成䞀銖欢快的歌" ││ │ │ • user: {{style}} │ │ └──────────────────────┘│ │ │ • assistant: ... │ │ ┌──────────────────────┐│ │ │ [打匀䞊䞋文猖蟑噚] │ │ │ 预览内容 ││ │ └─────────────────────┘ │ │ system: 䜠是歌曲创䜜 ││ │ ┌─────────────────────┐ │ │ user: 欢快 ││ │ │ 䌘化结果面板 │ │ └──────────────────────┘│ │ │ (䌘化后的对话䞊䞋文) │ │ ┌──────────────────────┐│ │ └─────────────────────┘ │ │ 测试结果 ││ │ │ │ (LLM 响应) ││ │ │ └──────────────────────┘│ └──────────────────────────────────────────────────────┘ ``` **栞心特点:** - ✅ **星瀺** 䌚话消息管理噚可折叠 - ❌ **隐藏** 工具管理按钮系统暡匏䞍盎接管理工具 - ✅ 倚消息䞊䞋文猖蟑 - ✅ 需芁额倖的测试蟓入 (`userQuestion`) - ✅ 支持 system/user/assistant/tool 倚种角色 **代码特埁:** ```vue ``` --- ## 䞉、关键组件深床分析 ### 3.1 `ContextModeActions.vue` - 快捷操䜜栏 **文件**: `packages/ui/src/components/context-mode/ContextModeActions.vue` **讟计亮点:** ```vue ``` **䌘点:** - ✅ 简掁的条件枲染 (`v-if="contextMode === 'user'"`) - ✅ 语义化的 emoji 囟标 - ✅ 囜际化支持 (`$t()`) - ✅ 类型安党的 emit 定义 **⚠ 圓前问题:** **问题**: 讟计文档䞭提到"工具管理 - 䞀种暡匏郜星瀺"䜆实际代码是 `v-if="contextMode === 'user'"` **圱响**: 系统暡匏无法管理工具劂果需芁的话 **建议**: 1. 统䞀讟计文档和实现明确系统暡匏是吊需芁工具管理 2. 劂果系统暡匏也需芁移陀 `v-if` 条件 3. 劂果确实只有甚户暡匏需芁曎新讟计文档 --- ### 3.2 `ConversationManager.vue` - 䌚话管理噚 **文件**: `packages/ui/src/components/context-mode/ConversationManager.vue` **讟计亮点:** #### 1⃣ **性胜䌘化** ```typescript // 䜿甚防抖减少频繁曎新 const handleMessageUpdate = debounce( (index: number, message: ConversationMessage) => { const newMessages = [...props.messages]; newMessages[index] = message; emit('update:messages', newMessages); emit('messageChange', index, message, 'update'); recordUpdate(); }, 150 // 150ms 平衡响应性和性胜 ); // 批倄理状态曎新 const batchStateUpdate = batchExecute((updates: Array<() => void>) => { updates.forEach((update) => update()); recordUpdate(); }, 16); // 16ms 匹配 60fps ``` #### 2⃣ **暡匏化行䞺** ```typescript const canEditMessages = computed(() => { // readonly 䌘先级最高 if (props.readonly) return false; // 甚户暡匏䞍允讞猖蟑消息 if (props.contextMode === 'user') return false; // 系统暡匏允讞猖蟑 return true; }); ``` #### 3⃣ **玧凑垃局讟计** ```vue
{{ $t(`conversation.roles.${message.role}`) }}
``` **䌘点:** - ✅ 单行垃局节省空闎 - ✅ Hover 星瀺操䜜按钮减少视觉噪音 - ✅ 䞋拉菜单添加消息支持倚种角色 (system/user/assistant/tool) - ✅ 性胜䌘化到䜍防抖 + 批倄理 **⚠ 朜圚问题:** **问题**: 单行蟓入限制 (`autosize: { minRows: 1, maxRows: 1 }`) 可胜富臎长文本隟以猖蟑 **场景瀺䟋:** ``` 圓消息内容蟃长时: system: "䜠是䞀䞪䞓䞚的歌曲创䜜助手擅长创䜜各种风栌的歌曲包括流行、摇滚、民谣、诎唱等..." ``` 单行星瀺䌚富臎: - ❌ 内容被截断需芁暪向滚劚 - ❌ 隟以看到完敎䞊䞋文 - ❌ 猖蟑䜓验差 **改进建议:** #### 方案 1: 展匀/折叠功胜 ```vue ``` #### 方案 2: 盎接跳蜬到完敎猖蟑噚 ```vue {{ $t('conversation.management.openEditor') }} ``` --- ### 3.3 `PromptPreviewPanel.vue` - 实时预览面板 **文件**: `packages/ui/src/components/PromptPreviewPanel.vue` **讟计亮点:** #### 1⃣ **变量统计可视化** ```vue {{ $t('contextMode.preview.totalVars') }}: {{ variableStats.total }} {{ $t('contextMode.preview.providedVars') }}: {{ variableStats.provided }} {{ $t('contextMode.preview.missingVars') }}: {{ variableStats.missing }} ``` #### 2⃣ **猺倱变量高亮** ```vue ``` #### 3⃣ **暡匏诎明劚态提瀺** ```vue ``` **䌘点:** - ✅ 信息层次枅晰统计 → è­Šå‘Š → 内容 → 诎明 - ✅ 颜色语义化info/success/warning - ✅ 教育甚户理解䞀阶段倄理 - ✅ 响应匏垃局 (`:wrap="true"`) **💡 改进建议: 猺倱变量快速操䜜** **圓前行䞺:** ```vue {{{{ varName }}}} ``` **改进后:** ```vue ``` **甚户䜓验提升:** ``` 之前: 看到猺倱变量 → 关闭预览 → 手劚打匀变量管理噚 → 扟到变量 → 猖蟑 现圚: 看到猺倱变量 → 点击 → 盎接创建/猖蟑 ✅ ``` --- ### 3.4 `usePromptPreview.ts` - 预览逻蟑 **文件**: `packages/ui/src/composables/usePromptPreview.ts` **讟计亮点:** #### 1⃣ **简化的变量替换** ```typescript /** * 枲染后的预览内容 * * 简化版本统䞀䜿甚简单替换逻蟑 * 泚意这里䜿甚简单的正则替换而䞍是 Mustache因䞺 * 1. UI 预览䞍需芁 Mustache 的条件枲染等高级特性 * 2. 简单替换性胜曎奜适合实时预览 * 3. 䞎后端 Mustache 行䞺䞀臎郜䌚保留倌䞭的占䜍笊 */ const previewContent = computed(() => { if (!content.value) return ""; try { const vars = variables.value || {}; // 统䞀的变量替换逻蟑 const result = content.value.replace( /\{\{([^{}]+)\}\}/g, (match, varName) => { const trimmedName = varName.trim(); // 跳过 Mustache 特殊标筟 (#, /, ^, !, >, &) if ( trimmedName.startsWith("#") || trimmedName.startsWith("/") || trimmedName.startsWith("^") || trimmedName.startsWith("!") || trimmedName.startsWith(">") || trimmedName.startsWith("&") ) { return match; } // 劂果变量存圚䞔非空替换吊则保留占䜍笊 if (vars[trimmedName] !== undefined && vars[trimmedName] !== "") { return vars[trimmedName]; } return match; } ); return result; } catch (error) { console.error("[usePromptPreview] Preview rendering failed:", error); return content.value; } }); ``` #### 2⃣ **变量统计** ```typescript const variableStats = computed(() => ({ total: parsedVariables.value.allVars.size, builtin: parsedVariables.value.builtinVars.size, custom: parsedVariables.value.customVars.size, missing: missingVariables.value.length, provided: parsedVariables.value.allVars.size - missingVariables.value.length, })); ``` **䌘点:** - ✅ 性胜䌘于 Mustache预览场景足借 - ✅ 䞎后端行䞺䞀臎郜保留倌䞭的占䜍笊 - ✅ 跳过 Mustache 特殊标筟 - ✅ 错误倄理完善 **⚠ 朜圚问题:** **问题**: 䞎后端 Mustache 可胜存圚䞍䞀臎的风险 **场景**: 劂果暡板䜿甚了 Mustache 的高级特性预览可胜䞍准确 ```mustache {{! 泚释 }} {{#if showTitle}} 标题{{title}} {{/if}} {{#each items}} - {{name}}: {{value}} {{/each}} ``` 圓前简单正则替换无法倄理: - ❌ 条件枲染 (`{{#if}}...{{/if}}`) - ❌ 埪环枲染 (`{{#each}}...{{/each}}`) - ❌ 郚分枲染 (`{{>partial}}`) **改进建议:** #### 方案 1: 文档诎明限制 ```typescript /** * 提瀺词预览 Composable * * 甚于实时计算提瀺词枲染结果并检测猺倱变量 * * ⚠ 限制诎明: * - 䜿甚简单正则替换䞍支持 Mustache 高级特性 * - 䞍支持条件枲染 ({{#if}})、埪环 ({{#each}})、郚分暡板 ({{>}}) * - 仅甚于基本变量预览最终枲染以后端䞺准 * - 劂需完敎 Mustache 枲染请䜿甚后端 API */ ``` #### 方案 2: 集成 Mustache.js ```typescript import Mustache from 'mustache'; const previewContent = computed(() => { try { // 䜿甚 Mustache 完敎枲染 return Mustache.render(content.value, variables.value); } catch (error) { // 降级到简单替换 return content.value.replace(/\{\{([^{}]+)\}\}/g, ...); } }); ``` **权衡:** - **方案 1**: 简单䜆功胜有限需芁甚户理解限制 - **方案 2**: 功胜完敎䜆增加䟝赖和倍杂床 **建议**: 圓前方案 1 足借圚文档䞭明确诎明即可 --- ## 四、UI 亀互流皋分析 ### 4.1 甚户暡匏完敎流皋 ```mermaid graph TD A[甚户蟓入提瀺词
'写䞀銖{{style}}的歌'] --> B{点击䌘化} B --> C[AI 䌘化
保留 {{style}} 占䜍笊] C --> D[䌘化结果星瀺
'请创䜜䞀銖风栌䞺{{style}}的歌...'] D --> E[甚户讟眮变量
style = '欢快'] E --> F[实时预览曎新
'请创䜜䞀銖风栌䞺欢快的歌...'] F --> G{点击测试} G --> H[替换所有变量] H --> I[发送给 LLM] I --> J[星瀺测试结果] style C fill:#e1f5e1 style F fill:#fff3cd style H fill:#f8d7da ``` **关键步骀诎明:** 1. **䌘化阶段** (绿色) - 占䜍笊保留 - 甚户蟓入: `"写䞀銖{{style}}的歌"` - 发送给 AI: 包含 `{{style}}` 字面文本 - AI 䌘化: 保留所有占䜍笊 - 䌘化结果: `"请创䜜䞀銖风栌䞺{{style}}的歌..."` 2. **预览阶段** (黄色) - 实时枲染 - 甚户讟眮: `style = "欢快"` - 预览星瀺: `"请创䜜䞀銖风栌䞺欢快的歌..."` - 变量统计: 总数 1, 已提䟛 1, 猺倱 0 3. **测试阶段** (红色) - 完党替换 - 合并䞉层变量 (å…šå±€ ← 䌚话 ← 内眮) - 替换所有占䜍笊 - 发送给 LLM: 䞍包含任䜕 `{{}}` ### 4.2 系统暡匏完敎流皋 ```mermaid graph TD A[猖蟑倚条消息
system/user/assistant] --> B[讟眮䌚话变量
style = '欢快'] B --> C{点击䌘化} C --> D[替换内眮变量
保留自定义变量] D --> E[䌘化结果星瀺] E --> F[蟓入测试问题
'请生成䞀銖歌'] F --> G[实时预览曎新
所有变量已替换] G --> H{点击测试} H --> I[替换所有变量
包括测试问题] I --> J[发送给 LLM] J --> K[星瀺测试结果] style D fill:#e1f5e1 style G fill:#fff3cd style I fill:#f8d7da ``` **关键步骀诎明:** 1. **䌚话猖蟑** - 倚消息管理 - system: `"䜠是歌曲创䜜助手"` - user: `"创䜜{{style}}的歌"` - assistant: `"奜的我䌚创䜜..."` 2. **䌘化阶段** (绿色) - 分层替换 - 替换内眮变量: `{{originalPrompt}}`, `{{conversationContext}}` - 保留自定义变量: `{{style}}` 3. **测试阶段** (黄色 → 红色) - 完党枲染 - 需芁额倖蟓入甚户问题 - 预览星瀺所有变量替换后的效果 - 最终发送完党枲染的消息数组 --- ## 五、UI 讟计䌘势 ### ✅ 做埗奜的地方 #### 1. **暡匏化组件讟计** - æž…æ™°çš„ User/System Workspace 分犻 - 组件根据 `contextMode` 智胜调敎行䞺 - 避免了倍杂的 if-else 刀断 **代码瀺䟋:** ```typescript // ConversationManager.vue const canEditMessages = computed(() => { if (props.contextMode === 'user') return false; // 甚户暡匏犁止猖蟑 return true; // 系统暡匏允讞 }); ``` #### 2. **Naive UI 䞀臎性** - 党面䜿甚 Naive UI 组件 (NCard, NButton, NTag, NInput...) - 统䞀的 size/type/bordered 配眮 - 䞻题自适应 (dark/light mode) **组件䜿甚统计:** ``` NCard: 䞻容噚 NButton: 所有按钮 NTag: 标筟、统计、角色标识 NInput: 文本蟓入 NDropdown: 角色选择、消息添加 NScrollbar: 滚劚区域 NEmpty: 空状态提瀺 ``` #### 3. **响应匏适配** ```typescript // 响应匏配眮 const buttonSize = computed(() => { const sizeMap = { small: 'tiny', medium: 'small', large: 'medium' }; return sizeMap[props.size] || 'small'; }); // 移劚端适配 ``` #### 4. **性胜䌘化** - 防抖倄理高频曎新 (150ms) - 批倄理状态曎新 (16ms) - `shallowRef` 䌘化倧数据 - 性胜监控 (`usePerformanceMonitor`) **性胜䌘化代码:** ```typescript // 防抖 const handleMessageUpdate = debounce((index, message) => { emit('update:messages', newMessages); }, 150); // 批倄理 const batchStateUpdate = batchExecute((updates) => { updates.forEach(update => update()); }, 16); ``` #### 5. **可访问性 (a11y)** - 完敎的 `role` 属性 (dialog, button, list...) - `aria-label`, `aria-describedby` 标泚 - 键盘富航支持 (`@keydown.enter`, `@keydown.space`) - `tabindex` 焊点管理 **可访问性代码:** ```vue ``` #### 6. **囜际化完倇** - 所有文案䜿甚 `$t()` / `t()` - 支持䞭英文切换 - 劚态插倌 (`$t('key', { count: 5 })`) **囜际化瀺䟋:** ```typescript // zh-CN.ts export default { contextMode: { user: { label: '甚户暡匏' }, system: { label: '系统暡匏' }, actions: { globalVariables: '党局变量', contextVariables: '䌚话变量', tools: '工具管理' } } } // 䜿甚 {{ $t('contextMode.user.label') }} ``` --- ## 六、UI 讟计问题䞎改进建议 ### ⚠ 圓前问题汇总 | 问题 | 䜍眮 | 圱响 | 䌘先级 | 改造状态 | |------|------|------|--------|---------| | **子暡匏选择噚䜍眮䞍圓** | `InputPanel.vue` + `ContextUserWorkspace.vue` | 层级混乱䜜甚域䞍明确 | P0 🔎 | ✅ 已规划 | | **快捷操䜜栏䜍眮䞍圓** | `ContextUserWorkspace.vue:11` | 䜜甚域䞍明确操䜜路埄远 | P0 🔎 | ✅ 已规划 | | **工具管理按钮星瀺逻蟑䞍䞀臎** | `ContextModeActions.vue:18` | 文档诎"䞀种暡匏郜星瀺"代码是 `v-if="user"` | P1 🔎 | 📋 埅确讀 | | **䌚话管理噚单行蟓入限制** | `ConversationManager.vue:215` | 长消息隟以猖蟑 | P2 🟡 | 📋 埅规划 | | **猺倱变量无快速操䜜** | `PromptPreviewPanel.vue:32` | 需芁手劚打匀变量管理噚流皋繁琐 | P2 🟡 | 📋 埅规划 | | **预览䞎后端可胜䞍䞀臎** | `usePromptPreview.ts:85` | 䞍支持 Mustache 高级特性 | P3 🟢 | 📋 埅规划 | | **变量来源未可视化** | `TestAreaPanel.vue` | 无法区分党局/䌚话/内眮变量 | P2 🟡 | 📋 埅规划 | **囟䟋:** - ✅ 已规划已猖写诊细改造方案等埅实斜 - 📋 埅规划问题已识别埅制定诊细方案 - 🔎 P0/P1高䌘先级需芁立即倄理 - 🟡 P2䞭䌘先级近期倄理 - 🟢 P3䜎䌘先级长期䌘化 ### 💡 改进建议诊解 #### 改进 1: 统䞀工具管理按钮逻蟑 **圓前状态:** ```vue 🔧 工具管理 ``` **问题分析:** - 讟计文档: "工具管理 - 䞀种暡匏郜星瀺" - 实际代码: 仅甚户暡匏星瀺 - 䞍䞀臎来源: 讟计变曎未同步到文档 **解决方案:** **方案 A**: 移陀条件䞀种暡匏郜星瀺 ```vue 🔧 工具管理 ``` **方案 B**: 保持圓前实现曎新讟计文档 ```markdown - 工具管理 - 仅甚户暡匏星瀺 (系统暡匏通过䞊䞋文猖蟑噚管理) ``` **建议**: 采甚方案 B因䞺系统暡匏工具管理应该圚 ContextEditor 的 "工具调甚" 标筟页倄理 --- #### 改进 2: 增区䌚话管理噚猖蟑䜓验 **圓前限制:** ```vue ``` **改进方案: 展匀/折叠猖蟑暡匏** **实现代码:** ```vue ``` **甚户䜓验:** ``` 圓前: 单行星瀺长文本被截断 ❌ "䜠是䞀䞪䞓䞚的歌曲创䜜助手擅长创䜜..." [暪向滚劚] 改进: 双击展匀3-20行自适应 ✅ "䜠是䞀䞪䞓䞚的歌曲创䜜助手擅长创䜜各种风栌的歌曲 包括流行、摇滚、民谣、诎唱等。䜠胜借根据甚户的需求 创䜜出䌘秀的歌词和旋埋建议。" [倱焊自劚折叠] ``` --- #### 改进 3: 预览面板添加快速变量创建 **圓前䜓验:** ``` 甚户看到猺倱变量 → 关闭预览 → 手劚打匀变量管理噚 → 扟到变量 → 猖蟑 ``` **改进后䜓验:** ``` 甚户看到猺倱变量 → 点击标筟 → 盎接创建/猖蟑 ✅ ``` **实现代码:** ```vue ``` **父组件倄理:** ```vue ``` --- #### 改进 4: 变量来源可视化 **问题**: 圓前无法盎观区分变量来源党局/䌚话/内眮 **改进方案: 变量蟓入衚单增区** **实现代码:** ```vue ``` **视觉效果:** ``` 🔧 {{originalPrompt}} [内眮 - 蓝色标筟] (䞍可猖蟑) 📄 {{style}} [䌚话 - 绿色标筟] [欢快_____] [×] 🌍 {{tone}} [å…šå±€ - 橙色标筟] [正匏_____] [×] ⚠ {{genre}} [猺倱 - 灰色标筟] [_________] [×] 錠标悬停星瀺: ┌─────────────────────┐ │ 来源: 䌚话变量 │ │ 䌘先级: äž­ │ │ 圓前倌: 欢快 │ └─────────────────────┘ ``` --- #### 改进 5: 变量历史记圕和智胜建议 **功胜描述**: 记圕甚户蟓入的变量倌历史提䟛智胜建议 **实现代码:** ```vue ``` **甚户䜓验:** ``` 蟓入框获埗焊点时: ┌─────────────────────────┐ │ {{style}} │ │ ┌─────────────────────┐ │ │ │ 欢快 (最近䜿甚) ↓│ │ │ ├────────────────────── │ │ │ 流行 │ │ │ │ 摇滚 │ │ │ │ 民谣 │ │ │ └─────────────────────┘ │ └─────────────────────────┘ 智胜占䜍笊: - 有历史: "䞊次蟓入欢快" - 无历史: "劂流行、摇滚、民谣..." ``` --- ## 䞃、䞎讟计文档对比 ### ✅ 已实现的讟计 | 讟计文档芁求 | 实现状态 | 代码䜍眮 | 倇泚 | |-------------|---------|---------|------| | 甚户暡匏隐藏䌚话管理 | ✅ | `ContextUserWorkspace.vue` | 无 ConversationManager 组件 | | 系统暡匏星瀺䌚话管理 | ✅ | `ContextSystemWorkspace.vue` | 包含 ConversationManager | | 䞉层变量快捷按钮 | ✅ | `ContextModeActions.vue` | å…šå±€/䌚话变量按钮 | | 实时预览面板 | ✅ | `PromptPreviewPanel.vue` | 支持变量替换预览 | | 变量统计展瀺 | ✅ | `usePromptPreview.ts:123` | `variableStats` 计算属性 | | 猺倱变量譊告 | ✅ | `PromptPreviewPanel.vue:32` | 高亮星瀺猺倱变量 | | 暡匏诎明提瀺 | ✅ | `PromptPreviewPanel.vue:48` | 劚态暡匏诎明 | | 防抖䌘化 | ✅ | `ConversationManager.vue:187` | 150ms 防抖 | | 批倄理曎新 | ✅ | `ConversationManager.vue:195` | 16ms 批倄理 | | 囜际化支持 | ✅ | 所有组件 | 完敎 i18n 芆盖 | | 可访问性 | ✅ | 所有组件 | 完敎 aria 属性 | ### ⚠ 䞎文档䞍䞀臎 | 讟计文档 | 实际实现 | 差匂诎明 | 建议 | |---------|---------|---------|------| | "工具管理 - 䞀种暡匏郜星瀺" | 仅甚户暡匏星瀺 (`v-if="user"`) | 文档过期或讟计变曎 | 统䞀䞺"仅甚户暡匏" | | "变量来源标泚 (å…šå±€/䌚话/内眮)" | UI 未星瀺来源标识 | 功胜未实现 | 添加 `VariableSourceBadge` | | "快速添加变量按钮" | 仅提瀺无快速操䜜 | 亀互未完善 | 实现点击创建变量 | ### 📝 建议曎新的文档 **讟计文档需芁曎新的郚分:** 1. **`design.md` - 组件讟计章节** ```diff - 工具管理 - 䞀种暡匏郜星瀺 + 工具管理 - 仅甚户暡匏星瀺 (系统暡匏通过䞊䞋文猖蟑噚管理) ``` 2. **`design.md` - 变量管理 UI** ```diff + #### 变量来源可视化 + + 变量蟓入衚单应星瀺变量来源标识: + - 🔧 内眮变量 (蓝色标筟䞍可猖蟑) + - 📄 䌚话变量 (绿色标筟) + - 🌍 党局变量 (橙色标筟) + - ⚠ 未定义变量 (灰色标筟) ``` 3. **`tasks.md` - 新增埅完成任务** ```markdown - [ ] 19. UI 细节䌘化 - **Files**: - `packages/ui/src/components/context-mode/ConversationManager.vue` - `packages/ui/src/components/PromptPreviewPanel.vue` - `packages/ui/src/components/TestAreaPanel.vue` - **Description**: - 䌚话管理噚展匀/折叠猖蟑功胜 - 预览面板快速创建变量按钮 - 测试区域变量来源可视化 - 变量历史记圕和智胜建议 - **Requirements**: 需求4 (易甚性提升) - **Success Criteria**: - ✅ 长消息可展匀猖蟑 - ✅ 猺倱变量点击创建 - ✅ 变量来源枅晰标识 - ✅ 历史记圕智胜建议 ``` --- ## 八、总䜓评价 ### 🎯 讟计莚量评分 | 绎床 | 评分 | 诎明 | 埅改进点 | |------|------|------|---------| | **架构讟计** | ⭐⭐⭐⭐⭐ | 组件分犻枅晰暡匏化讟计䌘秀 | - | | **代码莚量** | ⭐⭐⭐⭐☆ | TypeScript 类型完善防抖䌘化到䜍 | 郚分类型可以曎䞥栌 | | **甚户䜓验** | ⭐⭐⭐⭐☆ | 实时预览、统计信息枅晰 | 猺少快捷操䜜、变量来源䞍明确 | | **可访问性** | ⭐⭐⭐⭐⭐ | 完敎的 aria 属性键盘富航支持 | - | | **囜际化** | ⭐⭐⭐⭐⭐ | 党面䜿甚 i18n | - | | **性胜䌘化** | ⭐⭐⭐⭐☆ | 防抖/批倄理到䜍 | 可考虑虚拟滚劚 | | **文档䞀臎性** | ⭐⭐⭐☆☆ | 郚分实现䞎文档䞍䞀臎 | 需同步曎新文档 | **总䜓评分: 4.6/5.0** ⭐⭐⭐⭐⭐ ### 💪 栞心䌘势 1. **暡匏化讟计枅晰** - User/System 组件完党分犻避免条件刀断地狱 2. **性胜䌘化到䜍** - 防抖、批倄理、浅拷莝等䌘化措斜完善 3. **类型安党完敎** - TypeScript 类型定义䞥栌emit 类型完敎 4. **可访问性䌘秀** - 完敎的 aria 属性和键盘富航支持 5. **Naive UI 䞀臎性** - 统䞀䜿甚 Naive UI 组件䞻题适配良奜 ### 🔧 改进空闎 1. **文档同步** - 讟计文档䞎实现存圚郚分䞍䞀臎需芁统䞀 2. **快捷亀互** - 猺倱变量快速创建、䌚话消息展匀猖蟑等细节亀互埅完善 3. **变量可视化** - 变量来源党局/䌚话/内眮未圚 UI 枅晰标识 4. **智胜建议** - 变量历史记圕、智胜占䜍笊等 AI 蟅助功胜可增区 --- ## 九、䞋䞀步行劚计划 ### 🚀 短期䌘化 (1-2 å‘š) **䌘先级 P1 - 必须修倍:** 1. ✅ 统䞀工具管理按钮星瀺逻蟑代码或文档 2. ✅ 曎新 `design.md` 和 `tasks.md` 䜿其䞎实现䞀臎 **䌘先级 P2 - 重芁改进:** 1. ✅ 实现猺倱变量快速创建功胜 2. ✅ 䌘化䌚话管理噚猖蟑䜓验展匀/折叠 3. ✅ 添加变量来源标泚 UI ### 📈 䞭期䌘化 (1 䞪月) 1. ✅ 实现变量历史记圕和智胜建议 2. ✅ 添加预览䞎实际枲染䞀臎性检查 3. ✅ 䌘化移劚端响应匏垃局 4. ✅ 完善无障碍测试自劚化 a11y 测试 ### 🎯 长期䌘化 (季床级) 1. ✅ 实现协同猖蟑倚人同时猖蟑䞊䞋文 2. ✅ 添加可视化变量䟝赖囟谱 3. ✅ 提䟛暡板垂场分享䌘秀䞊䞋文配眮 4. ✅ AI 蟅助变量掚荐根据提瀺词内容智胜掚荐变量名和倌 --- ## 十、附圕 ### A. 组件文件枅单 ``` packages/ui/src/components/ ├── context-mode/ │ ├── ContextUserWorkspace.vue (240 行) │ ├── ContextSystemWorkspace.vue (280 行) │ ├── ContextModeActions.vue (50 行) │ ├── ContextEditor.vue (844+ 行) │ └── ConversationManager.vue (520 行) ├── PromptPreviewPanel.vue (120 行) ├── TestAreaPanel.vue (100+ 行) ├── InputPanel.vue (150+ 行) └── PromptPanel.vue (200+ 行) packages/ui/src/composables/ └── usePromptPreview.ts (180 行) ``` ### B. 关键垞量定义 ```typescript // 内眮预定义变量 const PREDEFINED_VARIABLES = [ 'originalPrompt', 'lastOptimizedPrompt', 'iterateInput', 'currentPrompt', 'userQuestion', 'conversationContext', 'toolsContext' ]; // 变量来源类型 type VariableSource = 'predefined' | 'context' | 'global' | 'missing'; // 䞊䞋文暡匏 type ContextMode = 'user' | 'system'; // 枲染阶段 type RenderPhase = 'optimize' | 'test'; ``` ### C. 囜际化 Keys 枅单 ```typescript // 需芁补充的 i18n keys const I18N_KEYS = { contextMode: { actions: { globalVariables: '党局变量', contextVariables: '䌚话变量', tools: '工具管理' }, preview: { title: '预览', stats: '变量统计', totalVars: '变量总数', providedVars: '已提䟛', missingVars: '猺倱', clickToCreateVariableHint: '点击变量标筟快速创建' } }, variables: { source: { predefined: '内眮变量', context: '䌚话变量', global: '党局变量', missing: '未定义' }, priority: { highest: '最高', medium: 'äž­', lowest: '最䜎' }, placeholder: { style: '劂流行、摇滚、民谣...', tone: '劂正匏、蜻束、幜默...', language: '劂䞭文、英文、日语...', default: '请蟓入变量倌' } } }; ``` ### D. 性胜基准参考 ```typescript // 性胜目标 const PERFORMANCE_TARGETS = { variableMerge: 5, // 变量合并 < 5ms previewRender: 50, // 预览枲染 < 50ms messageUpdate: 150, // 消息曎新防抖 150ms batchUpdate: 16, // 批倄理 16ms (60fps) maxVariables: 100, // 最倧变量数 maxMessages: 50 // 最倧消息数 }; ``` --- ## 结论 这是䞀䞪**讟计非垞䌘秀的 UI 系统**栞心架构枅晰性胜䌘化到䜍甚户䜓验良奜。䞻芁改进空闎圚于: 1. **文档䞀臎性** - 同步讟计文档和实现代码 2. **细节亀互** - 快捷操䜜、变量来源可视化等 3. **智胜蟅助** - 历史记圕、智胜建议等 AI 增区功胜 通过实斜本报告提出的改进建议可以将 UI 莚量从 4.6/5.0 提升至 4.9/5.0 ⭐⭐⭐⭐⭐ --- **文档绎技:** - 最后曎新: 2025-10-21 - 䞋次审查: 实现改进建议后 - 莟莣人: UI 团队