From be7edae94faab97441bdac68e2ad78d3f9411489 Mon Sep 17 00:00:00 2001
From: hailin <wbwang_hailin@kingdee.com>
Date: Thu, 2 Jul 2026 15:42:43 +0800
Subject: [PATCH] refactor: align system admin forms with shadcn fields

---
 .../src/features/system/SystemMenusPage.tsx   |  29 ++---
 .../src/features/system/SystemRolesPage.tsx   |  67 ++++++-----
 .../features/system/SystemUserGroupsPage.tsx  |  50 ++++----
 .../src/features/system/SystemUsersPage.tsx   | 111 ++++++++++--------
 4 files changed, 139 insertions(+), 118 deletions(-)

diff --git a/frontend/src/features/system/SystemMenusPage.tsx b/frontend/src/features/system/SystemMenusPage.tsx
index ff57e0e..58a0aff 100644
--- a/frontend/src/features/system/SystemMenusPage.tsx
+++ b/frontend/src/features/system/SystemMenusPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
 import { AppEmptyState } from '@/components/app/AppEmptyState'
+import { AppFilterBar } from '@/components/app/AppFilterBar'
 import { AppPage } from '@/components/app/AppPage'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
 import { Badge } from '@/components/ui/badge'
@@ -80,22 +81,22 @@ export function SystemMenusPage() {
 
   return (
     <AppPage>
-        <AppPageHeader title="菜单权限" />
+      <AppPageHeader title="菜单权限" />
 
-        <div className="rounded-lg border border-border bg-surface p-3">
-          <Input placeholder="搜索菜单、路径或权限码" value={query} onChange={(event) => setQuery(event.target.value)} />
-        </div>
+      <AppFilterBar>
+        <Input placeholder="搜索菜单、路径或权限码" value={query} onChange={(event) => setQuery(event.target.value)} />
+      </AppFilterBar>
 
-        {error ? <AppEmptyState title="无法加载菜单" description={error} /> : null}
-        {!error ? (
-          <AppDataTable
-            columns={columns}
-            rows={filteredMenus}
-            getRowKey={(menu) => menu.id}
-            emptyTitle="暂无菜单"
-            footer={<p className="text-sm text-muted-foreground">当前显示 {filteredMenus.length} 个菜单项</p>}
-          />
-        ) : null}
+      {error ? <AppEmptyState title="无法加载菜单" description={error} /> : null}
+      {!error ? (
+        <AppDataTable
+          columns={columns}
+          rows={filteredMenus}
+          getRowKey={(menu) => menu.id}
+          emptyTitle="暂无菜单"
+          footer={<p className="text-sm text-muted-foreground">当前显示 {filteredMenus.length} 个菜单项</p>}
+        />
+      ) : null}
     </AppPage>
   )
 }
diff --git a/frontend/src/features/system/SystemRolesPage.tsx b/frontend/src/features/system/SystemRolesPage.tsx
index 339632a..d8061e6 100644
--- a/frontend/src/features/system/SystemRolesPage.tsx
+++ b/frontend/src/features/system/SystemRolesPage.tsx
@@ -5,10 +5,12 @@ import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataT
 import { AppEmptyState } from '@/components/app/AppEmptyState'
 import { AppPage } from '@/components/app/AppPage'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
+import { AppSection } from '@/components/app/AppSection'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 
 import { createRole, listPermissions, listRoles, setRolePermissions } from './api'
@@ -73,31 +75,35 @@ export function SystemRolesPage() {
 
   return (
     <AppPage>
-        <AppPageHeader title="角色权限" />
+      <AppPageHeader title="角色权限" />
 
-        <form className="grid gap-3 rounded-lg border border-border bg-surface p-3 md:grid-cols-[minmax(0,360px)_auto] md:items-end" onSubmit={handleCreate}>
-          <AppField label="角色名称" htmlFor="system-role-name" required>
-            <Input id="system-role-name" value={roleName} onChange={(event) => setRoleName(event.target.value)} required />
-          </AppField>
-          <Button type="submit" className="w-full md:w-auto">创建角色</Button>
+      <AppSection title="新增角色">
+        <form onSubmit={handleCreate}>
+          <FieldGroup className="grid gap-3 md:grid-cols-[minmax(0,360px)_auto] md:items-end">
+            <AppField label="角色名称" htmlFor="system-role-name" required>
+              <Input id="system-role-name" value={roleName} onChange={(event) => setRoleName(event.target.value)} required />
+            </AppField>
+            <Button type="submit" className="w-full md:w-auto">创建角色</Button>
+          </FieldGroup>
         </form>
+      </AppSection>
 
-        {error ? <AppEmptyState title="无法加载角色" description={error} /> : null}
-        {!error ? (
-          <AppDataTable
-            columns={columns}
-            rows={roles}
-            getRowKey={(role) => role.id}
-            emptyTitle="暂无角色"
-          />
-        ) : null}
-
-        <RolePermissionDialog
-          role={editingRole}
-          permissions={permissions}
-          onClose={() => setEditingRole(null)}
-          onSaved={load}
+      {error ? <AppEmptyState title="无法加载角色" description={error} /> : null}
+      {!error ? (
+        <AppDataTable
+          columns={columns}
+          rows={roles}
+          getRowKey={(role) => role.id}
+          emptyTitle="暂无角色"
         />
+      ) : null}
+
+      <RolePermissionDialog
+        role={editingRole}
+        permissions={permissions}
+        onClose={() => setEditingRole(null)}
+        onSaved={load}
+      />
     </AppPage>
   )
 }
@@ -142,12 +148,13 @@ function RolePermissionDialog({
         </DialogHeader>
         <div className="grid max-h-[56vh] gap-4 overflow-auto pr-1">
           {Object.entries(groupedPermissions).map(([module, modulePermissions]) => (
-            <section key={module} className="rounded-md border border-border p-3">
-              <p className="mb-3 text-sm font-medium text-foreground">{module}</p>
-              <div className="grid gap-2 md:grid-cols-2">
+            <FieldSet key={module} className="rounded-md border border-border p-3">
+              <FieldLegend variant="label">{module}</FieldLegend>
+              <FieldGroup data-slot="checkbox-group" className="grid gap-2 md:grid-cols-2">
                 {modulePermissions.map((permission) => (
-                  <label key={permission.codename} className="flex items-start gap-2 text-sm">
+                  <Field key={permission.codename} orientation="horizontal">
                     <Checkbox
+                      id={`role-permission-${permission.codename}`}
                       checked={selected.includes(permission.codename)}
                       onCheckedChange={(checked) =>
                         setSelected((current) =>
@@ -157,14 +164,14 @@ function RolePermissionDialog({
                         )
                       }
                     />
-                    <span>
+                    <FieldLabel htmlFor={`role-permission-${permission.codename}`} className="flex-col items-start gap-0.5">
                       <span className="block text-foreground">{permission.name}</span>
                       <span className="text-xs text-muted-foreground">{permission.codename}</span>
-                    </span>
-                  </label>
+                    </FieldLabel>
+                  </Field>
                 ))}
-              </div>
-            </section>
+              </FieldGroup>
+            </FieldSet>
           ))}
         </div>
         <DialogFooter>
diff --git a/frontend/src/features/system/SystemUserGroupsPage.tsx b/frontend/src/features/system/SystemUserGroupsPage.tsx
index cb00e67..f6d39c7 100644
--- a/frontend/src/features/system/SystemUserGroupsPage.tsx
+++ b/frontend/src/features/system/SystemUserGroupsPage.tsx
@@ -5,8 +5,10 @@ import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataT
 import { AppEmptyState } from '@/components/app/AppEmptyState'
 import { AppPage } from '@/components/app/AppPage'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
+import { AppSection } from '@/components/app/AppSection'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { FieldGroup } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import { formatDateTime } from '@/lib/format'
@@ -81,31 +83,35 @@ export function SystemUserGroupsPage() {
 
   return (
     <AppPage>
-        <AppPageHeader title="用户组管理" />
+      <AppPageHeader title="用户组管理" />
 
-        <form className="grid gap-3 rounded-lg border border-border bg-surface p-3 md:grid-cols-[1fr_1fr_2fr_auto] md:items-end" onSubmit={handleCreate}>
-          <AppField label="用户组名称" htmlFor="system-group-name" required>
-            <Input id="system-group-name" value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} required />
-          </AppField>
-          <AppField label="编码" htmlFor="system-group-code" required>
-            <Input id="system-group-code" value={form.code} onChange={(event) => setForm({ ...form, code: event.target.value })} required />
-          </AppField>
-          <AppField label="说明" htmlFor="system-group-description">
-            <Input id="system-group-description" value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} />
-          </AppField>
-          <Button type="submit" className="w-full md:w-auto">创建用户组</Button>
+      <AppSection title="新增用户组">
+        <form onSubmit={handleCreate}>
+          <FieldGroup className="grid gap-3 md:grid-cols-[1fr_1fr_2fr_auto] md:items-end">
+            <AppField label="用户组名称" htmlFor="system-group-name" required>
+              <Input id="system-group-name" value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} required />
+            </AppField>
+            <AppField label="编码" htmlFor="system-group-code" required>
+              <Input id="system-group-code" value={form.code} onChange={(event) => setForm({ ...form, code: event.target.value })} required />
+            </AppField>
+            <AppField label="说明" htmlFor="system-group-description">
+              <Input id="system-group-description" value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} />
+            </AppField>
+            <Button type="submit" className="w-full md:w-auto">创建用户组</Button>
+          </FieldGroup>
         </form>
+      </AppSection>
 
-        {error ? <AppEmptyState title="无法加载用户组" description={error} /> : null}
-        {!error ? (
-          <AppDataTable
-            columns={columns}
-            rows={groups}
-            getRowKey={(group) => group.id}
-            emptyTitle="暂无用户组"
-            footer={<p className="text-sm text-muted-foreground">共 {groups.length} 个用户组</p>}
-          />
-        ) : null}
+      {error ? <AppEmptyState title="无法加载用户组" description={error} /> : null}
+      {!error ? (
+        <AppDataTable
+          columns={columns}
+          rows={groups}
+          getRowKey={(group) => group.id}
+          emptyTitle="暂无用户组"
+          footer={<p className="text-sm text-muted-foreground">共 {groups.length} 个用户组</p>}
+        />
+      ) : null}
     </AppPage>
   )
 }
diff --git a/frontend/src/features/system/SystemUsersPage.tsx b/frontend/src/features/system/SystemUsersPage.tsx
index 86694a5..08d5cf5 100644
--- a/frontend/src/features/system/SystemUsersPage.tsx
+++ b/frontend/src/features/system/SystemUsersPage.tsx
@@ -6,12 +6,13 @@ import { AppEmptyState } from '@/components/app/AppEmptyState'
 import { AppFilterBar } from '@/components/app/AppFilterBar'
 import { AppPage } from '@/components/app/AppPage'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
+import { AppSection } from '@/components/app/AppSection'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
 
 import { createUser, listRoles, listUserGroups, listUsers, setUserGroups, setUserRoles, updateUser } from './api'
@@ -140,46 +141,50 @@ export function SystemUsersPage() {
 
   return (
     <AppPage>
-        <AppPageHeader title="用户管理" />
+      <AppPageHeader title="用户管理" />
 
-        <form className="grid gap-3 rounded-lg border border-border bg-surface p-3 md:grid-cols-[1fr_1fr_1fr_1fr_auto] md:items-end" onSubmit={handleCreateUser}>
-          <AppField label="账号" htmlFor="system-user-username" required>
-            <Input id="system-user-username" value={form.username} onChange={(event) => setForm({ ...form, username: event.target.value })} required />
-          </AppField>
-          <AppField label="显示名称" htmlFor="system-user-display-name">
-            <Input id="system-user-display-name" value={form.display_name} onChange={(event) => setForm({ ...form, display_name: event.target.value })} />
-          </AppField>
-          <AppField label="邮箱" htmlFor="system-user-email">
-            <Input id="system-user-email" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
-          </AppField>
-          <AppField label="初始密码" htmlFor="system-user-password" required>
-            <Input id="system-user-password" type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} required />
-          </AppField>
-          <Button type="submit" className="w-full md:w-auto">创建用户</Button>
+      <AppSection title="新增用户">
+        <form onSubmit={handleCreateUser}>
+          <FieldGroup className="grid gap-3 md:grid-cols-[1fr_1fr_1fr_1fr_auto] md:items-end">
+            <AppField label="账号" htmlFor="system-user-username" required>
+              <Input id="system-user-username" value={form.username} onChange={(event) => setForm({ ...form, username: event.target.value })} required />
+            </AppField>
+            <AppField label="显示名称" htmlFor="system-user-display-name">
+              <Input id="system-user-display-name" value={form.display_name} onChange={(event) => setForm({ ...form, display_name: event.target.value })} />
+            </AppField>
+            <AppField label="邮箱" htmlFor="system-user-email">
+              <Input id="system-user-email" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
+            </AppField>
+            <AppField label="初始密码" htmlFor="system-user-password" required>
+              <Input id="system-user-password" type="password" value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} required />
+            </AppField>
+            <Button type="submit" className="w-full md:w-auto">创建用户</Button>
+          </FieldGroup>
         </form>
+      </AppSection>
 
-        <AppFilterBar>
-          <Input placeholder="搜索账号、姓名或邮箱" value={query} onChange={(event) => setQuery(event.target.value)} />
-        </AppFilterBar>
+      <AppFilterBar>
+        <Input placeholder="搜索账号、姓名或邮箱" value={query} onChange={(event) => setQuery(event.target.value)} />
+      </AppFilterBar>
 
-        {error ? <AppEmptyState title="无法加载用户" description={error} /> : null}
-        {!error ? (
-          <AppDataTable
-            columns={columns}
-            rows={filteredUsers}
-            getRowKey={(user) => user.id}
-            emptyTitle="暂无用户"
-            footer={<p className="text-sm text-muted-foreground">当前显示 {filteredUsers.length} 个用户</p>}
-          />
-        ) : null}
-
-        <UserAccessDialog
-          user={editingUser}
-          roles={roles}
-          groups={groups}
-          onClose={() => setEditingUser(null)}
-          onSaved={load}
+      {error ? <AppEmptyState title="无法加载用户" description={error} /> : null}
+      {!error ? (
+        <AppDataTable
+          columns={columns}
+          rows={filteredUsers}
+          getRowKey={(user) => user.id}
+          emptyTitle="暂无用户"
+          footer={<p className="text-sm text-muted-foreground">当前显示 {filteredUsers.length} 个用户</p>}
         />
+      ) : null}
+
+      <UserAccessDialog
+        user={editingUser}
+        roles={roles}
+        groups={groups}
+        onClose={() => setEditingUser(null)}
+        onSaved={load}
+      />
     </AppPage>
   )
 }
@@ -219,38 +224,40 @@ function UserAccessDialog({
           <DialogTitle>用户授权{user ? `：${user.display_name || user.username}` : ''}</DialogTitle>
         </DialogHeader>
         <div className="grid gap-4 md:grid-cols-2">
-          <div className="grid gap-2">
-            <Label>角色</Label>
-            <div className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
+          <FieldSet>
+            <FieldLegend>角色</FieldLegend>
+            <FieldGroup data-slot="checkbox-group" className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
               {roles.map((role) => (
-                <label key={role.id} className="flex items-center gap-2 text-sm">
+                <Field key={role.id} orientation="horizontal">
                   <Checkbox
+                    id={`access-role-${role.id}`}
                     checked={roleIds.includes(role.id)}
                     onCheckedChange={(checked) =>
                       setRoleIds((current) => checked ? [...current, role.id] : current.filter((id) => id !== role.id))
                     }
                   />
-                  <span>{role.name}</span>
-                </label>
+                  <FieldLabel htmlFor={`access-role-${role.id}`}>{role.name}</FieldLabel>
+                </Field>
               ))}
-            </div>
-          </div>
-          <div className="grid gap-2">
-            <Label>用户组</Label>
-            <div className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
+            </FieldGroup>
+          </FieldSet>
+          <FieldSet>
+            <FieldLegend>用户组</FieldLegend>
+            <FieldGroup data-slot="checkbox-group" className="grid max-h-64 gap-2 overflow-auto rounded-md border border-border p-3">
               {groups.map((group) => (
-                <label key={group.id} className="flex items-center gap-2 text-sm">
+                <Field key={group.id} orientation="horizontal">
                   <Checkbox
+                    id={`access-group-${group.id}`}
                     checked={groupIds.includes(group.id)}
                     onCheckedChange={(checked) =>
                       setGroupIds((current) => checked ? [...current, group.id] : current.filter((id) => id !== group.id))
                     }
                   />
-                  <span>{group.name}</span>
-                </label>
+                  <FieldLabel htmlFor={`access-group-${group.id}`}>{group.name}</FieldLabel>
+                </Field>
               ))}
-            </div>
-          </div>
+            </FieldGroup>
+          </FieldSet>
         </div>
         <DialogFooter>
           <Button variant="outline" onClick={onClose}>取消</Button>