yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化用户管理操作区

Browse Source
This commit is contained in:
yml2213
2026-07-07 19:05:25 +08:00
parent 49f057ac5d
commit 4fb3dbf76d
2 changed files with 141 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend-react/src/pages/admin/AdminUsersPage.tsx
+73 -67
View File
@@ -312,74 +312,80 @@ export default function AdminUsersPage() {
description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。" description="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。"
/> />
<Card title="筛选用户"> <Card className="users-action-card">
<Form<UserFilterForm> <div className="users-action-row">
layout="inline" <section className="users-action-section">
initialValues={filters} <div className="users-action-title">筛选用户</div>
onFinish={applyFilters} <Form<UserFilterForm>
className="filter-form" layout="inline"
> initialValues={filters}
<Form.Item name="username"> onFinish={applyFilters}
<Input allowClear placeholder="账号筛选" /> className="filter-form users-action-form"
</Form.Item> >
<Form.Item name="role"> <Form.Item name="username">
<Select <Input allowClear placeholder="账号筛选" className="users-input-md" />
allowClear </Form.Item>
placeholder="角色" <Form.Item name="role">
options={adminUserRoleOptions} <Select
style={{ minWidth: 140 }} allowClear
/> placeholder="角色"
</Form.Item> options={adminUserRoleOptions}
<Form.Item name="status"> className="users-select-sm"
<Select />
allowClear </Form.Item>
placeholder="状态" <Form.Item name="status">
options={adminUserStatusOptions} <Select
style={{ minWidth: 140 }} allowClear
/> placeholder="状态"
</Form.Item> options={adminUserStatusOptions}
<Form.Item> className="users-select-sm"
<Space> />
<Button type="primary" icon={<SearchOutlined />} htmlType="submit"> </Form.Item>
查询 <Form.Item>
</Button> <Space>
<Button icon={<ReloadOutlined />} onClick={resetFilters}> <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
重置 查询
</Button> </Button>
</Space> <Button icon={<ReloadOutlined />} onClick={resetFilters}>
</Form.Item> 重置
</Form> </Button>
</Card> </Space>
</Form.Item>
</Form>
</section>
<Card title="新增用户"> <section className="users-action-section">
<Form<CreateUserForm> <div className="users-action-title">新增用户</div>
form={createForm} <Form<CreateUserForm>
layout="inline" form={createForm}
initialValues={{ role: 'operator' }} layout="inline"
onFinish={submitCreate} initialValues={{ role: 'operator' }}
className="filter-form" onFinish={submitCreate}
> className="filter-form users-action-form"
<Form.Item name="username" rules={[{ required: true, message: '请输入新账号' }]}> >
<Input placeholder="新账号" /> <Form.Item name="username" rules={[{ required: true, message: '请输入新账号' }]}>
</Form.Item> <Input placeholder="新账号" className="users-input-md" />
<Form.Item </Form.Item>
name="password" <Form.Item
rules={[ name="password"
{ required: true, message: '请输入新密码' }, rules={[
{ min: 8, message: '密码至少 8 位' }, { required: true, message: '请输入新密码' },
]} { min: 8, message: '密码至少 8 位' },
> ]}
<Input.Password placeholder="新密码，至少 8 位" /> >
</Form.Item> <Input.Password placeholder="新密码，至少 8 位" className="users-input-lg" />
<Form.Item name="role" rules={[{ required: true, message: '请选择角色' }]}> </Form.Item>
<Select options={USER_ROLE_OPTIONS} style={{ minWidth: 140 }} /> <Form.Item name="role" rules={[{ required: true, message: '请选择角色' }]}>
</Form.Item> <Select options={USER_ROLE_OPTIONS} className="users-select-sm" />
<Form.Item> </Form.Item>
<Button type="primary" htmlType="submit" icon={<PlusOutlined />} loading={creating}> <Form.Item>
新增用户 <Button type="primary" htmlType="submit" icon={<PlusOutlined />} loading={creating}>
</Button> 新增用户
</Form.Item> </Button>
</Form> </Form.Item>
</Form>
</section>
</div>
</Card> </Card>
{query.error ? ( {query.error ? (
apps/frontend-react/src/styles/main.css
+68
View File
@@ -130,6 +130,50 @@ select {
row-gap: 12px; row-gap: 12px;
} }
.users-action-card .ant-card-body {
padding: 18px 24px;
}
.users-action-row {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 22px;
align-items: start;
}
.users-action-section {
min-width: 0;
display: grid;
gap: 10px;
}
.users-action-title {
color: #1f2937;
font-weight: 700;
line-height: 1.4;
}
.users-action-form {
row-gap: 10px;
}
.users-action-form .ant-form-item {
margin-inline-end: 8px;
margin-bottom: 0;
}
.users-input-md {
width: 200px;
}
.users-input-lg {
width: 220px;
}
.users-select-sm {
width: 140px;
}
.cell-stack { .cell-stack {
display: grid; display: grid;
gap: 4px; gap: 4px;
@@ -809,6 +853,14 @@ select {
display: grid; display: grid;
} }
.users-action-row {
grid-template-columns: 1fr;
}
.users-action-form .ant-form-item {
margin-bottom: 0;
}
.metric-grid.four, .metric-grid.four,
.metric-grid.five, .metric-grid.five,
.platform-form-grid, .platform-form-grid,
@@ -840,6 +892,22 @@ select {
} }
} }
@media (max-width: 720px) {
.users-action-card .ant-card-body {
padding: 14px;
}
.users-action-form,
.users-action-form .ant-form-item,
.users-action-form .ant-input-affix-wrapper,
.users-action-form .ant-input,
.users-action-form .ant-select,
.users-action-form .ant-space,
.users-action-form .ant-btn {
width: 100%;
}
}
@media (max-width: 720px) { @media (max-width: 720px) {
.claim-page { .claim-page {
padding: 14px; padding: 14px;