+
+ {children}
+
+
+ {/* Auth Dialog */}
+
+
+ )
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..046bd98
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,245 @@
+import { Link, useLocation } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+import {
+ LayoutDashboard,
+ TestTube2,
+ Link as LinkIcon,
+ Key,
+ DollarSign,
+ Database,
+ Github,
+ Moon,
+ Sun,
+ LogIn,
+ LogOut,
+} from 'lucide-react'
+import { useAuthStore } from '@/store/auth'
+import { useState } from 'react'
+import { Button } from '../ui/button'
+
+interface NavItem {
+ title: string
+ href: string
+ icon: React.ComponentType<{ className?: string }>
+ adminOnly?: boolean
+}
+
+const navItems: NavItem[] = [
+ {
+ title: '仪表盘',
+ href: '/',
+ icon: LayoutDashboard,
+ },
+ {
+ title: 'API 测试',
+ href: '/api-test',
+ icon: TestTube2,
+ },
+ {
+ title: '频道管理',
+ href: '/channels',
+ icon: LinkIcon,
+ adminOnly: true,
+ },
+ {
+ title: '令牌管理',
+ href: '/tokens',
+ icon: Key,
+ adminOnly: true,
+ },
+ {
+ title: '定价管理',
+ href: '/pricing',
+ icon: DollarSign,
+ adminOnly: true,
+ },
+ {
+ title: '数据库',
+ href: '/database',
+ icon: Database,
+ adminOnly: true,
+ },
+]
+
+interface SidebarProps {
+ onAuthClick: () => void
+}
+
+export function Sidebar({ onAuthClick }: SidebarProps) {
+ const location = useLocation()
+ const { isAuthenticated, logout } = useAuthStore()
+ // Initialize theme from localStorage on mount
+ const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+ if (typeof window !== 'undefined') {
+ const savedTheme = localStorage.getItem('theme')
+ const isDark = savedTheme === 'dark' || (!savedTheme && document.documentElement.classList.contains('dark'))
+ if (isDark) {
+ document.documentElement.classList.add('dark')
+ }
+ return isDark ? 'dark' : 'light'
+ }
+ return 'light'
+ })
+
+ const toggleTheme = () => {
+ const newTheme = theme === 'light' ? 'dark' : 'light'
+ setTheme(newTheme)
+ localStorage.setItem('theme', newTheme)
+ if (newTheme === 'dark') {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ }
+
+ const handleAuthClick = () => {
+ if (isAuthenticated) {
+ logout()
+ } else {
+ onAuthClick()
+ }
+ }
+
+ return (
+
+ )
+}
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1ed7254
--- /dev/null
+++ b/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributessvg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&:has(svg)]:pl-11",
+ {
+ "bg-background text-foreground": variant === "default",
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive":
+ variant === "destructive",
+ "border-orange-200/50 bg-transparent text-orange-400 dark:border-amber-700 dark:bg-amber-950/50 dark:text-amber-300 [&>svg]:text-orange-300":
+ variant === "warning",
+ "border-green-300 bg-green-50 text-green-800 dark:border-green-600 dark:bg-green-950 dark:text-green-200 [&>svg]:text-green-600":
+ variant === "success",
+ },
+ className
+ )}
+ {...props}
+ />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..95d5579
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ success:
+ "border-transparent bg-green-500 text-white hover:bg-green-600",
+ warning:
+ "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..0816a8f
--- /dev/null
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..05294cf
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface CheckboxProps extends React.InputHTMLAttributes {
+ onCheckedChange?: (checked: boolean) => void
+}
+
+const Checkbox = React.forwardRef(
+ ({ className, onCheckedChange, ...props }, ref) => {
+ return (
+ {
+ props.onChange?.(e)
+ onCheckedChange?.(e.target.checked)
+ }}
+ {...props}
+ />
+ )
+ }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..7326a43
--- /dev/null
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,119 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ >(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..5efe4a9
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+ HTMLLabelElement,
+ React.ComponentProps<"label">
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = "Label"
+
+export { Label }
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..27b852e
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Select = React.forwardRef<
+ HTMLSelectElement,
+ React.ComponentProps<"select">
+>(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+Select.displayName = "Select"
+
+export { Select }
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..e9d5945
--- /dev/null
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ ((set) => ({
+ toasts: [],
+ addToast: (message, type) => {
+ const id = Math.random().toString(36).substring(7)
+ set((state) => ({
+ toasts: [...state.toasts, { id, message, type }],
+ }))
+ // Auto remove after 5 seconds
+ setTimeout(() => {
+ set((state) => ({
+ toasts: state.toasts.filter((t) => t.id !== id),
+ }))
+ }, 5000)
+ },
+ removeToast: (id) =>
+ set((state) => ({
+ toasts: state.toasts.filter((t) => t.id !== id),
+ })),
+}))
diff --git a/frontend/src/counter.ts b/frontend/src/counter.ts
new file mode 100644
index 0000000..09e5afd
--- /dev/null
+++ b/frontend/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+ let counter = 0
+ const setCounter = (count: number) => {
+ counter = count
+ element.innerHTML = `count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(counter + 1))
+ setCounter(0)
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..e77c88f
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,101 @@
+@import 'tailwindcss';
+
+@theme {
+ /* 现代简洁配色 - 粉色主题 */
+ --color-background: hsl(0 0% 100%);
+ --color-foreground: hsl(240 10% 4%);
+ --color-card: hsl(0 0% 100%);
+ --color-card-foreground: hsl(240 10% 4%);
+ --color-popover: hsl(0 0% 100%);
+ --color-popover-foreground: hsl(240 10% 4%);
+
+ /* 主色调 - 浅粉色 */
+ --color-primary: hsl(350 89% 70%);
+ --color-primary-foreground: hsl(0 0% 100%);
+
+ /* 次要色 */
+ --color-secondary: hsl(240 5% 96%);
+ --color-secondary-foreground: hsl(240 6% 10%);
+
+ /* 静音色 */
+ --color-muted: hsl(240 5% 96%);
+ --color-muted-foreground: hsl(240 4% 46%);
+
+ /* 强调色 - 淡粉 */
+ --color-accent: hsl(350 89% 95%);
+ --color-accent-foreground: hsl(350 70% 45%);
+
+ /* 危险色 */
+ --color-destructive: hsl(0 84% 60%);
+ --color-destructive-foreground: hsl(0 0% 100%);
+
+ /* 边框和输入框 */
+ --color-border: hsl(240 6% 90%);
+ --color-input: hsl(240 6% 90%);
+ --color-ring: hsl(350 89% 70%);
+
+ --radius: 0.5rem;
+}
+
+.dark {
+ --color-background: hsl(240 10% 4%);
+ --color-foreground: hsl(0 0% 95%);
+ --color-card: hsl(240 10% 4%);
+ --color-card-foreground: hsl(0 0% 95%);
+ --color-popover: hsl(240 10% 4%);
+ --color-popover-foreground: hsl(0 0% 95%);
+
+ /* 主色调 - 深色模式下的浅粉色 */
+ --color-primary: hsl(350 89% 75%);
+ --color-primary-foreground: hsl(240 10% 4%);
+
+ --color-secondary: hsl(240 4% 16%);
+ --color-secondary-foreground: hsl(0 0% 95%);
+
+ --color-muted: hsl(240 4% 16%);
+ --color-muted-foreground: hsl(240 5% 65%);
+
+ --color-accent: hsl(350 40% 18%);
+ --color-accent-foreground: hsl(350 89% 80%);
+
+ --color-destructive: hsl(0 63% 50%);
+ --color-destructive-foreground: hsl(0 0% 95%);
+
+ --color-border: hsl(240 4% 16%);
+ --color-input: hsl(240 4% 16%);
+ --color-ring: hsl(350 89% 75%);
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground antialiased;
+ }
+}
+
+/* 自定义滚动条 */
+@layer utilities {
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb {
+ background: hsl(240 4% 46% / 0.3);
+ border-radius: 3px;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+ background: hsl(240 4% 46% / 0.5);
+ }
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..6850c0d
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,30 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+export function formatCurrency(value: number): string {
+ return `$${(value / 1000000).toFixed(2)}`
+}
+
+export function formatQuota(value: number): string {
+ if (value >= 1000000) {
+ return `$${(value / 1000000).toFixed(2)}`
+ }
+ return value.toString()
+}
+
+export function copyToClipboard(text: string): Promise {
+ return navigator.clipboard.writeText(text)
+}
+
+export function generateTokenKey(): string {
+ const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+ let token = 'sk-'
+ for (let i = 0; i < 48; i++) {
+ token += chars.charAt(Math.floor(Math.random() * chars.length))
+ }
+ return token
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..6396b50
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,24 @@
+import './style.css'
+import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector('#app')!.innerHTML = `
+
+`
+
+setupCounter(document.querySelector('#counter')!)
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..6f4ac9b
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+
+ ,
+)
diff --git a/frontend/src/pages/ApiTest.tsx b/frontend/src/pages/ApiTest.tsx
new file mode 100644
index 0000000..0f88c00
--- /dev/null
+++ b/frontend/src/pages/ApiTest.tsx
@@ -0,0 +1,184 @@
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Select } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { useToast } from '@/components/ui/use-toast'
+import { apiClient } from '@/api/client'
+import { Send } from 'lucide-react'
+
+const requestTemplates: Record = {
+ '/v1/chat/completions': {
+ model: 'gpt-3.5-turbo',
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello, how are you?',
+ },
+ ],
+ temperature: 0.7,
+ max_tokens: 100,
+ },
+ '/v1/messages': {
+ model: 'claude-3-5-sonnet-20241022',
+ max_tokens: 1024,
+ messages: [
+ {
+ role: 'user',
+ content: 'Hello, Claude!',
+ },
+ ],
+ },
+ '/v1/completions': {
+ model: 'gpt-3.5-turbo-instruct',
+ prompt: 'Once upon a time',
+ max_tokens: 100,
+ temperature: 0.7,
+ },
+}
+
+export function ApiTest() {
+ const [endpoint, setEndpoint] = useState('/v1/chat/completions')
+ const [apiToken, setApiToken] = useState('')
+ const [requestBody, setRequestBody] = useState(
+ JSON.stringify(requestTemplates['/v1/chat/completions'], null, 2)
+ )
+ const [isLoading, setIsLoading] = useState(false)
+ const [response, setResponse] = useState(null)
+ const [responseTime, setResponseTime] = useState(0)
+ const [statusCode, setStatusCode] = useState(null)
+
+ const { addToast } = useToast()
+
+ const handleEndpointChange = (newEndpoint: string) => {
+ setEndpoint(newEndpoint)
+ setRequestBody(JSON.stringify(requestTemplates[newEndpoint], null, 2))
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+
+ if (!apiToken) {
+ addToast('请输入API令牌', 'error')
+ return
+ }
+
+ let body: any
+ try {
+ body = JSON.parse(requestBody)
+ } catch (error) {
+ addToast('请求体JSON格式错误', 'error')
+ return
+ }
+
+ setIsLoading(true)
+ setResponse(null)
+ setStatusCode(null)
+
+ const startTime = Date.now()
+
+ try {
+ const result = await apiClient.testApi(endpoint, apiToken, body)
+ const endTime = Date.now()
+ setResponseTime(endTime - startTime)
+ setResponse(result)
+ setStatusCode(200)
+ addToast('请求成功', 'success')
+ } catch (error: any) {
+ const endTime = Date.now()
+ setResponseTime(endTime - startTime)
+ setStatusCode(error.status || 500)
+ setResponse({ error: error.message })
+ addToast('请求失败', 'error')
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return (
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+ {toasts.map((toast) => {
+ const Icon = toastIcons[toast.type] || Info
+ return (
+
+ )
+}
diff --git a/frontend/src/components/ui/use-toast.ts b/frontend/src/components/ui/use-toast.ts
new file mode 100644
index 0000000..d67a4ff
--- /dev/null
+++ b/frontend/src/components/ui/use-toast.ts
@@ -0,0 +1,35 @@
+import { create } from 'zustand'
+
+type ToastType = 'success' | 'error' | 'info' | 'warning'
+
+interface Toast {
+ id: string
+ message: string
+ type: ToastType
+}
+
+interface ToastState {
+ toasts: Toast[]
+ addToast: (message: string, type: ToastType) => void
+ removeToast: (id: string) => void
+}
+
+export const useToast = create
+
+ )
+ })}
+
+
+ {toast.message}
+ +
+
+
+ API 测试工具
+ 测试您的 API 连接和配置
+
+
+
-
-
-
-
-
-
-
+
+
+ API 测试
+
-
-
-
- 响应结果
-
- 等待中
- 0ms
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 💡 定价说明
-- 基础配额单位：1百万token = $1.00 | 定价配置为不同模型相对于基础单位的倍率 | 例如：gpt-4的input倍率为30，表示1百万token消耗30美元配额 -
-
-
-
-
-
-
-
-
-
-
- | 模型名称 | -输入倍率 | -输出倍率 | -操作 | -
|---|---|---|---|
| 加载中... | -|||
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ⚠️ 警告：
-
-
-
-
- 初始化数据库将创建必要的表结构。如果表已存在，操作将被忽略。
-
-
-
-
-
-
-
-
-
-
-
-
-加载中...
-