fix: 列表筛选统一调用接口

src/views/roles/index.vue

@@ -67,23 +67,6 @@ const rules: FormRules<RoleFormState> = {
   ]
 };
 
-/** 角色列表当前不分页，搜索在前端完成，降低简单维护场景的交互成本。 */
-const filteredRoles = computed(() => {
-  const keyword = query.keyword.trim().toLowerCase();
-
-  if (keyword.length === 0) {
-    return roles.value;
-  }
-
-  return roles.value.filter(role => {
-    return (
-      role.code.toLowerCase().includes(keyword) ||
-      role.name.toLowerCase().includes(keyword) ||
-      (role.description ?? "").toLowerCase().includes(keyword)
-    );
-  });
-});
-
 const describedCount = computed(
   () => roles.value.filter(item => Boolean(item.description)).length
 );
@@ -92,6 +75,22 @@ const systemRoleCount = computed(
 );
 const dialogTitle = computed(() => (form.id ? "编辑角色" : "新增角色"));
 
+function applyRoleQuery(items: Role[]) {
+  const keyword = query.keyword.trim().toLowerCase();
+
+  if (keyword.length === 0) {
+    return items;
+  }
+
+  return items.filter(role => {
+    return (
+      role.code.toLowerCase().includes(keyword) ||
+      role.name.toLowerCase().includes(keyword) ||
+      (role.description ?? "").toLowerCase().includes(keyword)
+    );
+  });
+}
+
 function getErrorMessage(error: unknown, fallback: string) {
   const message = (
     error as { response?: { data?: { error?: { message?: string } } } }
@@ -133,12 +132,14 @@ function buildPayload(): RolePayload {
   };
 }
 
-/** 角色是员工绑定的基础字典，页面加载和保存后都需要刷新。 */
+/** 角色查询必须走接口，避免搜索条件只在前端过滤当前缓存。 */
 async function fetchRoles() {
   tableLoading.value = true;
   try {
-    const result = await listRoles();
-    roles.value = result.data;
+    const result = await listRoles({
+      keyword: query.keyword.trim() || undefined
+    });
+    roles.value = applyRoleQuery(result.data);
   } catch (error) {
     ElMessage.error(getErrorMessage(error, "加载角色列表失败"));
   } finally {
@@ -148,10 +149,12 @@ async function fetchRoles() {
 
 function handleReset() {
   query.keyword = "";
+  fetchRoles();
 }
 
 function handleSearch() {
   query.keyword = query.keyword.trim();
+  fetchRoles();
 }
 
 function openCreateDialog() {
@@ -244,8 +247,8 @@ onMounted(fetchRoles);
         <strong>{{ systemRoleCount }}</strong>
       </div>
       <div class="summary-item">
-        <span>当前筛选</span>
-        <strong>{{ filteredRoles.length }}</strong>
+        <span>当前结果</span>
+        <strong>{{ roles.length }}</strong>
       </div>
     </div>
 
@@ -255,6 +258,7 @@ onMounted(fetchRoles);
         clearable
         class="keyword-input"
         placeholder="搜索编码、名称或说明"
+        @clear="handleSearch"
         @keyup.enter="handleSearch"
       />
       <div class="toolbar-actions">
@@ -268,7 +272,7 @@ onMounted(fetchRoles);
     <div class="table-shell">
       <el-table
         v-loading="tableLoading"
-        :data="filteredRoles"
+        :data="roles"
         row-key="id"
         stripe
         class="management-table"