update:部分样式优化

frontend/app/features/admin/UserFormDialog.tsx

@@ -1,3 +1,5 @@
+import { useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import type { Employee, Role, Workspace } from "../../services/api";
 import {
   AppFormDialog,
@@ -59,6 +61,18 @@ export function UserFormDialog({
   onClose: () => void;
   onResetPassword?: () => void;
 }) {
+  const roleOptions = useMemo(
+    () => (editing ? roles : createRoleOptions),
+    [editing, roles, createRoleOptions],
+  );
+  const [roleMenuOpen, setRoleMenuOpen] = useState(false);
+  const roleDisabled = editing
+    ? editing.user_id === currentUserId || roles.length === 0
+    : createRoleOptions.length === 0;
+  const selectedRole =
+    roleOptions.find((role) => role.role_code === form.role_code) ??
+    roleOptions[0];
+
   return (
     <AppFormDialog
       open={open}
@@ -122,45 +136,54 @@ export function UserFormDialog({
         </label>
         <label className={formFieldClass}>
           <span>角色</span>
-          <select
-            className={formInputClass}
-            value={form.role_code}
-            disabled={
-              editing
-                ? editing.user_id === currentUserId || roles.length === 0
-                : createRoleOptions.length === 0
-            }
-            onChange={(event) =>
-              onChangeForm({
-                ...form,
-                role_code: event.target.value as UserFormState["role_code"],
-              })
-            }
-          >
-            {editing ? (
-              roles.length === 0 ? (
-                <option value="" disabled>
-                  加载中…
-                </option>
-              ) : (
-                roles.map((role) => (
-                  <option key={role.role_code} value={role.role_code}>
-                    {role.role_name}
-                  </option>
-                ))
-              )
-            ) : createRoleOptions.length === 0 ? (
-              <option value="" disabled>
-                加载中…
-              </option>
-            ) : (
-              createRoleOptions.map((role) => (
-                <option key={role.role_code} value={role.role_code}>
-                  {role.role_name}
-                </option>
-              ))
+          <div className="relative">
+            <button
+              type="button"
+              disabled={roleDisabled}
+              className={`${formInputClass} flex items-center justify-between gap-2 ${
+                roleDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+              }`}
+              onClick={() => !roleDisabled && setRoleMenuOpen((open) => !open)}
+            >
+              <span className="truncate text-left">
+                {selectedRole ? selectedRole.role_name : "加载中…"}
+              </span>
+              <ChevronDown
+                size={15}
+                className={`shrink-0 text-[#7890a8] transition-transform ${
+                  roleMenuOpen ? "rotate-180" : "rotate-0"
+                }`}
+              />
+            </button>
+            {roleMenuOpen && !roleDisabled && (
+              <div className="absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-[#d6e0e9] bg-white shadow-lg">
+                <div className="max-h-[180px] overflow-y-auto">
+                  {roleOptions.map((role) => {
+                    const isSelected = role.role_code === form.role_code;
+                    return (
+                      <button
+                        key={role.role_code}
+                        type="button"
+                        className={`flex w-full items-center justify-between border-0 bg-white px-3 py-2 text-left text-[12px] text-[#2b4056] hover:bg-[#f3f7fb] ${
+                          isSelected ? "bg-[#edf5ff] font-semibold text-[#176cc0]" : ""
+                        }`}
+                        onClick={() => {
+                          onChangeForm({
+                            ...form,
+                            role_code: role.role_code as UserFormState["role_code"],
+                          });
+                          setRoleMenuOpen(false);
+                        }}
+                      >
+                        <span className="truncate">{role.role_name}</span>
+                        {isSelected && <span className="ml-2 text-[11px]">✓</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
             )}
-          </select>
+          </div>
         </label>
         {!editing && (
           <CreateUserProjectField