feat(web): integrate auth guards, dual settings and dev switcher

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-13 02:50:20 +00:00
parent cd08e443eb
commit b4e4a64cd0
6 changed files with 273 additions and 55 deletions
@@ -67,3 +67,12 @@ RERANKER_ENDPOINT_URL=https://www.dmxapi.cn/v1/rerank
 RERANKER_PROVIDER=openai_compatible
 RERANKER_MODEL=bge-reranker-v2-m3-free
 RERANKER_API_KEY=
+
+# --- 9. 系统管理员与认证准入配置 ---
+# 超级管理员凭据 (系统启动时自动初始化为 role-admin)
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin-secret-password-123
+
+# 全局准入策略 (是否开放自主注册与注册是否必须审批)
+AUTH_REGISTRATION_ENABLED=true
+AUTH_REQUIRE_APPROVAL=false
@@ -10,8 +10,14 @@ import { CommentSidePanel } from './components/doc/CommentSidePanel';
 import { DocGovActionBar } from './components/doc/DocGovActionBar';
 import { ProposalConfirmCard } from './components/doc/ProposalConfirmCard';
 import { UserProjectRightsModal } from './components/user/UserProjectRightsModal';
-import { SettingsModal } from './components/user/SettingsModal';
+import { UserSettingsModal } from './components/user/UserSettingsModal';
+import { AdminSettingsModal } from './components/admin/AdminSettingsModal';
 import { DocVisibilityModal } from './components/doc/DocVisibilityModal';
+import { LoginView } from './components/auth/LoginView';
+import { FirstLoginPasswordModal } from './components/auth/FirstLoginPasswordModal';
+import { DevRoleSwitcher } from './components/dev/DevRoleSwitcher';
+import { authClient } from './api/auth';
+import { LoginResult, SystemAuthConfig } from './types/auth';
 import { markdownToBlockAST } from './engine/markdownToBlock';
 import { blockASTToMarkdown } from './engine/blockToMarkdown';
 import { recomputeNumbering } from './engine/autoNumber';
@@ -327,12 +333,41 @@ export default function App() {
  const [activeDocId, setActiveDocId] = useState('doc-001');
  const [deckDrawerOpen, setDeckDrawerOpen] = useState(false);

+  // 认证与会话状态
+  const [session, setSession] = useState<LoginResult | null>(() => authClient.loadSavedSession());
+  const [systemEnv, setSystemEnv] = useState<string>('dev');
+  const [systemAuthConfig, setSystemAuthConfig] = useState<SystemAuthConfig>({
+    allowRegistration: true,
+    requireApproval: false,
+  });
+
  // 模态浮层控制
  const [rightsModalOpen, setRightsModalOpen] = useState(false);
-  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [userSettingsOpen, setUserSettingsOpen] = useState(false);
+  const [adminSettingsOpen, setAdminSettingsOpen] = useState(false);
  const [docVisibilityModalOpen, setDocVisibilityModalOpen] = useState(false);
  const [targetDocForVisibility, setTargetDocForVisibility] = useState<DeliverableItem | null>(null);

+  useEffect(() => {
+    authClient.getSystemAuthConfig().then(setSystemAuthConfig).catch(() => {});
+    const saved = authClient.loadSavedSession();
+    if (saved) {
+      setSession(saved);
+      if (saved.env) setSystemEnv(saved.env);
+      const match = allUsers.find((u) => u.id === saved.user.id);
+      if (match) {
+        setCurrentUser(match);
+      } else {
+        setCurrentUser(saved.user);
+      }
+    }
+  }, []);
+
+  const handleLogout = () => {
+    authClient.logout();
+    setSession(null);
+  };
+
  // 核心功能权限计算
  const canCreateProject = useMemo(() => {
    return hasPermission(currentUser, roles, 'project:create');
@@ -1240,6 +1275,26 @@ export default function App() {
    }));
  };

+  // 未登录拦截门禁：展示现代化医疗合规登录与注册页面
+  if (!session) {
+    return (
+      <LoginView
+        onLoginSuccess={(newSession) => {
+          setSession(newSession);
+          if (newSession.env) setSystemEnv(newSession.env);
+          const match = allUsers.find((u) => u.id === newSession.user.id);
+          if (match) {
+            setCurrentUser(match);
+          } else {
+            setCurrentUser(newSession.user);
+          }
+        }}
+        systemConfig={systemAuthConfig}
+        env={systemEnv}
+      />
+    );
+  }
+
  return (
    <>
      <AppShell
@@ -1294,7 +1349,8 @@ export default function App() {
        currentUserName={currentUser.name}
        onChangeRole={(_, __) => {}}
        onOpenRightsModal={() => setRightsModalOpen(true)}
-        onOpenSettingsModal={() => setSettingsModalOpen(true)}
+        onOpenUserSettings={() => setUserSettingsOpen(true)}
+        onOpenAdminSettings={() => setAdminSettingsOpen(true)}
        chatContent={
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
            <MessageStream
@@ -1423,6 +1479,7 @@ export default function App() {
        activeDocId={activeDocId}
        allUsers={allUsers}
        canAssignLead={canAssignLead}
+        allowDevSwitch={systemEnv === 'dev'}
        onSwitchUser={(u) => {
          const fresh = allUsers.find((x) => x.id === u.id) || u;
          setCurrentUser(fresh);
@@ -1431,22 +1488,57 @@ export default function App() {
        onRoleChangeForDoc={handleRoleChangeForDoc}
      />

-      {/* 系统权限与角色管理控制台 */}
-      <SettingsModal
-        isOpen={settingsModalOpen}
-        onClose={() => setSettingsModalOpen(false)}
+      {/* 首次登录强制改密阻断弹窗 */}
+      <FirstLoginPasswordModal
+        isOpen={!!session?.mustChangePassword}
+        user={currentUser}
+        onPasswordChanged={() => {
+          const updated = { ...session, mustChangePassword: false };
+          setSession(updated);
+          authClient.saveSession(updated);
+        }}
+        onLogout={handleLogout}
+      />
+
+      {/* 用户个人设置与偏好中心 (全员可用) */}
+      <UserSettingsModal
+        isOpen={userSettingsOpen}
+        onClose={() => setUserSettingsOpen(false)}
+        currentUser={currentUser}
+        roles={roles}
+        onUpdateProfile={(updatedProfile) => {
+          setAllUsers((prev) =>
+            prev.map((u) => (u.id === currentUser.id ? { ...u, ...updatedProfile } : u))
+          );
+          setCurrentUser((prev) => ({ ...prev, ...updatedProfile }));
+        }}
+        onLogout={handleLogout}
+      />
+
+      {/* 系统管理员独占治理控制台 (仅 role-admin 可入) */}
+      <AdminSettingsModal
+        isOpen={adminSettingsOpen}
+        onClose={() => setAdminSettingsOpen(false)}
+        currentUser={currentUser}
        roles={roles}
        onSaveRoles={(newRoles) => setRoles(newRoles)}
-        users={allUsers}
-        currentUser={currentUser}
-        onUpdateUserRole={(userId, roleId) => {
-          setAllUsers((prev) =>
-            prev.map((u) => (u.id === userId ? { ...u, roleId } : u))
-          );
-          if (currentUser.id === userId) {
-            setCurrentUser((prev) => ({ ...prev, roleId }));
-          }
+        allUsers={allUsers}
+        onRefreshUsers={() => {
+          authClient
+            .getAdminUsers()
+            .then((users) => {
+              setAllUsers(users);
+            })
+            .catch(() => {});
        }}
+        env={systemEnv}
+      />
+
+      {/* 研发调试快捷身份切换浮窗 (仅在 DEV 环境生效，生产与测试环境彻底剥离) */}
+      <DevRoleSwitcher
+        env={systemEnv}
+        currentUser={currentUser}
+        allUsers={allUsers}
        onSwitchUser={(newUser) => {
          const fresh = allUsers.find((u) => u.id === newUser.id) || newUser;
          setCurrentUser(fresh);
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Sparkles, ChevronUp, ChevronDown, Check, UserCheck } from 'lucide-react';
+import { UserProfile } from '../../types/docgov';
+
+interface DevRoleSwitcherProps {
+  env?: string;
+  currentUser: UserProfile;
+  allUsers: UserProfile[];
+  onSwitchUser: (user: UserProfile) => void;
+}
+
+export const DevRoleSwitcher: React.FC<DevRoleSwitcherProps> = ({
+  env = 'dev',
+  currentUser,
+  allUsers,
+  onSwitchUser,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  // 严格环境红线：非 dev 环境绝对不渲染任何 DOM 内容
+  if (env !== 'dev') {
+    return null;
+  }
+
+  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
+          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"
+        >
+          <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">
+              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>
+        </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>
+            {allUsers.map((u) => {
+              const isCurrent = u.id === currentUser.id;
+              return (
+                <button
+                  key={u.id}
+                  type="button"
+                  onClick={() => {
+                    onSwitchUser(u);
+                  }}
+                  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>
+                  {isCurrent && <Check className="w-3.5 h-3.5 text-amber-400" />}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -18,7 +18,8 @@ interface AppShellProps {
  currentUserName: string;
  onChangeRole: (role: UserRole, name: string) => void;
  onOpenRightsModal: () => void;
-  onOpenSettingsModal: () => void;
+  onOpenUserSettings: () => void;
+  onOpenAdminSettings?: () => void;
  chatContent: React.ReactNode;
  docContent: React.ReactNode;
 }
@@ -34,7 +35,8 @@ export const AppShell: React.FC<AppShellProps> = ({
  currentUserName: _currentUserName,
  onChangeRole: _onChangeRole,
  onOpenRightsModal,
-  onOpenSettingsModal,
+  onOpenUserSettings,
+  onOpenAdminSettings,
  chatContent,
  docContent,
 }) => {
@@ -117,7 +119,9 @@ export const AppShell: React.FC<AppShellProps> = ({
          currentUser={currentUser}
          currentRole={currentRole}
          onOpenRightsModal={onOpenRightsModal}
-          onOpenSettingsModal={onOpenSettingsModal}
+          onOpenUserSettings={onOpenUserSettings}
+          onOpenAdminSettings={onOpenAdminSettings}
+          isAdmin={currentUser.roleId === 'role-admin' || currentUser.name.includes('管理员')}
        />

        {!leftCollapsed && (
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plus, Settings, User, ShieldCheck, MessageSquare } from 'lucide-react';
+import { Plus, Settings, User, ShieldCheck, MessageSquare, Shield } from 'lucide-react';
 import { ProjectSession } from '../../types/workbench';
 import { UserRole, UserProfile } from '../../types/docgov';

@@ -14,7 +14,9 @@ interface LeftRailProps {
  currentUser: UserProfile;
  currentRole: UserRole;
  onOpenRightsModal: () => void;
-  onOpenSettingsModal: () => void;
+  onOpenUserSettings: () => void;
+  onOpenAdminSettings?: () => void;
+  isAdmin?: boolean;
 }

 export const LeftRail: React.FC<LeftRailProps> = ({
@@ -28,7 +30,9 @@ export const LeftRail: React.FC<LeftRailProps> = ({
  currentUser,
  currentRole,
  onOpenRightsModal,
-  onOpenSettingsModal,
+  onOpenUserSettings,
+  onOpenAdminSettings,
+  isAdmin = false,
 }) => {
  if (collapsed) {
    return null;
@@ -260,37 +264,62 @@ export const LeftRail: React.FC<LeftRailProps> = ({
          </div>
        </div>

-        {/* 独立设置按钮 (预留系统设置与管理员后台) */}
-        <button
-          onClick={onOpenSettingsModal}
-          style={{
-            width: '32px',
-            height: '32px',
-            borderRadius: 'var(--r-sm)',
-            border: '1px solid var(--border)',
-            background: 'var(--bg-panel)',
-            color: 'var(--text-muted)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            flexShrink: 0,
-            transition: 'all 0.15s ease',
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'var(--bg-hover)';
-            e.currentTarget.style.color = 'var(--text-strong)';
-            e.currentTarget.style.borderColor = 'var(--brand-300)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'var(--bg-panel)';
-            e.currentTarget.style.color = 'var(--text-muted)';
-            e.currentTarget.style.borderColor = 'var(--border)';
-          }}
-          title="系统设置与管理员后台 (规划预留)"
-        >
-          <Settings size={16} />
-        </button>
+        {/* 设置操作区：普通设置所有人可用，系统管理仅管理员可见 */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          {isAdmin && (
+            <button
+              onClick={onOpenAdminSettings}
+              style={{
+                width: '32px',
+                height: '32px',
+                borderRadius: 'var(--r-sm)',
+                border: '1px solid rgba(245, 158, 11, 0.4)',
+                background: 'rgba(245, 158, 11, 0.12)',
+                color: 'var(--amber-500)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                flexShrink: 0,
+                transition: 'all 0.15s ease',
+              }}
+              title="系统管理与准入治理控制台 (管理员独占)"
+            >
+              <Shield size={16} />
+            </button>
+          )}
+
+          <button
+            onClick={onOpenUserSettings}
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: 'var(--r-sm)',
+              border: '1px solid var(--border)',
+              background: 'var(--bg-panel)',
+              color: 'var(--text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              flexShrink: 0,
+              transition: 'all 0.15s ease',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'var(--bg-hover)';
+              e.currentTarget.style.color = 'var(--text-strong)';
+              e.currentTarget.style.borderColor = 'var(--brand-300)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'var(--bg-panel)';
+              e.currentTarget.style.color = 'var(--text-muted)';
+              e.currentTarget.style.borderColor = 'var(--border)';
+            }}
+            title="个人资料与系统偏好设置"
+          >
+            <Settings size={16} />
+          </button>
+        </div>
      </div>
    </aside>
  );
@@ -20,6 +20,7 @@ interface UserProjectRightsModalProps {
  allUsers?: UserProfile[];
  canAssignLead?: boolean;
  onSwitchUser?: (user: UserProfile) => void;
+  allowDevSwitch?: boolean;
  onSelectDoc: (docId: string) => void;
  onRoleChangeForDoc?: (docId: string, role: DocPermissionRole) => void;
 }
@@ -34,6 +35,7 @@ export const UserProjectRightsModal: FC<UserProjectRightsModalProps> = ({
  allUsers,
  canAssignLead = true,
  onSwitchUser,
+  allowDevSwitch = true,
  onSelectDoc,
  onRoleChangeForDoc,
 }) => {
@@ -565,9 +567,9 @@ export const UserProjectRightsModal: FC<UserProjectRightsModalProps> = ({
            justifyContent: 'space-between',
          }}
        >
-          {allUsers && allUsers.length > 0 ? (
+          {allowDevSwitch && allUsers && allUsers.length > 0 ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-              <span style={{ fontSize: '11px', color: 'var(--text-muted)' }}>切换当前账号测试隔离:</span>
+              <span style={{ fontSize: '11px', color: 'var(--amber-400)', fontWeight: 600 }}>[DEV 调试切人]:</span>
              {allUsers.map((u) => {
                const isCurrent = u.id === currentUser.id;
                return (