0 Fork 0

Files

T

WorkBuddy eee042c855 ③段第八轮收口：功能入口卡按参照物对齐＋导航按 tiaoyue 源站重建＋密度 A 方案

原型（执行会话/目标-…-d85687/ui/mcn-workbench.html）
- 功能入口卡改三段纵向（图标／标题／描述各一行），68 → 111.19px，对齐 mcn-work-shop
  参考卡（同视口 1249×1277 实测 133px），补 --sh-L1 投影；主因是排布不是字号
- 左侧导航重建：由「纯图标 ＋ 悬停提示」改为 64px 药丸浮栏，图标 24 在上、名字常驻在下
  （名字一律 2 字，说明走 data-tip）；真值取自 tiaoyue 源站实测
  （栏 64／内衬 3／圆角 100／项 56×78／字 12px-500-行高 16）
- 密度 A 方案：≤1000 卡最小宽 200→160、≤820 统计条最小宽 132→96
  （两处 auto-fit 只在真装不下时才缩）⇒ 768／700／560 三处转绿，其余 10 个视口未动
- 移动档隐藏导航条横向滚动轨（16px 轨道曾吃掉 52px 条高的三成，还白吃 16px 主区）

取证通道
- _tools/cap.py 改为「只连不起」：只连 9223 常驻实例，视口走 Emulation.setDeviceMetricsOverride，
  不再自起 headless Chrome（顺带解除 500px 视口下限，390×844 可测）
- _tools/check_js.py 新增第 5 道门禁（node --check ＋ 模板内注释反引号扫描）

文档
- 复盘-为什么第一版做得很差.md（新建）：13 轮时间轴／四类反作用／三重归因／已修与仍欠
- 3d-审查报告.md：更正 §九 那条假 ✓（把「§5.5 五条逐条过完」记成机核，实际零覆盖，
  正是「五道闸门全绿却难看」的开关），补 §十二 功能入口卡高差、§十三 tiaoyue 导航逐条对照
- 3b-实测记录.md／DESIGN.md／3c-GPT 参考版与会诊／布局排版参考 ×2

机制与记忆
- .workbuddy/collab/collabctl.py：off --ws 不再全机扫描（原先一次杀掉他区＋看板共 5 个进程）
- .workbuddy/memory/：本轮纪律与实测真值
- .gitignore：补排运行时噪音（ui/_scratch／__pycache__／浏览器取证临时目录／*.bak-*／一次性脚本）

闸门：语法全过／骨架八页 39 板块／变异对照 15-15／逐视口 14 绿（500×844 唯一红，缺口待拍板）／命名 2060-0-27

2026-10-08 22:21:42 +08:00

8.0 KiB

Raw Permalink Blame History

布局排版参考 · mcn-work-shop（已上线的那套界面）

来源（只读取证，⛔ 未改对方任何文件）： E:/ProgramData/AIProject/mcn-short-video/project/短视频脚本创作/V1.0/mcn-work-shop/public/ —— index.html(1.8 KB) ＋ style.css(56 KB) ＋ app.js(54 KB) ＋ data-pages.js(173 KB)。用户 2026-10-08 指令：「AGENT 工具先按照这个界面布局排版」。本份只取布局排版（外壳怎么分、内容怎么排、间距与层级），⛔ 不抄它的业务内容。

一、外壳（三段，但侧栏不是常驻）

顶栏 .topbar：品牌位（图标）＋ 面包屑 .crumbs ＋右侧操作组 .top-actions（首页／帮助／设置，三个 ghost 按钮）。 ⇒ 导航靠面包屑，不靠固定侧栏。
主区 main#view：单容器装 .panel；.panel 内衬 24px、自己滚（overflow:auto）。
整页不滚：html, body { height:100%; overflow:hidden }（注释明写：消除顶栏 1px 边导致的第二层滚动条，滚动统一由 main#view 承担）。
侧栏只在需要时出现：产出浏览页才是 .files-layout（flex）＝ .sidebar(320px 固定) ＋ .content-view(flex:1，预览)。

⛔ 与我们现原型的差别：我们是「240px 固定侧栏常驻＋ sticky 顶栏」，八页一律同一外壳；它是顶栏为主、侧栏按需。

二、首页形态（这一条最值得照搬）

.func-grid：max-width:900px; margin:0 auto; grid-template-columns:1fr; gap:14px ⇒ 单列、居中、限宽。
.func-card：白底＋ 1px 边＋ 圆角 12px ＋内衬 16px 18px ＋轻阴影 ⇒ 一个功能一张卡，卡独占一行。
🔴 .qa-row：问答行是首页的一等公民 —— .q 用强调色（橙）加粗、.a 用次级色（灰）缩进；可复制行 hover 变浅底并出现复制图标。 ⇒ AI 交互以「一问一答的行」呈现，⛔ 不是把 AI 塞进某个角落的按钮里。

⛔ 我们的原型：八页都是"卡片堆说明文字"，没有问答行这种形态，AI 只在 P4 有一个产出区（本轮刚补的）。

三、内容页形态

树＋预览：.sidebar(320px) 内 .file-tree → .tree-node / .tree-row / .tree-children；右侧 .content-view → .preview。
有图表：index.html 直接引 vendor/echarts.min.js ⇒ 数据是真画图的。
文件类型有各自标记（.ext-md / .ext-json / .ext-xlsx / .ext-txt）⇒ 列表项有类型标识。

⛔ 我们的原型：<svg> 0、<canvas> 0、chart 0 ⇒ 一处图都没有。

四、令牌（它的取值）

--bg:#f5f6f8;   --panel:#ffffff;  --border:#e3e6ea;
--text:#24292f; --dim:#6b7280;
--primary:#2f6fed;  --primary-soft:#eaf1fe;   /* 蓝 */
--accent:#e8590c;   --danger:#d93026;          /* 橙 / 红 */
--shadow:0 1px 3px rgba(0,0,0,.08);
font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; font-size:16px;

⛔ 与我们现用（tiaoyue）的差别：

项	它	我们现在（tiaoyue）
底色	冷灰白 `#f5f6f8`	暖纸白 `#faf9f5`
主色	蓝 `#2f6fed`	紫 `#9E4CFF`
强调色	橙 `#e8590c`	无（紫兼作强调）
卡片圆角	12px	24px
阴影	极轻一层	L1/L2/L3 三层
正文字号	16px	14–16px

五、落地清单（③段重做时逐条照做）

1、外壳改「顶栏＋面包屑＋主区」，侧栏按需出现（文件/资产浏览时才用 320px 侧栏），⛔ 不再八页一律固定侧栏。 2、html/body 禁止整页滚动，滚动只由主区承担。 3、首页（P1）改成限宽居中单列卡片流（max-width 900、gap 14、卡圆角 12），一个功能一张卡。 4、补 AI 问答行形态：问＝强调色、答＝次级色缩进、可复制 ⇒ 让 AI 出现在首页，而不只在创作台。 5、内容页补图表（直接引 echarts 或等价轻量库），列表项补类型标识。 6、卡片内衬收到 16–18、圆角收到 12、阴影只留一层 ⇒ 从"大留白纸感"换成"紧凑工具感"。

⚠️ 第 4 条（配色换不换成它这套）需用户拍板 —— 见主会话转出的待拍板项。

六、组件细节实测（2026-10-08 补，用户口径「每个组件的样式高度 ICON 都是需要学习的」）

上一版这份笔记只记了「有没有这个组件」和几个粗值 —— 用户点的就是这个：细节没量到底。本轮回源站 public/style.css ＋ public/app.js 逐件量，带行号。全量对照（含「刻意不学」的 3 条与理由）在 3d-审查报告.md §十一，这里只留最要紧的几条。

① 功能入口卡（.data-card，style.css:387-392 ＋ app.js:332-336）—— 这是重点

⚠️ 它有三个子元素，不是一个：.data-card-icon ＋ .data-card-title ＋ .data-card-desc。
🔴 图标是有的，而且规格明确：<span class="data-card-icon">${svgIcon(c.icon, **22**)}</span> ⇒ 22px 单色图标，颜色 var(--primary)。
卡内布局：flex; flex-direction:column; align-items:flex-start; gap:**6px** ⇒ 图标 / 标题 / 描述三段纵向。
内衬 padding:**16px 18px**；圆角 12px；border:1px solid；box-shadow。
标题 17px/600；描述 14px/dim。
网格 .data-cards：repeat(auto-fill, minmax(**200px**,1fr))；gap:14px；margin:18px 0 24px。
hover：border-color:主色 ＋ transform:translateY(-2px) ＋ box-shadow:0 4px 12px rgba(主色,.15) ＋ transition:all .15s。
🔴 渲染出来的实测高（2026-10-08 第七轮补；同视口 1249×1277 并排量，原始读数 _scratch/ref-measure.txt）：卡高 133px（描述折两行时）／同宽下 113px（描述一行时）。拆开正是 内衬 16+16 ＋ 描边 2 ＋ 图标 22 ＋ 间距 6 ＋ 标题 25 ＋ 间距 6 ＋ 描述 40 或 20 ＝ 133 ／ 113。
- 子元素实测：.data-card-icon 22×22（里头的 <svg> 也是 22，stroke-width=2）；.data-card-title 高 25px（17px × normal，即 1.47）；.data-card-desc 高 40px（14px × 2 行）／20px（1 行）。
- ⚠️ 这张卡「看起来厚」有四个来源，缺一个都不像：①三段纵向 ②内衬 16/18 ③字号 17 与 14 ④卡片自带阴影 0 1px 3px rgba(0,0,0,.08)。
- 同视口下我方第一版只有 68px（图标与标题并成一行、内衬 12/16、字号 16/12、无阴影）⇒ 差 65px。主因是排布（少一段＋少两次 6px 段间距），不是字号。

② 图标系统（svgIcon()，app.js:196-207）

规格：viewBox 24 / fill:none / stroke:currentColor / stroke-width 2 / stroke-linecap:round / stroke-linejoin:round（lucide 风格）。
尺寸用法：功能卡标题 18、数据卡 22、按钮默认 16。
颜色：ICON_COLORS 给 8 个图标配了 8 个色相（trending-up #e8590c / users #2f6fed / pen #ec4899 / flask #0ea5e9 / lightbulb #d99a2b / refresh #0f7f8f / chart #d6336c / wrench #5b6470）。

③ 统计条（.home-stat-item，style.css:383-386）

无框：flex:1; padding:2px 12px; border-right:1px solid rgba(主色,.16) ⇒ 靠竖分隔线分格，不是一个一个白底卡。
值 **26px / 700 / 主色**；标签 13px / dim；gap 5px。

④ 问答区（.qa-row / .func-card .qa，style.css:78-84）

.qa-row{padding:6px 8px; font-size:15px; line-height:1.55}；.q 主色 500；.a dim 缩进 1.2em。
可复制的行：hover 变浅底＋尾部出现 📋 图标。
问答区上方一条 border-top:1px dashed 虚线＋ padding-top:8px。

⑤ 其他：顶栏 .topbar{padding:10px 20px; gap:20px}（高约 52px）；次级按钮 .ghost{padding:6px 14px; radius 8px; font-size 15px; gap 6px}；面板 .panel{padding:24px}。

⚠️ 三条刻意不学（与基础层 / 本项目令牌冲突，理由在 3d §十一）：它的冷灰蓝品牌色、8 色相图标、圆角 12px 体系。

8.0 KiB Raw Permalink Blame History Unescape Escape