067cad2120
- ui-demo/explore/：工作台风格的六轮方案（A–F、D2–D5），D5 为定稿样张 - tokens.css v0.2：墨色派生的中性浅灰作页面底色；圆角三档（6 / 8 / 12）；控件高 36；侧栏渐变与套餐标签变量；旧变量保留兼容 - design-system.md v0.2：页面框架（96px 墨色渐变侧栏、透明顶栏、内容区圆角）、只用功能图标、项目行「下一步 / 更多」列、少写说明 - decisions.md 记录 U5；AGENTS.md 与 design/README 同步 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
60 lines
7.5 KiB
HTML
60 lines
7.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>工作台风格方案</title>
|
||
<link rel="icon" href="../../logo/favicon.svg">
|
||
<link rel="stylesheet" href="../../system/tokens.css">
|
||
<link rel="stylesheet" href="../../system/fonts-local.css">
|
||
<style>
|
||
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--fs-body)/var(--lh-body) var(--font-sans)}
|
||
main{max-width:960px;margin:0 auto;padding:var(--sp-12) var(--sp-6)}
|
||
h1{font:var(--fw-bold) 32px/40px var(--font-serif);margin:0 0 var(--sp-2)}
|
||
.lead{color:var(--text-secondary);margin:0 0 var(--sp-8)}
|
||
.v{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:var(--sp-4);align-items:baseline;padding:var(--sp-5) 0;border-top:1px solid var(--border-subtle)}
|
||
.v:last-of-type{border-bottom:1px solid var(--border-subtle)}
|
||
.v b{font:var(--fw-bold) 20px/28px var(--font-serif)}
|
||
.v p{margin:0}
|
||
.v .sub{color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption);margin-top:var(--sp-1)}
|
||
.v a{display:inline-flex;align-items:center;height:36px;padding:0 var(--sp-4);border-radius:6px;background:var(--c-ink);color:var(--text-on-dark);text-decoration:none;white-space:nowrap}
|
||
.v a.ghost{background:var(--bg-sunken);color:var(--text-primary)}
|
||
.v a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
|
||
.round{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);margin:var(--sp-10) 0 var(--sp-2)}
|
||
.note{margin-top:var(--sp-6);color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1>工作台风格方案</h1>
|
||
<p class="lead">同一份内容、同一套颜色、字体和图标，逐轮调整版式和分层方式。<b>D5 已定稿</b>，规则写入设计规范 v0.2 和 tokens.css v0.2。</p>
|
||
|
||
<h2 class="round">第六轮：窄侧栏，上图标下文字（2026-11-03 定稿，决策 U5）</h2>
|
||
<div class="v"><b>D5</b><div><p>侧栏只有一种状态，宽 96px，不再折叠。顶部是竖版 logo（上印章、下字标）；菜单改为上图标、下文字，图标换成更精致的 Lucide 线性图标（工作台 house、资质库 award、额度 wallet）。当前项是圆角矩形的半透明浅色底。底部是大头像、名称、套餐和有效期。</p><p class="sub">其余（渐变侧栏、点阵、透明顶栏、精简文案、下一步悬停）同 D4。</p></div><a href="workbench-d5.html">打开</a></div>
|
||
|
||
<h2 class="round">第五轮：深色侧栏与内容区融合</h2>
|
||
<div class="v"><b>D4</b><div><p>侧栏改为双色竖向渐变（墨色到深墨蓝），底部有一片淡淡的点阵；内容区左上角是 12px 圆角，像一张纸铺在深色桌面上；当前菜单项是浅色半透明底，加侧栏左缘一条 3px 白色竖条（?sel=bar 只有竖条，?sel=solid 白色实底）。logo 放大并在侧栏里居中；「下一步」悬停时只让箭头右移；精简了说明性文案。D3 加的装饰图标已全部去掉，只保留原有的功能图标；顶栏和问候语保留 D3 的改法。</p><p class="sub">网址加 ?v=flat 可以看 D3 的平铺深色侧栏作对照；折叠后效果同样成立。</p></div><a href="workbench-d4.html">打开</a></div>
|
||
|
||
<h2 class="round">第四轮：顶栏优化，加入图标</h2>
|
||
<div class="v"><b>D3</b><div><p>顶栏不再是一条白带：平时透明，融进页面底色；往下滚动后变成半透明白（毛玻璃）加一条细线。搜索框靠右，聚焦时变宽。统计、区块标题、项目行、下一步按钮、最近处理都配了图标；图标底块大多是中性浅灰，只有带含义的才着色（截止赭、致命红、待确认的 AI 条目蓝）。页头加了问候语。</p><p class="sub">侧栏同 D2，可以加 ?side=light 看浅灰侧栏。</p></div><a href="workbench-d3.html">打开</a></div>
|
||
|
||
<h2 class="round">第三轮：在 D 的基础上，侧边栏换底色并支持折叠</h2>
|
||
<div class="v"><b>D2 墨色侧栏</b><div><p>侧边栏改为墨色底，logo 用反白版。底部「收起侧栏」按钮（或 Ctrl \）可以折叠到只留图标，折叠后 logo 换成印章，悬停图标有提示；折叠状态会记住。</p><p class="sub">另有浅灰侧栏对照；也可以在网址后加 ?collapsed=1 直接看折叠状态。</p></div><a href="workbench-d2.html">打开</a></div>
|
||
<div class="v"><b>D2 浅灰侧栏</b><div><p>同一个页面，侧边栏用从墨色派生的浅灰底，当前项是白色块。比墨色版温和，但和白色内容区的区分弱一些。</p><p class="sub">网址参数 ?side=light。</p></div><a class="ghost" href="workbench-d2.html?side=light">打开</a></div>
|
||
|
||
<h2 class="round">第二轮（2026-11-03）：白色为主、有交互感、整齐</h2>
|
||
<div class="v"><b>D 明亮工作区</b><div><p>结构和现状接近，整页只用一种白卡片加发丝线。统计格可以点击筛选；每个项目行有「下一步」，悬停时变成按钮，并出现「更多」菜单（会扣点的操作写明扣多少）。</p><p class="sub">圆角 6 / 8 / 12；浅底改为从墨色派生的冷灰；状态标签改为浅灰实底。</p></div><a href="workbench-d.html">打开</a></div>
|
||
<div class="v"><b>E 下一步</b><div><p>页面最上方是按紧急程度排好的待办队列：今天截止 → 有致命问题 → 7 天内 → 其他，每条都带操作按钮，致命那条可以展开问题。项目表放在下面。</p><p class="sub">圆角 4 / 8 / 12；只有待办卡悬停时出现阴影；取消统计卡和单独的提醒条。</p></div><a href="workbench-e.html">打开</a></div>
|
||
<div class="v"><b>F 列表 + 详情</b><div><p>左边是项目列表，点击或用 ↑ / ↓ 选中，右边的详情立即切换：状态步骤、倒计时、下一步（带扣点说明）、致命问题、清单确认进度、最近处理。</p><p class="sub">页面全白；圆角 4 / 8 / 12；统计改为页头下的一行；额度移到顶栏。</p></div><a href="workbench-f.html">打开</a></div>
|
||
|
||
<h2 class="round">第一轮：反馈是 A 像只读报告、B 有点乱、C 排除，底色太绿灰</h2>
|
||
<div class="v"><b>现状</b><div><p>描边框、2px 圆角、灰色表头、四张统计卡。</p><p class="sub">用作对照。</p></div><a class="ghost" href="../page-workbench.html">打开</a></div>
|
||
<div class="v"><b>A 留白文档</b><div><p>主列是一张白纸，几乎不用框线，靠字号、字重和留白分层。四张统计卡换成一句嵌大数字的概要句，数字可以点击筛选。</p><p class="sub">圆角 6 / 8 / 12；纸面极轻阴影；标题加大到 32；状态改为纯文字。</p></div><a href="workbench-a.html">打开</a></div>
|
||
<div class="v"><b>B 工作面板</b><div><p>信息密度不降，层次靠底色分区和圆角：校样纸色面板里放白色列表行。每个项目行带一条四段状态轨。顶栏有全局搜索。</p><p class="sub">圆角 4 / 6 / 8 / 10；不用描边和阴影；页面底色改白；状态标签改实底。</p></div><a href="workbench-b.html">打开</a></div>
|
||
<div class="v"><b>C 截止线（已排除）</b><div><p>以时间为主轴：顶部墨色时间带标出未来 30 天的截止点，今天截止的提醒和统计都并进时间带。项目行左侧是大号日期块。</p><p class="sub">圆角 4 / 6 / 10 / 12；新增大面积墨底；项目名用宋体 17。</p></div><a href="workbench-c.html">打开</a></div>
|
||
|
||
<p class="note">每个方案文件顶部的 HTML 注释里，列出了它相对 design-system.md 改了哪些规则。</p>
|
||
</main>
|
||
</body>
|
||
</html>
|