feat(usr): rewrite UserListPage visual + URL filter sync REQ-USR-003

zichun
1 parent 4a9044d7
Showing 2 changed files with 158 additions and 140 deletions
frontend/src/pages/usr/UserListPage.tsx
frontend/src/test/UserListPage.test.tsx
-import { useState, useEffect } from 'react'
-import { Table, Select, Input, Button, Space } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
+import { useEffect, useState } from 'react'
+import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
+import { useAppDispatch } from '../../store/hooks'
+import { openTab, updateTabPath } from '../../store/slices/tabsSlice'
 import { PermButton } from '../../components/PermButton'
-import UserFormDrawer from './UserFormDrawer'
 import { getUserList } from '../../api/usr'
 import type { PageVO, UserListItemVO } from '../../api/usr'
@@ -24,110 +24,136 @@ const MATCH_TYPES = [
 ]
 // REQ-USR-003: 查询用户
-// REQ-USR-002: 修改用户
+// REQ-USR-001: 新增入口 (navigate to /usr/users/new)
+// REQ-USR-002: 修改入口 (double-click row → /usr/users/:id)
 export default function UserListPage() {
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const [editingUser, setEditingUser] = useState<UserListItemVO | null>(null)
+  const navigate = useNavigate()
+  const dispatch = useAppDispatch()
+  const location = useLocation()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [queryField, setQueryField] = useState(searchParams.get('queryField') ?? 'username')
+  const [matchType, setMatchType] = useState(searchParams.get('matchType') ?? 'contains')
+  const [queryValue, setQueryValue] = useState(searchParams.get('queryValue') ?? '')
+  const [currentPage, setCurrentPage] = useState(Number(searchParams.get('page') ?? '1'))
   const [data, setData] = useState<PageVO<UserListItemVO> | null>(null)
-  const [queryField, setQueryField] = useState('username')
-  const [matchType, setMatchType] = useState('contains')
-  const [queryValue, setQueryValue] = useState('')
-  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    dispatch(openTab({ id: 'userlist', title: '用户列表', path: location.pathname + location.search, closable: true }))
+    doLoad(currentPage, queryField, matchType, queryValue)
+  }, [])
-  const load = (pg = 1) => {
+  function doLoad(pg: number, field: string, match: string, val: string) {
     setCurrentPage(pg)
-    getUserList({ queryField, matchType, queryValue, page: pg, pageSize: 20 }).then(setData)
+    getUserList({ queryField: field, matchType: match, queryValue: val, page: pg, pageSize: 20 }).then(setData)
   }
-  useEffect(() => {
-    load()
-  }, [])
+  function handleSearch() {
+    const newPath = `/usr/users?queryField=${queryField}&matchType=${matchType}&queryValue=${encodeURIComponent(queryValue)}`
+    setSearchParams({ queryField, matchType, queryValue, page: '1' })
+    dispatch(updateTabPath({ id: 'userlist', path: newPath }))
+    doLoad(1, queryField, matchType, queryValue)
+  }
-  const columns: ColumnsType<UserListItemVO> = [
-    { title: '用户名', dataIndex: 'sUsername' },
-    { title: '员工名', dataIndex: 'sStaffName' },
-    { title: '用户号', dataIndex: 'sUserCode' },
-    { title: '部门', dataIndex: 'sDepartment' },
-    { title: '用户类型', dataIndex: 'sUserType' },
-    { title: '语言', dataIndex: 'sLanguage' },
-    { title: '作废', dataIndex: 'bIsDisabled', render: (v: number) => v ? '是' : '否' },
-    { title: '登录日期', dataIndex: 'tLastLoginDate' },
-    { title: '制单人', dataIndex: 'sCreatorUsername' },
-    { title: '制单日期', dataIndex: 'tCreateDate' },
-    {
-      title: '操作',
-      key: 'action',
-      render: (_, record) => (
-        <PermButton
-          permission="usr:edit"
-          type="link"
-          onClick={() => setEditingUser(record)}
-        >
-          修改
-        </PermButton>
-      )
-    },
-  ]
+  function handleClear() {
+    setQueryField('username'); setMatchType('contains'); setQueryValue('')
+    setSearchParams({})
+    dispatch(updateTabPath({ id: 'userlist', path: '/usr/users' }))
+    doLoad(1, 'username', 'contains', '')
+  }
+
+  const totalPages = data ? Math.ceil(data.total / 20) : 1
   return (
-    <div>
-      <Space style={{ marginBottom: 16 }} wrap>
-        <Select
-          value={queryField}
-          onChange={setQueryField}
-          options={QUERY_FIELDS}
-          style={{ width: 120 }}
-        />
-        <Select
-          value={matchType}
-          onChange={setMatchType}
-          options={MATCH_TYPES}
-          style={{ width: 100 }}
-        />
-        <Input
-          value={queryValue}
-          onChange={e => setQueryValue(e.target.value)}
-          placeholder="查询值"
-          style={{ width: 160 }}
-        />
-        <Button type="primary" onClick={() => load(1)}>搜索</Button>
-        <PermButton
-          permission="usr:create"
-          type="primary"
-          onClick={() => setDrawerOpen(true)}
-        >
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Toolbar */}
+      <div style={{ background: 'var(--color-toolbar-bg)', color: 'var(--color-toolbar-text)', display: 'flex', alignItems: 'center', gap: 6, padding: '0 8px', height: 38, flexShrink: 0 }}>
+        <button onClick={() => doLoad(currentPage, queryField, matchType, queryValue)} style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>
+          刷新
+        </button>
+        <PermButton permission="usr:create" onClick={() => navigate('/usr/users/new')} style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx={12} cy={12} r={9}/><path d="M12 8v8M8 12h8"/></svg>
           新增
         </PermButton>
-      </Space>
-      <Table
-        dataSource={data?.list ?? []}
-        columns={columns}
-        rowKey="sId"
-        pagination={{
-          total: data?.total ?? 0,
-          pageSize: 20,
-          current: currentPage,
-          onChange: load,
-        }}
-      />
-      <UserFormDrawer
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-        onSuccess={() => { setDrawerOpen(false); load(1) }}
-      />
-      <UserFormDrawer
-        open={editingUser !== null}
-        userId={editingUser?.sId}
-        initialData={editingUser ? {
-          userType: editingUser.sUserType,
-          language: editingUser.sLanguage,
-          canEditDoc: editingUser.bCanEditDoc === 1,
-          isDisabled: editingUser.bIsDisabled === 1,
-          employeeId: null,
-        } : undefined}
-        onClose={() => setEditingUser(null)}
-        onSuccess={() => { setEditingUser(null); load(1) }}
-      />
+        <button style={tbBtn}>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path d="M4 4h12l4 4v12H4z"/><path d="M16 4v4h4M8 12h8M8 16h8"/></svg>
+          导出Excel
+        </button>
+        <span style={{ flex: 1 }} />
+        <span style={{ padding: '6px 8px', cursor: 'pointer', color: '#cfd2d8' }}>⚙</span>
+      </div>
+      {/* Filter bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--color-filterbar-bg)', borderBottom: '1px solid var(--color-table-border)', flexShrink: 0 }}>
+        <select value={queryField} onChange={e => setQueryField(e.target.value)} style={fSel}>
+          {QUERY_FIELDS.map(f => <option key={f.value} value={f.value}>{f.label}</option>)}
+        </select>
+        <select value={matchType} onChange={e => setMatchType(e.target.value)} style={fSel}>
+          {MATCH_TYPES.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
+        </select>
+        <input value={queryValue} onChange={e => setQueryValue(e.target.value)} style={fIn} />
+        <span style={{ width: 34, height: 30, background: '#dfe5ee', border: '1px solid #d5d8de', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2, cursor: 'pointer', color: '#3776c8' }}>▾</span>
+        <button onClick={handleSearch} style={fBtn}>
+          <svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx={11} cy={11} r={7}/><line x1={21} y1={21} x2={16.5} y2={16.5}/></svg>
+          搜索
+        </button>
+        <button onClick={handleClear} style={{ ...fBtn, background: '#fff', color: '#444', borderColor: '#cfd3da' }}>⊗ 清空</button>
+      </div>
+      {/* Table */}
+      <div style={{ flex: 1, overflow: 'auto', background: '#fff', border: '1px solid var(--color-table-border)', borderTop: 'none' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+          <thead>
+            <tr>
+              {['', '序号', '用户名', '员工名', '用户号', '部门', '用户类型', '语言', '作废', '登录日期', '制单人', '制单日期'].map((h, i) => (
+                <th key={i} style={{ background: 'var(--color-table-header-bg)', fontWeight: 500, color: '#333', padding: '7px 10px', textAlign: 'left', whiteSpace: 'nowrap', border: '1px solid var(--color-table-border)', position: 'sticky', top: 0, zIndex: 1, width: i === 0 ? 32 : i === 1 ? 60 : undefined }}>
+                  {h}{i > 1 && <span style={{ color: '#aaa', marginLeft: 4 }}>⇅ ⌕</span>}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {(data?.list ?? []).map((row, idx) => (
+              <tr
+                key={row.sId}
+                onClick={() => setSelectedId(row.sId)}
+                onDoubleClick={() => navigate(`/usr/users/${row.sId}`, { state: row })}
+                style={{ background: row.sId === selectedId ? 'var(--color-table-row-bg-selected)' : idx % 2 === 1 ? 'var(--color-table-row-alt)' : '#fff', cursor: 'pointer' }}
+              >
+                <td style={td}><span style={{ width: 14, height: 14, border: '1px solid #b8bcc3', borderRadius: '50%', display: 'inline-block', background: row.sId === selectedId ? 'var(--color-primary)' : '#fff' }} /></td>
+                <td style={td}>{idx + 1}</td>
+                <td style={td}>{row.sUsername}</td>
+                <td style={td}>{row.sStaffName ?? ''}</td>
+                <td style={td}>{row.sUserCode}</td>
+                <td style={td}>{row.sDepartment ?? ''}</td>
+                <td style={td}>{row.sUserType}</td>
+                <td style={td}>{row.sLanguage}</td>
+                <td style={td}>{row.bIsDisabled ? '是' : ''}</td>
+                <td style={td}>{row.tLastLoginDate ?? ''}</td>
+                <td style={td}>{row.sCreatorUsername ?? ''}</td>
+                <td style={td}>{row.tCreateDate}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {/* Pager */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: '#fff', borderTop: '1px solid var(--color-table-border)', justifyContent: 'flex-end', fontSize: 13, color: '#555', flexShrink: 0 }}>
+        <span>当前显示 共{data?.total ?? 0}条记录</span>
+        <button onClick={() => currentPage > 1 && doLoad(currentPage - 1, queryField, matchType, queryValue)} style={pgBtn}>‹</button>
+        <span style={{ width: 28, height: 28, border: '1px solid var(--color-primary)', color: 'var(--color-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2 }}>{currentPage}</span>
+        <button onClick={() => currentPage < totalPages && doLoad(currentPage + 1, queryField, matchType, queryValue)} style={pgBtn}>›</button>
+        <select defaultValue="10000" style={{ height: 28, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 8px' }}>
+          <option value="10000">10000 条/页</option>
+        </select>
+      </div>
     </div>
   )
 }
+
+const tbBtn: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', color: 'var(--color-toolbar-text)', cursor: 'pointer', fontSize: 13, borderRadius: 2, border: 'none', background: 'transparent', fontFamily: 'inherit' }
+const fSel: React.CSSProperties = { height: 30, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 28px 0 10px', background: '#fff', minWidth: 100 }
+const fIn: React.CSSProperties = { height: 30, border: '1px solid #d5d8de', borderRadius: 2, padding: '0 10px', minWidth: 140, fontSize: 13, fontFamily: 'inherit' }
+const fBtn: React.CSSProperties = { height: 30, padding: '0 14px', borderRadius: 2, border: '1px solid var(--color-primary)', background: 'var(--color-primary)', color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }
+const td: React.CSSProperties = { padding: '7px 10px', textAlign: 'left', whiteSpace: 'nowrap', border: '1px solid var(--color-table-border)' }
+const pgBtn: React.CSSProperties = { width: 28, height: 28, border: '1px solid #d5d8de', background: '#fff', borderRadius: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#666', fontFamily: 'inherit' }
@@ -2,9 +2,10 @@ import { describe, it, expect, vi, beforeEach } from &#39;vitest&#39;
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Provider } from 'react-redux'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from '../store/slices/authSlice'
+import tabsReducer from '../store/slices/tabsSlice'
 import UserListPage from '../pages/usr/UserListPage'
 vi.mock('../api/usr', () => ({
@@ -12,41 +13,50 @@ vi.mock(&#39;../api/usr&#39;, () =&gt; ({
   getPermissionGroups: vi.fn().mockResolvedValue([]),
   createUser: vi.fn(),
   getUserList: vi.fn().mockResolvedValue({ total: 0, page: 1, pageSize: 20, list: [] }),
-  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' })
+  updateUser: vi.fn().mockResolvedValue({ userId: 'u1', username: 'alice', updatedAt: '2026-05-08T10:00:00' }),
 }))
 vi.mock('../api/request', () => ({
-  default: { get: vi.fn(), post: vi.fn() }
+  default: { get: vi.fn(), post: vi.fn(), put: vi.fn() },
 }))
 function makeStore(userType: string) {
-  const store = configureStore({ reducer: { auth: authReducer } })
+  const store = configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
   store.dispatch({
     type: 'auth/setCredentials',
-    payload: {
-      accessToken: 'test-token',
-      refreshToken: 'test-refresh',
-      userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' }
-    }
+    payload: { accessToken: 'test-token', refreshToken: 'test-refresh', userInfo: { userId: 'u1', username: 'admin', userType, language: '中文', brandId: 'b1' } },
   })
   return store
 }
-function renderPage(userType: string) {
+const sampleRow = {
+  sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
+  sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
+  sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
+  sStaffName: '张三', sDepartment: '研发部',
+}
+
+function renderPage(userType: string, extraRoutes = false) {
   const store = makeStore(userType)
   return render(
     <Provider store={store}>
-      <MemoryRouter>
-        <UserListPage />
+      <MemoryRouter initialEntries={['/usr/users']}>
+        {extraRoutes ? (
+          <Routes>
+            <Route path="/usr/users" element={<UserListPage />} />
+            <Route path="/usr/users/new" element={<div>NewUserPage</div>} />
+            <Route path="/usr/users/:id" element={<div>DetailPage</div>} />
+          </Routes>
+        ) : (
+          <UserListPage />
+        )}
       </MemoryRouter>
     </Provider>
   )
 }
 describe('UserListPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
+  beforeEach(() => { vi.clearAllMocks() })
   it('superAdmin_seesNewButton', () => {
     renderPage('超级管理员')
@@ -58,23 +68,15 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     expect(screen.queryByRole('button', { name: /新\s*增/ })).not.toBeInTheDocument()
   })
-  it('clickNewButton_opensDrawer', async () => {
-    renderPage('超级管理员')
+  it('clickNewButton_navigatesToNewPage', async () => {
+    renderPage('超级管理员', true)
     await userEvent.click(screen.getByRole('button', { name: /新\s*增/ }))
-    await waitFor(() => expect(screen.getByText('新增用户')).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByText('NewUserPage')).toBeInTheDocument())
   })
   it('initialLoad_rendersTableRows', async () => {
     const { getUserList } = await import('../api/usr')
-    vi.mocked(getUserList).mockResolvedValueOnce({
-      total: 1, page: 1, pageSize: 20,
-      list: [{
-        sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
-        sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
-        sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
-        sStaffName: '张三', sDepartment: '研发部'
-      }]
-    })
+    vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
     renderPage('超级管理员')
     await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
     expect(screen.getByText('张三')).toBeInTheDocument()
@@ -87,22 +89,12 @@ describe(&#39;UserListPage&#39;, () =&gt; {
     await waitFor(() => expect(vi.mocked(getUserList)).toHaveBeenCalledTimes(2))
   })
-  it('editMode_submit_callsUpdateUser', async () => {
-    const { getUserList, updateUser } = await import('../api/usr')
-    vi.mocked(getUserList).mockResolvedValue({
-      total: 1, page: 1, pageSize: 20,
-      list: [{
-        sId: 'u1', sUsername: 'alice', sUserCode: 'UC001', sUserType: '普通用户',
-        sLanguage: '中文', bCanEditDoc: 0, bIsDisabled: 0, tLastLoginDate: null,
-        sCreatorUsername: 'admin', tCreateDate: '2026-01-01T00:00:00',
-        sStaffName: null, sDepartment: null
-      }]
-    })
-    renderPage('超级管理员')
+  it('doubleClickRow_navigatesToDetailPage', async () => {
+    const { getUserList } = await import('../api/usr')
+    vi.mocked(getUserList).mockResolvedValueOnce({ total: 1, page: 1, pageSize: 20, list: [sampleRow] })
+    renderPage('超级管理员', true)
     await waitFor(() => expect(screen.getByText('alice')).toBeInTheDocument())
-    await userEvent.click(screen.getByRole('button', { name: /修改/ }))
-    await waitFor(() => expect(screen.getByText('修改用户')).toBeInTheDocument())
-    await userEvent.click(screen.getByRole('button', { name: /确\s*认/ }))
-    await waitFor(() => expect(vi.mocked(updateUser)).toHaveBeenCalledTimes(1))
+    await userEvent.dblClick(screen.getByText('alice').closest('tr')!)
+    await waitFor(() => expect(screen.getByText('DetailPage')).toBeInTheDocument())
   })
 })