From 4fb3dbf76d608dcdafff706a4f4c54be3317b0b6 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Tue, 7 Jul 2026 19:05:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=93=8D=E4=BD=9C=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/admin/AdminUsersPage.tsx        | 140 +++++++++---------
 apps/frontend-react/src/styles/main.css       |  68 +++++++++
 2 files changed, 141 insertions(+), 67 deletions(-)

diff --git a/apps/frontend-react/src/pages/admin/AdminUsersPage.tsx b/apps/frontend-react/src/pages/admin/AdminUsersPage.tsx
index f2a440ca..0fb67488 100644
--- a/apps/frontend-react/src/pages/admin/AdminUsersPage.tsx
+++ b/apps/frontend-react/src/pages/admin/AdminUsersPage.tsx
@@ -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 ? (
diff --git a/apps/frontend-react/src/styles/main.css b/apps/frontend-react/src/styles/main.css
index fe5396e7..d198cc12 100644
--- a/apps/frontend-react/src/styles/main.css
+++ b/apps/frontend-react/src/styles/main.css
@@ -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;