feat(frontend): 视觉规范 v4 全站落地与实测修复

token 补齐与 EP 形体基准、全站版式工具类（.page-head/.card 系/.filter-bar/.ys-pill 等）、布局与登录页、工作台 Bento 与图表主题、打印稿纸、全部业务页统一到全局类；StatusTag 改 pill、AppPagination 加 background。

浏览器实测修复：表格行高收到 1.5；月结生命周期条圆点按阶段着色并加操作提示；工作台空态垂直居中；状态/结果列宽按胶囊内容给足（96/108/120），消除 Element Plus 省略号伪『小点』。设计稿反向同步圆点着色与流程条提示。

docs/design/视觉方向预览.html

@@ -508,12 +508,15 @@
   .flow-step:last-child { border-radius: 0 var(--ys-radius-sm) var(--ys-radius-sm) 0; }
   .flow-step + .flow-step { border-left: 0; }
   .flow-step .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ys-ink-3); }
-  .flow-step.done { color: var(--ys-ink); }
-  .flow-step.done .dot { background: var(--ys-ok); }
+  /* 圆点按「阶段」着色，与选中与否无关 —— 未选中时也能看出四段各自代表什么；
+     颜色之外每段仍有文字，不靠颜色单独表意 */
+  .flow-step.tone-wait .dot { background: var(--ys-warn); }
+  .flow-step.tone-lock .dot { background: var(--ys-indigo); }
+  .flow-step.tone-reject .dot { background: var(--ys-danger); }
   .flow-step.cur { color: var(--ys-indigo); font-weight: 500; background: var(--ys-indigo-wash); border-color: rgba(46, 75, 168, 0.3); }
   .flow-step.cur .dot { background: var(--ys-indigo); }
-  .flow-step.rejected .dot { background: var(--ys-danger); }
-  .flow-step.rejected { color: var(--ys-danger); }
+  /* 流程条右侧挂一行操作提示：没有提示时，四段读起来像四颗孤立的小按钮 */
+  .flow-hint { margin-left: 10px; font-size: 12px; color: var(--ys-ink-3); }
 
   /* 打印稿（A4）：独立顶层路由，浏览器打印只出报表本身 */
   .sheet {
@@ -1204,10 +1207,11 @@
           <div class="comp-card" style="margin-bottom:14px;padding:16px 20px">
             <div class="b-eyebrow" style="margin-bottom:12px">月结生命周期</div>
             <div class="flow">
-              <div class="flow-step done"><span class="dot"></span>草稿</div>
-              <div class="flow-step cur"><span class="dot"></span>待审批</div>
-              <div class="flow-step"><span class="dot"></span>已审定（锁定）</div>
-              <div class="flow-step rejected"><span class="dot"></span>已驳回 → 回到草稿</div>
+              <div class="flow-step"><span class="dot"></span>草稿</div>
+              <div class="flow-step cur tone-wait"><span class="dot"></span>待审批</div>
+              <div class="flow-step tone-lock"><span class="dot"></span>已审定（锁定）</div>
+              <div class="flow-step tone-reject"><span class="dot"></span>已驳回 → 回到草稿</div>
+              <span class="flow-hint">点状态只看该阶段，再点一次取消</span>
             </div>
           </div>
           <div class="filter">