133 lines
10 KiB
Markdown
133 lines
10 KiB
Markdown
# DevFlow 布局样式大重构设计（2026-10-18）
|
||
|
||
> 依据：用户令「布局样式大重构，参考 D:\Downloads\u-agent」+「每页样式 DRY 提取统一定义」
|
||
> 输入：u-agent设计系统勘察-2026-10-18.md · 样式走查-1018/报告-布局全局审计.md · 报告-配色全局审计.md
|
||
> 原则：DRY 单一真值 · token 化 · 高密度（u-agent 13px 范式）· 双主题保留 · 紫 accent 品牌保留 · 视觉回归可控（dev 模式实时预览）
|
||
|
||
## 0. 现状诊断（三份勘察合并）
|
||
|
||
| 维度 | 现状 | u-agent 基准 | 差距 |
|
||
|---|---|---|---|
|
||
| 基准字号 | html 14px，aichat 已降 9-13，views 仍 11-14 | 13px 全局 | 功能页粗一档，密度断层 |
|
||
| 页头 | 三套并存（aichat 46px / Dashboard 18px 标题 / 功能页 24px h1 无固定高） | 46px 定高单行 | 全站统一为紧凑单行 |
|
||
| 侧栏 | 192px | 250-280px | 偏窄，功能页导航拥挤 |
|
||
| 按钮 | .btn 双基类分叉（global 34px vs settings 30px）+ 图标钮三档 | .cbtn 单基类 | 合一 30px |
|
||
| 徽章/tag | 圆角 3/4/6/8/10 五档并存；.df-tag 3px 字面量 | 小标签小圆角一档 | 收敛一档入 token |
|
||
| 圆角 token | 覆盖 75.5%，9 处 var 回退值写错（静默降档） | — | 修回退+字面量 97 处归 token |
|
||
| 间距 | 76.7% 收敛，7px×8/82px 手算对齐等离群 | 4px 刻度 | 离群归位+魔法数 token 化 |
|
||
| 字号 | 半像素 24 处（10.5/11.5/12.5）+17px 孤值 | 纯整数谱 | 归整 |
|
||
| 输入框 | 三档并存（21-22 / 26-27 / 30） | 30px 单档为主 | 行内搜索统一 26px 档 |
|
||
| 小节头 | 各页自造 | 9-10px uppercase mono 字距 统一范式 | 抽 .df-sec-h |
|
||
| 公共技法 | 无 | hairline 网格 kv 卡 / 发丝线行 / 染色两档 | 引入公共类 |
|
||
|
||
## 1. Token 层扩展（global.css :root，单一真值）
|
||
|
||
### 1.1 新增 token
|
||
|
||
```css
|
||
/* 字号谱（纯整数，对齐 u-agent） */
|
||
--df-fs-micro: 9px; /* 小节头/tag/计数 */
|
||
--df-fs-meta: 10px; /* 徽章/元数据 */
|
||
--df-fs-aux: 11px; /* 辅助文字/列表次级 */
|
||
--df-fs-ctrl: 12px; /* 控件文字/小按钮 */
|
||
--df-fs-body: 13px; /* 正文基准 */
|
||
--df-fs-title: 16px; /* 页头标题 */
|
||
|
||
/* 控件高度档 */
|
||
--df-h-btn: 30px; /* 主按钮（.btn 合一目标） */
|
||
--df-h-input: 26px; /* 行内输入/搜索 */
|
||
--df-h-modal-input: 30px;
|
||
--df-h-icon-btn: 26px; /* 图标钮统一档（22/26/28 收敛） */
|
||
|
||
/* 微内距暗刻度（chip/badge 族） */
|
||
--df-pad-chip: 1px 6px;
|
||
--df-pad-badge: 3px 8px;
|
||
|
||
/* 图标槽 */
|
||
--df-icon-gutter: 42px; /* ToolCard 图标槽（38/42 魔法数归一） */
|
||
|
||
/* 染色两档（语义色背景/边框透明度统一，双主题各配） */
|
||
/* 由 --df-*-bg（12% 底）+ 新增 --df-*-bd（30% 边）承担，消除散落 rgba 字面量 */
|
||
--df-success-bd / --df-warning-bd / --df-danger-bd / --df-info-bd / --df-accent-bd
|
||
```
|
||
|
||
### 1.2 修正既有错误
|
||
- 9 处 var 回退值写错（lg 8→10 / md 6→8 / xs 3→2）：**删回退值**（token 必注入，回退是静默降档源）
|
||
- .df-tag 圆角 3px 字面量 → var(--df-radius-xs)
|
||
- body 基准 14px → 13px（line-height 1.5 保持）；aichat 已对齐，功能页随页头波次跟进
|
||
|
||
## 2. 公共组件层（global.css/components.css 单一来源）
|
||
|
||
| 公共类 | 来源 | 定义去向 |
|
||
|---|---|---|
|
||
| `.btn` 族 | global+settings 双基类合一 30px/8px 16px/13px | global.css 唯一定义，settings.css 删副本 |
|
||
| `.df-sec-h` | u-agent 小节头范式（10px uppercase letter-spacing .5px mono tx3） | global.css 新增 |
|
||
| `.df-kv` / `.df-kv-i/k/v` | hairline 网格档案卡（gap:1px+bd 背景） | components.css 新增 |
|
||
| `.df-row` | 发丝线行（border-bottom+last-child none） | components.css 新增 |
|
||
| `.df-note` | 通知条（info/warning/danger 染色） | components.css 新增 |
|
||
| `.df-pill` | 状态胶囊（全圆+染色底） | components.css 新增 |
|
||
| `.df-tab` / `.df-tab--active` | 下划线 tab（2px accent 底线+计数 chip） | components.css 新增 |
|
||
| 既有 `.df-dot/.df-badge/.df-tag/.df-mono/.df-hstat` | 第五十四段已注入 | 保留，随 1.2 修圆角 |
|
||
|
||
## 3. 页面适配波（DRY 提取：各页 scoped 重复样式→公共类）
|
||
|
||
- **页头统一**：功能页 8 页 + Dashboard 全部改 `.page-header` 紧凑单行（h1 16px/500 + 定高 46px 等价 padding + header-actions gap 8px），删各页自造页头样式
|
||
- **侧栏 192→220px**（AppSidebar 一处）
|
||
- **输入框**：GitChanges/Provider 行内 21-22px → var(--df-h-input)
|
||
- **列表/详情页**：status-tag/status-* 徽章族（components.css 已有 13 个状态色）染边补齐 + 圆角统一；Details 页 kv 区改 .df-kv；tab 行改 .df-tab
|
||
- **settings 族**：settings.css .btn 副本删除并轨；面板内重复 card/row 样式提取
|
||
- **ai 族**（已对齐 workbench）：仅扫尾——圆角字面量 9px 气泡入注释锚定、7px 代码块归 token、tag 圆角收敛
|
||
- **离群修复**：7px 间距→6/8、ProviderPanel 82px 手算对齐改结构、26px 图标位 calc、FilePreview outline-name 补 nowrap（确定 bug）、定宽输入/浮层补 max-width
|
||
|
||
## 4. 实施波次（文件零交集，逐波门禁 vue-tsc + 目检）
|
||
|
||
| 波 | 内容 | 文件面 |
|
||
|---|---|---|
|
||
| R0 底座 | token 扩展+回退修正+公共类新增+.btn 合一+body 13px | styles/global.css + components.css + settings/settings.css |
|
||
| R1 功能页族 | Projects/Tasks/Ideas/Knowledge/AuditLog 页头+密度+tag 收敛 | views/*.vue（5 页可再拆并行） |
|
||
| R2 详情页族 | ProjectDetail/TaskDetail/IdeaDetail（kv/tab/徽章/页头） | 3 个 Detail.vue 可并行 |
|
||
| R3 设置族 | settings.css 并轨+面板 DRY 提取 | components/settings/* |
|
||
| R4 ai 扫尾+杂项 | 圆角/token 扫尾+离群修复+FilePreview bug | components/ai/* + 杂项 |
|
||
| R5 配色收口 | 按配色审计报告优先级表 10 项实施（报告 temp/样式走查-1018/报告-配色全局审计.md）：①幽灵 token 清零（含 --df-bg-secondary 等 6 处声明失效真 bug）②.status-* 徽章系 token 三件套③白叠层 64 处入 token（--df-hover/--df-zebra 浅色覆写黑叠层）④回退值 111 处全删⑤global.css 边框 rgba 改 color-mix⑥--df-neutral-bg⑦views 族 rgba 清零⑧--df-shadow-sm/md⑨alpha 收敛⑩豁免注释 | 按报告分布；R5 先补 token（叠层/中性/阴影）再批量替换 |
|
||
|
||
每波：前台同步代理实施 → 主代理 diff 核查 + vue-tsc → dev 窗口目检（用户可实时看）。R0 先行（其他波依赖新 token/类），R1-R4 在 R0 后并行。
|
||
|
||
## 5. 拍板点（按推荐值先行，用户可回改）
|
||
|
||
1. **基准字号 13px**（功能页降一档，信息密度对齐 u-agent；若觉偏小回 14 仅改一处 token 层 body 声明）
|
||
2. **侧栏 220px**（192→220 折中，非 250）
|
||
3. **页头 16px 标题+紧凑单行**（废 24px 大标题）
|
||
4. **按钮 30px 主档**（对齐 settings 既有 30px 而非 global 34px）
|
||
5. tag/badge 圆角统一 xs(2px)/sm(4px) 档
|
||
|
||
## 6. 单文件拆分轨（[补4]，与样式波错峰）
|
||
|
||
行数实测（2026-10-18）：MessageList 3297 / ProjectDetail 1750 / TopBar 1700 / Tasks 1540 / ChatInput 1503 / IdeaDetail 1228 / ConversationSidebar 1226 / TaskDetail 1160 / AiChat 1145 / FilePreview 1144 / ProviderPanel 964 / FileExplorer 932 / ToolResultBody 895。
|
||
|
||
**拆分纪律**：
|
||
- 纯拆分不改行为——样式/逻辑原样搬迁，验收=vue-tsc 0 + 构建过 + dev 窗口目检无视觉回归
|
||
- 拆分边界按「区块自治」（模板区块+配套样式+相关逻辑成组），优先抽展示型子组件；共享状态经 props/emits 或既有 composable，不新造 store
|
||
- **与样式波互斥调度**：同一文件的样式适配与拆分不并行（样式先行，拆分在后——拆完再改样式要重新定位锚点）
|
||
- 拆分批次（样式波收口后启动，每批文件零交集）：
|
||
- C1 ai 族：MessageList(3297→消息项/工具卡区/折叠条带等子件) → ChatInput(1503) → TopBar(1700)
|
||
- C2 项目族：ProjectDetail(1750) → FilePreview(1144) → FileExplorer(932)
|
||
- C3 任务/想法族：Tasks(1540) → TaskDetail(1160) → IdeaDetail(1228)
|
||
- C4 侧栏+设置族：ConversationSidebar(1226) → AiChat(1145) → ProviderPanel(964) → ToolResultBody(895)
|
||
- 每文件拆分目标：主文件 ≤600 行，子件单一职责
|
||
|
||
## 7. 整洁性轨（用户令 2026-10-18：代码整洁性全量处理+样式代码统一抽取，[补1] 共享的样式才抽取）
|
||
|
||
探针实测（dead-style-scan.json / dup-style-scan.json，脚本在 temp/样式走查-1018/）：
|
||
- 死样式候选 368 处 / 56 文件（MessageList 34/ToolCard 25/TopBar 20/ActiveProjectsPanel 19 领衔）；**假阳性规则**：Vue transition 生成类（xxx-enter/leave/from/to/active 由 `<transition name="xxx">` 隐式消费，非死）、动态拼接类（`'status-' + s`）、子组件透传类——删前须逐处验证
|
||
- 跨文件共享重复规则 49 条；典型双轨：`.ai-toast-*`（AiChat/ApprovalPopup）与 `.toast-*`（Knowledge/Settings）同义共存；`.confirm-actions`×3；`@keyframes spin/shimmer` 10/3 文件各写一份
|
||
|
||
**底座已落**（主代理亲码 global.css）：`.df-toast` 四色族+过渡 / `@keyframes df-spin`/`df-shimmer` / `.df-confirm-actions`+过渡 / `.df-diff-pre` 族。
|
||
|
||
**D 批分路**（R5 收口后启动，文件族零交集，每路两件事：本族死样式验证删除 + 本族共享类消费替换）：
|
||
- D-A ai 族+根组件（MessageList/ToolCard/TopBar/ConversationSidebar/ChatInput/ToolResultBody/AiChat/ToolCardList）：死样式 100+ 处 + ai-toast 族消费 + spin/shimmer keyframes 消费 + .ai-tool-diff-pre 族并轨 .df-diff-pre
|
||
- D-B views+project 族（Knowledge/ApprovalPopup/Settings/Projects/ProjectDetail/Tasks/AuditLog/FilePreview/FileExplorer/GitChanges/ProjectCard）：死样式 100+ 处 + .toast-* 族消费 + confirm-actions 消费
|
||
- D-C settings+layout+dashboard+knowledge 族（AdvancedSection/AllowedDirsPanel/UpdateBadge/ActiveProjectsPanel/KnowledgeDetail 等）：死样式残余 + 确认弹层消费
|
||
- D4 TS/模板整洁（随各路顺带）：未用 import/变量（vue-tsc noUnusedLocals 级）、console.log 残留、死模板分支——纯删不改语义
|
||
|
||
**验收纪律**：每路 vue-tsc 0 + grep 证据（死样式删除数/共享类消费数）；transition 类假阳性必须 grep `<transition name=` 确认后再删。
|