update: use components

frontend/app/features/admin/UserManagementPage.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 
+import { X } from "lucide-react";
 import { ApiRequestError, type Employee, type Role } from "../../services/api";
 import { useApi, useAuth } from "../../context/AuthContext";
 import Icon from "../../components/common/Icon";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
 import {
   formFieldClass,
   formInputClass,
-  iconButtonClass,
   modalBackdropClass,
   modalCompactClass,
   modalEyebrowClass,
@@ -14,8 +16,6 @@ import {
   modalFormClass,
   modalHeaderClass,
   modalTitleClass,
-  primaryButtonClass,
-  secondaryButtonClass,
 } from "../platform/modalUi";
 
 import "../../styles/admin.css";
@@ -29,6 +29,19 @@ const EMPTY_FORM = {
   status: "active" as "active" | "disabled" | "locked",
 };
 
+const CLOSE_BUTTON_CLASS =
+  "size-[34px] rounded-[7px] border border-[#dfe6ed] bg-white hover:bg-[#f7faff] hover:border-[#b9c9da]";
+const SECONDARY_BUTTON_CLASS =
+  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
+const PRIMARY_BUTTON_CLASS =
+  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]";
+const FORM_INPUT_CLASS =
+  "h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
+const ROW_BUTTON_CLASS =
+  "h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]";
+const ROW_DANGER_BUTTON_CLASS =
+  "h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#c14a4a] hover:bg-[#fdf2f2] disabled:cursor-not-allowed disabled:opacity-[0.45]";
+
 export function UserManagementPage({
   onNotify,
   onConnectionChange,
@@ -185,15 +198,17 @@ export function UserManagementPage({
             onChange={(event) => setUserSearchTerm(event.target.value)}
           />
         </div>
-        <button
-          className="primary-button admin-toolbar__button"
+        <Button
+          variant="default"
+          size="sm"
           type="button"
           disabled={!canManage}
           onClick={openCreate}
+          className={PRIMARY_BUTTON_CLASS}
         >
           <Icon name="plus" size={15} />
           新建用户
-        </button>
+        </Button>
       </div>
 
       {!canManage && <div className="admin-readonly">当前为开发人员，只能查看用户列表。</div>}
@@ -221,8 +236,27 @@ export function UserManagementPage({
                   {employee.role_code ? (<span className={`role-pill is-${employee.role_code}`}>{employee.role_name}</span>) : (<span>-</span>)}
                   <span className={`status-pill is-${employee.status}`}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span>
                   <span className="employee-actions">
-                    <button type="button" disabled={!canManage} onClick={() => openEdit(employee)}>编辑</button>
-                    <button type="button" className="is-danger" disabled={!canManage || isProtectedAdmin} title={isProtectedAdmin ? "管理员账号不能删除" : "删除"} onClick={() => void remove(employee)}>删除</button>
+                    <Button
+                      variant="outline"
+                      size="xs"
+                      type="button"
+                      disabled={!canManage}
+                      onClick={() => openEdit(employee)}
+                      className={ROW_BUTTON_CLASS}
+                    >
+                      编辑
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="xs"
+                      type="button"
+                      disabled={!canManage || isProtectedAdmin}
+                      title={isProtectedAdmin ? "管理员账号不能删除" : "删除"}
+                      onClick={() => void remove(employee)}
+                      className={ROW_DANGER_BUTTON_CLASS}
+                    >
+                      删除
+                    </Button>
                   </span>
                 </div>
               );
@@ -238,15 +272,22 @@ export function UserManagementPage({
                 <span className={modalEyebrowClass}>EMPLOYEE</span>
                 <h2 className={modalTitleClass}>{editing ? "编辑用户" : "添加用户"}</h2>
               </div>
-              <button className={iconButtonClass} type="button" aria-label="关闭" onClick={() => setDialogOpen(false)}>
-                <Icon name="close" />
-              </button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                type="button"
+                aria-label="关闭"
+                onClick={() => setDialogOpen(false)}
+                className={CLOSE_BUTTON_CLASS}
+              >
+                <X size={16} />
+              </Button>
             </div>
             <form className={modalFormClass} onSubmit={(event) => void submit(event)}>
               <label className={formFieldClass}>
                 <span>姓名<span className="text-[#e74c3c]">*</span></span>
-                <input
-                  className={formInputClass}
+                <Input
+                  className={FORM_INPUT_CLASS}
                   autoFocus={!editing}
                   value={form.display_name}
                   onChange={(event) => setForm({ ...form, display_name: event.target.value })}
@@ -255,8 +296,8 @@ export function UserManagementPage({
               </label>
               <label className={formFieldClass}>
                 <span>登录账号<span className="text-[#e74c3c]">*</span></span>
-                <input
-                  className={formInputClass}
+                <Input
+                  className={FORM_INPUT_CLASS}
                   disabled={Boolean(editing)}
                   value={form.username}
                   onChange={(event) => setForm({ ...form, username: event.target.value })}
@@ -267,8 +308,8 @@ export function UserManagementPage({
               {!editing && (
                 <label className={formFieldClass}>
                   <span>密码<span className="text-[#e74c3c]">*</span></span>
-                  <input
-                    className={formInputClass}
+                  <Input
+                    className={FORM_INPUT_CLASS}
                     type="password"
                     autoComplete="new-password"
                     value={form.password}
@@ -279,8 +320,8 @@ export function UserManagementPage({
               )}
               <label className={formFieldClass}>
                 <span>邮箱</span>
-                <input
-                  className={formInputClass}
+                <Input
+                  className={FORM_INPUT_CLASS}
                   type="email"
                   autoComplete="email"
                   value={form.email}
@@ -325,8 +366,24 @@ export function UserManagementPage({
                 </label>
               )}
               <div className={modalFooterClass}>
-                <button className={secondaryButtonClass} type="button" onClick={() => setDialogOpen(false)}>取消</button>
-                <button className={primaryButtonClass} type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  type="button"
+                  onClick={() => setDialogOpen(false)}
+                  className={SECONDARY_BUTTON_CLASS}
+                >
+                  取消
+                </Button>
+                <Button
+                  variant="default"
+                  size="sm"
+                  type="submit"
+                  disabled={saving}
+                  className={PRIMARY_BUTTON_CLASS}
+                >
+                  {saving ? "保存中…" : "保存"}
+                </Button>
               </div>
             </form>
           </section>