+ {/* 几何形状漂浮 */}
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ {/* 光晕效果 */}
+
+
+ );
+}
+
+// CSS Grid Pattern for background
+export const gridPatternCSS = `
+.bg-grid-pattern {
+ background-image:
+ linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
+ background-size: 50px 50px;
+}
+
+.dark .bg-grid-pattern {
+ background-image:
+ linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
+}
+`;
\ No newline at end of file
diff --git a/lobe/src/components/animations/index.tsx b/lobe/src/components/animations/index.tsx
new file mode 100644
index 00000000..34adfcd6
--- /dev/null
+++ b/lobe/src/components/animations/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * Animation Components Library
+ *
+ * This module exports all animation components and utilities
+ * for the Thor AI Gateway application
+ */
+
+// Page transition animations
+export {
+ PageTransition,
+ StaggeredFadeIn,
+ SlideInLeft,
+ SlideInRight,
+ ScaleIn
+} from './page-transition';
+
+// Background effects
+export {
+ AnimatedBackground,
+ FloatingElements
+} from './background-effects';
\ No newline at end of file
diff --git a/lobe/src/components/animations/page-transition.tsx b/lobe/src/components/animations/page-transition.tsx
new file mode 100644
index 00000000..8325156e
--- /dev/null
+++ b/lobe/src/components/animations/page-transition.tsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface PageTransitionProps {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export function PageTransition({ children, className }: PageTransitionProps) {
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ // 模拟页面加载时间
+ const timer = setTimeout(() => {
+ setIsLoading(false);
+ }, 300);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+
+
+
+ {isOpen && (
+ <>
+ {/* Backdrop */}
+
setIsOpen(false)}
+ />
+
+ {/* Dropdown Menu */}
+
+ {languages.map((language) => (
+
+ ))}
+
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/language-toggle.tsx b/lobe/src/components/language-toggle.tsx
new file mode 100644
index 00000000..c69460ee
--- /dev/null
+++ b/lobe/src/components/language-toggle.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Globe, Check } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "./ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+const languages = [
+ {
+ code: 'en-US',
+ name: 'English',
+ flag: '🇺🇸'
+ },
+ {
+ code: 'zh-CN',
+ name: '简体中文',
+ flag: '🇨🇳'
+ }
+];
+
+export function LanguageToggle() {
+ const { i18n } = useTranslation();
+
+ const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+ const handleLanguageChange = (languageCode: string) => {
+ i18n.changeLanguage(languageCode);
+ };
+
+ return (
+
+
+
+
+
+ {languages.map((language) => (
+ handleLanguageChange(language.code)}
+ className="gap-2 cursor-pointer"
+ >
+ {language.flag}
+ {language.name}
+ {currentLanguage.code === language.code && (
+
+ )}
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/layouts/features-section.tsx b/lobe/src/components/layouts/features-section.tsx
new file mode 100644
index 00000000..811b0574
--- /dev/null
+++ b/lobe/src/components/layouts/features-section.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { ArrowRight, Server, Users, Zap, Shield, BarChart3, Settings } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface FeatureCardProps {
+ title: string;
+ description: string;
+ icon: React.ReactNode;
+ action?: () => void;
+ actionText?: string;
+}
+
+function FeatureCard({ title, description, icon, action, actionText = "Learn more" }: FeatureCardProps) {
+ return (
+
+
+
+ {icon}
+
+ {title}
+
+ {description}
+
+
+
+ {action && (
+
+ )}
+
+
+ );
+}
+
+export function FeaturesSection() {
+ const { t } = useTranslation();
+
+ const features = [
+ {
+ title: t('welcome.features.unified.title'),
+ description: t('welcome.features.unified.description'),
+ icon:
,
+ action: () => window.location.href = '/model',
+ actionText: t('welcome.footer.product.pricing')
+ },
+ {
+ title: t('welcome.features.enterprise.title'),
+ description: t('welcome.features.enterprise.description'),
+ icon:
,
+ action: () => window.location.href = '/user',
+ actionText: t('nav.user')
+ },
+ {
+ title: t('welcome.features.scalable.title'),
+ description: t('welcome.features.scalable.description'),
+ icon:
,
+ action: () => window.location.href = '/panel',
+ actionText: t('nav.panel')
+ },
+ {
+ title: t('welcome.features.security.title'),
+ description: t('welcome.features.security.description'),
+ icon:
,
+ action: () => window.location.href = '/rate-limit',
+ actionText: t('nav.rateLimit')
+ },
+ {
+ title: t('welcome.features.monitoring.title'),
+ description: t('welcome.features.monitoring.description'),
+ icon:
,
+ action: () => window.location.href = '/logger',
+ actionText: t('nav.logger')
+ },
+ {
+ title: t('welcome.features.intelligent.title'),
+ description: t('welcome.features.intelligent.description'),
+ icon:
,
+ action: () => window.location.href = '/setting',
+ actionText: t('nav.setting')
+ }
+ ];
+
+ return (
+
+
+
+
+ {t('welcome.features.title')}
+
+
+ {t('welcome.features.subtitle')}
+
+
+
+
+ {features.map((feature, index) => (
+
+ ))}
+
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/layouts/footer-section.tsx b/lobe/src/components/layouts/footer-section.tsx
new file mode 100644
index 00000000..bd783a60
--- /dev/null
+++ b/lobe/src/components/layouts/footer-section.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
+import { Github, ExternalLink } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export function FooterSection() {
+ const { t } = useTranslation();
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/layouts/header-navigation.tsx b/lobe/src/components/layouts/header-navigation.tsx
new file mode 100644
index 00000000..e3d4b24b
--- /dev/null
+++ b/lobe/src/components/layouts/header-navigation.tsx
@@ -0,0 +1,294 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Button } from '../ui/button';
+import { cn } from '../../lib/utils';
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+} from '../ui/navigation-menu';
+import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet';
+import { Menu, X, Zap, FileText, DollarSign, User, LogOut } from 'lucide-react';
+import { SimpleLanguageToggle } from '../language-toggle-simple';
+import { ThemeToggleDropdown } from '../theme-toggle-dropdown';
+
+interface HeaderNavigationProps {
+ className?: string;
+}
+
+export function HeaderNavigation({ className }: HeaderNavigationProps) {
+ const navigate = useNavigate();
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const [isScrolled, setIsScrolled] = useState(false);
+
+ // 检查登录状态
+ useEffect(() => {
+ const checkAuth = () => {
+ const token = localStorage.getItem('token');
+ setIsAuthenticated(!!token);
+ };
+
+ checkAuth();
+ // 监听storage变化以同步登录状态
+ window.addEventListener('storage', checkAuth);
+
+ return () => {
+ window.removeEventListener('storage', checkAuth);
+ };
+ }, []);
+
+ // 监听滚动状态
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsScrolled(window.scrollY > 10);
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ const handleConsoleClick = () => {
+ if (isAuthenticated) {
+ navigate('/panel');
+ } else {
+ navigate('/login');
+ }
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem('token');
+ setIsAuthenticated(false);
+ navigate('/');
+ };
+
+ const menuItems = [
+ {
+ label: '模型定价',
+ href: '/model',
+ icon:
,
+ description: '查看所有AI模型的定价详情'
+ },
+ {
+ label: '文档',
+ href: 'https://thor-ai.apifox.cn',
+ icon:
,
+ description: 'API文档和开发指南',
+ external: true
+ }
+ ];
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/layouts/hero-section.tsx b/lobe/src/components/layouts/hero-section.tsx
new file mode 100644
index 00000000..00ac754c
--- /dev/null
+++ b/lobe/src/components/layouts/hero-section.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { ArrowRight, Github, Star, Sparkles } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { cn } from '../../lib/utils';
+import { motion } from 'framer-motion';
+import { StaggeredFadeIn, SlideInLeft, SlideInRight } from '../animations/page-transition';
+import { AnimatedBackground } from '../animations/background-effects';
+import { useTranslation } from 'react-i18next';
+
+interface HeroSectionProps {
+ onGetStarted: () => void;
+ onViewGithub: () => void;
+}
+
+export function HeroSection({ onGetStarted, onViewGithub }: HeroSectionProps) {
+ const { t } = useTranslation();
+
+ return (
+
+ {/* Enhanced animated background */}
+
+
+
+
+ {/* Left content with animations */}
+
+
+
+
+
+
+
+ {t('welcome.hero.badge')}
+
+
+
+
+
+ {t('welcome.hero.title')}
+
+
+
+
+
+ {t('welcome.hero.subtitle')}
+
+
+
+
+
+ {t('welcome.hero.description')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right content - Feature highlights with animations */}
+
+
+
+
+
+
+
+
+ {t('welcome.hero.badge')}
+
+
+ {t('welcome.features.unified.description')}
+
+
+
+
+ {[
+ {
+ title: t('welcome.features.unified.title'),
+ desc: t('welcome.features.unified.description')
+ },
+ {
+ title: t('welcome.features.enterprise.title'),
+ desc: t('welcome.features.enterprise.description')
+ },
+ {
+ title: t('welcome.features.scalable.title'),
+ desc: t('welcome.features.scalable.description')
+ }
+ ].map((feature, index) => (
+
+
+
+
+
{feature.title}
+
{feature.desc}
+
+ ))}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/layouts/index.tsx b/lobe/src/components/layouts/index.tsx
new file mode 100644
index 00000000..f17a37b8
--- /dev/null
+++ b/lobe/src/components/layouts/index.tsx
@@ -0,0 +1,14 @@
+/**
+ * Unified Layout Components Export
+ *
+ * This module provides all layout components used throughout the application
+ * following shadcn/ui design system
+ */
+
+export { HeroSection } from './hero-section';
+export { StatsSection } from './stats-section';
+export { FeaturesSection } from './features-section';
+export { FooterSection } from './footer-section';
+
+// Re-export main layouts
+export * from '../../layouts/shadcn-layout';
\ No newline at end of file
diff --git a/lobe/src/components/layouts/stats-section.tsx b/lobe/src/components/layouts/stats-section.tsx
new file mode 100644
index 00000000..e2bb6ffb
--- /dev/null
+++ b/lobe/src/components/layouts/stats-section.tsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import { Card, CardContent } from '../ui/card';
+import { Server, Users, Zap, TrendingUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { motion } from 'framer-motion';
+import { StaggeredFadeIn } from '../animations/page-transition';
+import { useTranslation } from 'react-i18next';
+
+interface StatItemProps {
+ title: string;
+ value: string;
+ icon: React.ReactNode;
+ description?: string;
+}
+
+function StatItem({ title, value, icon, description }: StatItemProps) {
+ return (
+
+
+
+
+
+ {icon}
+
+
+
+ {value}
+
+
{title}
+
+
{description}
+ )}
+
+
+ {/* Animated background glow */}
+
+
+
+ );
+}
+
+export function StatsSection() {
+ const { t } = useTranslation();
+
+ const stats = [
+ {
+ title: t('welcome.stats.models.title'),
+ value: "20+",
+ icon:
,
+ description: t('welcome.stats.models.description')
+ },
+ {
+ title: t('welcome.stats.users.title'),
+ value: "5K+",
+ icon:
,
+ description: t('welcome.stats.users.description')
+ },
+ {
+ title: t('welcome.stats.requests.title'),
+ value: "1M+",
+ icon:
,
+ description: t('welcome.stats.requests.description')
+ },
+ {
+ title: t('welcome.stats.uptime.title'),
+ value: "99.9%",
+ icon:
,
+ description: t('welcome.stats.uptime.description')
+ }
+ ];
+
+ return (
+
+ {/* Background decoration */}
+
+
+
+
+
+
+
+
+ {t('welcome.features.title')}
+
+
+ {t('welcome.features.subtitle')}
+
+
+
+
+ {stats.map((stat, index) => (
+
+
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/lobe/src/components/pay/index.tsx b/lobe/src/components/pay/index.tsx
index 3a2ba395..fec7c676 100644
--- a/lobe/src/components/pay/index.tsx
+++ b/lobe/src/components/pay/index.tsx
@@ -1,26 +1,42 @@
import { useEffect, useState } from "react";
-import { message, Card, Tabs, Button, Input, Badge, Typography, Space, Empty, Alert, theme } from 'antd';
import { GeneralSetting, InitSetting, IsEnableAlipay } from "../../services/SettingService";
import { Use } from "../../services/RedeemCodeService";
import { getProduct, startPayload } from "../../services/ProductService";
import QRCode from "qrcode.react";
import { renderQuota } from "../../utils/render";
-import { GradientButton, Modal, Tag } from "@lobehub/ui";
-import { AlipayOutlined, BarcodeOutlined, CheckCircleOutlined, ClockCircleOutlined, GiftOutlined, InfoCircleOutlined, InboxOutlined, MobileOutlined, QuestionCircleOutlined, WarningOutlined } from "@ant-design/icons";
import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
-const { Title, Text, Paragraph } = Typography;
-const { useToken } = theme;
+// shadcn/ui components
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Input } from "../ui/input";
+import { Badge } from "../ui/badge";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../ui/dialog";
+import { Separator } from "../ui/separator";
+
+// Lucide icons
+import {
+ CreditCard,
+ Gift,
+ Barcode,
+ CheckCircle,
+ AlertTriangle,
+ HelpCircle,
+ Smartphone,
+ Clock,
+ AlertCircle,
+ ExternalLink
+} from "lucide-react";
interface IPayProps {
user: any
}
-export default function Pay({
- user
-}: IPayProps) {
+export default function Pay({ user }: IPayProps) {
const { t } = useTranslation();
- const { token } = useToken();
const [code, setCode] = useState('');
const [products, setProducts] = useState([] as any[]);
const [qrCode, setQrCode] = useState('');
@@ -54,20 +70,22 @@ export default function Pay({
/**
* 使用兑换码
- * @returns
+ * @returns
*/
function useCode() {
- if (code === '') return message.error({
- content: t('payment.emptyRedeemCode')
- });
+ if (code === '') {
+ toast.error(t('payment.emptyRedeemCode'));
+ return;
+ }
Use(code)
.then((res) => {
- res.success ? message.success({
- content: t('payment.redeemSuccess')
- }) : message.error({
- content: res.message
- });
+ if (res.success) {
+ toast.success(t('payment.redeemSuccess'));
+ setCode(''); // 清空输入框
+ } else {
+ toast.error(res.message);
+ }
});
}
@@ -80,478 +98,218 @@ export default function Pay({
if (res.success) {
setQrCode(res.data.qr);
} else {
- message.error({
- content: res.message
- });
+ toast.error(res.message);
}
});
}
- const cardStyle = {
- width: '100%',
- borderRadius: token.borderRadiusLG,
- overflow: 'hidden',
- boxShadow: `0 4px 20px ${token.colorBgElevated}`
- };
-
- const headerGradient = {
- background: `linear-gradient(90deg, ${token.colorPrimary}, ${token.colorPrimaryBg})`,
- WebkitBackgroundClip: 'text',
- WebkitTextFillColor: 'transparent'
- };
-
- const balanceTagStyle = {
- fontSize: 18,
- padding: '4px 12px',
- borderRadius: token.borderRadiusLG,
- boxShadow: `0 2px 8px ${token.colorBgContainer}`
+ const formatTime = (seconds: number) => {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+ return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
};
return (
-
-
- {t('payment.wallet')}
-
-
- {t('payment.currentBalance')}:
-
- {renderQuota(user.residualCredit, 2)}
-
-
-