feat(web): implement dedicated UserSettingsModal

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/components/user/UserSettingsModal.tsx

@@ -0,0 +1,518 @@
+import React, { useState } from 'react';
+import {
+  User,
+  Shield,
+  KeyRound,
+  LogOut,
+  Check,
+  X,
+  AlertCircle,
+  CheckCircle2,
+  Lock,
+  FileText,
+  Sliders,
+} from 'lucide-react';
+import { UserProfile } from '../../types/docgov';
+import { RoleDefinition } from '../../types/rbac';
+import { authClient } from '../../api/auth';
+
+export interface UserSettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentUser: UserProfile;
+  roles: RoleDefinition[];
+  onUpdateProfile: (updated: Partial<UserProfile>) => void;
+  onLogout: () => void;
+  theme?: 'dark' | 'light';
+  onToggleTheme?: () => void;
+}
+
+const ALL_PERMISSION_DESCRIPTIONS: { key: string; name: string; desc: string }[] = [
+  { key: 'project:create', name: '创建新项目/立项', desc: '具备在协同工作台开启全新研发项目并指派阶段的权限' },
+  { key: 'project:assign_lead', name: '设置文档责任人', desc: '在文档治理面板为交付物指派编制人、审核人与批准人' },
+  { key: 'perm:manage', name: '系统权限与角色管理', desc: '增删改全局职位角色定义与权限矩阵 (管理员独占)' },
+  { key: 'workflow:config_visibility', name: '配置工作流默认可见性', desc: '调整业务阶段中各受控交付物的基线查阅准入边界' },
+  { key: 'doc:override_visibility', name: '配置单文档可见性覆盖', desc: '针对特定核心机密交付物设定独占白名单或责任人收紧' },
+  { key: 'doc:export', name: '受控交付物导出', desc: '允许将医疗受控文档编译导出为受保护的 DOCX 或 XLSX' },
+  { key: 'workflow:view_all', name: '默认查阅常规工作流文档', desc: '允许在全景大盘中查阅已就绪的常规项目协作文档' },
+];
+
+export const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
+  isOpen,
+  onClose,
+  currentUser,
+  roles,
+  onUpdateProfile,
+  onLogout,
+  theme = 'dark',
+  onToggleTheme,
+}) => {
+  const [activeTab, setActiveTab] = useState<'profile' | 'security' | 'preferences' | 'permissions'>('profile');
+
+  // Profile form state
+  const [name, setName] = useState(currentUser.name);
+  const [department, setDepartment] = useState(currentUser.department);
+  const [employeeId] = useState(currentUser.employeeId);
+  const [profileSuccessTip, setProfileSuccessTip] = useState(false);
+
+  // Security password state
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [passwordSuccessTip, setPasswordSuccessTip] = useState(false);
+  const [passwordLoading, setPasswordLoading] = useState(false);
+
+  // Preferences
+  const [exportFormat, setExportFormat] = useState<'docx' | 'xlsx'>('docx');
+
+  if (!isOpen) return null;
+
+  // 获取当前用户的角色对象
+  const currentRole = roles.find((r) => r.id === (currentUser.roleId || 'role-engineer'));
+  const userPermissions = new Set<string>(currentRole?.permissions || []);
+  if (currentUser.roleId === 'role-admin' || currentRole?.code === 'ADMIN') {
+    ALL_PERMISSION_DESCRIPTIONS.forEach((p) => userPermissions.add(p.key));
+  }
+
+  const handleSaveProfile = (e: React.FormEvent) => {
+    e.preventDefault();
+    onUpdateProfile({
+      name: name.trim(),
+      department: department.trim(),
+    });
+    setProfileSuccessTip(true);
+    setTimeout(() => setProfileSuccessTip(false), 2500);
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordError('');
+    setPasswordSuccessTip(false);
+
+    if (!oldPassword) {
+      setPasswordError('请输入当前原密码');
+      return;
+    }
+    if (!newPassword || newPassword.length < 6) {
+      setPasswordError('新密码长度不能少于 6 位');
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordError('两次输入的新密码不一致');
+      return;
+    }
+
+    setPasswordLoading(true);
+    try {
+      await authClient.changePassword(currentUser.id, oldPassword, newPassword);
+      setPasswordSuccessTip(true);
+      setOldPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setTimeout(() => setPasswordSuccessTip(false), 3000);
+    } catch (err: any) {
+      setPasswordError(err.message || '密码修改失败');
+    } finally {
+      setPasswordLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+      <div className="w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl flex flex-col max-h-[85vh] overflow-hidden text-slate-100">
+        {/* 顶栏 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-600 to-indigo-600 flex items-center justify-center text-white shadow-md">
+              <User className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-base font-bold text-white flex items-center gap-2">
+                <span>个人中心与偏好设置</span>
+                <span className="text-xs px-2 py-0.5 rounded-full bg-cyan-950/80 border border-cyan-800 text-cyan-400 font-mono">
+                  {currentUser.name}
+                </span>
+              </h2>
+              <p className="text-xs text-slate-400">
+                管理您的个人资料、登录安全凭证及操作偏好
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* 主体左右分栏 */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* 左侧菜单 Tab */}
+          <div className="w-48 border-r border-slate-800 bg-slate-950/30 p-3 space-y-1 flex flex-col justify-between">
+            <div className="space-y-1">
+              <button
+                type="button"
+                onClick={() => setActiveTab('profile')}
+                className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-xs font-medium transition ${
+                  activeTab === 'profile'
+                    ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+                    : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+                }`}
+              >
+                <User className="w-4 h-4" />
+                <span>个人资料</span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => setActiveTab('security')}
+                className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-xs font-medium transition ${
+                  activeTab === 'security'
+                    ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+                    : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+                }`}
+              >
+                <KeyRound className="w-4 h-4" />
+                <span>安全与改密</span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => setActiveTab('preferences')}
+                className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-xs font-medium transition ${
+                  activeTab === 'preferences'
+                    ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+                    : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+                }`}
+              >
+                <Sliders className="w-4 h-4" />
+                <span>偏好设定</span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => setActiveTab('permissions')}
+                className={`w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-xs font-medium transition ${
+                  activeTab === 'permissions'
+                    ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
+                    : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+                }`}
+              >
+                <Shield className="w-4 h-4" />
+                <span>我的权限清单</span>
+              </button>
+            </div>
+
+            {/* 底部退出登录 */}
+            <div className="pt-3 border-t border-slate-800/80">
+              <button
+                type="button"
+                onClick={() => {
+                  if (confirm('确定要退出当前登录账号吗？')) {
+                    onClose();
+                    onLogout();
+                  }
+                }}
+                className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-xs font-medium text-rose-400 hover:bg-rose-500/10 hover:text-rose-300 border border-rose-500/20 transition"
+              >
+                <LogOut className="w-3.5 h-3.5" />
+                <span>退出登录</span>
+              </button>
+            </div>
+          </div>
+
+          {/* 右侧内容面板 */}
+          <div className="flex-1 overflow-y-auto p-6">
+            {/* 1. 个人资料 */}
+            {activeTab === 'profile' && (
+              <form onSubmit={handleSaveProfile} className="space-y-4">
+                <div className="flex items-center justify-between pb-3 border-b border-slate-800">
+                  <div>
+                    <h3 className="text-sm font-semibold text-white">基础档案</h3>
+                    <p className="text-xs text-slate-400">查看工号与职位，完善姓名与部门信息</p>
+                  </div>
+                  {profileSuccessTip && (
+                    <span className="text-xs text-emerald-400 flex items-center gap-1 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20">
+                      <CheckCircle2 className="w-3.5 h-3.5" /> 资料已保存
+                    </span>
+                  )}
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-400 mb-1">
+                      真实姓名
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-100 focus:outline-none focus:border-cyan-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-slate-400 mb-1">
+                      员工工号 (只读)
+                    </label>
+                    <input
+                      type="text"
+                      disabled
+                      value={employeeId || '暂无'}
+                      className="w-full bg-slate-950/50 border border-slate-800/80 rounded-xl px-3 py-2 text-xs text-slate-500 cursor-not-allowed font-mono"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-400 mb-1">
+                      所属部门
+                    </label>
+                    <input
+                      type="text"
+                      value={department}
+                      onChange={(e) => setDepartment(e.target.value)}
+                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-100 focus:outline-none focus:border-cyan-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-slate-400 mb-1">
+                      受控职位与关联角色
+                    </label>
+                    <div className="w-full bg-slate-950/50 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-slate-200 flex items-center justify-between">
+                      <span className="font-semibold text-cyan-400">{currentUser.position}</span>
+                      <span className="text-[11px] px-2 py-0.5 rounded bg-slate-800 text-slate-400 font-mono">
+                        {currentRole?.name || '方案工程师'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 职位受控说明 */}
+                <div className="p-3 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-400 flex items-start gap-2">
+                  <Lock className="w-4 h-4 text-cyan-500 flex-shrink-0 mt-0.5" />
+                  <span>
+                    您的职位与权限由系统管理员在后台统一设定与审核，个人不可调整。如需变更职位或增加权限，请联系管理员。
+                  </span>
+                </div>
+
+                <div className="pt-2 flex justify-end">
+                  <button
+                    type="submit"
+                    className="px-4 py-2 rounded-xl bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium transition shadow-md shadow-cyan-600/20 flex items-center gap-1.5"
+                  >
+                    <Check className="w-3.5 h-3.5" />
+                    <span>保存资料修改</span>
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* 2. 安全与改密 */}
+            {activeTab === 'security' && (
+              <form onSubmit={handleChangePassword} className="space-y-4">
+                <div className="pb-3 border-b border-slate-800">
+                  <h3 className="text-sm font-semibold text-white">修改登录密码</h3>
+                  <p className="text-xs text-slate-400">定期更新密码保障受控医疗器械工程研发数据安全</p>
+                </div>
+
+                {passwordError && (
+                  <div className="p-3 rounded-lg bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center gap-2">
+                    <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                    <span>{passwordError}</span>
+                  </div>
+                )}
+
+                {passwordSuccessTip && (
+                  <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
+                    <CheckCircle2 className="w-4 h-4 flex-shrink-0" />
+                    <span>密码已成功更新！请妥善保管新密码。</span>
+                  </div>
+                )}
+
+                <div>
+                  <label className="block text-xs font-medium text-slate-300 mb-1">
+                    当前原密码
+                  </label>
+                  <input
+                    type="password"
+                    required
+                    value={oldPassword}
+                    onChange={(e) => setOldPassword(e.target.value)}
+                    placeholder="请输入当前密码"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-100 focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-slate-300 mb-1">
+                      设置新密码
+                    </label>
+                    <input
+                      type="password"
+                      required
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder="不少于6位"
+                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-100 focus:outline-none focus:border-cyan-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-slate-300 mb-1">
+                      确认新密码
+                    </label>
+                    <input
+                      type="password"
+                      required
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder="再次输入新密码"
+                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-100 focus:outline-none focus:border-cyan-500"
+                    />
+                  </div>
+                </div>
+
+                <div className="pt-2 flex justify-end">
+                  <button
+                    type="submit"
+                    disabled={passwordLoading}
+                    className="px-4 py-2 rounded-xl bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-medium transition shadow-md shadow-cyan-600/20 flex items-center gap-1.5 disabled:opacity-50"
+                  >
+                    <KeyRound className="w-3.5 h-3.5" />
+                    <span>{passwordLoading ? '更新中...' : '确认更新密码'}</span>
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* 3. 偏好设定 */}
+            {activeTab === 'preferences' && (
+              <div className="space-y-5">
+                <div className="pb-3 border-b border-slate-800">
+                  <h3 className="text-sm font-semibold text-white">协同工作台偏好</h3>
+                  <p className="text-xs text-slate-400">个性化定制您的操作体验与交付物导出配置</p>
+                </div>
+
+                {/* 主题切换 */}
+                <div className="flex items-center justify-between p-3.5 rounded-xl bg-slate-950 border border-slate-800">
+                  <div>
+                    <span className="text-xs font-medium text-slate-200">界面色彩主题</span>
+                    <p className="text-[11px] text-slate-400">切换深色或明亮设计视觉风格</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={onToggleTheme}
+                    className="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 border border-slate-700 transition"
+                  >
+                    {theme === 'dark' ? '🌙 当前: 深色模式' : '☀️ 当前: 明亮模式'}
+                  </button>
+                </div>
+
+                {/* 默认导出格式 */}
+                <div className="flex items-center justify-between p-3.5 rounded-xl bg-slate-950 border border-slate-800">
+                  <div>
+                    <span className="text-xs font-medium text-slate-200">受控文档默认导出格式</span>
+                    <p className="text-[11px] text-slate-400">快捷导出受控交付物时的优先格式</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setExportFormat('docx')}
+                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition flex items-center gap-1.5 ${
+                        exportFormat === 'docx'
+                          ? 'bg-blue-600 text-white shadow-sm'
+                          : 'bg-slate-800 text-slate-400 hover:text-white'
+                      }`}
+                    >
+                      <FileText className="w-3.5 h-3.5" />
+                      <span>DOCX 格式</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setExportFormat('xlsx')}
+                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition flex items-center gap-1.5 ${
+                        exportFormat === 'xlsx'
+                          ? 'bg-emerald-600 text-white shadow-sm'
+                          : 'bg-slate-800 text-slate-400 hover:text-white'
+                      }`}
+                    >
+                      <FileText className="w-3.5 h-3.5" />
+                      <span>XLSX 表格</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 4. 我的权限清单 */}
+            {activeTab === 'permissions' && (
+              <div className="space-y-4">
+                <div className="pb-3 border-b border-slate-800 flex items-center justify-between">
+                  <div>
+                    <h3 className="text-sm font-semibold text-white">当前账号权限能力清单</h3>
+                    <p className="text-xs text-slate-400">
+                      基于职位关联角色 <span className="text-cyan-400 font-medium">[{currentRole?.name}]</span> 分配的 7 项原子权限
+                    </p>
+                  </div>
+                  <span className="text-xs px-2.5 py-1 rounded-lg bg-cyan-950 border border-cyan-800 text-cyan-300 font-mono">
+                    已获授权: {userPermissions.size} / {ALL_PERMISSION_DESCRIPTIONS.length}
+                  </span>
+                </div>
+
+                <div className="space-y-2">
+                  {ALL_PERMISSION_DESCRIPTIONS.map((perm) => {
+                    const hasIt = userPermissions.has(perm.key);
+                    return (
+                      <div
+                        key={perm.key}
+                        className={`p-3 rounded-xl border flex items-center justify-between transition ${
+                          hasIt
+                            ? 'bg-slate-950/80 border-slate-800'
+                            : 'bg-slate-950/30 border-slate-900 opacity-60'
+                        }`}
+                      >
+                        <div className="space-y-0.5">
+                          <div className="flex items-center gap-2">
+                            <span className={`text-xs font-medium ${hasIt ? 'text-slate-100' : 'text-slate-500'}`}>
+                              {perm.name}
+                            </span>
+                            <span className="text-[10px] font-mono px-1.5 py-0.2 rounded bg-slate-900 text-slate-400 border border-slate-800">
+                              {perm.key}
+                            </span>
+                          </div>
+                          <p className="text-[11px] text-slate-400">{perm.desc}</p>
+                        </div>
+
+                        <div className="flex-shrink-0">
+                          {hasIt ? (
+                            <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-400 bg-emerald-950/80 border border-emerald-800/80 px-2 py-0.5 rounded-full">
+                              <Check className="w-3 h-3" />
+                              <span>已授权</span>
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 text-[11px] font-medium text-slate-500 bg-slate-900 px-2 py-0.5 rounded-full border border-slate-800">
+                              <Lock className="w-3 h-3" />
+                              <span>未获得</span>
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};