yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions 1 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="管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。"
/>
<Card title="筛选用户">
<Form<UserFilterForm>
layout="inline"
initialValues={filters}
onFinish={applyFilters}
className="filter-form"
>
<Form.Item name="username">
<Input allowClear placeholder="账号筛选" />
</Form.Item>
<Form.Item name="role">
<Select
allowClear
placeholder="角色"
options={adminUserRoleOptions}
style={{ minWidth: 140 }}
/>
</Form.Item>
<Form.Item name="status">
<Select
allowClear
placeholder="状态"
options={adminUserStatusOptions}
style={{ minWidth: 140 }}
/>
</Form.Item>
<Form.Item>
<Space>
<Button type="primary" icon={<SearchOutlined />} htmlType="submit">
查询
</Button>
<Button icon={<ReloadOutlined />} onClick={resetFilters}>
重置
</Button>
</Space>
</Form.Item>
</Form>
</Card>
<Card className="users-action-card">
<div className="users-action-row">
<section className="users-action-section">
<div className="users-action-title">筛选用户</div>
<Form<UserFilterForm>
layout="inline"
initialValues={filters}
onFinish={applyFilters}
className="filter-form users-action-form"
>
<Form.Item name="username">
<Input allowClear placeholder="账号筛选" className="users-input-md" />
</Form.Item>
<Form.Item name="role">
<Select
allowClear
placeholder="角色"
options={adminUserRoleOptions}
className="users-select-sm"
/>
</Form.Item>
<Form.Item name="status">
<Select
allowClear
placeholder="状态"
options={adminUserStatusOptions}
className="users-select-sm"
/>
</Form.Item>
<Form.Item>
<Space>
<Button type="primary" icon={<SearchOutlined />} htmlType="submit">
查询
</Button>
<Button icon={<ReloadOutlined />} onClick={resetFilters}>
重置
</Button>
</Space>
</Form.Item>
</Form>
</section>
<Card title="新增用户">
<Form<CreateUserForm>
form={createForm}
layout="inline"
initialValues={{ role: 'operator' }}
onFinish={submitCreate}
className="filter-form"
>
<Form.Item name="username" rules={[{ required: true, message: '请输入新账号' }]}>
<Input placeholder="新账号" />
</Form.Item>
<Form.Item
name="password"
rules={[
{ required: true, message: '请输入新密码' },
{ min: 8, message: '密码至少 8 位' },
]}
>
<Input.Password placeholder="新密码，至少 8 位" />
</Form.Item>
<Form.Item name="role" rules={[{ required: true, message: '请选择角色' }]}>
<Select options={USER_ROLE_OPTIONS} style={{ minWidth: 140 }} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<PlusOutlined />} loading={creating}>
新增用户
</Button>
</Form.Item>
</Form>
<section className="users-action-section">
<div className="users-action-title">新增用户</div>
<Form<CreateUserForm>
form={createForm}
layout="inline"
initialValues={{ role: 'operator' }}
onFinish={submitCreate}
className="filter-form users-action-form"
>
<Form.Item name="username" rules={[{ required: true, message: '请输入新账号' }]}>
<Input placeholder="新账号" className="users-input-md" />
</Form.Item>
<Form.Item
name="password"
rules={[
{ required: true, message: '请输入新密码' },
{ min: 8, message: '密码至少 8 位' },
]}
>
<Input.Password placeholder="新密码，至少 8 位" className="users-input-lg" />
</Form.Item>
<Form.Item name="role" rules={[{ required: true, message: '请选择角色' }]}>
<Select options={USER_ROLE_OPTIONS} className="users-select-sm" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<PlusOutlined />} loading={creating}>
新增用户
</Button>
</Form.Item>
</Form>
</section>
</div>
</Card>
{query.error ? (
apps/frontend-react/src/styles/main.css
+68
View File
@@ -130,6 +130,50 @@ select {
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 {
display: grid;
gap: 4px;
@@ -809,6 +853,14 @@ select {
display: grid;
}
.users-action-row {
grid-template-columns: 1fr;
}
.users-action-form .ant-form-item {
margin-bottom: 0;
}
.metric-grid.four,
.metric-grid.five,
.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) {
.claim-page {
padding: 14px;