未知（继上次中断）

frontend/src/views/admin/Users.vue

@@ -1,12 +1,32 @@
 <template>
   <div class="page">
-    <el-card>
-      <div class="header">
-        <div>
-          <h3>{{ TEXT.modules.adminUsers.title }}</h3>
+    <el-card shadow="never" class="main-content-card">
+      <div class="filter-container">
+        <div class="filter-form">
+          <el-form-item label="" class="filter-item-form">
+            <el-input 
+              v-model="searchKeyword" 
+              :placeholder="TEXT.common.placeholders.keyword" 
+              clearable 
+              class="filter-input-comp"
+            />
+          </el-form-item>
+          <el-form-item label="" class="filter-item-form">
+            <el-select v-model="statusFilter" :placeholder="TEXT.common.fields.status" style="width: 140px" clearable class="filter-select-comp" @change="loadUsers">
+              <el-option :label="TEXT.enums.userStatus.PENDING" value="PENDING" />
+              <el-option :label="TEXT.enums.userStatus.ACTIVE" value="ACTIVE" />
+              <el-option :label="TEXT.enums.userStatus.REJECTED" value="REJECTED" />
+              <el-option :label="TEXT.enums.userStatus.DISABLED" value="DISABLED" />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="filter-item-form">
+            <el-button @click="loadUsers">{{ TEXT.common.actions.search }}</el-button>
+          </el-form-item>
+          <div class="filter-spacer"></div>
+          <el-button type="primary" @click="openCreate" class="header-action-btn">{{ TEXT.common.actions.add }}{{ TEXT.modules.adminUsers.userLabel }}</el-button>
         </div>
-        <el-button type="primary" @click="openCreate">{{ TEXT.common.actions.add }}{{ TEXT.modules.adminUsers.userLabel }}</el-button>
       </div>
+
       <el-table :data="users" stripe v-loading="loading" style="width: 100%">
         <el-table-column prop="email" :label="TEXT.common.fields.email" min-width="200" />
         <el-table-column prop="full_name" :label="TEXT.common.fields.name" min-width="140" />
@@ -50,16 +70,15 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="pagination">
-        <el-pagination
-          background
-          layout="prev, pager, next, total"
-          :page-size="pageSize"
-          :total="total"
-          v-model:current-page="page"
-          @current-change="loadUsers"
-        />
-      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next, total"
+        :page-size="pageSize"
+        :total="total"
+        v-model:current-page="page"
+        @current-change="loadUsers"
+        class="pagination"
+      />
     </el-card>
     <UserForm v-model:visible="formVisible" :user="editingUser" :admin-count="activeAdminCount" @saved="loadUsers" />
     <UserResetPassword v-model:visible="resetVisible" :user="resetUser" @reset="loadUsers" />
@@ -88,6 +107,8 @@ const loading = ref(false);
 const activeAdminCount = ref(0);
 const formVisible = ref(false);
 const resetVisible = ref(false);
+const searchKeyword = ref("");
+const statusFilter = ref("");
 const editingUser = ref<UserInfo | null>(null);
 const resetUser = ref<UserInfo | null>(null);
 const auth = useAuthStore();
@@ -127,7 +148,12 @@ const loadUsers = async () => {
   loading.value = true;
   try {
     const [{ data }, { data: adminData }] = await Promise.all([
-      fetchUsers({ skip: (page.value - 1) * pageSize.value, limit: pageSize.value }),
+      fetchUsers({ 
+        skip: (page.value - 1) * pageSize.value, 
+        limit: pageSize.value, 
+        keyword: searchKeyword.value || undefined,
+        status: statusFilter.value || undefined,
+      }),
       fetchUsers({ skip: 0, limit: 10000 }),
     ]);
     const items = (data as any).items || [];
@@ -252,20 +278,47 @@ onMounted(() => {
 
 <style scoped>
 .page {
-  padding: 16px;
-}
-.header {
   display: flex;
+  flex-direction: column;
+}
+
+.main-content-card :deep(.el-card__body) {
+  padding: 20px;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.filter-form {
+  display: flex;
+  width: 100%;
+  gap: 12px;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
 }
-.sub {
-  color: #666;
-  margin-top: 4px;
+
+.filter-item-form {
+  margin-bottom: 0 !important;
+  margin-right: 0 !important;
 }
+
+.filter-input-comp {
+  width: 200px;
+}
+
+.filter-spacer {
+  flex: 1;
+}
+
+.header-action-btn {
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 8px;
+}
+
 .pagination {
   margin-top: 12px;
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }
 </style>