# 布局排版参考 · 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 ⇒ 一处图都没有。

## 四、令牌（它的取值）

```css
--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 体系**。