finstep-template-cli 1.0.1

package/template/src/components/f-b-header.tsx

@@ -0,0 +1,894 @@
+import { useState } from "react";
+// AI生成的代码 - 自定义Link组件替换Next.js Link
+import React from "react";
+// AI生成的代码 - 导入 Ant Design 组件
+import { Drawer, Menu, Dropdown } from "antd";
+// AI生成的代码 - 导入用户状态管理
+import { useStore } from "../stores/store-context";
+import { observer } from "mobx-react-lite";
+// AI生成：导入React Router的useNavigate hook
+import { useNavigate } from "react-router-dom";
+// import {
+//   FileTextOutlined,
+//   DollarOutlined,
+//   ScanOutlined,
+//   SettingOutlined,
+//   AuditOutlined,
+//   SearchOutlined,
+// } from "@ant-design/icons";
+
+// 自定义Link组件，用于替换Next.js的Link组件
+interface LinkProps {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const Link: React.FC<LinkProps> = ({ href, className, children, onClick }) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick();
+    }
+    // 使用window.location进行页面导航
+    window.location.href = href;
+  };
+
+  return (
+    <a href={href} className={className} onClick={handleClick}>
+      {children}
+    </a>
+  );
+};
+
+// AI生成的代码 - 用户信息接口定义
+interface UserInfo {
+  userId: string;
+  login: boolean;
+  phone: string;
+  avatar?: string;
+  username?: string;
+}
+
+const Header = observer(() => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [loginMode, setLoginMode] = useState<"login" | "register">("login");
+  // AI生成的代码 - 移动端用户下拉菜单状态
+  const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+
+  // AI生成的代码 - 获取用户状态管理
+  const { userStore } = useStore();
+  // AI生成：使用React Router的navigate函数
+  const navigate = useNavigate();
+
+  // AI生成的代码 - 初始化时从localStorage恢复用户状态
+  React.useEffect(() => {
+    const savedUserInfo = localStorage.getItem("userInfo");
+    if (savedUserInfo) {
+      try {
+        const userInfo = JSON.parse(savedUserInfo);
+        if (userInfo.login) {
+          userStore.setUserInfo(userInfo);
+        }
+      } catch (error) {
+        console.error("解析用户信息失败:", error);
+        localStorage.removeItem("userInfo");
+      }
+    }
+  }, [userStore]);
+  const handleMouseEnter = (dropdown: string) => {
+    setActiveDropdown(dropdown);
+  };
+
+  const handleMouseLeave = () => {
+    setActiveDropdown(null);
+  };
+
+  const handleLoginClick = () => {
+    setShowLoginModal(true);
+    // setIsMenuOpen(false);
+  };
+
+  const handleCloseModal = () => {
+    setShowLoginModal(false);
+  };
+
+  const handleLoginSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // AI生成的代码 - 处理登录逻辑，模拟登录成功
+    const mockUserInfo: UserInfo = {
+      userId: "user123",
+      login: true,
+      phone: "13800138000",
+      avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
+      username: "用户123",
+    };
+
+    // 存储用户信息到store
+    userStore.setUserInfo(mockUserInfo);
+
+    // 存储到localStorage持久化
+    localStorage.setItem("userInfo", JSON.stringify(mockUserInfo));
+
+    console.log("登录成功");
+    setShowLoginModal(false);
+  };
+
+  const handleRegisterSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // 处理申请提交逻辑
+    console.log("申请提交");
+    alert("申请已提交，我们将在1-2个工作日内审核您的申请，请耐心等待。");
+    setShowLoginModal(false);
+  };
+
+  return (
+    <>
+      <header className="bg-slate-950 border-b border-slate-800/60 sticky top-0 z-[60]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-24">
+            {/* Logo */}
+            <div className="flex items-center">
+              <Link href="/" className="flex items-center space-x-3 group">
+                <img
+                  src="/logo.svg"
+                  alt="logo"
+                  className="w-[40px] h-[40px] transition-transform duration-300 hover:scale-110 group-hover:scale-110"
+                />
+                <span className="text-2xl font-bold bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent group-hover:from-blue-400 group-hover:to-white transition-all duration-300">
+                  财跃星辰
+                </span>
+              </Link>
+            </div>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden lg:flex items-center space-x-2">
+              <Link
+                href="/"
+                className="relative px-6 py-3 text-slate-300 hover:text-white transition-all duration-300 group"
+              >
+                <span className="relative z-10 font-semibold">首页</span>
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 to-purple-600/0 group-hover:from-blue-600/20 group-hover:to-purple-600/20 rounded-lg transition-all duration-300"></div>
+                <div className="absolute inset-0 border border-transparent group-hover:border-blue-500/30 rounded-lg transition-all duration-300"></div>
+              </Link>
+
+              {/* AIGC产品 Dropdown */}
+              <div
+                className="relative"
+                onMouseEnter={() => handleMouseEnter("aigc")}
+                onMouseLeave={handleMouseLeave}
+              >
+                <button className="relative px-6 py-3 text-slate-300 hover:text-white transition-all duration-300 group flex items-center">
+                  <span className="relative z-10 font-semibold">AIGC产品</span>
+                  <i
+                    className="ri-arrow-down-s-line ml-1 text-sm transition-transform duration-200"
+                    style={{
+                      transform:
+                        activeDropdown === "aigc"
+                          ? "rotate(180deg)"
+                          : "rotate(0deg)",
+                    }}
+                  ></i>
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 to-purple-600/0 group-hover:from-blue-600/20 group-hover:to-purple-600/20 rounded-lg transition-all duration-300"></div>
+                  <div className="absolute inset-0 border border-transparent group-hover:border-blue-500/30 rounded-lg transition-all duration-300"></div>
+                </button>
+
+                {activeDropdown === "aigc" && (
+                  <div className="absolute top-full left-0 w-56 bg-slate-900/95 backdrop-blur-xl border border-slate-800/80 rounded-xl shadow-2xl shadow-black/40 overflow-hidden z-[70]">
+                    <div className="py-2">
+                      {/* <Link
+                        href="/aigc/ai-morning"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-sun-line w-5 h-5 flex items-center justify-center mr-3 text-blue-400 group-hover:text-white"></i>
+                          <span>AI早报</span>
+                        </div>
+                      </Link>
+                      <Link
+                        href="/aigc/ai-gold"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-money-dollar-circle-line w-5 h-5 flex items-center justify-center mr-3 text-yellow-400 group-hover:text-white"></i>
+                          <span>AI掘金</span>
+                        </div>
+                      </Link> */}
+                      <Link
+                        href="/aigc/ai-scanner"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-search-2-line w-5 h-5 flex items-center justify-center mr-3 text-green-400 group-hover:text-white"></i>
+                          <span>AI扫雷</span>
+                        </div>
+                      </Link>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Agent产品 Dropdown */}
+              <div
+                className="relative"
+                onMouseEnter={() => handleMouseEnter("agent")}
+                onMouseLeave={handleMouseLeave}
+              >
+                <button className="relative px-6 py-3 text-slate-300 hover:text-white transition-all duration-300 group flex items-center">
+                  <span className="relative z-10 font-semibold">Agent产品</span>
+                  <i
+                    className="ri-arrow-down-s-line ml-1 text-sm transition-transform duration-200"
+                    style={{
+                      transform:
+                        activeDropdown === "agent"
+                          ? "rotate(180deg)"
+                          : "rotate(0deg)",
+                    }}
+                  ></i>
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-600/0 to-purple-600/0 group-hover:from-blue-600/20 group-hover:to-purple-600/20 rounded-lg transition-all duration-300"></div>
+                  <div className="absolute inset-0 border border-transparent group-hover:border-blue-500/30 rounded-lg transition-all duration-300"></div>
+                </button>
+
+                {activeDropdown === "agent" && (
+                  <div className="absolute top-full left-0 w-64 bg-slate-900/95 backdrop-blur-xl border border-slate-800/80 rounded-xl shadow-2xl shadow-black/40 overflow-hidden z-[70]">
+                    <div className="py-2">
+                      <Link
+                        href="/agent/risk-config"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-settings-3-line w-5 h-5 flex items-center justify-center mr-3 text-red-400 group-hover:text-white"></i>
+                          <span>风控因子配置Agent</span>
+                        </div>
+                      </Link>
+                      {/* <Link
+                        href="/agent/audit"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-shield-check-line w-5 h-5 flex items-center justify-center mr-3 text-blue-400 group-hover:text-white"></i>
+                          <span>审核Agent</span>
+                        </div>
+                      </Link>
+                      <Link
+                        href="/agent/search"
+                        className="block px-4 py-3 text-slate-300 hover:text-white hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-purple-600/20 transition-all duration-200 group"
+                      >
+                        <div className="flex items-center">
+                          <i className="ri-search-line w-5 h-5 flex items-center justify-center mr-3 text-purple-400 group-hover:text-white"></i>
+                          <span>搜索Agent</span>
+                        </div>
+                      </Link> */}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </nav>
+
+            {/* Desktop Actions */}
+            <div className="hidden lg:flex items-center">
+              {/* AI生成的代码 - 根据登录状态显示不同内容 */}
+              {userStore.userInfo.login ? (
+                // AI生成的代码 - 已登录状态，显示用户头像和下拉菜单，调整样式与首页主题一致
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: "profile",
+                        label: (
+                          <div
+                            className="px-4 py-3 text-slate-200 hover:text-blue-400 hover:bg-slate-800/50 transition-all duration-300 flex items-center space-x-2"
+                            onClick={() => {
+                              // AI生成：使用React Router跳转到admin路由
+                              navigate("/admin");
+                            }}
+                          >
+                            <i className="ri-user-line text-blue-400"></i>
+                            <span>管理后台</span>
+                          </div>
+                        ),
+                      },
+                      {
+                        type: "divider",
+                        style: {
+                          borderColor: "rgba(148, 163, 184, 0.2)",
+                          margin: "8px 0",
+                        },
+                      },
+                      {
+                        key: "logout",
+                        label: (
+                          <div
+                            className="px-4 py-3 text-red-400 hover:text-red-300 transition-all duration-300 flex items-center space-x-2"
+                            onClick={() => {
+                              // AI生成的代码 - 退出登录
+                              userStore.setUserInfo({
+                                userId: "",
+                                login: false,
+                                phone: "",
+                              });
+                              localStorage.removeItem("userInfo");
+                            }}
+                          >
+                            <i className="ri-logout-box-line text-red-400"></i>
+                            <span>退出登录</span>
+                          </div>
+                        ),
+                      },
+                    ],
+                  }}
+                  placement="bottomRight"
+                  trigger={["hover"]}
+                  popupRender={(menu) => (
+                    <div className="bg-slate-900/95 backdrop-blur-xl border border-slate-700/50 rounded-xl shadow-2xl shadow-black/50 overflow-hidden">
+                      <div className="">{menu}</div>
+                    </div>
+                  )}
+                >
+                  <div className="flex items-center space-x-3 cursor-pointer group">
+                    <div className="flex items-center space-x-2">
+                      <img
+                        src={
+                          userStore.userInfo.avatar ||
+                          "https://api.dicebear.com/7.x/avataaars/svg?seed=default"
+                        }
+                        alt="用户头像"
+                        className="w-8 h-8 rounded-full border-2 border-blue-500/30 group-hover:border-blue-500/60 transition-all duration-300"
+                      />
+                      <span className="text-slate-300 group-hover:text-white transition-colors duration-300 font-medium">
+                        {userStore.userInfo.username || "用户"}
+                      </span>
+                    </div>
+                    {/* AI生成的代码 - 鼠标hover时箭头旋转效果 */}
+                    <i className="ri-arrow-down-s-line ml-1 text-sm transition-transform duration-300 group-hover:rotate-180"></i>
+                  </div>
+                </Dropdown>
+              ) : (
+                // 未登录状态 - 显示点击试用按钮
+                <button
+                  onClick={handleLoginClick}
+                  className="relative bg-gradient-to-r from-blue-600 via-blue-700 to-purple-700 text-white px-6 py-2 rounded-xl hover:from-blue-700 hover:via-blue-800 hover:to-purple-800 transition-all duration-300 whitespace-nowrap cursor-pointer group shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:shadow-xl"
+                >
+                  <span className="relative z-10 font-medium">点击试用</span>
+                  <div className="absolute inset-0 bg-gradient-to-r from-white/0 to-white/0 group-hover:from-white/10 group-hover:to-white/5 rounded-xl transition-all duration-300"></div>
+                  <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-0 group-hover:opacity-20 transition-all duration-300"></div>
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Mobile Navigation */}
+          {/* AI生成的代码 - 侧边栏弹出菜单 */}
+          {/* AI生成的代码 - 使用 Ant Design 的 Drawer 和 Menu 组件实现侧边栏，与首页风格保持一致 */}
+          <Drawer
+            closeIcon={false}
+            title={
+              <div className="flex items-center ml-4 h-24">
+                <div className="flex items-center">
+                  <Link href="/" className="flex items-center space-x-3 group">
+                    <img
+                      src="/logo.svg"
+                      alt="logo"
+                      className="w-[40px] h-[40px] transition-transform duration-500 hover:scale-110 group-hover:scale-110"
+                    />
+                    <span className="text-2xl font-bold bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent group-hover:from-blue-400 group-hover:to-white transition-all duration-500">
+                      财跃星辰
+                    </span>
+                  </Link>
+                </div>
+              </div>
+            }
+            placement="right"
+            onClose={() => setIsMenuOpen(false)}
+            open={isMenuOpen}
+            width="80%"
+            className="lg:hidden drawer-slow-animation"
+            styles={{
+              wrapper: {
+                width: "360px",
+                maxWidth: "80%",
+              },
+              body: {
+                padding: 0,
+                background:
+                  "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)",
+                color: "#ffffff",
+                position: "relative",
+              },
+              header: {
+                background: "oklch(12.9% 0.042 264.695)",
+                backdropFilter: "blur(20px)",
+                borderBottom: "1px solid rgba(59, 130, 246, 0.2)",
+                color: "#ffffff",
+                boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+                padding: 0,
+              },
+              mask: {
+                backgroundColor: "rgba(0, 0, 0, 0.6)",
+                backdropFilter: "blur(8px)",
+              },
+            }}
+            maskClosable={true}
+            destroyOnClose={false}
+          >
+            <div className="h-full flex flex-col relative overflow-hidden">
+              {/* 背景装饰效果 */}
+              <div className="absolute inset-0 pointer-events-none">
+                {/* 渐变光晕效果 */}
+                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-blue-500/20 via-purple-500/10 to-transparent rounded-full blur-2xl"></div>
+                <div className="absolute bottom-1/3 left-0 w-24 h-24 bg-gradient-to-tr from-cyan-500/15 via-blue-500/10 to-transparent rounded-full blur-xl"></div>
+                <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-gradient-to-l from-purple-500/20 to-transparent rounded-full blur-lg"></div>
+
+                {/* 动态粒子效果 */}
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="absolute w-1 h-1 bg-blue-400/40 rounded-full"
+                    style={{
+                      left: `${20 + i * 15}%`,
+                      top: `${30 + i * 10}%`,
+                      animation: `floatSmall ${4 + i}s linear infinite`,
+                      animationDelay: `${i * 0.8}s`,
+                    }}
+                  />
+                ))}
+              </div>
+
+              {/* 菜单内容 */}
+              <Menu
+                mode="inline"
+                theme="dark"
+                className="flex-1 border-none relative z-10"
+                style={{
+                  background: "transparent",
+                  color: "#ffffff",
+                }}
+                items={[
+                  {
+                    key: "aigc",
+                    label: (
+                      <span className="font-medium bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        AIGC产品
+                      </span>
+                    ),
+                    children: [
+                      {
+                        key: "ai-scanner",
+                        label: (
+                          <Link
+                            href="/aigc/ai-scanner"
+                            className="text-slate-200 hover:text-white font-medium transition-all duration-300 hover:bg-gradient-to-r hover:from-blue-500/10 hover:to-purple-500/10 rounded-lg py-1"
+                            onClick={() => setIsMenuOpen(false)}
+                          >
+                            AI扫雷
+                          </Link>
+                        ),
+                        icon: (
+                          <i className="ri-search-2-line w-5 h-5 flex items-center justify-center !text-green-400"></i>
+                        ),
+                      },
+                    ],
+                  },
+                  {
+                    key: "agent",
+                    label: (
+                      <span className="font-medium bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+                        Agent产品
+                      </span>
+                    ),
+                    children: [
+                      {
+                        key: "risk-config",
+                        label: (
+                          <Link
+                            href="/agent/risk-config"
+                            className="text-slate-200 hover:text-white font-medium transition-all duration-300 hover:bg-gradient-to-r hover:from-blue-500/10 hover:to-purple-500/10 rounded-lg py-1"
+                            onClick={() => setIsMenuOpen(false)}
+                          >
+                            风控因子配置Agent
+                          </Link>
+                        ),
+                        icon: (
+                          <i className="ri-settings-3-line w-5 h-5 flex items-center justify-center !text-red-400 "></i>
+                        ),
+                      },
+                    ],
+                  },
+                ]}
+              />
+
+              {/* 底部按钮 */}
+              <div className="p-6 border-t border-blue-500/20 bg-gradient-to-r from-slate-900/50 to-slate-800/50 backdrop-blur-sm relative">
+                {/* AI生成的代码 - 装饰性光效，修复点击事件被阻挡的问题 */}
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-cyan-500/5 rounded-t-lg pointer-events-none"></div>
+
+                {/* AI生成的代码 - 根据登录状态显示不同内容 */}
+                {userStore.userInfo.login ? (
+                  // AI生成：已登录状态 - 显示用户信息和下拉菜单
+                  <Dropdown
+                    menu={{
+                      items: [
+                        {
+                          key: "profile",
+                          label: (
+                            <div
+                              className="px-4 py-3 text-slate-200 hover:text-blue-400 hover:bg-slate-800/50 transition-all duration-300 flex items-center space-x-2"
+                              onClick={() => {
+                                // AI生成：使用React Router跳转到admin路由
+                                console.log("点击管理后台");
+                                navigate("/admin");
+                              }}
+                            >
+                              <i className="ri-user-line text-blue-400"></i>
+                              <span>管理后台</span>
+                            </div>
+                          ),
+                        },
+                        {
+                          type: "divider",
+                          style: {
+                            borderColor: "rgba(148, 163, 184, 0.2)",
+                            margin: "8px 0",
+                          },
+                        },
+                        {
+                          key: "logout",
+                          label: (
+                            <div
+                              className="px-4 py-3 text-red-400 hover:text-red-300 transition-all duration-300 flex items-center space-x-2"
+                              onClick={() => {
+                                // AI生成的代码 - 退出登录
+                                console.log("点击退出登录");
+                                userStore.setUserInfo({
+                                  userId: "",
+                                  login: false,
+                                  phone: "",
+                                });
+                                localStorage.removeItem("userInfo");
+                              }}
+                            >
+                              <i className="ri-logout-box-line text-red-400"></i>
+                              <span>退出登录</span>
+                            </div>
+                          ),
+                        },
+                      ],
+                    }}
+                    placement="bottomCenter"
+                    trigger={["click"]}
+                    popupRender={(menu) => (
+                      <div className="bg-slate-900/95 backdrop-blur-xl border border-slate-700/50 rounded-xl shadow-2xl shadow-black/50 overflow-hidden">
+                        <div className="">{menu}</div>
+                      </div>
+                    )}
+                    onOpenChange={(open) => {
+                      console.log("Dropdown状态:", open);
+                      // AI生成的代码 - 更新移动端下拉菜单状态
+                      setIsMobileDropdownOpen(open);
+                    }}
+                    overlayStyle={{
+                      minWidth: "100px",
+                    }}
+                  >
+                    {/* AI生成的代码 - 移动端下拉菜单触发器，与PC端样式保持一致 */}
+                    <div className="flex items-center space-x-3 cursor-pointer group justify-center">
+                      <div className="flex items-center space-x-2">
+                        <img
+                          src={
+                            userStore.userInfo.avatar ||
+                            "https://api.dicebear.com/7.x/avataaars/svg?seed=default"
+                          }
+                          alt="用户头像"
+                          className={`w-8 h-8 rounded-full border-2 border-blue-500/30 transition-all duration-300 ${
+                            isMobileDropdownOpen ? "border-blue-500/60" : ""
+                          }`}
+                        />
+                        <span
+                          className={`text-slate-300 transition-colors duration-300 font-medium ${
+                            isMobileDropdownOpen ? "text-white" : ""
+                          }`}
+                        >
+                          {userStore.userInfo.username || "用户"}
+                        </span>
+                      </div>
+                      {/* AI生成的代码 - 点击时箭头旋转效果 */}
+                      <i
+                        className={`ri-arrow-down-s-line ml-1 text-sm transition-transform duration-300 ${
+                          isMobileDropdownOpen ? "rotate-180" : "rotate-0"
+                        }`}
+                      ></i>
+                    </div>
+                  </Dropdown>
+                ) : (
+                  // 未登录状态 - 显示点击试用按钮
+                  <button
+                    onClick={handleLoginClick}
+                    className="bg-gradient-to-r from-blue-600 via-blue-700 to-purple-700 text-white px-6 py-[12px] rounded-xl hover:from-blue-700 hover:via-blue-800 hover:to-purple-800 transition-all duration-300 whitespace-nowrap cursor-pointer group shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:shadow-xl w-full"
+                  >
+                    <span className="relative z-10 font-medium text-[16px]">
+                      点击试用
+                    </span>
+                    <div className="absolute inset-0 bg-gradient-to-r from-white/0 to-white/0 group-hover:from-white/10 group-hover:to-white/5 rounded-xl transition-all duration-300"></div>
+                    <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-0 group-hover:opacity-20 transition-all duration-300"></div>
+                  </button>
+                )}
+              </div>
+            </div>
+          </Drawer>
+        </div>
+      </header>
+
+      {/* Login Modal */}
+      {showLoginModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[99999]">
+          <div className="bg-slate-900/98 backdrop-blur-xl border border-slate-800/60 rounded-2xl shadow-2xl shadow-black/40 w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between p-6 border-b border-slate-800/60">
+              <h2 className="text-xl font-semibold text-white">
+                {loginMode === "login" ? "登录账户" : "申请试用"}
+              </h2>
+              <button
+                onClick={handleCloseModal}
+                className="text-slate-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-800/50"
+              >
+                <i className="ri-close-line text-xl"></i>
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6">
+              {/* Mode Toggle */}
+              <div className="flex mb-6 bg-slate-800/50 rounded-xl p-1">
+                <button
+                  onClick={() => setLoginMode("login")}
+                  className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all duration-200 ${
+                    loginMode === "login"
+                      ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg"
+                      : "text-slate-400 hover:text-white"
+                  }`}
+                >
+                  已有账号
+                </button>
+                <button
+                  onClick={() => setLoginMode("register")}
+                  className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all duration-200 ${
+                    loginMode === "register"
+                      ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg"
+                      : "text-slate-400 hover:text-white"
+                  }`}
+                >
+                  申请试用
+                </button>
+              </div>
+
+              {/* Login Form */}
+              {loginMode === "login" && (
+                <form onSubmit={handleLoginSubmit} className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      手机号
+                    </label>
+                    <input
+                      type="tel"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入手机号"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      密码
+                    </label>
+                    <input
+                      type="password"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入密码"
+                    />
+                  </div>
+                  {/* <div className="flex items-center justify-between">
+                    <label className="flex items-center">
+                      <input
+                        type="checkbox"
+                        className="rounded border-slate-600 bg-slate-800 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900"
+                      />
+                      <span className="ml-2 text-sm text-slate-400">
+                        记住我
+                      </span>
+                    </label>
+                    <button
+                      type="button"
+                      className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
+                    >
+                      忘记密码？
+                    </button>
+                  </div> */}
+                  <button
+                    type="submit"
+                    className="w-full bg-gradient-to-r from-blue-600 via-blue-700 to-purple-700 text-white px-6 py-3 rounded-xl hover:from-blue-700 hover:via-blue-800 hover:to-purple-800 transition-all duration-300 font-medium shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 mt-[10px]"
+                  >
+                    立即登录
+                  </button>
+                </form>
+              )}
+
+              {/* Register Form */}
+              {loginMode === "register" && (
+                <form onSubmit={handleRegisterSubmit} className="space-y-4">
+                  <div className="mb-4 p-4 bg-blue-900/20 border border-blue-700/50 rounded-xl">
+                    <div className="flex items-center mb-2">
+                      <i className="ri-information-line w-5 h-5 flex items-center justify-center text-blue-400 mr-2"></i>
+                      <span className="text-sm font-medium text-blue-400">
+                        申请说明
+                      </span>
+                    </div>
+                    <p className="text-sm text-slate-300 leading-relaxed">
+                      提交申请后，我们将在1-2个工作日内审核您的申请。审核通过后，我们会通过邮箱和手机短信通知您登录信息。
+                    </p>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      公司名称 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入公司名称"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      姓名 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入您的姓名"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      手机号 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      type="tel"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入手机号"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      邮箱 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      type="email"
+                      required
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入邮箱地址"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      职位
+                    </label>
+                    <input
+                      type="text"
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm"
+                      placeholder="请输入您的职位（选填）"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      使用需求
+                    </label>
+                    <textarea
+                      rows={3}
+                      className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm resize-none"
+                      placeholder="请简要描述您的使用需求和场景（选填）"
+                    ></textarea>
+                  </div>
+                  {/* <div>
+                    <label className="flex items-start">
+                      <input
+                        type="checkbox"
+                        required
+                        className="mt-1 rounded border-slate-600 bg-slate-800 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-900"
+                      />
+                      <span className="ml-2 text-sm text-slate-400 leading-relaxed">
+                        我已阅读并同意
+                        <span className="text-blue-400 hover:text-blue-300 cursor-pointer">
+                          《用户协议》
+                        </span>
+                        和
+                        <span className="text-blue-400 hover:text-blue-300 cursor-pointer">
+                          《隐私政策》
+                        </span>
+                      </span>
+                    </label>
+                  </div> */}
+                  <button
+                    type="submit"
+                    className="w-full bg-gradient-to-r from-blue-600 via-blue-700 to-purple-700 text-white px-6 py-3 rounded-xl hover:from-blue-700 hover:via-blue-800 hover:to-purple-800 transition-all duration-300 font-medium shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40"
+                  >
+                    提交申请
+                  </button>
+                </form>
+              )}
+
+              {/* Divider */}
+              {loginMode === "login" && (
+                <div className="flex items-center my-6">
+                  <div className="flex-1 h-px bg-slate-700"></div>
+                  <span className="px-4 text-slate-400 text-sm">或</span>
+                  <div className="flex-1 h-px bg-slate-700"></div>
+                </div>
+              )}
+
+              {/* Social Login */}
+              {loginMode === "login" && (
+                <div className="space-y-3">
+                  <button className="w-full flex items-center justify-center px-4 py-3 bg-slate-800/50 border border-slate-700/50 rounded-xl text-slate-300 hover:text-white hover:bg-slate-800 transition-all">
+                    <i className="ri-calendar-check-line w-5 h-5 flex items-center justify-center mr-3 text-blue-400"></i>
+                    <span>飞书快速登录</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Mobile Menu Button */}
+      <div className="lg:hidden">
+        <button
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          className="text-slate-300 hover:text-white cursor-pointer rounded-lg hover:bg-slate-800/50 transition-all duration-500 fixed top-[28px] right-[20px] z-[9999]"
+        >
+          <div className="w-10 h-10 flex items-center justify-center">
+            <div className="relative w-6 h-6 flex items-center justify-center">
+              {/* AI生成的代码 - 优化的汉堡菜单到X形状的平滑动画 */}
+              <div className="relative w-6 h-6">
+                {/* 第一条线 - 顶部线条，关闭时旋转45度 */}
+                <div
+                  className={`absolute w-5 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full shadow-sm transition-all duration-700 ease-in-out ${
+                    isMenuOpen
+                      ? "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 shadow-cyan-400/50"
+                      : "top-1 left-1/2 transform -translate-x-1/2 rotate-0 group-hover:shadow-cyan-400/30"
+                  }`}
+                ></div>
+
+                {/* 第二条线 - 中间线条，关闭时透明度为0，添加延迟避免与其他线条冲突 */}
+                <div
+                  className={`absolute w-5 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full shadow-sm top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${
+                    isMenuOpen
+                      ? "opacity-0 scale-0 transition-all duration-500 ease-in-out delay-100"
+                      : "opacity-100 scale-100 transition-all duration-500 ease-in-out delay-200 group-hover:shadow-cyan-400/30"
+                  }`}
+                ></div>
+
+                {/* 第三条线 - 底部线条，关闭时旋转-45度 */}
+                <div
+                  className={`absolute w-5 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full shadow-sm transition-all duration-700 ease-in-out ${
+                    isMenuOpen
+                      ? "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -rotate-45 shadow-cyan-400/50"
+                      : "bottom-1 left-1/2 transform -translate-x-1/2 rotate-0 group-hover:shadow-cyan-400/30"
+                  }`}
+                ></div>
+              </div>
+            </div>
+          </div>
+        </button>
+      </div>
+    </>
+  );
+});
+
+// AI生成的代码 - 默认导出
+export default Header;