质感的三层材料：侧栏灰渐变（沉）→ 内容底雾灰 + 顶部受光 → 卡片纸白微渐变 + 半透明描边 + 分层阴影。 当前项白底浮起，白色被灰托住，不再扎眼。

Bento Grid（4 列 · 102px 行高）：KPI 四格 1×1 起手 → 绩效 / 回款趋势各占 2×2 → 待办与预警并排 2×2 → 最近动态与常用操作整行铺满（b-full）。 卡片入场 45ms 交错上浮（320ms），悬停抬升 2px、影加深。 待办与预警的列表在卡内滚动（上限 178px）——条目再多也不撑开网格，行高恒定。 空态（b-empty）在卡片剩余高度内垂直居中，不全部挤在顶部留一整块空白。

背景三层：点阵网格（秩序）+ 顶部靛蓝天光（氛围）+ 右上涟漪同心圆（「衍水」的品牌装饰）； 卡片内品牌区承担门面——品牌字、标语、水线；表单以「欢迎回来」承接。装饰与文案都来自「衍水」本身。

v3 稿只画到「系统管理 + 首页 + 登录页」；此后绩效核算、月结、审批、报表、工作台均已交付， 本节按实现补齐。以下页面沿用 §04 的同一侧栏与顶栏，只画内容区。

月结是锁点：审定后绩效与应付合计不可改，只能靠调整单纠偏，状态条与列表同步体现这件事。 状态标签分四档——草稿（中性灰）、待审批（琥珀）、已审定（靛蓝）、已驳回（砖红）， 颜色之外还有文字，不靠颜色单独表意。 生命周期条上四段圆点按阶段着色（草稿中性 / 待审批琥珀 / 已审定靛蓝 / 已驳回砖红）， 与选中与否无关；条右侧挂一行操作提示「点状态只看该阶段，再点一次取消」—— 没有这行提示时，未选中态的四段读起来像四颗孤立的小按钮，不像一条流程。

审批详情是抽屉（此处与列表并列展示以便看清内容）：右侧滑入，遮罩 + 面板。 列表与详情的关键字段——版本号与状态——必须同时可见，审批人才能判断自己看的是哪一版。 送审内容不变则不重复提单、不新增版本号。

报表是密集表：行高与字号各降半档（12.5px / 7px 内距），但金额仍用等宽数字右对齐、绩效列加粗—— 密集不等于看不清。首列可展开查看该合同的分摊明细。

打印视图是独立顶层路由，不挂侧栏与顶栏——浏览器打印只出报表本身，PDF 由打印对话框「另存为 PDF」导出。 打印稿是纸面产物，与屏幕稿不同源：白底、实线表格、章节编号、签字栏，不带任何阴影与圆角。 超出打印行数上限时只打前 N 行，并在稿面上明确提示，不静默截断。

设置类表单页最容易犯的错是把表单缩在左上角一小块：内容区再宽也只占三分之一， 右侧留下大片空白，页面像没做完。本节定下表单页的版式口径，落地页见 frontend/src/views/system/settings/index.vue。

两列：左列 minmax(0, 1fr) 放表单与「生效范围」，右列固定 480px 放实景预览； ≤1200px 折成单列。表单不再缩在左上角，内容区左右都能被用上。
控件与说明同行：主控件 ≤420px，说明跟在后面 20px；≥1600px 时说明改为靠卡片右缘右对齐， 与左侧控件形成两端锚点，整行铺满。放不下时说明整体换行到控件下方。
实景预览必须是 1:1：登录卡按真实登录页复刻（控件 38px 高、品牌名 17px / 0.34em 字距、 logo ≤56×36、三项输入含验证码位、登录按钮、版权行）。控件高度对不上就不叫「所见即所得」， 只是缩比示意——缩比版看不出 logo 会不会糊、标语会不会挤。
「生效范围」独立成卡：写清这份设置会出现在哪（登录页品牌位与版权行 / Excel 导出页眉 / 打印稿页眉），用户存完不用再去别处找。