From ac710c180120efd1f6d61d200140d9905395f107 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Mon, 21 Sep 2026 17:33:45 +0800
Subject: [PATCH] 20260921173344

---
 .../src/views/system/user/UserPowerDrawer.vue |  69 +-
 .../src/views/system/user/UserPowerPanel.vue  | 610 ++++++++++--------
 .../tests/views/user-power-drawer.spec.js     |  22 +-
 .../tests/views/user-power-panel.spec.js      | 317 ++++++---
 code/fms/分配权限抽屉布局草图.html            | 389 +++++++++++
 5 files changed, 1000 insertions(+), 407 deletions(-)
 create mode 100644 code/fms/分配权限抽屉布局草图.html

diff --git a/code/fms/fms-vue/src/views/system/user/UserPowerDrawer.vue b/code/fms/fms-vue/src/views/system/user/UserPowerDrawer.vue
index 190b6448..76c410cb 100644
--- a/code/fms/fms-vue/src/views/system/user/UserPowerDrawer.vue
+++ b/code/fms/fms-vue/src/views/system/user/UserPowerDrawer.vue
@@ -6,15 +6,15 @@
  *   s_user_field_power 字段权限（按模块 × 字段的 查看 / 编辑 / 查询 / 导出）
  *   s_user_data_power  数据范围（按模块 × 操作的范围类型与条件）
  *
- * 布局：右侧 Drawer，头部只有一行页签（不渲染标题），关闭按钮由 ui/Drawer 固定在最右端。
+ * 布局：右侧 Drawer。头部是常规形态 —— 左侧账号标识（给谁配）、右侧关闭按钮；
+ * 三个页签在内容区顶部，与模块管理页的配置区同一形态（页签只管导航，
+ * 内容由下方 v-show 面板承载，切换页签不销毁已挂载的面板）。
  * 账号级的「全授权 / 全禁用」在功能权限面板自己的工具栏里（见 UserPowerPanel），
  * 不占头部，也不会在切到其它页签时仍显示。
- * 页签用 nav-only（Tabs 只管导航），内容由下方 v-show 面板承载 —— 与模块管理的
- * 配置区同一形态，切换页签不销毁已挂载的面板。
  *
  * 当前「功能权限」已接入；字段权限与数据范围仍为空面板。
  */
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Button, Drawer, Message, Tabs } from '@/components/ui'
 import { loadDataApi, saveObjectApi } from '@/services/api'
 import UserPowerPanel from './UserPowerPanel.vue'
@@ -27,6 +27,21 @@ const props = defineProps({
 
 const emit = defineEmits(['update:open'])
 
+/* ---------- 头部账号标识 ---------- */
+/** 当前账号：用户名 + 编码（名称缺失时只用编码） */
+const userLabel = computed(() => {
+  const name = String(props.user?.b_name ?? '').trim()
+  const id = String(props.user?.b_id ?? '').trim()
+  if (name && id) return `${name}（${id}）`
+  return name || id || ''
+})
+
+/**
+ * 抽屉标题。列表行操作点进来后，抽屉里再没有第二条账号线索（页签与面板都只有模块、
+ * 菜单、权限点），关掉抽屉才能核对是给谁配的权限，所以把账号提到头部。
+ */
+const drawerTitle = computed(() => (userLabel.value ? `分配权限 · ${userLabel.value}` : '分配权限'))
+
 /* ---------- 页签 ---------- */
 const activeTab = ref('power')
 
@@ -198,15 +213,15 @@ async function save() {
 <template>
   <Drawer
     :open="open"
+    :title="drawerTitle"
     placement="right"
     width="min(900px, 96%)"
     :mask-closable="false"
     @update:open="emit('update:open', $event)"
     @cancel="close"
   >
-    <!-- 头部只有页签这一行（不渲染标题）：关闭按钮由 ui/Drawer 固定在最右端；
-         账号级批量操作（全授权 / 全禁用）在功能权限面板自己的工具栏里 -->
-    <template #extra>
+    <div class="power-drawer">
+      <!-- 页签在内容区顶部而不是 header：header 要正常显示账号标识 -->
       <Tabs
         v-model="activeTab"
         nav-only
@@ -214,9 +229,7 @@ async function save() {
         :items="tabItems"
         aria-label="权限分类"
       />
-    </template>
 
-    <div class="power-drawer">
       <div class="power-drawer__body">
         <div v-show="activeTab === 'power'" class="power-pane" data-pane="power">
           <UserPowerPanel
@@ -244,19 +257,21 @@ async function save() {
 </template>
 
 <style lang="scss" scoped>
-/* 抽屉内容区纵向铺满：面板区自行滚动。
+/* 抽屉内容区纵向铺满：页签一行 + 面板区（面板自行滚动）。
    body 的 padding 已由 :has() 规则清零（左右两栏要贴边滚动），间距在这里补回 */
 .power-drawer {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  padding: 12px 20px;
+  padding: 10px 20px 12px;
 }
 
-/* 页签占满头部剩余宽度：标签栏的底线正好充当头部与内容的分隔线 */
+/* 页签一行：不参与伸缩（面板要吃掉剩余高度），与面板之间留出间距 */
 .power-drawer__nav {
+  flex: none;
   min-width: 0;
+  margin-bottom: 10px;
 }
 
 .power-drawer__body {
@@ -279,39 +294,25 @@ async function save() {
 }
 </style>
 
-<!-- 非 scoped：header 由 ui Drawer 渲染，而 Drawer 根节点是 Teleport，
+<!-- 非 scoped：header 与 body 由 ui Drawer 渲染，而 Drawer 根节点是 Teleport，
      class 无法透传（scoped 与外部 class 都命不中），因此用内容锚点 .power-drawer
      配合 :has() 定位本抽屉的面板（与 FmsFileModal / ui/select 同一做法）。
      只有本抽屉的内容才会渲染 .power-drawer，其它抽屉不受影响。 -->
 <style lang="scss">
-/* 头部只服务页签一行：上下留白压到最小；底线由 ui/Drawer 的 header 承担
-   （整条贯穿，含关闭按钮下方），页签自带的底线去掉，避免两条平行线叠在一起 */
-.fms-drawer:has(.power-drawer) {
-  --fms-drawer-header-padding: 6px 20px 0;
-}
-
-.fms-drawer:has(.power-drawer) .fms-drawer-header .tabs-nav {
-  border-bottom: none;
-}
-
-/* 页签上移到头部后，标题组与附加区都要能撑满：标签栏才能占满整行、
-   底线成为完整的分隔线，批量按钮也才能被推到右端 */
-.fms-drawer:has(.power-drawer) .fms-drawer-header-main,
-.fms-drawer:has(.power-drawer) .fms-drawer-extra {
-  flex: 1;
-  min-width: 0;
+/* 标题（账号标识）单行省略：账号名 + 编码可能很长，换行会把头部撑高 */
+.fms-drawer:has(.power-drawer) .fms-drawer-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* 高度链起点：.fms-drawer-body 是普通块容器（ui Drawer 的 scoped 样式，改不了），
    .power-drawer 的 flex:1 在块容器里不生效、高度塌成 auto，导致面板 height:100% 全链失效。
-   这里把它变成 flex 容器，让 .power-drawer 能吃满剩余高度。 */
+   这里把它变成 flex 容器，让 .power-drawer 能吃满剩余高度；
+   同时清掉 body 自带的 padding —— 它与「左右两栏贴边滚动」冲突，间距收敛到面板内部自理。 */
 .fms-drawer:has(.power-drawer) .fms-drawer-body {
   display: flex;
   flex-direction: column;
-}
-
-/* body 自带的 padding 与「左右两栏贴边」冲突，收敛到面板内部自理 */
-.fms-drawer:has(.power-drawer) .fms-drawer-body {
   padding: 0;
 }
 </style>
diff --git a/code/fms/fms-vue/src/views/system/user/UserPowerPanel.vue b/code/fms/fms-vue/src/views/system/user/UserPowerPanel.vue
index 33b0dc99..6b5cba50 100644
--- a/code/fms/fms-vue/src/views/system/user/UserPowerPanel.vue
+++ b/code/fms/fms-vue/src/views/system/user/UserPowerPanel.vue
@@ -8,10 +8,30 @@
  *   s_power         权限点（menu.* 菜单入口 / module.* 模块使用 / action.* 业务动作）
  *   s_user_power    勾选结果（用户 × 权限点，主键 b_user_id + b_power_id）
  *
- * 布局：左右两栏各占满高度、各自滚动。右栏是两个分区：
- * 分区一 = 当前菜单的入口权限（menu.{编码}，一个开关）；
- * 分区二 = 该菜单绑定模块的权限点列表（模块使用开关 + 业务动作 chip）。
- * 账号级的「全授权 / 全禁用」在抽屉头部（父级 UserPowerDrawer），不在这两个分区里。
+ * 布局：左右两栏各占满高度、各自滚动。右栏 = 页头 + 一张「模块 / 动作 / 已选」三列表：
+ *   页头 = 当前菜单名（标题）+ 入口权限 menu.{编码}，固定在顶部不随内容滚动 ——
+ *          入口是"页面级"属性，与"页面里能用哪些模块"不是同一层；
+ *   表   = 一行一个模块，模块级勾选框落在「模块」列，动作勾选框落在「动作」列。
+ *
+ * 三层权限的层级靠"列"表达，不靠嵌套容器：
+ *   之前每个模块是一个带底色块头的方块、动作在块内铺排，三层权限就都是同一个
+ *   "方框 + 文字"的形态，只靠底色深浅区分，十几个模块连成一片时读不出层级。
+ *   改成列之后，「模块」列只有模块级勾选、「动作」列只有动作勾选，各级权限各占一列，
+ *   扫一眼就知道某一行属于哪个模块、这个模块给了几项动作。
+ *
+ * 行尾「已选 x/y」= 该模块已授权的动作数 / 动作总数（不含模块使用本身），
+ * 不展开也能量化进度；只有模块使用、没有动作的模块不显示计数。
+ *
+ * 模块级勾选框的语义是"该模块全给 / 全撤"（模块使用 + 全部动作），
+ * 半选态表示"进了这个模块，但只给了部分动作"：
+ *   - 勾上 = 一次补齐该模块的全部权限点，并联动菜单入口；
+ *   - 取消 = 收回该模块的全部权限点（不留"有动作、没模块"的死配置）。
+ * 因此不再单设行尾「全选 / 清空」—— 它与模块级勾选框作用对象完全重合，
+ * 两个控件做同一件事只会让人不知道该点哪个。只想给部分动作时，
+ * 先点模块级勾选框全给、再逐个取消不要的动作即可。
+ *
+ * 勾选框统一用 ui/Checkbox（原生 input + 自带半选 / 禁用 / 键盘焦点），
+ * 不自己拼方框与对勾 —— 选中态、半选态、聚焦环、禁用态只有一处定义。
  *
  * 两层的关系（《模块关系与权限边界重构计划》§3.2）：进得了菜单不等于能用菜单里的模块，
  * 所以授权仍分两层落库；但交互上入口跟随模块 —— 勾任一模块 / 动作自动补入口，
@@ -22,8 +42,7 @@
  * （选中权限编码数组），差异比对与保存由父级负责。
  */
 import { computed, ref } from 'vue'
-import { Check } from '@lucide/vue'
-import { Button, Spin, Switch } from '@/components/ui'
+import { Button, Checkbox, Spin } from '@/components/ui'
 import FmsTreePanel from '@/components/fms-tree/FmsTreePanel.vue'
 import { buildSortedTree, filterTreeByText, findTreeNode } from '@/utils/tree'
 import { MODULE_ACCESS_ACTION } from '@/utils/powerCodes'
@@ -80,7 +99,7 @@ function onMenuSelect(keys, info) {
   selectedMenuId.value = String(keys[0])
 }
 
-/* ---------- 右侧：菜单访问权限（根节点）+ 属下的模块与权限点 ---------- */
+/* ---------- 右侧：页头（菜单入口）+ 模块 / 动作表 ---------- */
 
 /**
  * 当前菜单的入口权限编码：menu.{菜单编码}（s_power 中 b_object_type = 'menu'，
@@ -107,7 +126,7 @@ const menuType = computed(() => String(menuNode.value?.b_menu_type || ''))
 /**
  * 能否单独授权入口：只有页面 / 外链在 s_power 里派生 menu.{编码}
  * （menu-management 的 MENU_POWER_MENU_TYPES），目录只是分组、没有权限点 ——
- * 目录若渲染开关，勾上会往 s_user_power 写一条 s_power 里不存在的编码。
+ * 目录若渲染勾选框，勾上会往 s_user_power 写一条 s_power 里不存在的编码。
  */
 const canAuthorizeEntry = computed(() => menuType.value === 'page' || menuType.value === 'external')
 
@@ -124,70 +143,17 @@ function isChecked(powerId) {
   return checkedSet.value.has(String(powerId))
 }
 
-/** 整组（整模块）全选 / 全不选；全选时同样联动补上菜单入口 */
-function toggleModule(row) {
-  const ids = row.powers.map((power) => String(power.b_id))
-  const next = checkedPowerIds.value.map(String).filter((id) => !ids.includes(id))
-  if (!row.allChecked) {
-    next.push(...ids)
-    ensureMenuEntry(next)
-  }
-  checkedPowerIds.value = next
-}
-
-/**
- * 模块使用开关（保护性单向联动，只保证不出现「有动作权限、没有模块权限」的死配置）：
- *   - 打开：开模块本身，并顺带补上菜单入口（入口跟随模块，见 ensureMenuEntry）；
- *   - 关闭：连带清掉该模块下的操作权限（不然勾着也不生效）；
- *   动作权限由用户另外勾，要一键全给用行尾的「全选」。
- */
-function toggleModuleAccess(group) {
-  const accessId = String(group.accessPower?.b_id || '')
-  if (!accessId) return
-  const next = checkedPowerIds.value.map(String)
-  const index = next.indexOf(accessId)
-  if (index < 0) {
-    next.push(accessId)
-    ensureMenuEntry(next)
-    checkedPowerIds.value = next
-    return
-  }
-  const actionIds = group.actionPowers.map((power) => String(power.b_id))
-  next.splice(index, 1)
-  checkedPowerIds.value = next.filter((id) => !actionIds.includes(id))
-}
-
-/**
- * 操作权限 chip：勾上任意一个动作时，自动补上同模块的「模块使用」与菜单入口
- * （动作以模块权限为前提、模块以入口为前提，否则是勾了不生效的死配置）；
- * 取消动作则不动模块开关 —— 可能只是不做这个动作，模块本身还要用。
- */
-function toggleActionPower(group, power) {
-  const id = String(power.b_id)
-  const next = checkedPowerIds.value.map(String)
-  const index = next.indexOf(id)
-  if (index >= 0) {
-    next.splice(index, 1)
-  } else {
-    next.push(id)
-    const accessId = String(group.accessPower?.b_id || '')
-    if (accessId && !next.includes(accessId)) next.push(accessId)
-    ensureMenuEntry(next)
-  }
-  checkedPowerIds.value = next
-}
-
-/** 模块使用权限点（b_action = 'access'）：每个模块最多一个，在行内呈现为开关 */
+/** 模块使用权限点（b_action = 'access'）：每个模块最多一个，不进「动作」列 */
 function isModuleAccessPower(power) {
   return String(power?.b_action || '').trim() === MODULE_ACCESS_ACTION
 }
 
 /**
- * 模块行：模块使用 + 它的操作权限。
+ * 表格行：一个模块一行。
  *
- * 一个模块的权限点分两类，界面上必须分得开（设计文档 §14.1 / §3.3）：
- *   - 模块使用（b_action = 'access'）：能不能用这个模块 —— 一个开关；
- *   - 操作权限（其余业务动作）：能用它做哪些动作 —— 一组 chip。
+ * 一个模块的权限点分两类（设计文档 §14.1 / §3.3）：
+ *   - 模块使用（b_action = 'access'）：能不能用这个模块，并入模块级勾选框（与全部动作一起全给全撤）；
+ *   - 动作权限（其余业务动作）：能用它做哪些动作，渲染在「动作」列。
  * 只保留「配了权限点」的模块；没配权限点的模块直接不渲染，也不出空态文案。
  */
 const groups = computed(() => {
@@ -196,27 +162,64 @@ const groups = computed(() => {
     .map((moduleId) => {
       const module = props.moduleById.get?.(moduleId) || null
       const powers = props.powerByModule[moduleId] || []
-      const checked = powers.filter((power) => checkedSet.value.has(String(power.b_id))).length
+      // 动作名在这里 translate 一次（模板直接用 label）：勾选框的文案与 title
+      // 都要用同一个名字，两处各写一遍表达式不划算。
+      const actionPowers = powers
+        .filter((power) => !isModuleAccessPower(power))
+        .map((power) => ({
+          ...power,
+          label: translate(power.b_i18n, power.b_name || power.b_action),
+        }))
+      // 模块级勾选框要覆盖「模块使用 + 全部动作」，所以判定用的是权限点总数，
+      // 与「动作」列展示的动作数（actionTotal）不是一回事
+      const checkedCount = powers.filter((power) => checkedSet.value.has(String(power.b_id))).length
       return {
         moduleId,
         moduleName: translate(module?.b_i18n, module?.b_name || moduleId),
         powers,
         accessPower: powers.find(isModuleAccessPower) || null,
-        actionPowers: powers.filter((power) => !isModuleAccessPower(power)),
-        checked,
-        allChecked: powers.length > 0 && checked === powers.length,
+        actionPowers,
+        actionChecked: actionPowers.filter((power) => checkedSet.value.has(String(power.b_id)))
+          .length,
+        actionTotal: actionPowers.length,
+        allChecked: powers.length > 0 && checkedCount === powers.length,
+        someChecked: checkedCount > 0,
       }
     })
     .filter((group) => group.powers.length > 0)
 })
 
-/* ---------- 入口联动与分区批量 ---------- */
+/** 页头进度：本页模块总数与「至少给了权限」的模块数，不展开也能看出配了多少 */
+const pageSummary = computed(() => {
+  if (!groups.value.length) return ''
+  const granted = groups.value.filter((group) => group.someChecked).length
+  return `本页 ${groups.value.length} 个模块，已授权 ${granted} 个`
+})
 
-/** 当前菜单下所有模块的权限点编码（关入口 / 分区清空时连带收回） */
+/** 模块级勾选框的悬停说明：说清点它会发生什么（全给还是全撤） */
+function moduleTitle(group) {
+  return group.allChecked
+    ? `取消「${group.moduleName}」的全部授权`
+    : `全选「${group.moduleName}」的 ${group.powers.length} 项权限`
+}
+
+/* ---------- 入口联动与批量 ---------- */
+
+/** 当前菜单下所有模块的权限点编码（关入口时连带收回） */
 const allMenuPowerIds = computed(() =>
   groups.value.flatMap((group) => group.powers.map((power) => String(power.b_id))),
 )
 
+/**
+ * 页头入口的悬停说明。关掉入口会连带收回该页面的模块与动作授权（入口关了这些授权
+ * 都不生效）—— 这条只说明"关掉时会发生什么"，属于操作补充信息，不常显：
+ * 常显它等于把页面级的一个属性写成一段警告，正是这块之前做得过"重"的原因。
+ */
+const entryTitle = computed(() => {
+  const base = `可访问「${menuName.value}」`
+  return groups.value.length ? `${base}（关闭会收回该页面下的全部模块授权）` : base
+})
+
 /**
  * 入口联动：勾任一模块 / 动作时，把该菜单的入口权限一并补上。
  *
@@ -232,7 +235,7 @@ function ensureMenuEntry(ids) {
 }
 
 /**
- * 「菜单访问」分区的入口开关。与「模块使用 → 动作」同构的保护性联动：
+ * 页头「可访问」开关。与模块级勾选框同构的保护性单向联动：
  *   - 打开：只补入口本身（可以先开入口、再慢慢配模块）；
  *   - 关闭：连带收回该菜单下所有模块与动作权限 —— 入口关了这些授权都不生效，
  *     留着只会变成看不见的僵尸数据，也避免重开时误以为「已经清过了」。
@@ -252,6 +255,42 @@ function toggleMenuAccess() {
   checkedPowerIds.value = next.filter((id) => !scoped.includes(id))
 }
 
+/**
+ * 模块级勾选框：该模块全给 / 全撤。
+ * 半选（进了模块但只给了部分动作）时点一下 = 补齐到全选，与勾选框组的常规语义一致。
+ * 全给时顺带补菜单入口 —— 入口跟随模块，见 ensureMenuEntry。
+ */
+function toggleModule(group) {
+  const ids = group.powers.map((power) => String(power.b_id))
+  const next = checkedPowerIds.value.map(String).filter((id) => !ids.includes(id))
+  if (!group.allChecked) {
+    next.push(...ids)
+    ensureMenuEntry(next)
+  }
+  checkedPowerIds.value = next
+}
+
+/**
+ * 单个动作权限：勾上任意一个动作时，自动补上同模块的「模块使用」与菜单入口
+ * （动作以模块权限为前提、模块以入口为前提，否则是勾了不生效的死配置）；
+ * 取消动作则不动模块使用 —— 可能只是不做这个动作，模块本身还要用
+ * （此时模块级勾选框落到半选态）。
+ */
+function toggleActionPower(group, power) {
+  const id = String(power.b_id)
+  const next = checkedPowerIds.value.map(String)
+  const index = next.indexOf(id)
+  if (index >= 0) {
+    next.splice(index, 1)
+  } else {
+    next.push(id)
+    const accessId = String(group.accessPower?.b_id || '')
+    if (accessId && !next.includes(accessId)) next.push(accessId)
+    ensureMenuEntry(next)
+  }
+  checkedPowerIds.value = next
+}
+
 /* ---------- 账号级批量：全授权 / 全禁用 ---------- */
 /**
  * 作用于该账号的**全部功能权限**（s_power 里所有启用权限点，含所有菜单入口、
@@ -294,88 +333,78 @@ function disableAll() {
         />
       </div>
 
-      <!-- 右：菜单访问 + 模块权限（占满高度，本栏自己滚动） -->
+      <!-- 右：页头（菜单入口，固定）+ 模块 / 动作表（滚动） -->
       <div class="power-panel__main">
         <div v-if="loading" class="power-panel__state"><Spin /></div>
 
         <div v-else-if="!selectedMenuId" class="power-panel__state">请选择左侧菜单</div>
 
-        <div v-else class="power-panel__list">
-          <!-- 分区一：菜单入口（menu.{编码}）—— 能否进入这个菜单页面；
-             目录只是导航分组（menu.* 只由页面 / 外链派生），没有可授权的入口 -->
-          <section class="power-section">
-            <h3 class="power-section__title">菜单访问</h3>
-            <div v-if="canAuthorizeEntry" class="power-row">
-              <span class="power-row__name" :title="menuName">{{ menuName }}</span>
-              <div class="power-row__access">
-                <Switch
-                  :model-value="isChecked(menuPowerCode)"
-                  :aria-label="`${menuName} 菜单访问`"
-                  :title="
-                    groups.length
-                      ? `${menuName} 菜单访问（关闭会收回该菜单下的全部授权）`
-                      : `${menuName} 菜单访问`
-                  "
-                  @update:model-value="toggleMenuAccess"
-                />
-              </div>
-            </div>
-            <p v-else class="power-panel__hint">
-              目录只是分组节点，可见性与子菜单一致，不需要单独授权。
-            </p>
-          </section>
+        <template v-else>
+          <!-- 页头：当前菜单名 + 入口权限（menu.{编码}）。入口是页面级属性，
+               与下方"页面里能用哪些模块"不是同一层，所以做成页头而不是表里的一行。
+               目录只是导航分组（menu.* 只由页面 / 外链派生），没有可授权的入口 -->
+          <div class="power-head">
+            <h3 class="power-head__name" :title="menuName">{{ menuName }}</h3>
+            <Checkbox
+              v-if="canAuthorizeEntry"
+              class="power-head__entry"
+              :model-value="isChecked(menuPowerCode)"
+              :title="entryTitle"
+              @change="toggleMenuAccess"
+            >
+              可访问
+            </Checkbox>
+            <!-- 目录没有 menu.* 权限点：只说明为什么这里没有可勾的东西 -->
+            <span v-else class="power-head__note">目录不需要单独授权</span>
+            <span v-if="pageSummary" class="power-head__meta">{{ pageSummary }}</span>
+          </div>
 
-          <!-- 分区二：该菜单绑定模块的权限点（没配权限点的模块不渲染，也不出空态文案） -->
-          <section v-if="groups.length" class="power-section">
-            <h3 class="power-section__title">模块权限</h3>
-            <div v-for="group in groups" :key="group.moduleId" class="power-row">
-              <span class="power-row__name" :title="group.moduleName">{{ group.moduleName }}</span>
-              <!-- 模块使用（能不能用这个模块）：开关，与「菜单访问」同一列 -->
-              <div v-if="group.accessPower" class="power-row__access">
-                <Switch
-                  :model-value="isChecked(group.accessPower.b_id)"
-                  :aria-label="`${group.moduleName} 模块使用`"
-                  :title="`${group.moduleName} 模块使用`"
-                  @update:model-value="toggleModuleAccess(group)"
-                />
-              </div>
-              <!-- 操作权限（能用它做哪些动作）：一组 chip；没有动作权限点时整列不渲染 -->
-              <div v-if="group.actionPowers.length" class="power-row__caps">
-                <button
-                  v-for="power in group.actionPowers"
-                  :key="power.b_id"
-                  type="button"
-                  class="power-chip"
-                  :class="{ 'is-checked': isChecked(power.b_id) }"
-                  role="checkbox"
-                  :aria-checked="isChecked(power.b_id)"
-                  :aria-label="String(power.b_name || power.b_id)"
-                  @click="toggleActionPower(group, power)"
-                >
-                  <Check
-                    v-if="isChecked(power.b_id)"
-                    :size="12"
-                    :stroke-width="3"
-                    aria-hidden="true"
-                  />
-                  {{ translate(power.b_i18n, power.b_name || power.b_action) }}
-                </button>
-              </div>
-              <div class="power-row__tail">
-                <button
-                  v-if="group.powers.length > 1"
-                  type="button"
-                  class="power-row__toggle"
-                  :title="group.allChecked ? '清空该模块' : '全选该模块'"
-                  @click="toggleModule(group)"
-                >
-                  {{ group.allChecked ? '清空' : '全选' }}
-                </button>
-                <span class="power-row__count">{{ group.checked }}/{{ group.powers.length }}</span>
+          <!-- 一个模块一行。没有任何可授权模块的页面（外链、自定义页、模块都没配权限点）
+               连表头也不渲染：一张空表只剩列名，不提供任何信息 -->
+          <div v-if="groups.length" class="power-grid">
+            <div class="power-grid__head">
+              <span class="power-col--module">模块</span>
+              <span class="power-col--actions">动作</span>
+              <span class="power-col--count" title="该模块已授权的动作数">已选</span>
+            </div>
+
+            <div class="power-grid__body">
+              <!-- 一行一个模块：模块级勾选在「模块」列，动作勾选在「动作」列。
+                   没配权限点的模块不渲染，也不出空态文案 -->
+              <div v-for="group in groups" :key="group.moduleId" class="power-row">
+                <div class="power-col--module power-row__module">
+                  <Checkbox
+                    :model-value="group.allChecked"
+                    :indeterminate="group.someChecked && !group.allChecked"
+                    :title="moduleTitle(group)"
+                    @change="toggleModule(group)"
+                  >
+                    {{ group.moduleName }}
+                  </Checkbox>
+                </div>
+
+                <!-- 动作权限（能用它做哪些动作）：流式铺排，一行放不下就换行 -->
+                <div class="power-col--actions power-row__actions">
+                  <Checkbox
+                    v-for="power in group.actionPowers"
+                    :key="power.b_id"
+                    :model-value="isChecked(power.b_id)"
+                    :title="`${group.moduleName} ${power.label}`"
+                    @change="toggleActionPower(group, power)"
+                  >
+                    {{ power.label }}
+                  </Checkbox>
+                </div>
+
+                <div class="power-col--count">
+                  <template v-if="group.actionTotal">
+                    {{ group.actionChecked }}/{{ group.actionTotal }}
+                  </template>
+                </div>
               </div>
             </div>
-          </section>
-        </div>
+          </div>
+        </template>
       </div>
     </div>
   </div>
@@ -391,7 +420,7 @@ function disableAll() {
 }
 
 /* 工具栏：账号级批量操作，横跨面板；与下方「选菜单 → 配模块」的内容区分开。
-   左右缩进与两栏内容对齐（左 4px 对齐树、右 12px 对齐列表） */
+   左右缩进与两栏内容对齐（左 4px 对齐树、右 12px 对齐表格） */
 .power-toolbar {
   display: flex;
   flex: none;
@@ -428,172 +457,185 @@ function disableAll() {
   border-right: 1px solid var(--fms-border);
 }
 
+/* 右栏：页头固定，表格自己滚动 */
 .power-panel__main {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   height: 100%;
   min-width: 0;
   min-height: 0;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
-/* 分区之间留白，一个分区 = 一个授权维度（菜单访问 / 模块权限） */
-.power-panel__list {
+/* 页头：当前菜单名 + 入口权限。它是这一屏的前提（进不进得来），
+   所以固定在顶部、不随表格滚走，并用一条分隔线与下方内容分开 */
+.power-head {
   display: flex;
-  flex-direction: column;
-  gap: 18px;
-  padding: 4px 12px 16px 4px;
-}
-
-.power-section {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-/* 分区标题：结构锚点，不是说明文案 */
-.power-section__title {
-  margin: 0 0 6px;
-  padding: 0 8px;
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* 说明文案：目录等「没有可授权项」的节点 */
-.power-panel__hint {
-  margin: 0;
-  padding: 4px 8px;
-  color: var(--fms-text-secondary);
-  font-size: var(--fms-font-size);
-}
-
-/* 行式四列：资源名（定宽）| 使用开关（定宽成列）| 操作 chip | 行尾「全选 / 计数」。
-   开关列把「能不能用」抽成一条竖列，与右侧「能做什么」的 chip 天然分开；
-   显式声明各列位置，缺开关 / 缺操作时也不会串位。 */
-.power-row {
-  display: grid;
-  grid-template-columns: 120px 48px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 10px;
-  min-height: 34px;
-  padding: 3px 8px;
-  border-radius: var(--fms-control-radius);
-  transition: background-color var(--fms-duration-fast) var(--fms-ease-standard);
+  gap: 8px;
+  flex: none;
+  padding: 2px 12px 10px 16px;
+  border-bottom: 1px solid var(--fms-border);
 }
 
-.power-row:hover {
-  background: var(--fms-secondary-hover);
-}
-
-.power-row__name {
-  grid-column: 1;
+/* 菜单名是这一栏的标题，不是表格里的一行：入口勾选框是它的附属属性 */
+.power-head__name {
+  margin: 0;
   overflow: hidden;
   color: var(--fms-text);
-  font-weight: 500;
+  font-size: var(--fms-font-size);
+  font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 使用开关列：与「菜单访问」的开关同一列，竖着扫一眼就知道哪些模块能用 */
-.power-row__access {
-  display: flex;
-  grid-column: 2;
-  align-items: center;
+/* 页头的「可访问」：页面级开关，与表格里的模块勾选不是同一层。
+   留出内边距当作热区（表格里的勾选框为对齐列而不带内边距），
+   用负外边距把这 6px 内边距抵消掉，视觉间距仍等于 .power-head 的 gap。
+   这里不改 ui/Checkbox 的 gap：只叠它没定义的属性，避免与组件自带样式抢同一属性 */
+.power-head__entry {
+  margin-left: -6px;
+  padding: 2px 6px;
+  border-radius: var(--fms-control-radius);
+  transition: background-color var(--fms-duration-fast) var(--fms-ease-standard);
 }
 
-/* 操作权限列：能用它做哪些动作 */
-.power-row__caps {
+.power-head__entry:hover {
+  background: var(--fms-secondary-hover);
+}
+
+/* 页头的进度说明：次要信息，不抢标题 */
+.power-head__meta {
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.power-head__note {
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
+
+/* 权限表：表头 + 行组成「模块 / 动作 / 已选」三列。
+   三层权限的层级落在列上（模块列只有模块级勾选、动作列只有动作勾选），
+   不再靠嵌套容器的底色深浅区分 */
+.power-grid {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  padding-top: 10px;
+}
+
+.power-grid__head {
   display: flex;
-  grid-column: 3;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: 12px;
+  flex: none;
+  padding: 0 12px 6px 16px;
+  border-bottom: 1px solid var(--fms-border-soft);
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
+
+.power-grid__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.power-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 7px 12px 7px 16px;
+  border-bottom: 1px solid var(--fms-border-soft);
+  transition: background-color var(--fms-duration-fast) var(--fms-ease-standard);
+}
+
+/* 悬停整行高亮：这是勾选框的主要热区反馈，比逐个勾选框亮底色更完整，
+   也让「这一行属于哪个模块」在读动作时始终可见 */
+.power-row:hover {
+  background: var(--fms-secondary-hover);
+}
+
+/* 列宽：表头与行共用同一组类，三列才严格对齐 */
+.power-col--module {
+  flex: none;
+  width: 150px;
+}
+
+.power-col--actions {
+  flex: 1;
   min-width: 0;
 }
 
-/* 与左侧「使用」开关用浅分隔线分开 —— 只有该行确实有开关时才画 */
-.power-row__access + .power-row__caps {
-  padding-left: 12px;
-  border-left: 1px solid var(--fms-border-soft);
-}
-
-/* 权限点 chip：勾选 = 主色淡底 + 描边 + 对勾；未勾选 = 灰描边。
-   权限点是「有没有这个能力」的开关，用 chip 比方框轻，也不与模块并列时抢视线 */
-.power-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: var(--fms-control-height);
-  padding: 0 10px;
-  border: 1px solid var(--fms-border);
-  border-radius: 999px;
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  font-family: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  transition:
-    color var(--fms-duration-fast) var(--fms-ease-standard),
-    border-color var(--fms-duration-fast) var(--fms-ease-standard),
-    background-color var(--fms-duration-fast) var(--fms-ease-standard);
-}
-
-.power-chip:hover {
-  border-color: color-mix(in srgb, var(--fms-primary) 40%, var(--fms-border));
-  color: var(--fms-text);
-}
-
-.power-chip.is-checked {
-  border-color: color-mix(in srgb, var(--fms-primary) 45%, transparent);
-  background: var(--fms-primary-soft);
-  color: var(--fms-primary);
-  font-weight: 500;
-}
-
-.power-chip:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--fms-primary) 55%, transparent);
-  outline-offset: 1px;
-}
-
-/* 行尾：整模块全选 / 清空（hover 或键盘聚焦时出现）+ 已选计数 */
-.power-row__tail {
-  display: flex;
-  grid-column: 4;
-  align-items: center;
-  gap: 6px;
-}
-
-.power-row__toggle {
-  min-width: 32px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--fms-primary);
-  font-family: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  visibility: hidden;
-}
-
-.power-row:hover .power-row__toggle,
-.power-row:focus-within .power-row__toggle {
-  visibility: visible;
-}
-
-.power-row__toggle:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--fms-primary) 55%, transparent);
-  outline-offset: 1px;
-}
-
-.power-row__count {
-  min-width: 26px;
+.power-col--count {
+  flex: none;
+  width: 52px;
   color: var(--fms-text-secondary);
   font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 26px;
   text-align: right;
 }
 
+/* 模块列与动作列都是勾选框，行高与「已选」列的首行对齐 */
+.power-row__module,
+.power-row__actions {
+  display: flex;
+  align-items: center;
+  min-height: 26px;
+}
+
+/* 动作流式铺排（宽度跟文案走），一行放不下换行。
+   不用等宽列 —— 等宽列会形成看不见的竖向对齐，动作名长短不一时间距忽宽忽窄；
+   流式排布下每个勾选单元自身完整，读起来是一串选项而不是一张网格 */
+.power-row__actions {
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+}
+
+/* ui/Checkbox 落在表格里的形态调整：只调间距与配色上下文，
+   方框、对勾、半选、聚焦环仍由 ui/Checkbox 自己定义（不在这里重画）。
+   表格比表单密，勾选框与文案的间距收到 6px */
+.power-grid :deep(.checkbox) {
+  gap: 6px;
+}
+
+.power-row__module :deep(.checkbox) {
+  max-width: 100%;
+  color: var(--fms-text);
+  font-weight: 500;
+}
+
+/* 动作名未勾选时保持次要色（继承 .checkbox 的正文色会抢模块名），勾选后才提到正文色 */
+.power-row__actions :deep(.checkbox) {
+  color: var(--fms-text-secondary);
+}
+
+.power-row__actions :deep(.checkbox-checked) {
+  color: var(--fms-text);
+  font-weight: 500;
+}
+
+/* 名称超长时不撑破列宽，省略后靠 title 查看全称 */
+.power-grid :deep(.checkbox-label) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 空态 / 加载态：占满右栏并居中。贴顶显示时下方留一大片空白，重心明显偏上。
+   height:100% 依赖上方的确定高度链（.power-panel__main 已有 height:100%） */
 .power-panel__state {
-  padding: 24px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
   color: var(--fms-text-secondary);
   font-size: var(--fms-font-size);
   text-align: center;
diff --git a/code/fms/fms-vue/tests/views/user-power-drawer.spec.js b/code/fms/fms-vue/tests/views/user-power-drawer.spec.js
index 7f243304..1f0d4269 100644
--- a/code/fms/fms-vue/tests/views/user-power-drawer.spec.js
+++ b/code/fms/fms-vue/tests/views/user-power-drawer.spec.js
@@ -1,8 +1,8 @@
 /**
  * 分配权限抽屉（UserPowerDrawer）：头部结构。
  *
- * 数据加载与保存由本组件负责（面板只读展示），测试只锁头部两件事：
- *   1. 头部不渲染标题：只有页签一行 + ui/Drawer 的关闭按钮，没有其它元素；
+ * 数据加载与保存由本组件负责（面板只读展示），测试只锁结构两件事：
+ *   1. 头部常规显示：左侧账号标识标题 + 右侧关闭按钮，页签在内容区顶部；
  *   2. 三个页签对应三张权限表的内容面板（切换页签不销毁，用 v-show 承载）。
  *
  * 面板自身的规则由 user-power-panel.spec.js 覆盖（含「全授权 / 全禁用」），这里不重复。
@@ -38,16 +38,28 @@ async function mountDrawer() {
 }
 
 describe('分配权限抽屉：头部', () => {
-  it('头部只有页签一行：无标题、无批量按钮，关闭按钮由 ui/Drawer 提供', async () => {
+  it('头部常规显示：账号标识标题 + 关闭按钮，页签在内容区', async () => {
     const wrapper = await mountDrawer()
 
-    expect(wrapper.find('.fms-drawer-title').exists()).toBe(false)
-    expect(wrapper.find('.fms-drawer-extra .tabs-nav').exists()).toBe(true)
+    expect(wrapper.find('.fms-drawer-title').text()).toBe('分配权限 · 张三（001）')
     expect(wrapper.find('.fms-drawer-close').exists()).toBe(true)
+    // header 让给账号标识：页签不在 header 里，在内容区顶部
+    expect(wrapper.find('.fms-drawer-header .tabs-nav').exists()).toBe(false)
+    expect(wrapper.find('.power-drawer__nav .tabs-nav').exists()).toBe(true)
     // 账号级批量按钮不在头部（在功能权限面板的工具栏里）
     expect(wrapper.find('.fms-drawer-header button.button').exists()).toBe(false)
   })
 
+  it('账号缺名称时标题只回退到编码', async () => {
+    const wrapper = mount(UserPowerDrawer, {
+      props: { open: true, user: { b_id: '001' } },
+      global: { stubs: { teleport: true } },
+    })
+    await flushPromises()
+
+    expect(wrapper.find('.fms-drawer-title').text()).toBe('分配权限 · 001')
+  })
+
   it('三个页签对应三张权限表的内容面板', async () => {
     const wrapper = await mountDrawer()
 
diff --git a/code/fms/fms-vue/tests/views/user-power-panel.spec.js b/code/fms/fms-vue/tests/views/user-power-panel.spec.js
index 8d9f230d..d3bc74f0 100644
--- a/code/fms/fms-vue/tests/views/user-power-panel.spec.js
+++ b/code/fms/fms-vue/tests/views/user-power-panel.spec.js
@@ -4,14 +4,16 @@
  * 数据加载与保存由父级 UserPowerDrawer 负责，面板自身只做这几件事，测试只锁这几件：
  *   1. 打开时的初始状态：只展开「全部分类」虚拟根，业务目录收起、不选中任何菜单；
  *   2. 菜单选中语义：重复点击已选中的菜单不取消选中，只有点「全部分类」才清空；
- *   3. 右侧两个分区：菜单访问（入口开关）+ 模块权限
- *      （模块名 | 模块使用开关 | 操作权限 chip | 行尾全选与计数）。
- *      目录不渲染入口开关、没配权限点的模块不渲染，都不出空态文案；
+ *   3. 右侧结构：页头（菜单名 + 入口勾选框 + 本页进度）+ 一张「模块 / 动作 / 已选」三列表。
+ *      模块级勾选在「模块」列、动作勾选在「动作」列，层级靠列而不是靠嵌套容器；
+ *      目录不渲染入口勾选框、没配权限点的模块不渲染，都不出空态文案；
  *   4. 面板顶部工具栏的「全授权 / 全禁用」作用于该账号的全部功能权限（s_power 全量），
  *      与左侧选中哪个菜单无关；
  *   5. 勾选结果经 v-model 回传，三层是「保护性单向联动」：
- *      勾动作补模块使用与入口，勾模块补入口，关模块清该模块动作，
- *      关入口收回该菜单下的全部授权。
+ *      勾动作补模块使用与入口，模块级勾选框全给全撤，关入口收回该菜单下的全部授权。
+ *
+ * 勾选框是 ui/Checkbox（label 包原生 input），测试直接驱动 input 的 change ——
+ * jsdom 不保证 label 点击会转发给内部控件，走 change 才是组件真实监听的入口。
  */
 import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
@@ -30,7 +32,11 @@ const MENU_TREE = [
 ]
 
 const MENU_MODULES = {
-  partner: [{ b_menu_id: 'partner', b_module_id: 'v_b_othercompany', b_xh: 10 }],
+  // 合作伙伴菜单绑两个模块，动作集不同 → 验证动作各自成组、互不影响
+  partner: [
+    { b_menu_id: 'partner', b_module_id: 'v_b_othercompany', b_xh: 10 },
+    { b_menu_id: 'partner', b_module_id: 'v_b_contact', b_xh: 20 },
+  ],
   // 用户管理绑两个模块，其中币种（b_money）没配权限点 → 验证「未配置权限点的模块不渲染」
   user: [
     { b_menu_id: 'user', b_module_id: 'v_b_user', b_xh: 10 },
@@ -40,14 +46,24 @@ const MENU_MODULES = {
 
 const MODULE_BY_ID = new Map([
   ['v_b_othercompany', { b_id: 'v_b_othercompany', b_name: '合作伙伴' }],
+  ['v_b_contact', { b_id: 'v_b_contact', b_name: '联系人' }],
   ['v_b_user', { b_id: 'v_b_user', b_name: '用户管理' }],
   ['b_money', { b_id: 'b_money', b_name: '币种' }],
 ])
 
+/** 每个模块的权限点：access 是「模块使用」（并入模块级勾选框），其余是「动作」列 */
 const POWER_BY_MODULE = {
   v_b_othercompany: [
     { b_id: 'module.v_b_othercompany', b_name: '模块使用', b_action: 'access' },
     { b_id: 'action.v_b_othercompany.create', b_name: '新增', b_action: 'create' },
+    { b_id: 'action.v_b_othercompany.update', b_name: '修改', b_action: 'update' },
+    { b_id: 'action.v_b_othercompany.audit', b_name: '审核', b_action: 'audit' },
+  ],
+  // 联系人只有新增 / 删除：动作列也只剩这两项
+  v_b_contact: [
+    { b_id: 'module.v_b_contact', b_name: '模块使用', b_action: 'access' },
+    { b_id: 'action.v_b_contact.create', b_name: '新增', b_action: 'create' },
+    { b_id: 'action.v_b_contact.delete', b_name: '删除', b_action: 'delete' },
   ],
   v_b_user: [{ b_id: 'module.v_b_user', b_name: '模块使用', b_action: 'access' }],
 }
@@ -59,9 +75,22 @@ const ALL_POWER_IDS = [
   'menu.user',
   'module.v_b_othercompany',
   'action.v_b_othercompany.create',
+  'action.v_b_othercompany.update',
+  'action.v_b_othercompany.audit',
+  'module.v_b_contact',
+  'action.v_b_contact.create',
+  'action.v_b_contact.delete',
   'module.v_b_user',
 ]
 
+/** 合作伙伴模块（v_b_othercompany）的权限点全量：模块级勾选框勾上时就该是这些 */
+const OTHERCOMPANY_ALL = [
+  'module.v_b_othercompany',
+  'action.v_b_othercompany.create',
+  'action.v_b_othercompany.update',
+  'action.v_b_othercompany.audit',
+]
+
 beforeEach(() => {
   localStorage.clear()
   sessionStorage.clear()
@@ -95,26 +124,59 @@ function findRow(wrapper, text) {
   return wrapper.findAll('.tree-node').find((row) => row.text().includes(text))
 }
 
-/** 分区标题清单 */
-function sectionTitles(wrapper) {
-  return wrapper.findAll('.power-section__title').map((el) => el.text())
-}
-
-/** 模块权限区的行名清单（跳过「菜单访问」分区的那一行） */
+/** 模块行的模块名清单（按行顺序） */
 function moduleNames(wrapper) {
-  const section = wrapper.findAll('.power-section')[1]
-  return section ? section.findAll('.power-row__name').map((el) => el.text()) : []
+  return wrapper.findAll('.power-row__module .checkbox-label').map((el) => el.text())
 }
 
-/** 「菜单访问」分区的入口开关（目录没有入口权限点时返回 undefined） */
-function entrySwitch(wrapper) {
-  return wrapper.findAll('.power-section')[0]?.find('[role="switch"]')
+/** 页头（菜单名 + 入口）的入口勾选框（目录没有入口权限点时返回 undefined） */
+function entryCheck(wrapper) {
+  const found = wrapper.find('.power-head__entry')
+  return found.exists() ? found : undefined
 }
 
-/** 模块权限区的模块使用开关（第 index 行） */
-function moduleSwitch(wrapper, index = 0) {
-  const section = wrapper.findAll('.power-section')[1]
-  return section ? section.findAll('[role="switch"]')[index] : undefined
+/** 第 index 个模块行的模块级勾选框 */
+function moduleCheck(wrapper, index = 0) {
+  return wrapper.findAll('.power-row__module .checkbox')[index]
+}
+
+/** 勾选框形态的开关总数：页头入口 1 个 + 每行模块 1 个（动作勾选框在「动作」列，不计入） */
+function useChecks(wrapper) {
+  return wrapper.findAll('.power-head__entry, .power-row__module .checkbox')
+}
+
+/** 第 index 行行尾的「已选」计数 */
+function rowCount(wrapper, index = 0) {
+  return wrapper.findAll('.power-row .power-col--count')[index]
+}
+
+/** 某个模块行（按模块名定位，比按下标稳） */
+function moduleRow(wrapper, moduleName) {
+  return wrapper
+    .findAll('.power-row')
+    .find((row) => row.find('.power-row__module .checkbox-label').text() === moduleName)
+}
+
+/**
+ * 动作勾选框：按「模块名 + 动作名」定位。
+ * 动作只有「动作」列有，所以按名字找比按下标找稳，动作数量变化也不影响。
+ */
+function actionCheck(wrapper, moduleName, actionName) {
+  return moduleRow(wrapper, moduleName)
+    .findAll('.power-row__actions .checkbox')
+    .find((el) => el.find('.checkbox-label').text() === actionName)
+}
+
+/** 某个模块的动作名清单（按铺排顺序） */
+function actionNames(wrapper, moduleName) {
+  return moduleRow(wrapper, moduleName)
+    .findAll('.power-row__actions .checkbox-label')
+    .map((el) => el.text())
+}
+
+/** 驱动 ui/Checkbox 内部的原生 input：勾上 / 取消 */
+function setCheck(checkbox, checked = true) {
+  return checkbox.find('.checkbox-input').setValue(checked)
 }
 
 /** 面板顶部工具栏按钮：0 = 全授权，1 = 全禁用 */
@@ -199,54 +261,137 @@ describe('功能权限面板：菜单选中语义', () => {
 })
 
 describe('功能权限面板：右侧结构', () => {
-  it('两个分区：菜单访问 + 模块权限；入口与模块使用各一个开关', async () => {
+  it('页头：菜单名做标题 + 入口勾选框 + 本页进度', async () => {
     const wrapper = await mountWithMenu('partner')
 
-    expect(sectionTitles(wrapper)).toEqual(['菜单访问', '模块权限'])
-    expect(wrapper.findAll('.power-section')[0].find('.power-row__name').text()).toBe('合作伙伴')
-    expect(moduleNames(wrapper)).toEqual(['合作伙伴'])
-    // 开关只有两处：菜单访问 + 模块使用
-    expect(wrapper.findAll('[role="switch"]')).toHaveLength(2)
-    // chip 只剩业务动作，模块使用不再混在里面
-    expect(wrapper.findAll('.power-chip').map((el) => el.text())).toEqual(['新增'])
+    expect(wrapper.find('.power-head__name').text()).toBe('合作伙伴')
+    expect(entryCheck(wrapper).find('.checkbox-label').text()).toBe('可访问')
+    expect(wrapper.find('.power-head__meta').text()).toBe('本页 2 个模块，已授权 0 个')
+    // 页头里只有菜单名、勾选框与进度，没有多余的说明句
+    expect(wrapper.find('.power-head').text()).toBe('合作伙伴 可访问 本页 2 个模块，已授权 0 个')
+  })
+
+  it('本页进度：至少给了一项权限的模块才计入已授权', async () => {
+    const wrapper = await mountWithMenu('partner', {
+      modelValue: ['menu.partner', 'module.v_b_othercompany', 'action.v_b_othercompany.create'],
+    })
+
+    expect(wrapper.find('.power-head__meta').text()).toBe('本页 2 个模块，已授权 1 个')
+  })
+
+  it('入口的连带影响只进 title，不常显在页头', async () => {
+    const wrapper = await mountWithMenu('partner')
+
+    expect(entryCheck(wrapper).attributes('title')).toBe(
+      '可访问「合作伙伴」（关闭会收回该页面下的全部模块授权）',
+    )
+  })
+
+  it('表格：模块 / 动作 / 已选三列，一个模块一行', async () => {
+    const wrapper = await mountWithMenu('partner')
+
+    expect(wrapper.find('.power-grid__head').text()).toBe('模块动作已选')
+    expect(moduleNames(wrapper)).toEqual(['合作伙伴', '联系人'])
+    expect(wrapper.findAll('.power-row')).toHaveLength(2)
+    // 勾选框形态的开关：页头入口 1 个 + 模块级 2 个（动作勾选框在「动作」列，不计入）
+    expect(useChecks(wrapper)).toHaveLength(3)
+  })
+
+  it('动作按模块分行：每行的动作只属于该行模块，互不挤占', async () => {
+    const wrapper = await mountWithMenu('partner')
+
+    expect(actionNames(wrapper, '合作伙伴')).toEqual(['新增', '修改', '审核'])
+    expect(actionNames(wrapper, '联系人')).toEqual(['新增', '删除'])
+  })
+
+  it('动作勾选框挂 title（模块名 + 动作名），名称超长被省略时可查看全称', async () => {
+    const wrapper = await mountWithMenu('partner')
+    expect(actionCheck(wrapper, '合作伙伴', '新增').attributes('title')).toBe('合作伙伴 新增')
+  })
+
+  it('行尾「已选 x/y」= 该模块已授权的动作数 / 动作总数', async () => {
+    const wrapper = await mountWithMenu('partner', {
+      modelValue: ['module.v_b_othercompany', 'action.v_b_othercompany.create'],
+    })
+
+    // 「模块使用」不计入已选：它并入模块级勾选框，与「动作」列不是一回事
+    expect(rowCount(wrapper, 0).text()).toBe('1/3')
+    expect(rowCount(wrapper, 1).text()).toBe('0/2')
+  })
+
+  it('只有模块使用、没有动作的模块不显示计数', async () => {
+    const wrapper = await mountWithMenu('user')
+
+    expect(moduleNames(wrapper)).toEqual(['用户管理'])
+    expect(rowCount(wrapper, 0).text()).toBe('')
+  })
+
+  it('模块级勾选框三态：全选 / 半选 / 未选', async () => {
+    const wrapper = await mountWithMenu('partner')
+
+    // 全选：模块使用 + 全部动作都在
+    await wrapper.setProps({ modelValue: OTHERCOMPANY_ALL })
+    expect(moduleCheck(wrapper, 0).classes()).toContain('checkbox-checked')
+    expect(moduleCheck(wrapper, 0).classes()).not.toContain('checkbox-indeterminate')
+
+    // 半选：进了这个模块，但只给了部分动作
+    await wrapper.setProps({
+      modelValue: ['module.v_b_othercompany', 'action.v_b_othercompany.create'],
+    })
+    expect(moduleCheck(wrapper, 0).classes()).not.toContain('checkbox-checked')
+    expect(moduleCheck(wrapper, 0).classes()).toContain('checkbox-indeterminate')
+
+    // 未选
+    await wrapper.setProps({ modelValue: [] })
+    expect(moduleCheck(wrapper, 0).classes()).not.toContain('checkbox-checked')
+    expect(moduleCheck(wrapper, 0).classes()).not.toContain('checkbox-indeterminate')
+  })
+
+  it('模块级勾选框的 title 说清点它会全给还是全撤', async () => {
+    const wrapper = await mountWithMenu('partner')
+
+    expect(moduleCheck(wrapper, 0).attributes('title')).toBe('全选「合作伙伴」的 4 项权限')
+
+    await wrapper.setProps({ modelValue: OTHERCOMPANY_ALL })
+    expect(moduleCheck(wrapper, 0).attributes('title')).toBe('取消「合作伙伴」的全部授权')
   })
 
   it('已授权的入口渲染为打开态', async () => {
     const wrapper = await mountWithMenu('partner', { modelValue: ['menu.partner'] })
 
     expect(wrapper.vm.menuPowerCode).toBe('menu.partner')
-    expect(entrySwitch(wrapper).attributes('aria-checked')).toBe('true')
+    expect(entryCheck(wrapper).classes()).toContain('checkbox-checked')
   })
 
-  it('目录：不渲染入口开关（没有 menu.* 权限点），只给一行说明', async () => {
+  it('目录：不渲染入口勾选框（没有 menu.* 权限点），只在页头说明原因', async () => {
     const wrapper = await mountWithMenu('base')
 
-    expect(sectionTitles(wrapper)).toEqual(['菜单访问'])
-    expect(wrapper.findAll('[role="switch"]')).toHaveLength(0)
-    expect(wrapper.find('.power-panel__hint').text()).toContain('目录只是分组节点')
+    expect(useChecks(wrapper)).toHaveLength(0)
+    // 目录没有可勾的入口：页头只显示名称，不出现勾选框
+    expect(entryCheck(wrapper)).toBeUndefined()
+    expect(wrapper.find('.power-head__name').text()).toBe('基础资料')
+    expect(wrapper.find('.power-head__note').text()).toBe('目录不需要单独授权')
   })
 
-  it('外链菜单：没有可授权模块，入口开关独立可用', async () => {
+  it('外链菜单：没有可授权模块，连表头都不渲染，入口勾选框独立可用', async () => {
     const wrapper = await mountWithMenu('portal')
 
-    expect(sectionTitles(wrapper)).toEqual(['菜单访问'])
     expect(moduleNames(wrapper)).toEqual([])
+    expect(wrapper.findAll('.power-row')).toHaveLength(0)
+    expect(wrapper.find('.power-grid').exists()).toBe(false)
+    expect(wrapper.find('.power-head__meta').exists()).toBe(false)
 
-    await entrySwitch(wrapper).trigger('click')
-    await nextTick()
-
+    await setCheck(entryCheck(wrapper))
     expect(lastEmitted(wrapper)).toEqual(['menu.portal'])
   })
 
-  it('页面没绑模块（自定义页）：只剩入口开关，勾选即全部权限', async () => {
+  it('页面没绑模块（自定义页）：只剩入口勾选框，勾选即全部权限', async () => {
     const wrapper = await mountWithMenu('partner', { menuModules: {} })
 
-    expect(sectionTitles(wrapper)).toEqual(['菜单访问'])
-    expect(wrapper.findAll('[role="switch"]')).toHaveLength(1)
-
-    await entrySwitch(wrapper).trigger('click')
-    await nextTick()
+    expect(wrapper.find('.power-grid').exists()).toBe(false)
+    expect(useChecks(wrapper)).toHaveLength(1)
 
+    await setCheck(entryCheck(wrapper))
     expect(lastEmitted(wrapper)).toEqual(['menu.partner'])
   })
 
@@ -255,6 +400,8 @@ describe('功能权限面板：右侧结构', () => {
 
     // 「币种」绑定了但没配权限点：不渲染成行，也不出任何提示
     expect(moduleNames(wrapper)).toEqual(['用户管理'])
+    // 只有模块使用权限点的模块没有动作勾选框
+    expect(wrapper.findAll('.power-row__actions .checkbox')).toHaveLength(0)
     expect(wrapper.find('.power-panel__main').text()).not.toContain('未配置权限点')
   })
 })
@@ -299,19 +446,41 @@ describe('功能权限面板：全授权 / 全禁用', () => {
 })
 
 describe('功能权限面板：三层联动', () => {
-  it('勾模块使用：自动补上菜单入口', async () => {
+  it('勾模块级勾选框：一次给全该模块的权限点，并补上菜单入口', async () => {
     const wrapper = await mountWithMenu('partner')
 
-    await moduleSwitch(wrapper).trigger('click')
+    await setCheck(moduleCheck(wrapper))
     await nextTick()
 
-    expect(lastEmitted(wrapper)).toEqual(['module.v_b_othercompany', 'menu.partner'])
+    expect(lastEmitted(wrapper)).toEqual([...OTHERCOMPANY_ALL, 'menu.partner'])
   })
 
-  it('勾操作权限：自动补上模块使用与菜单入口', async () => {
+  it('半选时点模块级勾选框：补齐到全选，不产生重复项', async () => {
+    const wrapper = await mountWithMenu('partner', {
+      modelValue: ['module.v_b_othercompany', 'action.v_b_othercompany.create'],
+    })
+
+    await setCheck(moduleCheck(wrapper))
+    await nextTick()
+
+    expect(lastEmitted(wrapper)).toEqual([...OTHERCOMPANY_ALL, 'menu.partner'])
+  })
+
+  it('取消模块级勾选框：收回该模块的全部权限点，不动菜单入口', async () => {
+    const wrapper = await mountWithMenu('partner', {
+      modelValue: ['menu.partner', ...OTHERCOMPANY_ALL],
+    })
+
+    await setCheck(moduleCheck(wrapper), false)
+    await nextTick()
+
+    expect(lastEmitted(wrapper)).toEqual(['menu.partner'])
+  })
+
+  it('勾单个动作：自动补上模块使用与菜单入口', async () => {
     const wrapper = await mountWithMenu('partner')
 
-    await wrapper.findAll('.power-chip')[0].trigger('click')
+    await setCheck(actionCheck(wrapper, '合作伙伴', '新增'))
     await nextTick()
 
     expect(lastEmitted(wrapper)).toEqual([
@@ -321,21 +490,23 @@ describe('功能权限面板：三层联动', () => {
     ])
   })
 
-  it('关模块使用：只清该模块的操作权限，不动菜单入口', async () => {
+  it('取消单个动作：不动模块使用与入口，模块级勾选框落到半选', async () => {
     const wrapper = await mountWithMenu('partner', {
       modelValue: ['menu.partner', 'module.v_b_othercompany', 'action.v_b_othercompany.create'],
     })
 
-    await moduleSwitch(wrapper).trigger('click')
+    await setCheck(actionCheck(wrapper, '合作伙伴', '新增'), false)
     await nextTick()
 
-    expect(lastEmitted(wrapper)).toEqual(['menu.partner'])
+    expect(lastEmitted(wrapper)).toEqual(['menu.partner', 'module.v_b_othercompany'])
+    expect(moduleCheck(wrapper, 0).classes()).toContain('checkbox-indeterminate')
+    expect(rowCount(wrapper, 0).text()).toBe('0/3')
   })
 
   it('开菜单入口：只补入口本身，不给任何模块权限', async () => {
     const wrapper = await mountWithMenu('partner')
 
-    await entrySwitch(wrapper).trigger('click')
+    await setCheck(entryCheck(wrapper))
     await nextTick()
 
     expect(lastEmitted(wrapper)).toEqual(['menu.partner'])
@@ -346,44 +517,22 @@ describe('功能权限面板：三层联动', () => {
       modelValue: ['menu.partner', 'module.v_b_othercompany', 'action.v_b_othercompany.create'],
     })
 
-    await entrySwitch(wrapper).trigger('click')
+    await setCheck(entryCheck(wrapper), false)
     await nextTick()
 
     expect(lastEmitted(wrapper)).toEqual([])
   })
 
-  it('取消单个操作权限：不动模块使用与入口', async () => {
-    const wrapper = await mountWithMenu('partner', {
-      modelValue: ['menu.partner', 'module.v_b_othercompany', 'action.v_b_othercompany.create'],
-    })
-
-    await wrapper.findAll('.power-chip')[0].trigger('click')
-    await nextTick()
-
-    expect(lastEmitted(wrapper)).toEqual(['menu.partner', 'module.v_b_othercompany'])
-  })
-
-  it('勾选态回显：操作权限 chip 与模块使用开关各管各的', async () => {
+  it('勾选态回显：各行动作各管各的，只勾动作时模块级是半选', async () => {
     const wrapper = await mountWithMenu('partner', {
       modelValue: ['action.v_b_othercompany.create'],
     })
 
-    expect(wrapper.findAll('.power-chip')[0].classes()).toContain('is-checked')
-    expect(wrapper.findAll('.power-chip')[0].attributes('aria-checked')).toBe('true')
-    // 模块使用未授权 → 开关是关的
-    expect(moduleSwitch(wrapper).attributes('aria-checked')).toBe('false')
-  })
-
-  it('行尾「全选」：补齐该模块的权限点并联动入口', async () => {
-    const wrapper = await mountWithMenu('partner')
-
-    await wrapper.find('.power-row__toggle').trigger('click')
-    await nextTick()
-
-    expect(lastEmitted(wrapper)).toEqual([
-      'module.v_b_othercompany',
-      'action.v_b_othercompany.create',
-      'menu.partner',
-    ])
+    expect(actionCheck(wrapper, '合作伙伴', '新增').classes()).toContain('checkbox-checked')
+    expect(actionCheck(wrapper, '合作伙伴', '修改').classes()).not.toContain('checkbox-checked')
+    // 同名动作在别的模块行里不受影响
+    expect(actionCheck(wrapper, '联系人', '新增').classes()).not.toContain('checkbox-checked')
+    // 只勾了动作、没勾模块使用 → 模块级勾选框半选
+    expect(moduleCheck(wrapper, 0).classes()).toContain('checkbox-indeterminate')
   })
 })
diff --git a/code/fms/分配权限抽屉布局草图.html b/code/fms/分配权限抽屉布局草图.html
new file mode 100644
index 00000000..1b2ab8de
--- /dev/null
+++ b/code/fms/分配权限抽屉布局草图.html
@@ -0,0 +1,389 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>分配权限 · 布局草图</title>
+<style>
+/* 值取自 fms-vue/src/theme/tokens.css（浅色），保证草图与系统观感一致 */
+:root{
+  --fms-background:#eef1f6; --fms-card:#fff; --fms-text:#1f2329;
+  --fms-secondary:#e9edf2; --fms-secondary-hover:#f1f5f9;
+  --fms-text-secondary:#6f7784; --fms-border:#e3e8ee; --fms-border-soft:#ebedf2;
+  --fms-primary:#0f172b; --fms-primary-text:#fff; --fms-primary-soft:rgba(15,23,43,.12);
+  --fms-table-header-bg:#f2f4f8;
+  --fms-font-size:13px; --fms-line-height:1.4;
+  --fms-control-height:26px; --fms-control-padding-x:8px;
+  --fms-control-radius:6px; --fms-control-size:16px;
+  --fms-popover-shadow:0 3px 8px rgba(0,0,0,.12); --fms-mask-bg:rgba(0,0,0,.45);
+  --fms-duration-fast:100ms; --fms-duration-base:150ms;
+  --fms-ease-standard:cubic-bezier(.4,0,.2,1);
+  --fms-tree-node-height:32px; --fms-tree-indent:18px;
+}
+*{box-sizing:border-box}
+body{
+  margin:0;padding:28px 24px 40px;background:var(--fms-background);color:var(--fms-text);
+  font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
+  font-size:var(--fms-font-size);line-height:var(--fms-line-height);
+}
+/* ---------- 仅演示用的控件条（不属于设计本身） ---------- */
+.demo-bar{
+  display:flex;align-items:center;gap:8px;margin:0 auto 14px;max-width:920px;
+  padding:8px 12px;border:1px dashed #b9c2cf;border-radius:6px;background:#fff;
+  color:var(--fms-text-secondary);font-size:12px;flex-wrap:wrap;
+}
+.demo-bar strong{color:var(--fms-text);font-weight:600}
+.demo-bar em{font-style:normal;color:#8b93a1;margin-right:2px}
+.demo-btn{
+  height:24px;padding:0 10px;border:1px solid var(--fms-border);border-radius:4px;
+  background:#fff;color:var(--fms-text);font:inherit;font-size:12px;cursor:pointer;
+}
+.demo-btn:hover{background:var(--fms-secondary-hover)}
+.demo-btn.is-on{border-color:var(--fms-primary);background:var(--fms-primary);color:#fff}
+
+/* ---------- 抽屉外壳：按真实 ui/Drawer 复刻 ---------- */
+.drawer{
+  display:flex;flex-direction:column;max-width:920px;height:660px;margin:0 auto;
+  background:var(--fms-card);box-shadow:var(--fms-popover-shadow);border-radius:2px;overflow:hidden;
+}
+.drawer-header{
+  display:flex;align-items:center;gap:12px;flex:none;flex:0 0 auto;
+  padding:8px 20px;border-bottom:1px solid var(--fms-border);
+}
+.drawer-title{
+  margin:0;flex:1;min-width:0;font-size:14px;font-weight:600;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.close{
+  display:inline-flex;align-items:center;justify-content:center;flex:none;
+  width:24px;height:24px;border:0;border-radius:4px;
+  background:transparent;color:var(--fms-text-secondary);font-size:14px;cursor:pointer;
+}
+.close:hover{background:var(--fms-secondary-hover);color:var(--fms-text)}
+.drawer-body{display:flex;flex-direction:column;flex:1;min-height:0}
+.drawer-footer{
+  display:flex;justify-content:flex-end;gap:8px;flex:none;padding:8px 20px;border-top:1px solid var(--fms-border);
+}
+.btn{
+  height:var(--fms-control-height);padding:0 var(--fms-control-padding-x);border-radius:var(--fms-control-radius);
+  border:1px solid var(--fms-border);background:#fff;color:var(--fms-text);font:inherit;cursor:pointer;
+}
+.btn:hover{background:var(--fms-secondary-hover)}
+.btn-primary{border-color:var(--fms-primary);background:var(--fms-primary);color:var(--fms-primary-text)}
+.btn-primary:hover{opacity:.9}
+
+/* ---------- tabs 落在内容区，不在 header ---------- */
+.tabs-band{display:flex;gap:20px;flex:none;padding:0 20px;border-bottom:1px solid var(--fms-border)}
+.ptab{padding:9px 0 8px;color:var(--fms-text-secondary);cursor:pointer;white-space:nowrap}
+.ptab.is-active{color:var(--fms-text);font-weight:600;box-shadow:inset 0 -2px 0 var(--fms-primary)}
+
+/* ---------- 面板：左菜单树 + 右权限表 ---------- */
+.panel{display:flex;flex:1;min-height:0;padding:12px 20px}
+
+/* 左栏：菜单树 */
+.tree{
+  display:flex;flex-direction:column;flex:none;width:220px;height:100%;
+  padding-right:12px;border-right:1px solid var(--fms-border);
+}
+.tree__search{padding:0 0 8px}
+.tree__search input{
+  width:100%;height:var(--fms-control-height);padding:0 8px;border:1px solid var(--fms-border);
+  border-radius:var(--fms-control-radius);font:inherit;color:var(--fms-text);
+}
+.tree__scroll{flex:1;min-height:0;overflow-y:auto}
+.tnode{
+  display:flex;align-items:center;gap:6px;height:var(--fms-tree-node-height);padding:0 8px;
+  border-radius:var(--fms-control-radius);color:var(--fms-text-secondary);cursor:pointer;
+}
+.tnode:hover{background:var(--fms-secondary-hover);color:var(--fms-text)}
+.tnode.is-selected{background:var(--fms-primary-soft);color:var(--fms-text);font-weight:600}
+.tnode__caret{width:12px;flex:none;text-align:center;font-size:10px;color:var(--fms-text-secondary)}
+.tnode--l1{padding-left:26px}
+.tnode--l2{padding-left:44px}
+
+/* 右栏：页头（菜单权限）+ 模块/动作表 */
+.detail{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;padding-left:16px}
+
+/* 页头：菜单入口，唯一的一个页面级开关 */
+.page-band{
+  display:flex;align-items:center;gap:6px;flex:none;min-height:34px;
+  padding:0 8px 8px 0;border-bottom:1px solid var(--fms-border);
+}
+.page-band__name{margin:0;font-size:14px;font-weight:600;white-space:nowrap}
+.page-band__meta{color:var(--fms-text-secondary);font-size:12px}
+.page-band__actions{margin-left:auto;display:flex;gap:2px}
+.link-btn{
+  height:24px;padding:0 8px;border:0;border-radius:4px;background:none;
+  color:var(--fms-text-secondary);font:inherit;font-size:12px;cursor:pointer;
+}
+.link-btn:hover{background:var(--fms-secondary-hover);color:var(--fms-text)}
+
+/* 表头：只有「模块 / 动作」两列，层级靠列而非靠嵌套框 */
+.grid{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:8px}
+.grid__head{
+  display:flex;align-items:center;gap:12px;flex:none;padding:0 8px 6px;
+  color:var(--fms-text-secondary);font-size:12px;border-bottom:1px solid var(--fms-border-soft);
+}
+.col-module{width:160px;flex:none}
+.col-actions{flex:1;min-width:0}
+.col-count{width:52px;flex:none;text-align:right}
+.grid__body{flex:1;min-height:0;overflow-y:auto}
+.grid__body.is-locked{opacity:.45;pointer-events:none}
+
+.row{
+  display:flex;align-items:flex-start;gap:12px;padding:7px 8px;
+  border-bottom:1px solid var(--fms-border-soft);
+  transition:background-color var(--fms-duration-fast) var(--fms-ease-standard);
+}
+.row:hover{background:var(--fms-secondary-hover)}
+.row__module{display:flex;align-items:center;width:160px;flex:none}
+.row__actions{display:flex;flex-wrap:wrap;flex:1;min-width:0;margin:-2px 0}
+.row__count{
+  width:52px;flex:none;text-align:right;line-height:26px;
+  color:var(--fms-text-secondary);font-size:12px;font-variant-numeric:tabular-nums;
+}
+.grid__empty{padding:40px 8px;text-align:center;color:var(--fms-text-secondary)}
+
+/* ---------- 勾选单元：[框] + 文字，整块可点 ---------- */
+.check{
+  display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 6px;
+  border:0;border-radius:var(--fms-control-radius);background:none;
+  color:var(--fms-text-secondary);font:inherit;text-align:left;cursor:pointer;
+  transition:color var(--fms-duration-fast) var(--fms-ease-standard),
+             background-color var(--fms-duration-fast) var(--fms-ease-standard);
+}
+.check:hover{background:var(--fms-secondary);color:var(--fms-text)}
+.check.is-checked{color:var(--fms-text);font-weight:500}
+.box{
+  display:inline-flex;align-items:center;justify-content:center;flex:none;
+  width:var(--fms-control-size);height:var(--fms-control-size);
+  border:1px solid var(--fms-border);border-radius:4px;
+  background:var(--fms-card);color:var(--fms-primary-text);
+}
+.check:hover .box{border-color:var(--fms-primary)}
+.check.is-checked .box{border-color:var(--fms-primary);background:var(--fms-primary)}
+.box svg{display:none}
+.check.is-checked .box svg{display:block}
+.box i{display:none;width:8px;height:2px;background:var(--fms-primary)}
+.check.is-partial .box{border-color:var(--fms-primary)}
+.check.is-partial .box i{display:block}
+.check--use{color:var(--fms-text);font-weight:500}
+.check--use .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* ---------- 动作两种呈现，仅供对比 ---------- */
+/* A. 标签式：选中=浅底 chip，未选=正文灰字，动作多时靠换行消化 */
+.tag{
+  display:inline-flex;align-items:center;height:24px;margin:2px 4px 2px 0;padding:0 10px;
+  border:1px solid transparent;border-radius:12px;background:transparent;
+  color:var(--fms-text-secondary);font:inherit;cursor:pointer;white-space:nowrap;
+  transition:background-color var(--fms-duration-fast) var(--fms-ease-standard),
+             color var(--fms-duration-fast) var(--fms-ease-standard);
+}
+.tag:hover{background:var(--fms-secondary);color:var(--fms-text)}
+.tag.is-on{
+  background:var(--fms-primary-soft);color:var(--fms-text);font-weight:500;
+  box-shadow:inset 0 0 0 1px rgba(15,23,43,.16);
+}
+/* B. 复选框式 */
+.action-check{margin:2px 4px 2px 0}
+</style>
+</head>
+<body>
+
+<div class="demo-bar">
+  <strong>演示控件</strong>
+  <em>动作呈现</em>
+  <button class="demo-btn" data-style="tag">标签</button>
+  <button class="demo-btn" data-style="check">复选框</button>
+  <em style="margin-left:8px">动作数量</em>
+  <button class="demo-btn" data-scale="normal">常规</button>
+  <button class="demo-btn" data-scale="huge">超多</button>
+  <span style="flex:1 1 100%;color:#8b93a1">
+    点模块左侧方框 = 该模块动作全给/全撤 ｜ 点动作 = 单项开关 ｜ 关掉页头「可访问」= 收回本页全部模块授权（灰色锁定）
+  </span>
+</div>
+
+<div class="drawer">
+  <header class="drawer-header">
+    <h1 class="drawer-title">分配权限 · 张三（001）</h1>
+    <button class="close" title="关闭">✕</button>
+  </header>
+
+  <div class="drawer-body">
+    <nav class="tabs-band">
+      <span class="ptab is-active">功能权限</span>
+      <span class="ptab">字段权限</span>
+      <span class="ptab">数据范围</span>
+    </nav>
+
+    <div class="panel">
+      <aside class="tree">
+        <div class="tree__search"><input placeholder="搜索菜单" value=""></div>
+        <div class="tree__scroll">
+          <div class="tnode is-selected"><span class="tnode__caret">▾</span><span>海运工作台</span></div>
+          <div class="tnode tnode--l1"><span class="tnode__caret"></span><span>海运操作</span></div>
+          <div class="tnode tnode--l1"><span class="tnode__caret"></span><span>基础资料</span></div>
+          <div class="tnode"><span class="tnode__caret">▸</span><span>空运工作台</span></div>
+          <div class="tnode"><span class="tnode__caret">▸</span><span>财务管理</span></div>
+          <div class="tnode"><span class="tnode__caret">▸</span><span>系统管理</span></div>
+        </div>
+      </aside>
+
+      <main class="detail">
+        <div class="page-band">
+          <h3 class="page-band__name">海运工作台</h3>
+          <button class="check check--use" id="entry-check" type="button"
+                  title="菜单入口。关闭会收回该页面下的全部模块授权">
+            <span class="box"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><i></i></span>
+            <span class="label">可访问</span>
+          </button>
+          <span class="page-band__meta" id="entry-meta"></span>
+          <div class="page-band__actions">
+            <button class="link-btn" id="grant-all">全授权</button>
+            <button class="link-btn" id="clear-all">全禁用</button>
+          </div>
+        </div>
+
+        <div class="grid">
+          <div class="grid__head">
+            <span class="col-module">模块</span>
+            <span class="col-actions">动作</span>
+            <span class="col-count">已选</span>
+          </div>
+          <div class="grid__body" id="rows"></div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <footer class="drawer-footer">
+    <button class="btn">取消</button>
+    <button class="btn btn-primary">保存</button>
+  </footer>
+</div>
+
+<script>
+const CHECK = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
+
+/* 模块与动作：动作数量可切到「超多」验证换行表现 */
+const BASE_MODULES = [
+  { name:'海运主单', actions:['新增','修改','删除','审核','反审核','作废','结算','放单','改单','分摊','批量导入','导出','打印','复制'],
+    checked:['新增','修改','审核','导出'] },
+  { name:'装箱信息', actions:['新增','修改','删除','导出'], checked:['新增','导出'] },
+  { name:'费用', actions:['新增','修改','删除','审核','导出'], checked:[] },
+  { name:'船名船次', actions:['新增','修改','删除'], checked:[] },
+  { name:'港口', actions:['新增','修改'], checked:[] },
+]
+const EXTRA_ACTIONS = ['订舱','改配','舱单发送','AMS 发送','ISF 发送','电放','换单','滞期费','押箱','核销','对账','统计']
+
+let modules = clone(BASE_MODULES)
+let entry = true
+let actionStyle = 'tag'
+let scale = 'normal'
+
+function clone(list) {
+  return list.map((m) => ({ name: m.name, actions: [...m.actions], checked: [...m.checked] }))
+}
+
+function actionHtml(m, i, a) {
+  const on = m.checked.includes(a)
+  if (actionStyle === 'check') {
+    return `<button class="check action-check${on ? ' is-checked' : ''}" type="button" data-act="${a}" data-mod="${i}">
+        <span class="box">${CHECK}<i></i></span><span class="label">${a}</span>
+      </button>`
+  }
+  return `<button class="tag${on ? ' is-on' : ''}" type="button" data-act="${a}" data-mod="${i}">${a}</button>`
+}
+
+function render() {
+  const rows = document.getElementById('rows')
+  const body = modules.map((m, i) => {
+    const total = m.actions.length
+    const count = m.checked.length
+    const all = count === total && total > 0
+    const partial = count > 0 && !all
+    const state = all ? ' is-checked' : partial ? ' is-partial' : ''
+    const actions = m.actions.map((a) => actionHtml(m, i, a)).join('')
+    return `<div class="row" data-mod="${i}">
+      <div class="row__module">
+        <button class="check check--use${state}" type="button" data-toggle="${i}">
+          <span class="box">${CHECK}<i></i></span><span class="label">${m.name}</span>
+        </button>
+      </div>
+      <div class="row__actions">${actions}</div>
+      <div class="row__count">${count}/${total}</div>
+    </div>`
+  }).join('')
+
+  rows.innerHTML = body || '<div class="grid__empty">该页面下没有可授权的模块</div>'
+  rows.classList.toggle('is-locked', !entry)
+
+  const entryCheck = document.getElementById('entry-check')
+  entryCheck.classList.toggle('is-checked', entry)
+  const grantedModules = modules.filter((m) => m.checked.length > 0).length
+  document.getElementById('entry-meta').textContent =
+    `本页 ${modules.length} 个模块，已授权 ${grantedModules} 个`
+}
+
+function syncEntry() {
+  if (modules.some((m) => m.checked.length > 0)) entry = true
+  render()
+}
+
+document.getElementById('rows').addEventListener('click', (e) => {
+  const toggle = e.target.closest('[data-toggle]')
+  if (toggle) {
+    const m = modules[+toggle.dataset.toggle]
+    m.checked = m.checked.length === m.actions.length ? [] : [...m.actions]
+    return syncEntry()
+  }
+  const act = e.target.closest('[data-act]')
+  if (act) {
+    const m = modules[+act.dataset.mod], a = act.dataset.act
+    const at = m.checked.indexOf(a)
+    at < 0 ? m.checked.push(a) : m.checked.splice(at, 1)
+    return syncEntry()
+  }
+})
+
+document.getElementById('entry-check').addEventListener('click', () => {
+  entry = !entry
+  if (!entry) modules.forEach((m) => { m.checked = [] })
+  render()
+})
+
+document.getElementById('grant-all').addEventListener('click', () => {
+  entry = true
+  modules.forEach((m) => { m.checked = [...m.actions] })
+  render()
+})
+
+document.getElementById('clear-all').addEventListener('click', () => {
+  modules.forEach((m) => { m.checked = [] })
+  render()
+})
+
+document.querySelectorAll('.demo-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    if (btn.dataset.style) {
+      actionStyle = btn.dataset.style
+      document.querySelectorAll('[data-style]').forEach((b) => b.classList.toggle('is-on', b === btn))
+    }
+    if (btn.dataset.scale) {
+      scale = btn.dataset.scale
+      const target = scale === 'huge'
+      modules[0].actions = target
+        ? [...BASE_MODULES[0].actions, ...EXTRA_ACTIONS]
+        : [...BASE_MODULES[0].actions]
+      modules[0].checked = modules[0].checked.filter((a) => modules[0].actions.includes(a))
+      document.querySelectorAll('[data-scale]').forEach((b) => b.classList.toggle('is-on', b === btn))
+    }
+    render()
+  })
+})
+document.querySelector('.demo-btn[data-style="tag"]').classList.add('is-on')
+document.querySelector('.demo-btn[data-scale="normal"]').classList.add('is-on')
+
+render()
+</script>
+</body>
+</html>