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

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">
-              <tr v-for="(row, index) in rows" :key="row.id">
+            <template v-if="filteredRows.length">
+              <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;