# 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)