refactor(frontend): 侧栏层级与表单页版式调整

侧栏层级口径改版（视觉稿 v4.2）：组标题与菜单项同字号 13px，层级改由
「折叠箭头 + 组间留白 + 子项缩进」表达，不靠字号/字重压过父级。
- 去掉组标题的靛蓝竖标与激活项左侧 2px 竖条（竖条只能落在侧栏内边缘、
  与白底悬空，是重复的第二个信号），激活只留白底浮起 + 靛蓝字
- 子项缩进 30px 收到 22px，图标父子统一 16px
- AppMenu 的 .app-menu 提供横向 10px 留白，BasicLayout 的 .app-aside__menu
  只写上下内距——两处都用 padding 简写会同权重靠注入顺序决胜，横向留白
  会被整条抹掉、条目贴到侧栏边缘

公司信息页字段自适应分列：卡片够宽时两字段并排，窄时折回单列；说明文字
紧贴控件下方，不再顶到卡片最右缘（宽屏下与输入框隔上千像素，视线关联断掉）。

设计稿同步升 v4.2。

Co-Authored-By: Claude Code <noreply@anthropic.com>

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

@@ -5,7 +5,12 @@
 <title>衍水工资系统 · 视觉方向预览</title>
 <style>
   /* ============================================================
-     设计体系 v4.1（同步已交付模块 + 实测补订）：中性灰白 · 靛蓝点缀 · 微质感
+     设计体系 v4.2（侧栏层级口径改版）：中性灰白 · 靛蓝点缀 · 微质感
+     v4.1 → v4.2 变更（2026-10-23）：侧栏层级口径改版 + 工作台动态分页，不动色板/字体/组件基调
+       1) 组标题与菜单项同字号 13px —— 层级靠缩进与留白，不再靠字重压过
+       2) 去掉组标题的靛蓝竖标与激活项左侧竖条，激活只留白底浮起 + 靛蓝字
+       3) 子项缩进收到 12px，菜单图标父子统一 16px
+       4) §05 最近动态改服务端分页（每页 10/20/50 条 + 模块筛选 + 分页条）
      v3 → v4 变更（2026-10-22）：设计稿与已交付功能对齐
        1) 侧栏菜单改为真实路由分组（5 组 + 首页 = 21 项），组可折叠
        2) 首页工作台按真实四区块重画（总览 / 待办 / 预警 / 动态）
@@ -264,10 +269,8 @@
     background: linear-gradient(180deg, #ffffff, #fbfcfe);
     box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 35, 51, 0.06), 0 4px 10px rgba(28, 35, 51, 0.06);
   }
-  .menu-item.active::before {
-    content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 2px;
-    border-radius: 1px; background: var(--ys-indigo);
-  }
+  /* 子项缩进一档（12px）：层级是位置关系，不是字号关系 */
+  .menu-group-head ~ .menu-item { padding-left: 22px; }
   .menu-item svg { width: 16px; height: 16px; flex: none; opacity: 0.7; }
   .menu-item.active svg { opacity: 1; }
   .aside-foot { margin-top: auto; padding: 0 10px 2px; }
@@ -423,14 +426,17 @@
   .login-btn { width: 100%; height: 38px; margin-top: 6px; font-size: 14px; }
 
   /* ---------- 菜单分组（路由 meta.group 派生的可折叠组） ---------- */
+  /*
+   * 层级口径（v4.2）：父子同字号 13px —— 组标题与条目一样大，
+   * 结构靠「折叠箭头 + 组间留白 + 子项缩进一档」表达，不靠字号压过。
+   */
   .menu-group-head {
     display: flex; align-items: center; justify-content: space-between;
     padding: 9px 10px; margin-bottom: 4px; border-radius: var(--ys-radius-sm);
-    font-size: 11px; letter-spacing: 0.1em; color: var(--ys-ink-3);
+    font-size: 13px; font-weight: 500; color: var(--ys-ink);
   }
-  .menu-group.open .menu-group-head { color: var(--ys-indigo); background: rgba(255, 255, 255, 0.45); }
-  .menu-group-head .chev { width: 11px; height: 11px; flex: none; opacity: 0.55; }
-  .menu-group.open .menu-group-head .chev { opacity: 0.9; transform: rotate(90deg); }
+  .menu-group-head .chev { width: 11px; height: 11px; flex: none; opacity: 0.55; color: var(--ys-ink-3); }
+  .menu-group.open .menu-group-head .chev { opacity: 0.9; color: var(--ys-ink-2); transform: rotate(90deg); }
 
   /* ---------- 工作台卡片内的列表行 ---------- */
   .b-count {
@@ -1039,7 +1045,9 @@
         <tr><td>不进菜单</td><td>报表打印视图（独立顶层路由）</td><td class="num">浏览器打印只出报表本身</td></tr>
       </table>
       <div class="note">
-        侧栏是<b>单列树</b>：组标题可折叠，当前页所在组默认展开，当前项白底浮起 + 左侧 2px 靛蓝竖条。
+        侧栏是<b>单列树</b>：组标题可折叠，当前页所在组默认展开，当前项白底浮起 + 靛蓝字（不再叠左侧竖条）。
+        <b>层级口径（v4.2）</b>：父子<b>同字号 13px</b>，组标题不靠字号/字重压过子项——
+        结构由「折叠箭头 + 组间留白 + 子项缩进 12px」表达；此前的 11px 目录行版与 14px/600 竖标版都不采用。
         菜单图标（16px、静止 0.7 / 激活 1、组标题不加图标）已于 2026-10-22 落地：
         路由 <code>meta.icon</code> 只写语义 key，图标注册在 <code>menuIcons.ts</code>。
         本稿画的是手绘线性稿，实际取自 Element Plus 图标库的线性变体——<b>形状以图标库为准</b>，
@@ -1178,9 +1186,14 @@
                 <div class="b-eyebrow">最近动态
                   <span style="margin-left:auto;font-size:11px;color:var(--ys-ink-3);border:1px solid var(--ys-line);border-radius:var(--ys-radius-sm);padding:1px 8px;background:#fff">全部模块 ▾</span>
                 </div>
-                <div class="todo-list" style="max-height:40px;margin-top:4px">
+                <div class="todo-list" style="margin-top:4px">
                   <div class="b-act"><span class="tm">10-22 09:12</span><span class="b-tag b-tag-info">核算 · 月结</span><span class="sum">生成 2026-10 月结草稿，绩效合计 268,430.16 元</span><span class="us">张岚</span></div>
                   <div class="b-act"><span class="tm">10-21 16:40</span><span class="b-tag b-tag-info">回款 · 新增</span><span class="sum">录入回款 86,400.00 元（业务 BS20261018）</span><span class="us">王浩</span></div>
+                  <div class="b-act"><span class="tm">10-21 14:32</span><span class="b-tag b-tag-info">业务 · 新增</span><span class="sum">创建业务 YW20261022-0001（客户ID=166，明细 1 行）</span><span class="us">王浩</span></div>
+                </div>
+                <div class="pager" style="margin-top:10px;justify-content:flex-end">
+                  <span class="pg">‹</span><span class="pg cur">1</span><span class="pg">2</span><span class="pg">›</span>
+                  <span style="margin-left:10px">共 128 条 · 每页 10 条</span>
                 </div>
               </div>
 
@@ -1204,6 +1217,8 @@
       待办与预警并排 2×2 → 最近动态与常用操作整行铺满（<code>b-full</code>）。
       卡片入场 <b>45ms 交错上浮（320ms）</b>，悬停抬升 2px、影加深。
       待办与预警的列表<b>在卡内滚动</b>（上限 178px）——条目再多也不撑开网格，行高恒定。
+      <b>最近动态走服务端分页</b>（2026-10-23）：列表不再靠卡内滚动藏条目，每页 10/20/50 条，
+      底部接右对齐分页条（与列表页同一套 <code>AppPagination</code>）；模块筛选同步到服务端。
       空态（<code>b-empty</code>）在卡片剩余高度内<b>垂直居中</b>，不全部挤在顶部留一整块空白。
     </div>
   </section>