From b9781f7d3f1b76a9a25cee5d1d31ae77c9fcea78 Mon Sep 17 00:00:00 2001
From: liuwenxin <1009266660@qq.com>
Date: Fri, 23 Oct 2026 10:24:41 +0800
Subject: [PATCH] =?UTF-8?q?docs(design):=20=E8=A7=86=E8=A7=89=E7=A8=BF?=
 =?UTF-8?q?=E5=8D=87=20v4.1=20=E5=B9=B6=E6=96=B0=E5=A2=9E=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E7=AB=A0=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

承接 10-23 浏览器实测验收，把三处实测偏差与新增的表单页口径写回设计稿（代码为视觉权威，稿为描述）：

- §03 新增「表格 · 行高」卡：单元格行高定 1.5（组件库默认 23px 会把单行数据行撑到 51px）
- §05 工作台：卡片内空态改为在剩余高度内垂直居中
- §09 月结：生命周期条四段圆点改为按阶段着色（草稿中性 / 待审批琥珀 / 已审定靛蓝 / 已驳回砖红，与选中态解耦），并补条右侧操作提示
- §10 新增「表单页（公司信息）」：两列版式（左 1fr + 右 480px 实景预览，≤1200px 折单列）、控件与说明同行（≥1600px 说明靠卡片右缘右对齐）、实景预览按真实登录页 1:1 复刻、独立的「生效范围」卡
- 封面与文件头注释同步 v4.1 变更说明

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 docs/design/视觉方向预览.html | 248 +++++++++++++++++++++++++++-
 1 file changed, 245 insertions(+), 3 deletions(-)

diff --git a/docs/design/视觉方向预览.html b/docs/design/视觉方向预览.html
index 1fa43a1..2727210 100644
--- a/docs/design/视觉方向预览.html
+++ b/docs/design/视觉方向预览.html
@@ -5,12 +5,17 @@
 <title>衍水工资系统 · 视觉方向预览</title>
 <style>
   /* ============================================================
-     设计体系 v4（同步已交付模块）：中性灰白 · 靛蓝点缀 · 微质感
+     设计体系 v4.1（同步已交付模块 + 实测补订）：中性灰白 · 靛蓝点缀 · 微质感
      v3 → v4 变更（2026-10-22）：设计稿与已交付功能对齐
        1) 侧栏菜单改为真实路由分组（5 组 + 首页 = 21 项），组可折叠
        2) 首页工作台按真实四区块重画（总览 / 待办 / 预警 / 动态）
        3) 新增 §09：月结、审批、报表、打印稿（v3 缺 M3/M4 页面）
        4) token 与 frontend/src/assets/styles/index.css 对齐
+     v4 → v4.1 变更（2026-10-23）：浏览器实测补订，不改色板/字体/组件基调
+       1) §03 表格行高定为 1.5（组件库默认 23px 会把单行数据行撑到 51px）
+       2) §09 月结生命周期条：四段圆点按阶段着色 + 条右侧操作提示
+       3) §05 工作台：卡片内空态在剩余高度内居中
+       4) 新增 §10：表单页版式（公司信息页）
      质感来源（而非装饰）：
        1) 表面微渐变 —— 1–2% 明度差，暗示受光方向
        2) 半透明描边 —— 边界在不同底色上自然融合
@@ -444,7 +449,11 @@
   .b-tag-danger { color: var(--ys-danger); background: var(--ys-danger-wash); }
   .b-tag-info { color: var(--ys-indigo); background: var(--ys-indigo-wash); }
   .b-tag-ok { color: var(--ys-ok); background: var(--ys-ok-wash-1); }
-  .b-empty { font-size: 12px; color: var(--ys-ink-3); margin-top: 6px; }
+  /* 空态：在卡片剩余高度内居中 —— 全挤在顶部会像「没加载完」 */
+  .b-empty {
+    display: flex; flex: 1; align-items: center; justify-content: center;
+    font-size: 12px; color: var(--ys-ink-3); margin-top: 6px; text-align: center;
+  }
   /* 最近动态：时间 / 模块·动作 / 摘要 / 操作人 —— 四段各自成块，不并排挤在一行 */
   .b-act {
     display: flex; align-items: center; gap: 10px;
@@ -579,6 +588,83 @@
   .states { display: flex; gap: 14px; margin-top: 12px; }
   .state { text-align: center; }
   .state .cap { font-size: 11px; color: var(--ys-ink-3); margin-top: 6px; }
+
+  /* ---------- 表单页（公司信息）：§10 ---------- */
+  .set-layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 14px; align-items: start; }
+  .set-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+  .set-card-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+    padding: 13px 16px; border-bottom: 1px solid var(--ys-line-soft);
+  }
+  .set-card-title { font-size: 15px; font-weight: 600; color: var(--ys-ink); }
+  .set-card-note { font-size: 12px; color: var(--ys-ink-3); }
+  .set-row { display: grid; grid-template-columns: 92px minmax(0, 420px) minmax(0, 1fr); column-gap: 20px; align-items: center; }
+  .set-row + .set-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ys-line-soft); }
+  .set-label { font-size: 13px; color: var(--ys-ink-2); text-align: right; }
+  .set-label .req { color: var(--ys-danger); margin-right: 4px; }
+  .set-note { font-size: 12px; color: var(--ys-ink-3); line-height: 1.7; text-align: right; }
+  .logo-box {
+    display: flex; align-items: center; justify-content: center;
+    width: 96px; height: 96px;
+    background: linear-gradient(180deg, #f7f8fb, #f1f3f8);
+    border: 1px dashed rgba(28, 35, 51, 0.22); border-radius: 10px;
+  }
+  .logo-box .plus { font-size: 26px; font-weight: 300; line-height: 1; color: var(--ys-ink-3); }
+  .scope-list { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; }
+  .scope-list + .scope-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ys-line-soft); }
+  .scope-list dt { font-size: 13px; font-weight: 500; color: var(--ys-ink-2); }
+  .scope-list dd { margin: 0; font-size: 12.5px; color: var(--ys-ink-3); }
+  /* 实景预览：登录页 1:1 复刻（控件高度 / 字号 / logo 展示位与真实登录页一致） */
+  .login-stage {
+    position: relative; display: flex; flex-direction: column; align-items: center;
+    padding: 24px 0 20px; overflow: hidden;
+    background-color: #f2f4f8;
+    background-image: radial-gradient(rgba(28, 35, 51, 0.07) 1px, transparent 1px);
+    background-size: 24px 24px;
+    border-radius: var(--ys-radius-sm);
+  }
+  .login-stage::before {
+    content: ''; position: absolute; top: -180px; left: 50%;
+    width: 860px; height: 460px; transform: translateX(-50%); pointer-events: none;
+    background: radial-gradient(closest-side, rgba(46, 75, 168, 0.08), rgba(46, 75, 168, 0));
+  }
+  .mock-card {
+    position: relative; width: 400px; max-width: 100%; padding: 30px 36px 32px;
+    background: linear-gradient(180deg, #ffffff, #fcfcfe);
+    border: 1px solid rgba(28, 35, 51, 0.09); border-radius: 14px;
+    box-shadow: 0 2px 4px rgba(28, 35, 51, 0.04), 0 16px 40px rgba(28, 35, 51, 0.1);
+  }
+  .mc-brand { text-align: center; }
+  .mc-logo { display: block; max-width: 56px; max-height: 36px; margin: 0 auto 10px; object-fit: contain; }
+  .mc-name { font-family: var(--ys-font-brand); font-size: 17px; font-weight: 500; letter-spacing: 0.34em; color: var(--ys-ink); }
+  .mc-slogan { margin: 8px 0 0; font-size: 12.5px; color: var(--ys-ink-3); }
+  .mc-waterline {
+    display: block; width: 40px; height: 2px; margin: 14px auto 0; border-radius: 1px;
+    background: linear-gradient(90deg, var(--ys-indigo), rgba(46, 75, 168, 0));
+  }
+  .mc-head { margin-top: 26px; }
+  .mc-title { font-size: 15px; font-weight: 600; color: var(--ys-ink); }
+  .mc-hint { margin-top: 4px; font-size: 12px; color: var(--ys-ink-3); }
+  .mc-field { margin-top: 16px; }
+  .mc-field + .mc-field { margin-top: 18px; }
+  .mc-label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 22px; color: var(--ys-ink-2); }
+  .mc-box { display: block; height: 38px; background: #f4f5f8; border: 1px solid rgba(28, 35, 51, 0.07); border-radius: 7px; }
+  .mc-captcha-row { display: flex; gap: 10px; }
+  .mc-captcha-row .mc-box { flex: 1; }
+  .mc-captcha {
+    flex: 0 0 104px; height: 38px; border-radius: 7px;
+    background-color: #f1f3f8;
+    background-image: repeating-linear-gradient(45deg, rgba(28, 35, 51, 0.07) 0 1px, transparent 1px 7px);
+    border: 1px solid var(--ys-line);
+  }
+  .mc-submit {
+    height: 38px; margin-top: 20px; font-size: 13px; line-height: 38px;
+    letter-spacing: 0.4em; text-align: center; color: #fff;
+    background: linear-gradient(180deg, var(--ys-indigo-hi), var(--ys-indigo));
+    border-radius: 7px;
+  }
+  .mc-foot { margin-top: 16px; font-size: 11px; letter-spacing: 0.08em; color: var(--ys-ink-3); }
+  .preview-cap { margin: 12px 0 0; font-size: 11px; text-align: center; color: var(--ys-ink-3); }
 </style>
 </head>
 <body>
@@ -590,9 +676,12 @@
     <h1>营销人员工资管理系统 · 视觉方向</h1>
     <div class="sub">企业级扁平 · 轻质感 · Bento 布局 · 品牌色点缀 · 微动效 · 精致文案</div>
     <div class="sub" style="margin-top:6px">
-      <b style="color:var(--ys-ink);font-weight:500">v4（2026-10-22 同步版）</b>
+      <b style="color:var(--ys-ink);font-weight:500">v4.1（2026-10-23 补订）</b>
       —— 本稿与已交付功能对齐：菜单按真实路由分组、工作台按真实四区块重画，并补齐月结 / 审批 / 报表 / 打印稿。
       视觉语言沿用 v3 质感版，未改色板、未改字体、未改组件基调。
+      <br />
+      v4.1 补订三处实测偏差与一张表单页：表格行高 1.5（§03）、月结生命周期条按阶段着色 + 操作提示（§09）、
+      工作台空态在卡内居中（§05）、公司信息页版式（§10 新增）。
     </div>
     <div class="waterline"></div>
     <div class="tags">
@@ -605,6 +694,8 @@
       <span class="tag">120–180ms 轻动效</span>
       <span class="tag">21 项菜单 · 5 组</span>
       <span class="tag">工作台四区块</span>
+      <span class="tag">表格行高 1.5</span>
+      <span class="tag">表单页两列</span>
     </div>
   </header>
 
@@ -759,6 +850,30 @@
           动效的目标是「顺滑可信」，不是表演。
         </div>
       </div>
+      <div class="comp-card">
+        <h3>表格 · 行高</h3>
+        <table class="grid" style="margin-bottom:12px">
+          <thead>
+            <tr><th>结算月份</th><th>状态</th><th style="text-align:right">应付合计</th></tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>2026-10</td>
+              <td><span class="pill pill-wait">待审批</span></td>
+              <td class="cell-num">241,876.40</td>
+            </tr>
+            <tr>
+              <td>2026-09</td>
+              <td><span class="pill pill-lock">已审定（锁定）</span></td>
+              <td class="cell-num">226,338.10</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="note">
+          单元格<b>行高 1.5</b>（13px 字 + 12px 上下内距 → 单行数据行 44px）。
+          组件库默认的 23px 行高（≈1.77 倍）会把单行撑到 51px，一屏少看两行。
+        </div>
+      </div>
     </div>
   </section>
 
@@ -1089,6 +1204,7 @@
       待办与预警并排 2×2 → 最近动态与常用操作整行铺满（<code>b-full</code>）。
       卡片入场 <b>45ms 交错上浮（320ms）</b>，悬停抬升 2px、影加深。
       待办与预警的列表<b>在卡内滚动</b>（上限 178px）——条目再多也不撑开网格，行高恒定。
+      空态（<code>b-empty</code>）在卡片剩余高度内<b>垂直居中</b>，不全部挤在顶部留一整块空白。
     </div>
   </section>
 
@@ -1272,6 +1388,9 @@
       月结是<b>锁点</b>：审定后绩效与应付合计不可改，只能靠调整单纠偏，状态条与列表同步体现这件事。
       状态标签分四档——草稿（中性灰）、待审批（琥珀）、已审定（靛蓝）、已驳回（砖红），
       颜色之外还有文字，不靠颜色单独表意。
+      生命周期条上<b>四段圆点按阶段着色</b>（草稿中性 / 待审批琥珀 / 已审定靛蓝 / 已驳回砖红），
+      与选中与否无关；条右侧挂一行操作提示「点状态只看该阶段，再点一次取消」——
+      没有这行提示时，未选中态的四段读起来像四颗孤立的小按钮，不像一条流程。
     </div>
 
     <!-- 09-2 审批管理 -->
@@ -1500,6 +1619,129 @@
     </div>
   </section>
 
+  <!-- ============ 表单页 ============ -->
+  <section class="section" id="sec-form">
+    <h2>10 · 表单页（公司信息）</h2>
+    <div class="note" style="margin-top:-6px;margin-bottom:18px">
+      设置类表单页最容易犯的错是<b>把表单缩在左上角一小块</b>：内容区再宽也只占三分之一，
+      右侧留下大片空白，页面像没做完。本节定下表单页的版式口径，落地页见
+      <code>frontend/src/views/system/settings/index.vue</code>。
+    </div>
+
+    <div class="app-shot">
+      <div class="canvas">
+        <div class="topbar">
+          <div class="crumb">系统管理 <span>/</span> <b>公司信息</b></div>
+          <div class="who"><span class="avatar">管</span><span>管理员</span><span class="logout">退出登录</span></div>
+        </div>
+        <div class="content">
+          <div class="page-head">
+            <div>
+              <h1>公司信息</h1>
+              <div class="desc">维护公司名称与 logo；保存后立即作用于登录页品牌位与导出页眉</div>
+              <div class="waterline"></div>
+            </div>
+          </div>
+
+          <div class="set-layout">
+            <!-- 左列：基础信息 + 生效范围 -->
+            <div class="set-col">
+              <div class="card">
+                <div class="set-card-head"><span class="set-card-title">基础信息</span></div>
+                <div style="padding:16px">
+                  <div class="set-row">
+                    <div class="set-label"><span class="req">*</span>公司名称</div>
+                    <input class="input" style="width:100%" value="衍水集团" />
+                    <div class="set-note">最多 64 个字符；保存后对所有在线用户立即生效。</div>
+                  </div>
+                  <div class="set-row">
+                    <div class="set-label">logo</div>
+                    <div class="logo-box"><span class="plus">+</span></div>
+                    <div class="set-note">png / jpg，不超过 2MB；仅展示于登录页品牌位，按 ≤56×36 显示。</div>
+                  </div>
+                </div>
+                <div class="card-foot"><button class="btn btn-primary">保存</button></div>
+              </div>
+
+              <div class="card">
+                <div class="set-card-head">
+                  <span class="set-card-title">生效范围</span>
+                  <span class="set-card-note">保存后对所有人生效</span>
+                </div>
+                <div style="padding:16px">
+                  <dl class="scope-list">
+                    <dt>公司名称</dt>
+                    <dd>登录页品牌位与版权行 · Excel 导出页眉 · 打印稿页眉</dd>
+                  </dl>
+                  <dl class="scope-list">
+                    <dt>logo</dt>
+                    <dd>登录页品牌位（≤56×36）</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右列：登录页实景预览（1:1 等比，非缩比示意） -->
+            <div class="card">
+              <div class="set-card-head">
+                <span class="set-card-title">登录页预览</span>
+                <span class="set-card-note">1:1 等比</span>
+              </div>
+              <div style="padding:16px">
+                <div class="login-stage">
+                  <div class="mock-card">
+                    <div class="mc-brand">
+                      <div class="mc-name">衍水集团</div>
+                      <p class="mc-slogan">把每一笔回款，算成一份踏实。</p>
+                      <span class="mc-waterline"></span>
+                    </div>
+                    <div class="mc-head">
+                      <div class="mc-title">欢迎回来</div>
+                      <div class="mc-hint">请输入账号密码进入系统</div>
+                    </div>
+                    <div class="mc-field">
+                      <span class="mc-label">用户名</span>
+                      <span class="mc-box"></span>
+                    </div>
+                    <div class="mc-field">
+                      <span class="mc-label">密码</span>
+                      <span class="mc-box"></span>
+                    </div>
+                    <div class="mc-field">
+                      <span class="mc-label">验证码</span>
+                      <span class="mc-captcha-row">
+                        <span class="mc-box"></span>
+                        <span class="mc-captcha"></span>
+                      </span>
+                    </div>
+                    <div class="mc-submit">登 录</div>
+                  </div>
+                  <div class="mc-foot">© 衍水集团 · 内部系统</div>
+                </div>
+                <p class="preview-cap">登录页品牌位实景（示意，非交互）——显示的是当前编辑值</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">
+      <b>两列</b>：左列 <code>minmax(0, 1fr)</code> 放表单与「生效范围」，右列固定 <b>480px</b> 放实景预览；
+      ≤1200px 折成单列。表单不再缩在左上角，内容区左右都能被用上。
+      <br />
+      <b>控件与说明同行</b>：主控件 ≤420px，说明跟在后面 20px；≥1600px 时说明改为靠卡片右缘右对齐，
+      与左侧控件形成两端锚点，整行铺满。放不下时说明整体换行到控件下方。
+      <br />
+      <b>实景预览必须是 1:1</b>：登录卡按真实登录页复刻（控件 38px 高、品牌名 17px / 0.34em 字距、
+      logo ≤56×36、三项输入含验证码位、登录按钮、版权行）。控件高度对不上就不叫「所见即所得」，
+      只是缩比示意——缩比版看不出 logo 会不会糊、标语会不会挤。
+      <br />
+      <b>「生效范围」独立成卡</b>：写清这份设置会出现在哪（登录页品牌位与版权行 / Excel 导出页眉 /
+      打印稿页眉），用户存完不用再去别处找。
+    </div>
+  </section>
+
 </div>
 <script src="echarts.min.js"></script>
 <script>