工作台风格方案

同一份内容、同一套颜色、字体和图标,逐轮调整版式和分层方式。D5 已定稿,规则写入设计规范 v0.2 和 tokens.css v0.2。

第六轮:窄侧栏,上图标下文字(2026-11-03 定稿,决策 U5)

D5

侧栏只有一种状态,宽 96px,不再折叠。顶部是竖版 logo(上印章、下字标);菜单改为上图标、下文字,图标换成更精致的 Lucide 线性图标(工作台 house、资质库 award、额度 wallet)。当前项是圆角矩形的半透明浅色底。底部是大头像、名称、套餐和有效期。

其余(渐变侧栏、点阵、透明顶栏、精简文案、下一步悬停)同 D4。

打开

第五轮:深色侧栏与内容区融合

D4

侧栏改为双色竖向渐变(墨色到深墨蓝),底部有一片淡淡的点阵;内容区左上角是 12px 圆角,像一张纸铺在深色桌面上;当前菜单项是浅色半透明底,加侧栏左缘一条 3px 白色竖条(?sel=bar 只有竖条,?sel=solid 白色实底)。logo 放大并在侧栏里居中;「下一步」悬停时只让箭头右移;精简了说明性文案。D3 加的装饰图标已全部去掉,只保留原有的功能图标;顶栏和问候语保留 D3 的改法。

网址加 ?v=flat 可以看 D3 的平铺深色侧栏作对照;折叠后效果同样成立。

打开

第四轮:顶栏优化,加入图标

D3

顶栏不再是一条白带:平时透明,融进页面底色;往下滚动后变成半透明白(毛玻璃)加一条细线。搜索框靠右,聚焦时变宽。统计、区块标题、项目行、下一步按钮、最近处理都配了图标;图标底块大多是中性浅灰,只有带含义的才着色(截止赭、致命红、待确认的 AI 条目蓝)。页头加了问候语。

侧栏同 D2,可以加 ?side=light 看浅灰侧栏。

打开

第三轮:在 D 的基础上,侧边栏换底色并支持折叠

D2 墨色侧栏

侧边栏改为墨色底,logo 用反白版。底部「收起侧栏」按钮(或 Ctrl \)可以折叠到只留图标,折叠后 logo 换成印章,悬停图标有提示;折叠状态会记住。

另有浅灰侧栏对照;也可以在网址后加 ?collapsed=1 直接看折叠状态。

打开
D2 浅灰侧栏

同一个页面,侧边栏用从墨色派生的浅灰底,当前项是白色块。比墨色版温和,但和白色内容区的区分弱一些。

网址参数 ?side=light。

打开

第二轮(2026-11-03):白色为主、有交互感、整齐

D 明亮工作区

结构和现状接近,整页只用一种白卡片加发丝线。统计格可以点击筛选;每个项目行有「下一步」,悬停时变成按钮,并出现「更多」菜单(会扣点的操作写明扣多少)。

圆角 6 / 8 / 12;浅底改为从墨色派生的冷灰;状态标签改为浅灰实底。

打开
E 下一步

页面最上方是按紧急程度排好的待办队列:今天截止 → 有致命问题 → 7 天内 → 其他,每条都带操作按钮,致命那条可以展开问题。项目表放在下面。

圆角 4 / 8 / 12;只有待办卡悬停时出现阴影;取消统计卡和单独的提醒条。

打开
F 列表 + 详情

左边是项目列表,点击或用 ↑ / ↓ 选中,右边的详情立即切换:状态步骤、倒计时、下一步(带扣点说明)、致命问题、清单确认进度、最近处理。

页面全白;圆角 4 / 8 / 12;统计改为页头下的一行;额度移到顶栏。

打开

第一轮:反馈是 A 像只读报告、B 有点乱、C 排除,底色太绿灰

现状

描边框、2px 圆角、灰色表头、四张统计卡。

用作对照。

打开
A 留白文档

主列是一张白纸,几乎不用框线,靠字号、字重和留白分层。四张统计卡换成一句嵌大数字的概要句,数字可以点击筛选。

圆角 6 / 8 / 12;纸面极轻阴影;标题加大到 32;状态改为纯文字。

打开
B 工作面板

信息密度不降,层次靠底色分区和圆角:校样纸色面板里放白色列表行。每个项目行带一条四段状态轨。顶栏有全局搜索。

圆角 4 / 6 / 8 / 10;不用描边和阴影;页面底色改白;状态标签改实底。

打开
C 截止线(已排除)

以时间为主轴:顶部墨色时间带标出未来 30 天的截止点,今天截止的提醒和统计都并进时间带。项目行左侧是大号日期块。

圆角 4 / 6 / 10 / 12;新增大面积墨底;项目名用宋体 17。

打开

每个方案文件顶部的 HTML 注释里,列出了它相对 design-system.md 改了哪些规则。