feat(需求): ①账户域菜单/分组补筛选(名称/组长/类型) + 分组管理移除「数据权限分组」摘要卡 ②店铺密钥列表补筛选(备注/紫鸟账号) ③店铺数据记录两级分页常显 ④全站分组筛选下拉支持模糊搜索(el-select filterable,样式对齐蓝白42px)

admin-frontend-vue/src/pages/account/GroupsPage.vue

@@ -7,8 +7,7 @@ import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
 import { openAdminConfirm } from '@/components/admin-confirm'
 import { deleteShopGroup, fetchShopGroups } from './shop-group-api'
-import { shopGroupSummary, type ShopGroupItem } from './shop-group-model'
+import type { ShopGroupItem } from './shop-group-model'
-import { dedupeGroupSummaryOf } from '@/pages/asin/dedupe-total-model'
 import GroupEditorDialog from './GroupEditorDialog.vue'
 
 const session = useAdminSessionStore()
@@ -16,17 +15,21 @@ const loading = ref(false)
 const rows = ref<ShopGroupItem[]>([])
 const editorVisible = ref(false)
 const editingGroup = ref<ShopGroupItem | null>(null)
-const summary = computed(() => shopGroupSummary(rows.value))
 const isSuperAdmin = computed(() => session.isSuperAdmin)
 const currentUserId = computed(() => session.user?.id ?? null)
-/** 顶部摘要 chips（对齐 admin.js renderShopManageGroupSummary；与去重汇总同构）。 */
+/** 筛选：分组名称/组长 模糊过滤（用户要求账户域子菜单补筛选条件）。 */
-const groupChips = computed(() =>
+const filterKeyword = ref('')
-  dedupeGroupSummaryOf(
+const filterLeader = ref('')
-    rows.value.map((g) => ({ id: g.id, name: g.name, leaderUserId: g.leaderUserId })),
+const filteredRows = computed(() => {
-    currentUserId.value,
+  const kw = (filterKeyword.value || '').trim().toLowerCase()
-    session.user?.role || '',
+  const ldr = (filterLeader.value || '').trim().toLowerCase()
-  ),
+  if (!kw && !ldr) return rows.value
-)
+  return rows.value.filter((g) => {
+    const nameOk = !kw || (g.name || '').toLowerCase().includes(kw)
+    const leaderOk = !ldr || (g.leaderUsername || '').toLowerCase().includes(ldr)
+    return nameOk && leaderOk
+  })
+})
 
 function canEditOf(group: ShopGroupItem): boolean {
   if (isSuperAdmin.value) return true
@@ -72,32 +75,23 @@ onMounted(loadGroups)
 
 <template>
   <div class="groups-view">
-    <section class="form-box">
-      <div class="dedupe-group-access">
-        <div class="dedupe-group-access-main">
-          <span class="dedupe-group-access-title">数据权限分组</span>
-          <div class="dedupe-group-summary">
-            <template v-if="groupChips.kind === 'all'">
-              <span class="dedupe-group-summary-chip">全部分组 · {{ groupChips.count }} 个</span>
-            </template>
-            <span v-else-if="groupChips.kind === 'none'" class="no-group">未加入分组</span>
-            <template v-else>
-              <span v-for="chip in groupChips.chips" :key="chip.name" class="dedupe-group-summary-chip" :title="chip.name">
-                {{ chip.name }} · {{ chip.relation }}
-              </span>
-              <span v-if="groupChips.extra > 0" class="extra-groups">另 {{ groupChips.extra }} 个</span>
-            </template>
-          </div>
-        </div>
-      </div>
-    </section>
-
     <section class="panel-box">
       <div class="groups-head">
         <h3>分组列表</h3>
         <button class="btn" type="button" @click="openCreate">新建分组</button>
       </div>
 
+      <div class="form-row groups-filter-row">
+        <div class="form-group" style="min-width: 200px">
+          <label>分组名称</label>
+          <input v-model="filterKeyword" type="text" placeholder="输入分组名称" @keyup.enter="filterKeyword = filterKeyword" />
+        </div>
+        <div class="form-group" style="min-width: 180px">
+          <label>组长</label>
+          <input v-model="filterLeader" type="text" placeholder="输入组长用户名" />
+        </div>
+      </div>
+
       <div class="table-scroll">
         <table>
           <thead>
@@ -113,8 +107,8 @@ onMounted(loadGroups)
             </tr>
           </thead>
           <tbody>
-            <template v-if="rows.length">
+            <template v-if="filteredRows.length">
-              <tr v-for="(group, index) in rows" :key="group.id">
+              <tr v-for="(group, index) in filteredRows" :key="group.id">
                 <td>{{ index + 1 }}</td>
                 <td>{{ group.name }}</td>
                 <td>{{ group.leaderUsername || '-' }}</td>
@@ -140,7 +134,7 @@ onMounted(loadGroups)
               <td colspan="8" class="empty-tip">加载中...</td>
             </tr>
             <tr v-else>
-              <td colspan="8" class="empty-tip">暂无分组</td>
+              <td colspan="8" class="empty-tip">{{ filterKeyword || filterLeader ? '暂无匹配分组' : '暂无分组' }}</td>
             </tr>
           </tbody>
         </table>
@@ -182,53 +176,53 @@ h3 {
   color: #24384d;
   letter-spacing: 0.2px;
 }
-.dedupe-group-access {
+.groups-filter-row {
+  margin: 0 0 16px;
+}
+.groups-filter-row .form-group {
+  flex: 1 1 200px;
+}
+.form-row {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
-  justify-content: space-between;
+  align-items: flex-end;
-  gap: 16px;
+  gap: 14px 18px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
   margin-bottom: 0;
-  padding: 0 0 6px;
-  border-bottom: 0;
 }
-.dedupe-group-access-main {
+.form-group label {
-  min-width: 0;
+  color: #5b6f83;
-  display: flex;
+  font-size: 12.5px;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.dedupe-group-access-title {
-  flex: 0 0 auto;
-  font-size: 14px;
   font-weight: 600;
-  color: #24384d;
 }
-.dedupe-group-summary {
+.form-group input,
+.form-group select {
   min-width: 0;
-  display: flex;
+  min-height: 42px;
-  align-items: center;
+  padding: 8px 12px;
-  gap: 6px;
+  border: 1px solid #cbd9e6;
-  flex-wrap: wrap;
+  border-radius: 9px;
-  color: #5b6f83;
+  background: #f8fbfd;
-  font-size: 13px;
+  color: #24384d;
+  font-size: 13.5px;
+  font-family: inherit;
+  color-scheme: light;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
-.dedupe-group-summary-chip {
+.form-group input:hover,
-  display: inline-flex;
+.form-group select:hover {
-  align-items: center;
+  border-color: #9fb7cd;
-  max-width: 220px;
-  padding: 4px 10px;
-  border: 1px solid #d8e3ee;
-  border-radius: 6px;
-  background: #f8f9fc;
-  color: #5b6f83;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-.no-group,
+.form-group input:focus,
-.extra-groups {
+.form-group select:focus {
-  color: #8293a5;
+  background: #ffffff;
+  border-color: #5f85ad;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
 }
 .groups-head {
   display: flex;

admin-frontend-vue/src/pages/account/MenusPage.vue

@@ -29,6 +29,18 @@ interface MenuRow extends MenuManageNode {
 
 const loading = ref(false)
 const rows = ref<MenuManageNode[]>([])
+/** 筛选：菜单名称/类型（用户要求账户域子菜单补筛选条件）。 */
+const filterName = ref('')
+const filterType = ref('')
+const filteredMenuRows = computed<MenuRow[]>(() => {
+  const kw = (filterName.value || '').trim().toLowerCase()
+  const type = filterType.value || ''
+  return menuRows.value.filter((row) => {
+    const nameOk = !kw || (row.name || '').toLowerCase().includes(kw)
+    const typeOk = !type || row.menuType === type
+    return nameOk && typeOk
+  })
+})
 /** 展平视图：前序 + depth。 */
 const menuRows = computed<MenuRow[]>(() => {
   const out: MenuRow[] = []
@@ -197,6 +209,21 @@ onMounted(loadMenus)
       </div>
       <p class="columns-drag-tip">拖动每行左侧的手柄可调整同级菜单的显示顺序，松开后自动保存。</p>
 
+      <div class="form-row menus-filter-row">
+        <div class="form-group" style="min-width: 200px">
+          <label>菜单名称</label>
+          <input v-model="filterName" type="text" placeholder="输入菜单名称" />
+        </div>
+        <div class="form-group" style="min-width: 160px">
+          <label>菜单类型</label>
+          <select v-model="filterType">
+            <option value="">全部</option>
+            <option value="admin">后台</option>
+            <option value="app">软件</option>
+          </select>
+        </div>
+      </div>
+
       <div class="table-scroll columns-table-scroll">
         <table>
           <thead>
@@ -211,9 +238,9 @@ onMounted(loadMenus)
             </tr>
           </thead>
           <tbody>
-            <template v-if="menuRows.length">
+            <template v-if="filteredMenuRows.length">
               <tr
-                v-for="row in menuRows"
+                v-for="row in filteredMenuRows"
                 :key="row.id"
                 :class="{ 'is-column-dragging': dragState?.id === row.id }"
                 @dragover="onDragOver($event, row)"
@@ -255,7 +282,7 @@ onMounted(loadMenus)
               <td colspan="7" class="empty-tip">加载中...</td>
             </tr>
             <tr v-else>
-              <td colspan="7" class="empty-tip">暂无菜单，请先在上方新增</td>
+              <td colspan="7" class="empty-tip">{{ filterName || filterType ? '暂无匹配菜单' : '暂无菜单，请先在上方新增' }}</td>
             </tr>
           </tbody>
         </table>
@@ -327,6 +354,51 @@ h3 {
   font-size: 13px;
   color: #5b6f83;
 }
+.menus-filter-row {
+  margin: 0 0 16px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 18px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin-bottom: 0;
+}
+.form-group label {
+  color: #5b6f83;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.form-group input,
+.form-group select {
+  min-width: 0;
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid #cbd9e6;
+  border-radius: 9px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13.5px;
+  font-family: inherit;
+  color-scheme: light;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+.form-group input:hover,
+.form-group select:hover {
+  border-color: #9fb7cd;
+}
+.form-group input:focus,
+.form-group select:focus {
+  background: #ffffff;
+  border-color: #5f85ad;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
+}
 .btn {
   display: inline-flex;
   align-items: center;

admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue

@@ -177,10 +177,9 @@ onMounted(() => {
         </div>
         <div class="form-group" style="min-width: 180px">
           <label>分组</label>
-          <select v-model="filter.groupId" :disabled="!isSuperAdmin">
+          <el-select v-model="filter.groupId" class="admin-filter" filterable clearable placeholder="全部分组" :disabled="!isSuperAdmin">
-            <option :value="null">全部分组</option>
+            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
-            <option v-for="group in groupOptions" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </el-select>
-          </select>
         </div>
         <button class="btn" type="button" @click="apply">查询</button>
       </div>

admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue

@@ -301,10 +301,9 @@ onMounted(() => {
         </div>
         <div class="form-group">
           <label>分组</label>
-          <select v-model="filter.groupId">
+          <el-select v-model="filter.groupId" class="admin-filter" filterable clearable placeholder="全部分组">
-            <option :value="null">全部分组</option>
+            <el-option v-for="group in groups" :key="group.id" :label="group.name" :value="group.id" />
-            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
+          </el-select>
-          </select>
         </div>
         <div class="form-group">
           <label>国家</label>

admin-frontend-vue/src/pages/asin/QueryAsinPage.vue

@@ -325,10 +325,9 @@ onMounted(() => {
       <div class="form-row query-filter-row">
         <div class="form-group">
           <label>分组</label>
-          <select v-model="filter.groupId">
+          <el-select v-model="filter.groupId" class="admin-filter" filterable clearable placeholder="全部分组">
-            <option :value="null">全部分组</option>
+            <el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
-            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </el-select>
-          </select>
         </div>
         <div class="form-group">
           <label>店铺名</label>

admin-frontend-vue/src/pages/asin/SkipPricePage.vue

@@ -362,10 +362,9 @@ onMounted(() => {
       <div class="form-row skip-filter-row">
         <div class="form-group">
           <label>分组</label>
-          <select v-model="filter.groupId">
+          <el-select v-model="filter.groupId" class="admin-filter" filterable clearable placeholder="全部分组">
-            <option :value="null">全部分组</option>
+            <el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
-            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </el-select>
-          </select>
         </div>
         <div class="form-group">
           <label>店铺名</label>

admin-frontend-vue/src/pages/shop/ShopKeysPage.vue

@@ -16,6 +16,15 @@ const page = ref(1)
 const pageSize = 15
 const jumpPage = ref('')
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+/** 筛选：备注名/紫鸟账号（用户要求店铺密钥列表补筛选）。 */
+const filterKeyword = ref('')
+const filteredRows = computed(() => {
+  const kw = (filterKeyword.value || '').trim().toLowerCase()
+  if (!kw) return rows.value
+  return rows.value.filter((r) =>
+    `${r.remarkName || ''} ${r.ziniaoAccountName || ''}`.toLowerCase().includes(kw),
+  )
+})
 
 const dialogVisible = ref(false)
 const editingId = ref<number | null>(null)
@@ -137,6 +146,13 @@ onMounted(load)
         <button class="btn" type="button" @click="openCreate">新增店铺密钥</button>
       </div>
 
+      <div class="form-row keys-filter-row">
+        <div class="form-group" style="min-width: 220px">
+          <label>备注名 / 紫鸟账号</label>
+          <input v-model="filterKeyword" type="text" placeholder="模糊搜索备注名或紫鸟账号" />
+        </div>
+      </div>
+
       <div class="shop-key-table-scroll">
         <table>
           <thead>
@@ -152,8 +168,8 @@ onMounted(load)
             </tr>
           </thead>
           <tbody>
-            <template v-if="rows.length">
+            <template v-if="filteredRows.length">
-              <tr v-for="(row, index) in rows" :key="row.id">
+              <tr v-for="(row, index) in filteredRows" :key="row.id">
                 <td>{{ (page - 1) * pageSize + index + 1 }}</td>
                 <td>{{ row.remarkName || '—' }}</td>
                 <td>{{ row.ziniaoAccountName }}</td>
@@ -185,7 +201,7 @@ onMounted(load)
               <td colspan="8" class="empty-tip">加载中...</td>
             </tr>
             <tr v-else>
-              <td colspan="8" class="empty-tip">暂无店铺密钥</td>
+              <td colspan="8" class="empty-tip">{{ filterKeyword ? '暂无匹配密钥' : '暂无店铺密钥' }}</td>
             </tr>
           </tbody>
         </table>
@@ -259,6 +275,51 @@ h3 {
   gap: 12px;
   margin-bottom: 16px;
 }
+.keys-filter-row {
+  margin: 0 0 16px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 18px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin-bottom: 0;
+}
+.form-group label {
+  color: #5b6f83;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.form-group input,
+.form-group select {
+  min-width: 0;
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid #cbd9e6;
+  border-radius: 9px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13.5px;
+  font-family: inherit;
+  color-scheme: light;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+.form-group input:hover,
+.form-group select:hover {
+  border-color: #9fb7cd;
+}
+.form-group input:focus,
+.form-group select:focus {
+  background: #ffffff;
+  border-color: #5f85ad;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
+}
 .btn {
   display: inline-flex;
   align-items: center;

admin-frontend-vue/src/pages/shop/ShopManagePage.vue

@@ -208,10 +208,9 @@ onMounted(() => {
       <div class="form-row shop-filter-row">
         <div class="form-group" style="min-width: 180px">
           <label>分组</label>
-          <select v-model="filter.groupId">
+          <el-select v-model="filter.groupId" class="admin-filter" filterable clearable placeholder="全部分组">
-            <option :value="null">全部分组</option>
+            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
-            <option v-for="group in groupOptions" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </el-select>
-          </select>
         </div>
         <div class="form-group" style="min-width: 220px">
           <label>店铺名</label>

admin-frontend-vue/src/pages/tasks/ShopDataTasksPage.vue

@@ -325,7 +325,7 @@ onMounted(load)
         </div>
         <div class="sd-toolbar-side">
           <span class="sd-summary">共 {{ totalShops }} 家店铺 · 本页 {{ resultFileCount() }} 个结果文件</span>
-          <span v-if="totalShops > pageSize" class="sd-shop-pager">
+          <span class="sd-shop-pager">
             <button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
             <span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
             <button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
@@ -393,7 +393,7 @@ onMounted(load)
         <div v-else-if="!loading" class="empty-tip">暂无符合条件的店铺数据记录</div>
       </div>
 
-      <div v-if="allResultRows.length > cardPageSize" class="pagination">
+      <div class="pagination">
         <span class="page-total">本页数据 · 共 {{ allResultRows.length }} 个结果文件</span>
         <button type="button" :disabled="cardPage <= 1" @click="changeCardPage(cardPage - 1)">上一页</button>
         <span class="page-cur">第 {{ cardPage }} / {{ cardTotalPages }} 页</span>

admin-frontend-vue/src/styles/main.css

@@ -184,6 +184,24 @@ button, input, textarea, select { font: inherit; }
 .el-button { border-radius: 9px; }
 .el-message-box { border-radius: 14px; }
 
+/* 分组筛选下拉（可模糊搜索）：对齐旧版控件观感（42px/9px/浅底/focus ring）。 */
+.el-select.admin-filter {
+  width: 100%;
+}
+.el-select.admin-filter .el-select__wrapper {
+  min-height: 42px;
+  border-radius: 9px;
+  background: #f8fbfd;
+  box-shadow: 0 0 0 1px #cbd9e6 inset;
+}
+.el-select.admin-filter .el-select__wrapper:hover {
+  box-shadow: 0 0 0 1px #9fb7cd inset;
+}
+.el-select.admin-filter.is-focused .el-select__wrapper {
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
+}
+
 @media (max-width: 820px) {
   .admin-sidebar { flex-basis: 64px; }
   .admin-brand-copy, .admin-menu .el-sub-menu__title span, .admin-menu .el-menu-item { display: none; }

admin-frontend-vue/tests/task-59.test.ts

@@ -75,7 +75,7 @@ test('test_task_059_data_group_list_dependency_failure_returns_actionable_messag
   assert.match(api, /shop-manages\/groups/)
   assert.match(api, /parseShopGroupList/)
   const page = readSource('src/pages/account/GroupsPage.vue')
-  assert.match(page, /shop-group-api|fetchShopGroups/)
+  assert.match(page, /shop-group-api|fetchShopGroups/, '页面走分组适配接口')
-  assert.match(page, /shopGroupSummary|summary/)
+  assert.match(page, /filterKeyword|filterLeader/, '分组列表已加名称/组长筛选')
   assert.equal(/http\.(get|post)|unwrap\(/.test(page), false, '页面不内联请求')
 })