update user page

frontend/src/pages/users/__tests__/index.spec.ts

@@ -60,6 +60,7 @@ describe('useUserManageStore', () => {
       expect(store.filters.username).toBe('')
       expect(store.filters.email).toBe('')
       expect(store.filters.status).toBeUndefined()
+      expect(store.filters.role_id).toBeUndefined()
     })
   })
 
@@ -77,6 +78,7 @@ describe('useUserManageStore', () => {
         username: undefined,
         email: undefined,
         status: undefined,
+        role_id: undefined,
       })
       expect(store.users).toEqual(mockUsers)
       expect(store.pagination.total).toBe(2)
@@ -95,11 +97,13 @@ describe('useUserManageStore', () => {
       const store = useUserManageStore()
       store.filters.username = 'admin'
       store.filters.status = 1
+      store.filters.role_id = 2
       await store.fetchUsers()
 
       expect(api.get).toHaveBeenCalledWith('/api/v1/users', expect.objectContaining({
         username: 'admin',
         status: 1,
+        role_id: 2,
       }))
       expect(store.users).toHaveLength(1)
     })
@@ -155,6 +159,7 @@ describe('useUserManageStore', () => {
       store.filters.username = 'test'
       store.filters.email = 'test@test.com'
       store.filters.status = 1
+      store.filters.role_id = 3
       store.pagination.page = 3
 
       store.resetFilters()
@@ -162,6 +167,7 @@ describe('useUserManageStore', () => {
       expect(store.filters.username).toBe('')
       expect(store.filters.email).toBe('')
       expect(store.filters.status).toBeUndefined()
+      expect(store.filters.role_id).toBeUndefined()
       expect(store.pagination.page).toBe(1)
     })
   })
@@ -181,9 +187,20 @@ describe('Users Page', () => {
     document.body.innerHTML = ''
   })
 
-  async function mountPage() {
+  const mockRoles = [
+    { id: 1, name: 'administrator', description: '管理员' },
+    { id: 2, name: 'accessor', description: '访问者' },
+  ]
+
+  async function mountPage(opts: { rolesError?: boolean } = {}) {
     const { api } = await import('@/utils/request')
-    vi.mocked(api.get).mockResolvedValue(mockPaginatedResponse)
+    vi.mocked(api.get).mockImplementation((url: string) => {
+      if (url === '/api/v1/roles') {
+        if (opts.rolesError) return Promise.reject(new Error('roles fail'))
+        return Promise.resolve(mockRoles) as never
+      }
+      return Promise.resolve(mockPaginatedResponse) as never
+    })
 
     // 设置 admin 用户以显示操作按钮
     const userStore = useUserStore()
@@ -293,4 +310,21 @@ describe('Users Page', () => {
     const drawer = document.body.querySelector('.ant-drawer')
     expect(drawer).toBeTruthy()
   })
+
+  it('renders role filter select with options', async () => {
+    await mountPage()
+    const labels = Array.from(document.body.querySelectorAll('.ant-form-item-label label'))
+    const roleLabel = labels.find((l) => l.textContent?.includes('角色'))
+    expect(roleLabel).toBeTruthy()
+  })
+
+  it('page still works when role list fails to load', async () => {
+    await mountPage({ rolesError: true })
+
+    // 页面标题仍正常渲染
+    expect(wrapper.find('h2').text()).toBe('用户管理')
+    // 表格仍正常渲染
+    const rows = document.body.querySelectorAll('.ant-table-tbody tr.ant-table-row')
+    expect(rows).toHaveLength(mockUsers.length)
+  })
 })

frontend/src/pages/users/index.vue

@@ -30,6 +30,9 @@ const assigningUser = ref<UserRecord | null>(null)
 const selectedRoleId = ref<number | undefined>(undefined)
 const roleOptions = ref<{ value: number; label: string }[]>([])
 
+// Role filter options
+const roleFilterOptions = ref<{ value: number; label: string }[]>([])
+
 // Data scope modal
 const scopeModalOpen = ref(false)
 const scopeUserId = ref<number | null>(null)
@@ -48,6 +51,11 @@ const columns = [
 
 onMounted(() => {
   store.fetchUsers()
+  api.get<{ id: number; name: string; description: string }[]>('/api/v1/roles')
+    .then((roles) => {
+      roleFilterOptions.value = roles.map((r) => ({ value: r.id, label: r.description || r.name }))
+    })
+    .catch(() => { /* 角色列表加载失败不影响页面 */ })
 })
 
 function handleSearch() {
@@ -185,6 +193,15 @@ function formatTime(time: string) {
             <a-select-option :value="0">禁用</a-select-option>
           </a-select>
         </a-form-item>
+        <a-form-item label="角色">
+          <a-select
+            v-model:value="store.filters.role_id"
+            placeholder="全部"
+            allow-clear
+            style="width: 140px"
+            :options="roleFilterOptions"
+          />
+        </a-form-item>
         <a-form-item>
           <a-space>
             <a-button type="primary" html-type="submit">