代码修改

2026-05-27 19:43:15 +08:00
1 parent 8f5af46ec2
commit 8f75e12871
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Bell, Search, User, ChevronDown, Moon, Sun, Palette } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+export interface userData {
+  userName: string;
+  typeName: string;
+}
+
+const Header: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === 'dark';
+  const [userData, setUserData] = useState<userData>({
+    userName: '',
+    typeName: ''
+  });
+
+  useEffect(() => {
+    let userInfo: any = localStorage.getItem('userInfo');
+    if (userInfo) {
+      userInfo = JSON.parse(userInfo);
+      setUserData(userInfo);
+    }
+  }, []);
+  return (
+    <header className={`h-16 flex items-center justify-between px-6 theme-transition ${
+      isDark
+        ? 'bg-slate-900/50 backdrop-blur-xl border-b border-blue-800/30'
+        : 'bg-red-600 border-b border-red-700'
+    }`}>
+      {/* 左侧 - 搜索框 */}
+      <div className="flex items-center gap-4">
+        {/* <div className="relative">
+          <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-200'}`} />
+          <input
+            type="text"
+            placeholder="搜索场景、智能体、任务..."
+            className={`w-80 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/20 transition-all duration-200 theme-transition ${
+              isDark
+                ? 'bg-slate-800/50 border border-blue-800/30 text-white placeholder-slate-500'
+                : 'bg-red-700 border border-red-800 text-white placeholder-red-200'
+            }`}
+          />
+        </div> */}
+      </div>
+
+      {/* 右侧 - 用户信息和通知 */}
+      <div className="flex items-center gap-4">
+        {/* 主题切换按钮 */}
+        <button
+          onClick={toggleTheme}
+          className={`p-2 rounded-lg transition-all duration-200 ${
+            isDark
+              ? 'hover:bg-slate-800/50 text-slate-400 hover:text-white'
+              : 'hover:bg-red-500 text-white'
+          }`}
+          title={isDark ? '切换到红白主题' : '切换到深色主题'}
+        >
+          {isDark ? (
+            <Palette className="w-5 h-5" />
+          ) : (
+            <Moon className="w-5 h-5" />
+          )}
+        </button>
+
+        {/* 通知 */}
+        {/* <button className={`relative p-2 rounded-lg transition-colors ${
+          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
+        }`}>
+          <Bell className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-white'}`} />
+          <span className={`absolute top-1 right-1 w-2 h-2 rounded-full ${isDark ? 'bg-cyan-500' : 'bg-white'}`} />
+        </button> */}
+
+        {/* 分隔线 */}
+        <div className={`w-px h-8 ${isDark ? 'bg-blue-800/30' : 'bg-red-500'}`} />
+
+        {/* 用户信息 */}
+        <button className={`flex items-center gap-3 px-3 py-1.5 rounded-lg transition-colors ${
+          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
+        }`}>
+          <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            isDark
+              ? 'bg-gradient-to-br from-blue-500 to-cyan-400'
+              : 'bg-white'
+          }`}>
+            <User className={`w-4 h-4 ${isDark ? 'text-white' : 'text-red-600'}`} />
+          </div>
+          <div className="text-left">
+            <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-white'}`}>{userData.userName}</p>
+            <p className={`text-xs ${isDark ? 'text-blue-400/60' : 'text-red-200'}`}>{userData.typeName}</p>
+          </div>
+          {/* <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-white'}`} /> */}
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;