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
@@ -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>
+  );
+};