sanguo_moziplus_v2/docs/design/archive-2.0/frontend-principles.md

moziplus v2 前端设计原则

创建: 2026-05-15 状态: 用户确认

核心原则

UI 样式和布局参考 v1.0，具体功能设计按 v2.6。

维度	参考谁	说明
样式（CSS/主题/配色）	v1.0 朝堂古风设计系统	深蓝底 + mc-card + m-section + CSS 变量体系
布局（页面结构/组件位置）	v1.0 Dashboard	侧边栏导航 + 主内容区 + 弹窗详情
组件风格	v1.0 TaskModal / EdictBoard	卡片/管道/状态徽章等视觉元素
功能设计	v2.6 课题7+9	5页精简、推送分级、评论线程、DAG拓扑、AI Briefing
交互逻辑	v2.6 课题7+9	四种交互模式、超时兜底、乐观锁

参考文件

• v1.0 前端源码: ~/.sanguo_projects/sanguo_moziplus/dashboard/
• v1.0 设计文档: ~/.sanguo_projects/sanguo_moziplus/docs/design/dashboard-frontend-design.md
• v2.6 课题7+9方案: ~/.openclaw/sanguo_projects/sanguo_moziplus_v2/docs/design/topic7-interaction-dashboard-proposal.md
• Edict 组件参考: ~/.openclaw/knowledge_base/edict/

页面对照（v1.0 10Tab → v2.6 5页）

v2.6 页面	v1.0 来源	功能变更
任务看板	任务看板 + 编排调度	合并，加 DAG 拓扑视图
全局监控	将军总览 + 会话监控	合并，加心跳可视化
产出档案	奏折阁	保留，加产出物预览
系统配置	模型配置 + 技能配置	合并为一个配置页
AI 简报	无（新增）	v2.6 新增，AI 自动生成

技术栈（延续 v1.0）

• React 18 + Vite + TypeScript
• Zustand 状态管理
• Tailwind CSS
• 轮询(Phase 2) → WebSocket(Phase 3)