fix(web): redesign auth and settings UI using system design tokens and high-fidelity styles

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-13 02:50:20 +00:00
parent eedf2d17e0
commit e8b9347d8d
7 changed files with 2782 additions and 1415 deletions
@@ -1523,6 +1523,17 @@ export default function App() {
        roles={roles}
        onSaveRoles={(newRoles) => setRoles(newRoles)}
        allUsers={allUsers}
+        onUpdateUserRole={(userId, roleId) => {
+          const targetRole = roles.find((r) => r.id === roleId);
+          setAllUsers((prev) =>
+            prev.map((u) => (u.id === userId ? { ...u, roleId, position: targetRole?.name || u.position } : u))
+          );
+          if (currentUser.id === userId) {
+            setCurrentUser((prev) => ({ ...prev, roleId, position: targetRole?.name || prev.position }));
+          }
+        }}
+        systemConfig={systemAuthConfig}
+        onUpdateSystemConfig={(cfg) => setSystemAuthConfig((prev) => ({ ...prev, ...cfg }))}
        onRefreshUsers={() => {
          authClient
            .getAdminUsers()
@@ -336,6 +336,26 @@ export class AuthClient {
    return Array.from(this.users.values()).map(({ password, ...u }) => u);
  }

+  /**
+   * 别名兼容：listAllUsers
+   */
+  async listAllUsers(): Promise<UserAccount[]> {
+    return this.getAdminUsers();
+  }
+
+  /**
+   * 管理员重置指定用户密码并标记首次登录强制改密
+   */
+  async adminResetPassword(userId: number, tempPass: string): Promise<boolean> {
+    const user = this.users.get(userId);
+    if (!user) throw new Error('用户不存在');
+    user.password = tempPass;
+    user.mustChangePassword = true;
+    user.updatedAt = new Date().toISOString();
+    this.saveToStorage();
+    return true;
+  }
+
  /**
   * 管理员手动创建新账号
   */
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ShieldAlert, Lock, KeyRound, Check, LogOut, AlertCircle } from 'lucide-react';
+import { ShieldAlert, LogOut, AlertCircle, ArrowRight } from 'lucide-react';
 import { authClient } from '../../api/auth';
 import { UserProfile } from '../../types/docgov';

@@ -57,103 +57,215 @@ export const FirstLoginPasswordModal: React.FC<FirstLoginPasswordModalProps> = (
  };

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-md p-4 animate-in fade-in duration-200">
-      <div className="w-full max-w-md bg-slate-900 border border-amber-500/30 rounded-2xl shadow-2xl p-6 sm:p-7 text-slate-100">
-        <div className="flex items-center gap-3.5 mb-4">
-          <div className="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center flex-shrink-0">
-            <ShieldAlert className="w-6 h-6" />
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(11, 14, 20, 0.85)',
+        backdropFilter: 'blur(8px)',
+        zIndex: 2000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '20px',
+        fontFamily: 'var(--font-sans)',
+      }}
+    >
+      <div
+        style={{
+          width: '460px',
+          maxWidth: '95vw',
+          backgroundColor: 'var(--bg-panel, #131820)',
+          borderRadius: '14px',
+          border: '1px solid var(--border-strong)',
+          boxShadow: 'var(--shadow-lg)',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* 顶部警告标志与标题 */}
+        <div
+          style={{
+            padding: '20px 24px',
+            borderBottom: '1px solid var(--border)',
+            backgroundColor: 'var(--bg-subtle, #1A212C)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '14px',
+          }}
+        >
+          <div
+            style={{
+              width: '42px',
+              height: '42px',
+              borderRadius: '10px',
+              backgroundColor: 'rgba(242, 169, 59, 0.15)',
+              border: '1px solid rgba(242, 169, 59, 0.3)',
+              color: 'var(--amber-500)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
+            <ShieldAlert size={22} />
          </div>
          <div>
-            <h3 className="text-lg font-bold text-white">首次登录安全改密</h3>
-            <p className="text-xs text-amber-300/80">
-              账号由管理员创建 · 必须重置初始密码方可进入
-            </p>
+            <div style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-strong)' }}>
+              首次登录安全改密
+            </div>
+            <div style={{ fontSize: '11px', color: 'var(--amber-500)', marginTop: '2px' }}>
+              医疗数据审计受控要求 · 必须重设个人独立密码方可进入
+            </div>
          </div>
        </div>

-        <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-xs text-amber-200/90 mb-5 leading-relaxed">
-          尊敬的 <span className="font-semibold text-white">{user.name}</span>：为了保障您的研发文档与医疗器械数据资产安全，请设置属于您个人的独立密码。
-        </div>
-
-        {error && (
-          <div className="p-3 mb-4 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>{error}</span>
+        {/* 提示文案 */}
+        <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div
+            style={{
+              padding: '12px 14px',
+              borderRadius: '8px',
+              backgroundColor: 'rgba(242, 169, 59, 0.08)',
+              border: '1px solid rgba(242, 169, 59, 0.2)',
+              fontSize: '12px',
+              lineHeight: '1.6',
+              color: 'var(--text)',
+            }}
+          >
+            尊敬的 <strong style={{ color: 'var(--text-strong)' }}>{user.name}</strong>（工号：{user.employeeId}）：您的账号由管理员开通，为了防范越权并满足 NMPA 医疗器械数据追踪要求，请更新您的初始密码。
          </div>
-        )}

-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-xs font-medium text-slate-300 mb-1">
-              原初始密码
-            </label>
-            <div className="relative">
-              <Lock className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+          {error && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '10px 12px',
+                borderRadius: '8px',
+                backgroundColor: 'var(--danger-bg)',
+                border: '1px solid rgba(228, 87, 75, 0.3)',
+                color: 'var(--danger)',
+                fontSize: '12px',
+              }}
+            >
+              <AlertCircle size={15} style={{ flexShrink: 0 }} />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
+            <div>
+              <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, color: 'var(--text-strong)', marginBottom: '5px' }}>
+                管理员设置的初始密码
+              </label>
              <input
                type="password"
-                required
                value={oldPassword}
                onChange={(e) => setOldPassword(e.target.value)}
-                placeholder="请输入管理员提供的初始密码"
-                className="w-full bg-slate-950 border border-slate-700/80 rounded-xl pl-9 pr-3 py-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-amber-500"
+                placeholder="请输入初始密码"
+                style={{
+                  width: '100%',
+                  padding: '9px 12px',
+                  borderRadius: '8px',
+                  backgroundColor: 'var(--bg-app)',
+                  border: '1px solid var(--border)',
+                  color: 'var(--text-strong)',
+                  fontSize: '13px',
+                  boxSizing: 'border-box',
+                }}
              />
            </div>
-          </div>

-          <div>
-            <label className="block text-xs font-medium text-slate-300 mb-1">
-              设置新密码
-            </label>
-            <div className="relative">
-              <KeyRound className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+            <div>
+              <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, color: 'var(--text-strong)', marginBottom: '5px' }}>
+                新登录密码
+              </label>
              <input
                type="password"
-                required
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
-                placeholder="至少 6 位字符"
-                className="w-full bg-slate-950 border border-slate-700/80 rounded-xl pl-9 pr-3 py-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-amber-500"
+                placeholder="至少 6 位，推荐包含字母和数字"
+                style={{
+                  width: '100%',
+                  padding: '9px 12px',
+                  borderRadius: '8px',
+                  backgroundColor: 'var(--bg-app)',
+                  border: '1px solid var(--border)',
+                  color: 'var(--text-strong)',
+                  fontSize: '13px',
+                  boxSizing: 'border-box',
+                }}
              />
            </div>
-          </div>

-          <div>
-            <label className="block text-xs font-medium text-slate-300 mb-1">
-              确认新密码
-            </label>
-            <div className="relative">
-              <KeyRound className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+            <div>
+              <label style={{ display: 'block', fontSize: '12px', fontWeight: 600, color: 'var(--text-strong)', marginBottom: '5px' }}>
+                确认新密码
+              </label>
              <input
                type="password"
-                required
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                placeholder="再次输入新密码"
-                className="w-full bg-slate-950 border border-slate-700/80 rounded-xl pl-9 pr-3 py-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-amber-500"
+                style={{
+                  width: '100%',
+                  padding: '9px 12px',
+                  borderRadius: '8px',
+                  backgroundColor: 'var(--bg-app)',
+                  border: '1px solid var(--border)',
+                  color: 'var(--text-strong)',
+                  fontSize: '13px',
+                  boxSizing: 'border-box',
+                }}
              />
            </div>
-          </div>

-          <div className="pt-2 flex items-center justify-between gap-3">
-            <button
-              type="button"
-              onClick={onLogout}
-              className="py-2.5 px-4 rounded-xl border border-slate-700 hover:bg-slate-800 text-xs font-medium text-slate-300 flex items-center gap-1.5 transition"
-            >
-              <LogOut className="w-3.5 h-3.5" />
-              <span>暂不修改并退出</span>
-            </button>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '10px' }}>
+              <button
+                type="button"
+                onClick={onLogout}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  fontSize: '12px',
+                  color: 'var(--text-muted)',
+                  cursor: 'pointer',
+                  padding: '6px 10px',
+                  borderRadius: '6px',
+                }}
+              >
+                <LogOut size={14} />
+                <span>退出登录</span>
+              </button>

-            <button
-              type="submit"
-              disabled={loading}
-              className="flex-1 py-2.5 px-4 rounded-xl bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 active:scale-[0.99] text-white font-medium text-xs shadow-md shadow-amber-500/20 flex items-center justify-center gap-1.5 transition disabled:opacity-50"
-            >
-              <Check className="w-4 h-4" />
-              <span>{loading ? '提交修改中...' : '完成修改并进入系统'}</span>
-            </button>
-          </div>
-        </form>
+              <button
+                type="submit"
+                disabled={loading}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  padding: '9px 20px',
+                  borderRadius: '8px',
+                  background: 'var(--brand-grad)',
+                  color: '#FFFFFF',
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  cursor: loading ? 'not-allowed' : 'pointer',
+                  opacity: loading ? 0.7 : 1,
+                  boxShadow: '0 2px 8px rgba(79, 107, 255, 0.3)',
+                }}
+              >
+                {loading ? <span>正在重置并加密...</span> : <span>确认重置并进入系统</span>}
+                <ArrowRight size={15} />
+              </button>
+            </div>
+          </form>
+        </div>
      </div>
    </div>
  );
@@ -23,32 +23,80 @@ export const DevRoleSwitcher: React.FC<DevRoleSwitcherProps> = ({
  }

  return (
-    <div className="fixed bottom-4 right-4 z-40 select-none">
-      <div className="bg-slate-900/95 border border-amber-500/40 rounded-2xl shadow-2xl backdrop-blur-md overflow-hidden text-slate-100 transition-all max-w-xs">
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 50,
+        fontFamily: 'var(--font-sans)',
+        userSelect: 'none',
+      }}
+    >
+      <div
+        style={{
+          width: '280px',
+          backgroundColor: 'var(--bg-panel, #131820)',
+          borderRadius: '12px',
+          border: '1px solid var(--border-strong)',
+          boxShadow: 'var(--shadow-lg)',
+          overflow: 'hidden',
+          backdropFilter: 'blur(8px)',
+        }}
+      >
        {/* 折叠收起顶栏 */}
        <div
          onClick={() => setExpanded(!expanded)}
-          className="px-3 py-2 bg-gradient-to-r from-amber-950/60 to-slate-900 flex items-center justify-between gap-3 cursor-pointer hover:bg-amber-950/80 transition"
+          style={{
+            padding: '8px 12px',
+            backgroundColor: 'var(--bg-subtle, #1A212C)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            borderBottom: expanded ? '1px solid var(--border)' : 'none',
+          }}
        >
-          <div className="flex items-center gap-1.5 text-xs font-semibold text-amber-400">
-            <Sparkles className="w-3.5 h-3.5" />
-            <span>研发调试切人</span>
-            <span className="text-[10px] font-mono px-1 rounded bg-amber-500/20 text-amber-300">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <Sparkles size={14} style={{ color: 'var(--amber-500)' }} />
+            <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-strong)' }}>
+              DEV 调试切人
+            </span>
+            <span
+              style={{
+                fontSize: '10px',
+                padding: '1px 5px',
+                borderRadius: '4px',
+                backgroundColor: 'rgba(242, 169, 59, 0.15)',
+                color: 'var(--amber-500)',
+                fontWeight: 600,
+              }}
+            >
              DEV ONLY
            </span>
          </div>

-          <div className="flex items-center gap-1 text-[11px] text-slate-400">
-            <span className="text-cyan-400 font-medium">{currentUser.name}</span>
-            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronUp className="w-3.5 h-3.5" />}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '11px', color: 'var(--text-muted)' }}>
+            <span style={{ color: 'var(--brand-500)', fontWeight: 600 }}>{currentUser.name}</span>
+            {expanded ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
          </div>
        </div>

        {/* 展开的快速切换列表 */}
        {expanded && (
-          <div className="p-2 space-y-1 border-t border-slate-800 bg-slate-950/90 max-h-60 overflow-y-auto">
-            <div className="text-[10px] text-slate-400 px-2 py-0.5">
-              测试说明：点击一键切换身份，实测立项、负责人指派与单文档覆盖拦截效果：
+          <div
+            style={{
+              padding: '8px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '4px',
+              maxHeight: '220px',
+              overflowY: 'auto',
+              backgroundColor: 'var(--bg-card, #151B25)',
+            }}
+          >
+            <div style={{ fontSize: '10px', color: 'var(--text-faint)', padding: '2px 4px' }}>
+              点击一键切换身份，实测立项、指派与文档权限：
            </div>
            {allUsers.map((u) => {
              const isCurrent = u.id === currentUser.id;
@@ -56,21 +104,28 @@ export const DevRoleSwitcher: React.FC<DevRoleSwitcherProps> = ({
                <button
                  key={u.id}
                  type="button"
-                  onClick={() => {
-                    onSwitchUser(u);
+                  onClick={() => onSwitchUser(u)}
+                  style={{
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '6px 10px',
+                    borderRadius: '6px',
+                    fontSize: '12px',
+                    backgroundColor: isCurrent ? 'rgba(79, 107, 255, 0.12)' : 'transparent',
+                    border: isCurrent ? '1px solid rgba(79, 107, 255, 0.3)' : '1px solid transparent',
+                    color: isCurrent ? 'var(--brand-500)' : 'var(--text)',
+                    cursor: 'pointer',
+                    textAlign: 'left',
                  }}
-                  className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition ${
-                    isCurrent
-                      ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 font-semibold'
-                      : 'text-slate-300 hover:bg-slate-800 hover:text-white'
-                  }`}
                >
-                  <div className="flex items-center gap-2">
-                    <UserCheck className="w-3.5 h-3.5 text-slate-400" />
-                    <span>{u.name}</span>
-                    <span className="text-[10px] text-slate-400 font-mono">({u.position})</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <UserCheck size={13} style={{ color: isCurrent ? 'var(--brand-500)' : 'var(--text-muted)' }} />
+                    <span style={{ fontWeight: isCurrent ? 600 : 400 }}>{u.name}</span>
+                    <span style={{ fontSize: '10px', color: 'var(--text-faint)' }}>({u.position})</span>
                  </div>
-                  {isCurrent && <Check className="w-3.5 h-3.5 text-amber-400" />}
+                  {isCurrent && <Check size={13} style={{ color: 'var(--brand-500)' }} />}
                </button>
              );
            })}