update:css样式拆分

frontend/app/features/admin/UserManagementPage.tsx

@@ -3,6 +3,20 @@ import { useEffect, useState } from "react";
 import { ApiRequestError, type Employee } from "../../services/api";
 import { useApi, useAuth } from "../../context/AuthContext";
 import Icon from "../../components/common/Icon";
+import {
+  formFieldClass,
+  formInputClass,
+  iconButtonClass,
+  modalBackdropClass,
+  modalCompactClass,
+  modalEyebrowClass,
+  modalFooterClass,
+  modalFormClass,
+  modalHeaderClass,
+  modalTitleClass,
+  primaryButtonClass,
+  secondaryButtonClass,
+} from "../platform/modalUi";
 
 import "../../styles/admin.css";
 
@@ -215,28 +229,32 @@ export function UserManagementPage({
       </div>
 
       {dialogOpen && (
-        <div className="modal-backdrop">
-          <section className="modal modal--compact" role="dialog" aria-modal="true">
-            <div className="modal__header">
+        <div className={modalBackdropClass} role="presentation">
+          <section className={modalCompactClass} role="dialog" aria-modal="true">
+            <div className={modalHeaderClass}>
               <div>
-                <span className="modal__eyebrow">EMPLOYEE</span>
-                <h2>{editing ? "编辑用户" : "添加用户"}</h2>
+                <span className={modalEyebrowClass}>EMPLOYEE</span>
+                <h2 className={modalTitleClass}>{editing ? "编辑用户" : "添加用户"}</h2>
               </div>
-              <button className="icon-button" type="button" onClick={() => setDialogOpen(false)}><Icon name="close" /></button>
+              <button className={iconButtonClass} type="button" aria-label="关闭" onClick={() => setDialogOpen(false)}>
+                <Icon name="close" />
+              </button>
             </div>
-            <form onSubmit={(event) => void submit(event)}>
-              <label className="form-field">
-                <span>姓名<span className="required">*</span></span>
+            <form className={modalFormClass} onSubmit={(event) => void submit(event)}>
+              <label className={formFieldClass}>
+                <span>姓名<span className="text-[#e74c3c]">*</span></span>
                 <input
+                  className={formInputClass}
                   autoFocus={!editing}
                   value={form.display_name}
                   onChange={(event) => setForm({ ...form, display_name: event.target.value })}
                   placeholder="请输入姓名"
                 />
               </label>
-              <label className="form-field">
-                <span>登录账号<span className="required">*</span></span>
+              <label className={formFieldClass}>
+                <span>登录账号<span className="text-[#e74c3c]">*</span></span>
                 <input
+                  className={formInputClass}
                   disabled={Boolean(editing)}
                   value={form.username}
                   onChange={(event) => setForm({ ...form, username: event.target.value })}
@@ -245,9 +263,10 @@ export function UserManagementPage({
                 />
               </label>
               {!editing && (
-                <label className="form-field">
-                  <span>密码<span className="required">*</span></span>
+                <label className={formFieldClass}>
+                  <span>密码<span className="text-[#e74c3c]">*</span></span>
                   <input
+                    className={formInputClass}
                     type="password"
                     autoComplete="new-password"
                     value={form.password}
@@ -256,9 +275,10 @@ export function UserManagementPage({
                   />
                 </label>
               )}
-              <label className="form-field">
+              <label className={formFieldClass}>
                 <span>邮箱</span>
                 <input
+                  className={formInputClass}
                   type="email"
                   autoComplete="email"
                   value={form.email}
@@ -266,26 +286,24 @@ export function UserManagementPage({
                   placeholder="请输入邮箱（可选）"
                 />
               </label>
-              {/* <label className="form-field">
-                <span>角色</span>
-                <select value={form.role_code} disabled={Boolean(editing) && ((editing as Employee).user_id === user?.user_id || (editing as Employee).role_code === "admin")} onChange={(event) => setForm({ ...form, role_code: event.target.value as "admin" | "developer" })}>
-                  <option value="developer">开发人员</option>
-                  <option value="admin">管理员</option>
-                </select>
-              </label> */}
               {editing && (
-                <label className="form-field">
+                <label className={formFieldClass}>
                   <span>状态</span>
-                  <select value={form.status} disabled={Boolean(editing) && ((editing as Employee).user_id === user?.user_id || (editing as Employee).role_code === "admin")} onChange={(event) => setForm({ ...form, status: event.target.value as typeof form.status })}>
+                  <select
+                    className={formInputClass}
+                    value={form.status}
+                    disabled={Boolean(editing) && (editing.user_id === user?.user_id || editing.role_code === "admin")}
+                    onChange={(event) => setForm({ ...form, status: event.target.value as typeof form.status })}
+                  >
                     <option value="active">正常</option>
                     <option value="disabled">停用</option>
                     <option value="locked">锁定</option>
                   </select>
                 </label>
               )}
-              <div className="modal__footer">
-                <button className="secondary-button" type="button" onClick={() => setDialogOpen(false)}>取消</button>
-                <button className="primary-button" type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
+              <div className={modalFooterClass}>
+                <button className={secondaryButtonClass} type="button" onClick={() => setDialogOpen(false)}>取消</button>
+                <button className={primaryButtonClass} type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
               </div>
             </form>
           </section>