From 970affec9501aec1086cc1d845d4755ed3a378ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=87=AA=E8=BE=BE?= <980324341@qq.com>
Date: Sun, 6 Sep 2026 23:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=9C=80=E6=B1=82):=20=E2=91=A0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=88=9B=E5=BB=BA/=E7=BC=96=E8=BE=91=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=9D=83=E9=99=90=E6=8C=89=E3=80=8C=E5=90=8E=E5=8F=B0?=
 =?UTF-8?q?/=E6=A1=8C=E9=9D=A2=E7=AB=AF=E3=80=8D=E4=B8=80=E7=BA=A7?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E5=B1=95=E7=A4=BA(=E5=8F=8C=E6=A0=91?=
 =?UTF-8?q?=E5=88=86=E5=8C=BA=E5=8B=BE=E9=80=89=E5=90=88=E5=B9=B6)=20?=
 =?UTF-8?q?=E2=91=A1=E5=85=A8=E7=AB=99=E8=A1=A8=E6=A0=BC=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=88=97=E7=BC=96=E8=BE=91/=E5=88=A0=E9=99=A4=E6=A8=AA?=
 =?UTF-8?q?=E5=90=91=E5=AF=B9=E9=BD=90(ops-cell=20=E7=BB=9F=E4=B8=80=20fle?=
 =?UTF-8?q?x+gap=208px)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/account/GroupsPage.vue          |  7 +-
 .../src/pages/account/MenusPage.vue           |  7 +-
 .../src/pages/account/UserMenuAuthTree.vue    | 81 ++++++++++++++-----
 .../src/pages/account/UsersPage.vue           |  7 +-
 .../src/pages/asin/AsinInvalidPage.vue        |  7 +-
 .../src/pages/asin/DedupeRegistryPage.vue     |  4 +-
 .../src/pages/asin/ProductCategoryPage.vue    |  7 +-
 .../RecordsDigitalHumanVersionPage.vue        |  7 +-
 .../src/pages/shop/ShopKeysPage.vue           |  7 +-
 .../src/pages/shop/ShopManagePage.vue         |  7 +-
 10 files changed, 95 insertions(+), 46 deletions(-)

diff --git a/admin-frontend-vue/src/pages/account/GroupsPage.vue b/admin-frontend-vue/src/pages/account/GroupsPage.vue
index 83edb7fe..c6935965 100644
--- a/admin-frontend-vue/src/pages/account/GroupsPage.vue
+++ b/admin-frontend-vue/src/pages/account/GroupsPage.vue
@@ -338,11 +338,12 @@ h3 {
   font-size: 12.5px;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/account/MenusPage.vue b/admin-frontend-vue/src/pages/account/MenusPage.vue
index 568e50b4..cae2d584 100644
--- a/admin-frontend-vue/src/pages/account/MenusPage.vue
+++ b/admin-frontend-vue/src/pages/account/MenusPage.vue
@@ -517,11 +517,12 @@ tr.is-column-dragging td {
   color: #5b6f83;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/account/UserMenuAuthTree.vue b/admin-frontend-vue/src/pages/account/UserMenuAuthTree.vue
index dfbc758a..7865a8b9 100644
--- a/admin-frontend-vue/src/pages/account/UserMenuAuthTree.vue
+++ b/admin-frontend-vue/src/pages/account/UserMenuAuthTree.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { MenuOptionNode } from './user-menu-auth'
 import { fetchGrantableMenus } from './user-menu-auth-api'
 
@@ -11,22 +11,27 @@ const emit = defineEmits<{
 
 /** 仅暴露 el-tree 我们需要的两个方法，避免整组件类型耦合。 */
 type TreeRef = { setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown }
-const tree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
+const adminTree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
+const appTree = ref<{ setCheckedKeys(keys: unknown[]): void; getCheckedKeys(): unknown } | null>(null)
 const data = ref<MenuOptionNode[]>([])
 const loaded = ref(false)
 
+/** 两种一级分类…（与 API menuType 分区一致）：后台(admin) / 桌面端(app)。 */
+const adminNodes = computed(() => data.value.filter((node) => node.type === 'admin'))
+const appNodes = computed(() => data.value.filter((node) => node.type === 'app'))
+
 function applyChecked(): void {
-  const el: TreeRef | null = tree.value
-  if (!el) return
   const ids = Array.isArray(props.checked) ? props.checked.filter((id) => typeof id === 'number' && id > 0) : []
-  el.setCheckedKeys(ids)
+  adminTree.value?.setCheckedKeys(ids)
+  appTree.value?.setCheckedKeys(ids)
 }
 
 function onCheck(): void {
-  const el: TreeRef | null = tree.value
-  if (!el) return
-  const keys = el.getCheckedKeys()
-  const ids = (Array.isArray(keys) ? keys : []).map((key) => Number(key)).filter((id) => id > 0)
+  const collect = (el: { getCheckedKeys(): unknown } | null): number[] => {
+    const keys = el ? el.getCheckedKeys() : []
+    return (Array.isArray(keys) ? keys : []).map((key) => Number(key)).filter((id) => id > 0)
+  }
+  const ids = [...collect(adminTree.value), ...collect(appTree.value)]
   emit('update:checked', ids)
 }
 
@@ -53,15 +58,53 @@ watch(
 
 <template>
   <el-scrollbar max-height="300px" class="user-menu-tree-scroll">
-    <el-tree
-      ref="tree"
-      :data="data"
-      node-key="id"
-      show-checkbox
-      check-strictly
-      default-expand-all
-      :props="{ label: 'name', children: 'children' }"
-      @check="onCheck"
-    />
+    <template v-if="adminNodes.length || appNodes.length">
+      <div v-if="adminNodes.length" class="menu-group-block">
+        <div class="menu-group-title">后台</div>
+        <el-tree
+          ref="adminTree"
+          :data="adminNodes"
+          node-key="id"
+          show-checkbox
+          check-strictly
+          default-expand-all
+          :props="{ label: 'name', children: 'children' }"
+          @check="onCheck"
+        />
+      </div>
+      <div v-if="appNodes.length" class="menu-group-block">
+        <div class="menu-group-title">桌面端</div>
+        <el-tree
+          ref="appTree"
+          :data="appNodes"
+          node-key="id"
+          show-checkbox
+          check-strictly
+          default-expand-all
+          :props="{ label: 'name', children: 'children' }"
+          @check="onCheck"
+        />
+      </div>
+    </template>
+    <p v-else class="menu-group-empty">暂无可用菜单</p>
   </el-scrollbar>
 </template>
+
+<style scoped>
+.menu-group-block + .menu-group-block {
+  margin-top: 10px;
+}
+.menu-group-title {
+  padding: 4px 0 6px;
+  font-size: 12.5px;
+  font-weight: 650;
+  color: #40586e;
+  border-bottom: 1px solid #e6edf4;
+  margin-bottom: 4px;
+}
+.menu-group-empty {
+  margin: 12px 0;
+  color: #8293a5;
+  font-size: 13px;
+}
+</style>
diff --git a/admin-frontend-vue/src/pages/account/UsersPage.vue b/admin-frontend-vue/src/pages/account/UsersPage.vue
index 2f90ff40..4b4ba23d 100644
--- a/admin-frontend-vue/src/pages/account/UsersPage.vue
+++ b/admin-frontend-vue/src/pages/account/UsersPage.vue
@@ -410,11 +410,12 @@ h3 {
   border-bottom: 0;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue b/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
index 43de3f5c..1e4c1050 100644
--- a/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
+++ b/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
@@ -430,11 +430,12 @@ h3 {
   color: #2f5d8b;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue b/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
index bf580bfe..c95e4910 100644
--- a/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
+++ b/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
@@ -661,9 +661,7 @@ h3 {
   white-space: nowrap;
   text-align: right;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue b/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
index 4005c31a..b4ac1161 100644
--- a/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
+++ b/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
@@ -677,11 +677,12 @@ h3 {
   color: #8293a5;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .load-more-row td {
   background: #fbfdfe;
 }
diff --git a/admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue b/admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue
index 1ad11037..217e7378 100644
--- a/admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue
+++ b/admin-frontend-vue/src/pages/records/RecordsDigitalHumanVersionPage.vue
@@ -449,11 +449,12 @@ h3 {
   text-overflow: ellipsis;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue b/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
index cfb0980d..d6478c8d 100644
--- a/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
+++ b/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
@@ -441,11 +441,12 @@ h3 {
   border-color: #d6e2ec;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;
diff --git a/admin-frontend-vue/src/pages/shop/ShopManagePage.vue b/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
index 04579a2e..92eb50c4 100644
--- a/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
+++ b/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
@@ -505,11 +505,12 @@ h3 {
   font-size: 12px;
 }
 .ops-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   white-space: nowrap;
 }
-.ops-cell .btn + .btn {
-  margin-left: 8px;
-}
+
 .empty-tip {
   padding: 44px 24px;
   text-align: center;