WorkBuddy
eee042c855
原型（执行会话/目标-…-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
47 lines
3.0 KiB
Markdown
47 lines
3.0 KiB
Markdown
# 布局排版参考 · AI 内容工作台（小曾 · 两视频关键帧）
|
|
|
|
> 来源：`参考资料/AI内容工作台_功能点与截图/`（16 张关键帧截图 ＋ `AI内容工作台_功能点梳理.md`）。
|
|
> 两视频＝Bilibili `BV1gsHn6AEk6`（工作台 3.0）＋ YouTube `jVHyoCYidLM`（工作台 2.0）。
|
|
> 用途：与本项目同品类（内容运营工作台）的**重点布局／风格参照**。⛔ 是参照物，不是照抄目标。
|
|
|
|
---
|
|
|
|
## 一、外壳与导航
|
|
|
|
- **顶部横向 Tab 导航**（⛔ 不是左侧栏）：十个 Tab，按创作工作流排序 —— 首页 / 对标与热点 / 选题 / 拆解与沉淀 / 创作 / 发布与经营 / 计划 / 常用助手 / 画板 / 收支。
|
|
- 主体是**居中的单列宽内容区**，顶部放一个**全局搜索框**（「搜索选题、文案和资料…」）。
|
|
- 子层用**胶囊子 Tab**：如 精选总览 / 对标动态 / AI 热点 / Twitter 动态；创作台内 聊思路 / 写文案 / 起标题 / 做封面 / 发布检查。
|
|
|
|
## 二、首页
|
|
|
|
- **Hero 区**＝问候 ＋ 大钟（「上午好 11:55」）＋ 日期 ＋ 手绘插画底；右侧一张**日历卡**。
|
|
- 首页下半：本月之星（本月表现最好的作品）、作品与机会陈列。
|
|
|
|
## 三、数据与列表
|
|
|
|
- **指标卡一排**：四张等宽卡，**各自一个色相**（绿 / 紫 / 蓝 / 土黄），卡内＝标签 ＋ 大数字 ＋ 单位小字。
|
|
- **资产库＝表格**：三列（文案原文含标题 ／ 这类角度叫什么 ／ 原文怎么写）；上方一行说明「18 条资产 · 左右滚动查看各维度，点击名称查看完整拆解」。
|
|
- 对标内容：卡片带「N 倍平时互动」的倍数徽标。
|
|
|
|
## 四、创作流水线
|
|
|
|
- 顶部子 Tab 本身就是流水线；**发布检查**页给了明确的**分步指示**「1 导入文案 → 2 检查问题 → 3 处理建议 → 4 复核后发布」。
|
|
- 主体＝左（表单与动作：发布平台 / 正文 / 封面 / 开始检查）＋ 右（内容正文预览）。
|
|
- 主按钮是**橙色药丸**（更新动态 / 开始检查），次按钮描边。
|
|
|
|
## 五、视觉调性（这份参考自己的）
|
|
|
|
- **深色底**（墨绿、近黑），圆角面板约 10–14px，阴影克制。
|
|
- **多色强调**：每张指标卡一个色相；主按钮用**橙**。
|
|
- 手绘插画（Hero 底、图标）。
|
|
- 数字用近似等宽的字形。
|
|
|
|
## 六、我们能借什么、得先定什么（供③段取舍）
|
|
|
|
- **可借（风格中性）**：顶部按工作流排序的 Tab、居中宽列 ＋ 顶部搜索、胶囊子 Tab、指标卡一排大数字、创作环节的分步指示、资产用三列表格。
|
|
- **⚠️ 冲突（须先定）**：① 深色底 vs 我们的浅色纸感；② **多色指标卡** vs 基础层 `oil-ui-pro` 的「同一层级保持一致重量、避免每张普通卡片用不同强调色」；③ 橙色主按钮 vs 我们的品牌紫。
|
|
|
|
---
|
|
|
|
（配套：同目录 16 张截图可逐屏核对；与 `ui/布局排版参考-mcn-work-shop.md` 同形，可并读。）
|