docs/archives/121-context-editor-refactor/design.md
本设计文档定义了基于"主面板轻量管理 + 全屏编辑器深度管理"分工模式的上下文编辑器架构重构的技术实现方案。重构将移除ConversationMessageEditor和ConversationSection组件，简化ConversationManager为轻量级管理界面，增强ContextEditor为全功能编辑器，并实现两者间的双向数据绑定。
packages/ui/src/components/目录packages/ui/src/types/components.tsuseResponsive、usePerformanceMonitor、useAccessibilitygraph TD
A[父组件] --> B[共享响应式状态]
B --> B1[messages: ref]
B --> B2[variables: ref]
B --> C[ConversationManager
轻量管理]
B --> D[ContextEditor
深度编辑]
C --> E[轻量功能模块]
E --> E1[消息列表显示]
E --> E2[内联编辑]
E --> E3[基础操作]
E --> E4[统计信息]
D --> F[深度功能模块]
F --> F1[完整编辑器]
F --> F2[模板管理
按模式+语言分类]
F --> F3[导入导出
多格式+智能转换]
F --> F4[变量管理批量处理]
B --> G[变量管理器]
C --> G
D --> G
interface ConversationManagerProps extends BaseComponentProps {
// 双向绑定数据（直接操作父级ref）
messages: ConversationMessage[]
availableVariables?: Record<string, string>
// 功能函数（提供默认实现）
scanVariables?: (content: string) => string[] // 默认返回空数组
replaceVariables?: (content: string, variables?: Record<string, string>) => string // 默认透传内容
isPredefinedVariable?: (name: string) => boolean // 默认返回false
// UI控制
title?: string
readonly?: boolean
collapsible?: boolean
showVariablePreview?: boolean
toolCount?: number
maxHeight?: number // 限制为number类型，内部拼接px
}
interface ConversationManagerEvents extends BaseComponentEvents {
// 数据更新（v-model双向绑定）
'update:messages': (messages: ConversationMessage[]) => void
// 操作事件
messageChange: (index: number, message: ConversationMessage, action: 'add' | 'update' | 'delete') => void
messageReorder: (fromIndex: number, toIndex: number) => void
// 导航事件
openContextEditor: () => void
createVariable: (name: string) => void
openVariableManager: (variableName?: string) => void
}
interface ContextEditorProps extends BaseComponentProps {
// 现有属性
visible: boolean
state?: ContextEditorState
showToolManager?: boolean
// 双向绑定数据
messages: ConversationMessage[]
variables: Record<string, string>
// 新增功能控制
optimizationMode?: 'system' | 'user' // 用于模板筛选
enableTemplateManager?: boolean
enableImportExport?: boolean
// 透传函数（与ConversationManager共享）
scanVariables?: (content: string) => string[]
replaceVariables?: (content: string, variables?: Record<string, string>) => string
isPredefinedVariable?: (name: string) => boolean
}
interface ContextEditorEvents extends BaseComponentEvents {
// UI状态
'update:visible': (visible: boolean) => void
'update:state': (state: ContextEditorState) => void
// 操作事件
save: (context: { messages: ConversationMessage[]; variables: Record<string, string> }) => void
cancel: () => void
// 变量管理
openVariableManager: (variableName?: string) => void
createVariable: (name: string, defaultValue?: string) => void
}
模板管理集成：
导入导出功能：
智能格式转换：
数据绑定对齐：确保与ConversationManager的双向数据同步
重要说明：整个开发过程中，废弃的组件将保留作为参考，确保所有功能都能正确迁移。只有在验证所有功能都正常工作后，才在最后阶段进行组件清理。
<template>
<!-- kebab-case用于模板 -->
<ConversationManager
@open-context-editor="handleOpenEditor"
@create-variable="handleCreateVariable"
@open-variable-manager="handleOpenVariableManager"
/>
</template>
// camelCase用于类型定义
interface ConversationManagerEvents {
openContextEditor: () => void
createVariable: (name: string) => void
openVariableManager: (variableName?: string) => void
}