├── website
    ├── postcss.config.js
    ├── client
    │   ├── src
    │   │   ├── main.tsx
    │   │   ├── components
    │   │   │   ├── ui
    │   │   │   │   ├── aspect-ratio.tsx
    │   │   │   │   ├── skeleton.tsx
    │   │   │   │   ├── collapsible.tsx
    │   │   │   │   ├── textarea.tsx
    │   │   │   │   ├── label.tsx
    │   │   │   │   ├── input.tsx
    │   │   │   │   ├── progress.tsx
    │   │   │   │   ├── separator.tsx
    │   │   │   │   ├── toaster.tsx
    │   │   │   │   ├── checkbox.tsx
    │   │   │   │   ├── slider.tsx
    │   │   │   │   ├── switch.tsx
    │   │   │   │   ├── badge.tsx
    │   │   │   │   ├── tooltip.tsx
    │   │   │   │   ├── hover-card.tsx
    │   │   │   │   ├── popover.tsx
    │   │   │   │   ├── avatar.tsx
    │   │   │   │   ├── radio-group.tsx
    │   │   │   │   ├── toggle.tsx
    │   │   │   │   ├── alert.tsx
    │   │   │   │   ├── scroll-area.tsx
    │   │   │   │   ├── resizable.tsx
    │   │   │   │   ├── toggle-group.tsx
    │   │   │   │   ├── tabs.tsx
    │   │   │   │   ├── button.tsx
    │   │   │   │   ├── card.tsx
    │   │   │   │   ├── accordion.tsx
    │   │   │   │   ├── input-otp.tsx
    │   │   │   │   ├── calendar.tsx
    │   │   │   │   ├── breadcrumb.tsx
    │   │   │   │   ├── pagination.tsx
    │   │   │   │   ├── table.tsx
    │   │   │   │   ├── drawer.tsx
    │   │   │   │   ├── dialog.tsx
    │   │   │   │   ├── sheet.tsx
    │   │   │   │   ├── form.tsx
    │   │   │   │   ├── alert-dialog.tsx
    │   │   │   │   ├── toast.tsx
    │   │   │   │   ├── command.tsx
    │   │   │   │   ├── navigation-menu.tsx
    │   │   │   │   ├── select.tsx
    │   │   │   │   ├── carousel.tsx
    │   │   │   │   ├── context-menu.tsx
    │   │   │   │   └── dropdown-menu.tsx
    │   │   │   ├── tags-legend.tsx
    │   │   │   ├── language-switcher.tsx
    │   │   │   ├── usage-guide.tsx
    │   │   │   ├── hero-section.tsx
    │   │   │   ├── contribute-section.tsx
    │   │   │   ├── footer.tsx
    │   │   │   ├── header.tsx
    │   │   │   ├── recommended-apps.tsx
    │   │   │   └── provider-stats.tsx
    │   │   ├── lib
    │   │   │   ├── utils.ts
    │   │   │   ├── queryClient.ts
    │   │   │   └── api-providers-data.ts
    │   │   ├── hooks
    │   │   │   ├── use-mobile.tsx
    │   │   │   ├── use-language.tsx
    │   │   │   └── use-toast.ts
    │   │   ├── pages
    │   │   │   ├── not-found.tsx
    │   │   │   └── home.tsx
    │   │   ├── App.tsx
    │   │   └── index.css
    │   └── index.html
    ├── drizzle.config.ts
    ├── components.json
    ├── tsconfig.json
    ├── vite.config.ts
    ├── shared
    │   └── schema.ts
    ├── server
    │   ├── routes.ts
    │   ├── index.ts
    │   └── vite.ts
    ├── index.html
    ├── tailwind.config.ts
    ├── attached_assets
    │   └── Pasted--Logo-lionbridge-com-weglot-c-1750993147083_1750993147084.txt
    ├── package.json
    ├── replit.md
    └── README-HTML.md
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── 反馈失效提供方.md
    │   └── 添加api提供方.md
    └── workflows
    │   └── clean.yml
└── .gitignore


/website/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/website/client/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from "react-dom/client";
2 | import App from "./App";
3 | import "./index.css";
4 | 
5 | createRoot(document.getElementById("root")!).render(<App />);
6 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
2 | 
3 | const AspectRatio = AspectRatioPrimitive.Root
4 | 
5 | export { AspectRatio }
6 | 


--------------------------------------------------------------------------------
/website/client/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/website/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "drizzle-kit";
 2 | 
 3 | if (!process.env.DATABASE_URL) {
 4 |   throw new Error("DATABASE_URL, ensure the database is provisioned");
 5 | }
 6 | 
 7 | export default defineConfig({
 8 |   out: "./migrations",
 9 |   schema: "./shared/schema.ts",
10 |   dialect: "postgresql",
11 |   dbCredentials: {
12 |     url: process.env.DATABASE_URL,
13 |   },
14 | });
15 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 4 | 
 5 | const Collapsible = CollapsiblePrimitive.Root
 6 | 
 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 8 | 
 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 | 
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/反馈失效提供方.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 反馈失效提供方
 3 | about: 反馈站点失效提供方
 4 | title: 反馈站点失效提供方
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | ---
11 | name: 反馈失效提供方
12 | about: 反馈失效提供方模板
13 | title: 反馈失效提供方
14 | labels: ''
15 | assignees: TechnologyStar
16 | 
17 | ---
18 | 
19 | ### 网址
20 | 
21 | ### 原因
22 | <!-- 将 [ ] 改为 [x] 即为选中 -->
23 | 
24 | - [ ] 🚫网站无法正常打开
25 | - [ ] ❌api功能异常
26 | - [ ] 🛑api地址遭到中国国家防火墙拦截
27 | - [ ] 🤔其他：
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Common Node/Vite artifacts
 2 | node_modules/
 3 | dist/
 4 | build/
 5 | .tmp/
 6 | .temp/
 7 | 
 8 | # Logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | # Environment files
15 | .env
16 | .env.*
17 | 
18 | # Editor directories and files
19 | .vscode/
20 | .idea/
21 | *.swp
22 | .DS_Store
23 | Thumbs.db
24 | 
25 | # Coverage / test output
26 | coverage/
27 | .junit/
28 | 
29 | # Misc
30 | *.local
31 | 


--------------------------------------------------------------------------------
/website/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "$schema": "https://ui.shadcn.com/schema.json",
 3 |     "style": "new-york",
 4 |     "rsc": false,
 5 |     "tsx": true,
 6 |     "tailwind": {
 7 |       "config": "tailwind.config.ts",
 8 |       "css": "client/src/index.css",
 9 |       "baseColor": "neutral",
10 |       "cssVariables": true,
11 |       "prefix": ""
12 |     },
13 |     "aliases": {
14 |       "components": "@/components",
15 |       "utils": "@/lib/utils",
16 |       "ui": "@/components/ui",
17 |       "lib": "@/lib",
18 |       "hooks": "@/hooks"
19 |     }
20 | }


--------------------------------------------------------------------------------
/website/client/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | const MOBILE_BREAKPOINT = 768
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 |     }
13 |     mql.addEventListener("change", onChange)
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 |     return () => mql.removeEventListener("change", onChange)
16 |   }, [])
17 | 
18 |   return !!isMobile
19 | }
20 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/添加api提供方.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 添加api提供方
 3 | about: 添加api提供方
 4 | title: 添加api提供方
 5 | labels: ''
 6 | assignees: TechnologyStar
 7 | 
 8 | ---
 9 | 
10 | ---
11 | name: 添加api提供方
12 | about: 添加api提供方模板
13 | title: 添加api提供方
14 | labels: ''
15 | assignees: TechnologyStar
16 | 
17 | ---
18 | 
19 | ### 网址
20 | 
21 | 
22 | ### 属性
23 | 
24 | <!-- 将 [ ] 改为 [x] 即为选中 -->
25 | 
26 | #### 基本属性（单选）
27 | - [ ] 🆓完全免费
28 | - [ ] 🔓有免费额度（注册赠送额度>0.15美元）
29 | - [ ] 💰只能充值领额度
30 | #### 扩展属性（多选）
31 | - [ ] 💪支持 Claude最新模型
32 | - [ ] ✌支持openai最新模型
33 | - [ ] 🎉支持其他模型或其他功能
34 | - [ ] 🌎需要国际网络
35 | - [ ] 🎁充值有较大优惠（<50%）
36 | - [ ] 🚀支持高并发
37 | - [ ] 😆签到领余额
38 | - [ ] 🚩网站通过中国备案
39 | 
40 | ### 附加信息
41 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["client/src/**/*", "shared/**/*", "server/**/*"],
 3 |   "exclude": ["node_modules", "build", "dist", "**/*.test.ts"],
 4 |   "compilerOptions": {
 5 |     "incremental": true,
 6 |     "tsBuildInfoFile": "./node_modules/typescript/tsbuildinfo",
 7 |     "noEmit": true,
 8 |     "module": "ESNext",
 9 |     "strict": true,
10 |     "lib": ["esnext", "dom", "dom.iterable"],
11 |     "jsx": "preserve",
12 |     "esModuleInterop": true,
13 |     "skipLibCheck": true,
14 |     "allowImportingTsExtensions": true,
15 |     "moduleResolution": "bundler",
16 |     "baseUrl": ".",
17 |     "types": ["node", "vite/client"],
18 |     "paths": {
19 |       "@/*": ["./client/src/*"],
20 |       "@shared/*": ["./shared/*"]
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/website/client/src/pages/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent } from "@/components/ui/card";
 2 | import { AlertCircle } from "lucide-react";
 3 | 
 4 | export default function NotFound() {
 5 |   return (
 6 |     <div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
 7 |       <Card className="w-full max-w-md mx-4">
 8 |         <CardContent className="pt-6">
 9 |           <div className="flex mb-4 gap-2">
10 |             <AlertCircle className="h-8 w-8 text-red-500" />
11 |             <h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
12 |           </div>
13 | 
14 |           <p className="mt-4 text-sm text-gray-600">
15 |             Did you forget to add the page to the router?
16 |           </p>
17 |         </CardContent>
18 |       </Card>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Progress = React.forwardRef<
 7 |   React.ElementRef<typeof ProgressPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 9 | >(({ className, value, ...props }, ref) => (
10 |   <ProgressPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <ProgressPrimitive.Indicator
19 |       className="h-full w-full flex-1 bg-primary transition-all"
20 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
21 |     />
22 |   </ProgressPrimitive.Root>
23 | ))
24 | Progress.displayName = ProgressPrimitive.Root.displayName
25 | 
26 | export { Progress }


--------------------------------------------------------------------------------
/website/client/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Separator = React.forwardRef<
 7 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 9 | >(
10 |   (
11 |     { className, orientation = "horizontal", decorative = true, ...props },
12 |     ref
13 |   ) => (
14 |     <SeparatorPrimitive.Root
15 |       ref={ref}
16 |       decorative={decorative}
17 |       orientation={orientation}
18 |       className={cn(
19 |         "shrink-0 bg-border",
20 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | )
27 | Separator.displayName = SeparatorPrimitive.Root.displayName
28 | 
29 | export { Separator }
30 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | import { useToast } from "@/hooks/use-toast"
 2 | import {
 3 |   Toast,
 4 |   ToastClose,
 5 |   ToastDescription,
 6 |   ToastProvider,
 7 |   ToastTitle,
 8 |   ToastViewport,
 9 | } from "@/components/ui/toast"
10 | 
11 | export function Toaster() {
12 |   const { toasts } = useToast()
13 | 
14 |   return (
15 |     <ToastProvider>
16 |       {toasts.map(function ({ id, title, description, action, ...props }) {
17 |         return (
18 |           <Toast key={id} {...props}>
19 |             <div className="grid gap-1">
20 |               {title && <ToastTitle>{title}</ToastTitle>}
21 |               {description && (
22 |                 <ToastDescription>{description}</ToastDescription>
23 |               )}
24 |             </div>
25 |             {action}
26 |             <ToastClose />
27 |           </Toast>
28 |         )
29 |       })}
30 |       <ToastViewport />
31 |     </ToastProvider>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/website/client/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, Route } from "wouter";
 2 | import { queryClient } from "./lib/queryClient";
 3 | import { QueryClientProvider } from "@tanstack/react-query";
 4 | import { Toaster } from "@/components/ui/toaster";
 5 | import { TooltipProvider } from "@/components/ui/tooltip";
 6 | import { LanguageProvider } from "@/hooks/use-language";
 7 | import Home from "@/pages/home";
 8 | import NotFound from "@/pages/not-found";
 9 | 
10 | function Router() {
11 |   return (
12 |     <Switch>
13 |       <Route path="/" component={Home} />
14 |       <Route component={NotFound} />
15 |     </Switch>
16 |   );
17 | }
18 | 
19 | function App() {
20 |   return (
21 |     <QueryClientProvider client={queryClient}>
22 |       <LanguageProvider>
23 |         <TooltipProvider>
24 |           <Toaster />
25 |           <Router />
26 |         </TooltipProvider>
27 |       </LanguageProvider>
28 |     </QueryClientProvider>
29 |   );
30 | }
31 | 
32 | export default App;
33 | 


--------------------------------------------------------------------------------
/website/client/src/pages/home.tsx:
--------------------------------------------------------------------------------
 1 | import { Header } from "@/components/header";
 2 | import { HeroSection } from "@/components/hero-section";
 3 | import { TagsLegend } from "@/components/tags-legend";
 4 | import { ProviderStats } from "@/components/provider-stats";
 5 | import { ProvidersTable } from "@/components/providers-table";
 6 | import { ProviderComparison } from "@/components/provider-comparison";
 7 | import { RecommendedApps } from "@/components/recommended-apps";
 8 | import { UsageGuide } from "@/components/usage-guide";
 9 | import { ContributeSection } from "@/components/contribute-section";
10 | import { Footer } from "@/components/footer";
11 | 
12 | export default function Home() {
13 |   return (
14 |     <div className="min-h-screen bg-gray-50">
15 |       <Header />
16 |       <HeroSection />
17 |       <TagsLegend />
18 |       <ProviderStats />
19 |       <ProvidersTable />
20 |       <ProviderComparison />
21 |       <RecommendedApps />
22 |       <UsageGuide />
23 |       <ContributeSection />
24 |       <Footer />
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/website/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import path from "path";
 4 | import runtimeErrorOverlay from "@replit/vite-plugin-runtime-error-modal";
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     react(),
 9 |     runtimeErrorOverlay(),
10 |     ...(process.env.NODE_ENV !== "production" &&
11 |     process.env.REPL_ID !== undefined
12 |       ? [
13 |           await import("@replit/vite-plugin-cartographer").then((m) =>
14 |             m.cartographer(),
15 |           ),
16 |         ]
17 |       : []),
18 |   ],
19 |   resolve: {
20 |     alias: {
21 |       "@": path.resolve(import.meta.dirname, "client", "src"),
22 |       "@shared": path.resolve(import.meta.dirname, "shared"),
23 |       "@assets": path.resolve(import.meta.dirname, "attached_assets"),
24 |     },
25 |   },
26 |   root: path.resolve(import.meta.dirname, "client"),
27 |   build: {
28 |     outDir: path.resolve(import.meta.dirname, "dist/public"),
29 |     emptyOutDir: true,
30 |   },
31 |   server: {
32 |     fs: {
33 |       strict: true,
34 |       deny: ["**/.*"],
35 |     },
36 |   },
37 | });
38 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }
29 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SliderPrimitive from "@radix-ui/react-slider"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Slider = React.forwardRef<
 7 |   React.ElementRef<typeof SliderPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SliderPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex w-full touch-none select-none items-center",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
19 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
20 |     </SliderPrimitive.Track>
21 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background 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" />
22 |   </SliderPrimitive.Root>
23 | ))
24 | Slider.displayName = SliderPrimitive.Root.displayName
25 | 
26 | export { Slider }
27 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ))
25 | Switch.displayName = SwitchPrimitives.Root.displayName
26 | 
27 | export { Switch }
28 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "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",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const HoverCard = HoverCardPrimitive.Root
 9 | 
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger
11 | 
12 | const HoverCardContent = React.forwardRef<
13 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <HoverCardPrimitive.Content
17 |     ref={ref}
18 |     align={align}
19 |     sideOffset={sideOffset}
20 |     className={cn(
21 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
22 |       className
23 |     )}
24 |     {...props}
25 |   />
26 | ))
27 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
28 | 
29 | export { HoverCard, HoverCardTrigger, HoverCardContent }
30 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef<
11 |   React.ElementRef<typeof PopoverPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <PopoverPrimitive.Portal>
15 |     <PopoverPrimitive.Content
16 |       ref={ref}
17 |       align={align}
18 |       sideOffset={sideOffset}
19 |       className={cn(
20 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   </PopoverPrimitive.Portal>
26 | ))
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
28 | 
29 | export { Popover, PopoverTrigger, PopoverContent }
30 | 


--------------------------------------------------------------------------------
/.github/workflows/clean.yml:
--------------------------------------------------------------------------------
 1 | name: Repository Maintenance
 2 | on:
 3 |   workflow_dispatch:
 4 | 
 5 | permissions:
 6 |   contents: write
 7 | 
 8 | jobs:
 9 |   repo-optimization:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout code
13 |         uses: actions/checkout@v4
14 |         with:
15 |           fetch-depth: 0
16 | 
17 |       - name: Create archive branch
18 |         run: |
19 |           git push origin HEAD:archive-$(date +%Y%m%d)
20 | 
21 |       - name: Repository optimization
22 |         run: |
23 |           git checkout --orphan temp-main
24 |           git add -A
25 |           git config --global user.name "Repo Maintainer"
26 |           git config --global user.email "maintainer@noreply.github.com"
27 |           git commit -m "Repository optimization $(date +'%Y-%m-%d')"
28 |           
29 |           echo "File verification:"
30 |           git ls-files | head -n 10
31 |           echo "[...truncated...]"
32 |           
33 |           git branch -D main
34 |           git branch -m main
35 | 
36 |       - name: Apply changes
37 |         run: |
38 |           git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
39 |           git push -f origin main
40 | 
41 |       - name: Verify completion
42 |         run: |
43 |           echo "Process completed successfully"
44 |           echo "Commit count: $(git rev-list --count HEAD)"
45 |           echo "File count: $(git ls-files | wc -l)"
46 | 


--------------------------------------------------------------------------------
/website/client/src/components/tags-legend.tsx:
--------------------------------------------------------------------------------
 1 | import { useLanguage } from "@/hooks/use-language";
 2 | 
 3 | const tagData = [
 4 |   { emoji: "🆓", key: "free" },
 5 |   { emoji: "🔓", key: "freemium" },
 6 |   { emoji: "💰", key: "paid" },
 7 |   { emoji: "💪", key: "claude" },
 8 |   { emoji: "✌", key: "openai" },
 9 |   { emoji: "🎉", key: "other" },
10 |   { emoji: "🌎", key: "vpn" },
11 |   { emoji: "🎁", key: "bonus" },
12 |   { emoji: "🚀", key: "concurrent" },
13 |   { emoji: "😆", key: "daily" },
14 |   { emoji: "🚩", key: "verified" },
15 |   { emoji: "✔", key: "validated" }
16 | ];
17 | 
18 | export function TagsLegend() {
19 |   const { t } = useLanguage();
20 | 
21 |   return (
22 |     <section id="tags" className="py-12 bg-white">
23 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24 |         <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
25 |           🎁 {t('tags.title')}
26 |         </h2>
27 |         <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
28 |           {tagData.map((tag) => (
29 |             <div key={tag.key} className="bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200">
30 |               <div className="text-2xl mb-2">{tag.emoji}</div>
31 |               <div className="text-sm font-medium text-gray-900">
32 |                 {t(`tags.${tag.key}`)}
33 |               </div>
34 |             </div>
35 |           ))}
36 |         </div>
37 |       </div>
38 |     </section>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/website/client/src/lib/queryClient.ts:
--------------------------------------------------------------------------------
 1 | import { QueryClient, QueryFunction } from "@tanstack/react-query";
 2 | 
 3 | async function throwIfResNotOk(res: Response) {
 4 |   if (!res.ok) {
 5 |     const text = (await res.text()) || res.statusText;
 6 |     throw new Error(`${res.status}: ${text}`);
 7 |   }
 8 | }
 9 | 
10 | export async function apiRequest(
11 |   method: string,
12 |   url: string,
13 |   data?: unknown | undefined,
14 | ): Promise<Response> {
15 |   const res = await fetch(url, {
16 |     method,
17 |     headers: data ? { "Content-Type": "application/json" } : {},
18 |     body: data ? JSON.stringify(data) : undefined,
19 |     credentials: "include",
20 |   });
21 | 
22 |   await throwIfResNotOk(res);
23 |   return res;
24 | }
25 | 
26 | type UnauthorizedBehavior = "returnNull" | "throw";
27 | export const getQueryFn: <T>(options: {
28 |   on401: UnauthorizedBehavior;
29 | }) => QueryFunction<T> =
30 |   ({ on401: unauthorizedBehavior }) =>
31 |   async ({ queryKey }) => {
32 |     const res = await fetch(queryKey[0] as string, {
33 |       credentials: "include",
34 |     });
35 | 
36 |     if (unauthorizedBehavior === "returnNull" && res.status === 401) {
37 |       return null;
38 |     }
39 | 
40 |     await throwIfResNotOk(res);
41 |     return await res.json();
42 |   };
43 | 
44 | export const queryClient = new QueryClient({
45 |   defaultOptions: {
46 |     queries: {
47 |       queryFn: getQueryFn({ on401: "throw" }),
48 |       refetchInterval: false,
49 |       refetchOnWindowFocus: false,
50 |       staleTime: Infinity,
51 |       retry: false,
52 |     },
53 |     mutations: {
54 |       retry: false,
55 |     },
56 |   },
57 | });
58 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 3 | import { Circle } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const RadioGroup = React.forwardRef<
 8 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
10 | >(({ className, ...props }, ref) => {
11 |   return (
12 |     <RadioGroupPrimitive.Root
13 |       className={cn("grid gap-2", className)}
14 |       {...props}
15 |       ref={ref}
16 |     />
17 |   )
18 | })
19 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
20 | 
21 | const RadioGroupItem = React.forwardRef<
22 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
23 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
24 | >(({ className, ...props }, ref) => {
25 |   return (
26 |     <RadioGroupPrimitive.Item
27 |       ref={ref}
28 |       className={cn(
29 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
35 |         <Circle className="h-2.5 w-2.5 fill-current text-current" />
36 |       </RadioGroupPrimitive.Indicator>
37 |     </RadioGroupPrimitive.Item>
38 |   )
39 | })
40 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
41 | 
42 | export { RadioGroup, RadioGroupItem }
43 | 


--------------------------------------------------------------------------------
/website/client/src/hooks/use-language.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useState, useEffect, ReactNode } from "react";
 2 | import { translations, Language } from "@/lib/translations";
 3 | 
 4 | type LanguageContextType = {
 5 |   language: Language;
 6 |   setLanguage: (lang: Language) => void;
 7 |   t: (key: string) => string;
 8 | };
 9 | 
10 | const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
11 | 
12 | export function LanguageProvider({ children }: { children: ReactNode }) {
13 |   const [language, setLanguageState] = useState<Language>(() => {
14 |     const saved = localStorage.getItem('preferred-language') as Language;
15 |     return saved && translations[saved] ? saved : 'zh';
16 |   });
17 | 
18 |   const setLanguage = (lang: Language) => {
19 |     setLanguageState(lang);
20 |     localStorage.setItem('preferred-language', lang);
21 |     document.documentElement.lang = lang;
22 |   };
23 | 
24 |   const t = (key: string): string => {
25 |     const keys = key.split('.');
26 |     let value: any = translations[language];
27 |     
28 |     for (const k of keys) {
29 |       value = value?.[k];
30 |     }
31 |     
32 |     return value || key;
33 |   };
34 | 
35 |   useEffect(() => {
36 |     document.documentElement.lang = language;
37 |   }, [language]);
38 | 
39 |   return (
40 |     <LanguageContext.Provider value={{ language, setLanguage, t }}>
41 |       {children}
42 |     </LanguageContext.Provider>
43 |   );
44 | }
45 | 
46 | export function useLanguage() {
47 |   const context = useContext(LanguageContext);
48 |   if (context === undefined) {
49 |     throw new Error('useLanguage must be used within a LanguageProvider');
50 |   }
51 |   return context;
52 | }
53 | 


--------------------------------------------------------------------------------
/website/shared/schema.ts:
--------------------------------------------------------------------------------
 1 | import { pgTable, text, serial, integer, boolean, jsonb } from "drizzle-orm/pg-core";
 2 | import { createInsertSchema } from "drizzle-zod";
 3 | import { z } from "zod";
 4 | 
 5 | export const apiProviders = pgTable("api_providers", {
 6 |   id: serial("id").primaryKey(),
 7 |   name: text("name").notNull(),
 8 |   displayName: text("display_name").notNull(),
 9 |   url: text("url").notNull(),
10 |   tags: jsonb("tags").notNull().$type<string[]>(),
11 |   notes: text("notes"),
12 |   isActive: boolean("is_active").notNull().default(true),
13 |   isRecommended: boolean("is_recommended").notNull().default(false),
14 |   sortOrder: integer("sort_order").notNull().default(0),
15 | });
16 | 
17 | export const recommendedApps = pgTable("recommended_apps", {
18 |   id: serial("id").primaryKey(),
19 |   name: text("name").notNull(),
20 |   description: text("description").notNull(),
21 |   githubUrl: text("github_url"),
22 |   websiteUrl: text("website_url"),
23 |   icon: text("icon").notNull(),
24 |   tags: jsonb("tags").notNull().$type<string[]>(),
25 |   isActive: boolean("is_active").notNull().default(true),
26 |   sortOrder: integer("sort_order").notNull().default(0),
27 | });
28 | 
29 | export const insertApiProviderSchema = createInsertSchema(apiProviders).omit({
30 |   id: true,
31 | });
32 | 
33 | export const insertRecommendedAppSchema = createInsertSchema(recommendedApps).omit({
34 |   id: true,
35 | });
36 | 
37 | export type ApiProvider = typeof apiProviders.$inferSelect;
38 | export type InsertApiProvider = z.infer<typeof insertApiProviderSchema>;
39 | export type RecommendedApp = typeof recommendedApps.$inferSelect;
40 | export type InsertRecommendedApp = z.infer<typeof insertRecommendedAppSchema>;
41 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const toggleVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-transparent",
13 |         outline:
14 |           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
15 |       },
16 |       size: {
17 |         default: "h-10 px-3 min-w-10",
18 |         sm: "h-9 px-2.5 min-w-9",
19 |         lg: "h-11 px-5 min-w-11",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |       size: "default",
25 |     },
26 |   }
27 | )
28 | 
29 | const Toggle = React.forwardRef<
30 |   React.ElementRef<typeof TogglePrimitive.Root>,
31 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
32 |     VariantProps<typeof toggleVariants>
33 | >(({ className, variant, size, ...props }, ref) => (
34 |   <TogglePrimitive.Root
35 |     ref={ref}
36 |     className={cn(toggleVariants({ variant, size, className }))}
37 |     {...props}
38 |   />
39 | ))
40 | 
41 | Toggle.displayName = TogglePrimitive.Root.displayName
42 | 
43 | export { Toggle, toggleVariants }
44 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     ref={ref}
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ))
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37 |       className
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
43 | ))
44 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
45 | 
46 | export { ScrollArea, ScrollBar }
47 | 


--------------------------------------------------------------------------------
/website/server/routes.ts:
--------------------------------------------------------------------------------
 1 | import type { Express } from "express";
 2 | import { createServer, type Server } from "http";
 3 | import { storage } from "./storage";
 4 | 
 5 | export async function registerRoutes(app: Express): Promise<Server> {
 6 |   // API Providers routes
 7 |   app.get("/api/providers", async (req, res) => {
 8 |     try {
 9 |       const providers = await storage.getApiProviders();
10 |       res.json(providers);
11 |     } catch (error) {
12 |       res.status(500).json({ message: "Failed to fetch API providers" });
13 |     }
14 |   });
15 | 
16 |   app.get("/api/providers/:id", async (req, res) => {
17 |     try {
18 |       const id = parseInt(req.params.id);
19 |       const provider = await storage.getApiProvider(id);
20 |       
21 |       if (!provider) {
22 |         return res.status(404).json({ message: "API provider not found" });
23 |       }
24 |       
25 |       res.json(provider);
26 |     } catch (error) {
27 |       res.status(500).json({ message: "Failed to fetch API provider" });
28 |     }
29 |   });
30 | 
31 |   // Recommended Apps routes
32 |   app.get("/api/apps", async (req, res) => {
33 |     try {
34 |       const apps = await storage.getRecommendedApps();
35 |       res.json(apps);
36 |     } catch (error) {
37 |       res.status(500).json({ message: "Failed to fetch recommended apps" });
38 |     }
39 |   });
40 | 
41 |   app.get("/api/apps/:id", async (req, res) => {
42 |     try {
43 |       const id = parseInt(req.params.id);
44 |       const app = await storage.getRecommendedApp(id);
45 |       
46 |       if (!app) {
47 |         return res.status(404).json({ message: "Recommended app not found" });
48 |       }
49 |       
50 |       res.json(app);
51 |     } catch (error) {
52 |       res.status(500).json({ message: "Failed to fetch recommended app" });
53 |     }
54 |   });
55 | 
56 |   const httpServer = createServer(app);
57 |   return httpServer;
58 | }
59 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { GripVertical } from "lucide-react"
 4 | import * as ResizablePrimitive from "react-resizable-panels"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ResizablePanelGroup = ({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
12 |   <ResizablePrimitive.PanelGroup
13 |     className={cn(
14 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
15 |       className
16 |     )}
17 |     {...props}
18 |   />
19 | )
20 | 
21 | const ResizablePanel = ResizablePrimitive.Panel
22 | 
23 | const ResizableHandle = ({
24 |   withHandle,
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
28 |   withHandle?: boolean
29 | }) => (
30 |   <ResizablePrimitive.PanelResizeHandle
31 |     className={cn(
32 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
33 |       className
34 |     )}
35 |     {...props}
36 |   >
37 |     {withHandle && (
38 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
39 |         <GripVertical className="h-2.5 w-2.5" />
40 |       </div>
41 |     )}
42 |   </ResizablePrimitive.PanelResizeHandle>
43 | )
44 | 
45 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
46 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 5 | import { type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | import { toggleVariants } from "@/components/ui/toggle"
 9 | 
10 | const ToggleGroupContext = React.createContext<
11 |   VariantProps<typeof toggleVariants>
12 | >({
13 |   size: "default",
14 |   variant: "default",
15 | })
16 | 
17 | const ToggleGroup = React.forwardRef<
18 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
19 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
20 |     VariantProps<typeof toggleVariants>
21 | >(({ className, variant, size, children, ...props }, ref) => (
22 |   <ToggleGroupPrimitive.Root
23 |     ref={ref}
24 |     className={cn("flex items-center justify-center gap-1", className)}
25 |     {...props}
26 |   >
27 |     <ToggleGroupContext.Provider value={{ variant, size }}>
28 |       {children}
29 |     </ToggleGroupContext.Provider>
30 |   </ToggleGroupPrimitive.Root>
31 | ))
32 | 
33 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
34 | 
35 | const ToggleGroupItem = React.forwardRef<
36 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
37 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
38 |     VariantProps<typeof toggleVariants>
39 | >(({ className, children, variant, size, ...props }, ref) => {
40 |   const context = React.useContext(ToggleGroupContext)
41 | 
42 |   return (
43 |     <ToggleGroupPrimitive.Item
44 |       ref={ref}
45 |       className={cn(
46 |         toggleVariants({
47 |           variant: context.variant || variant,
48 |           size: context.size || size,
49 |         }),
50 |         className
51 |       )}
52 |       {...props}
53 |     >
54 |       {children}
55 |     </ToggleGroupPrimitive.Item>
56 |   )
57 | })
58 | 
59 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
60 | 
61 | export { ToggleGroup, ToggleGroupItem }
62 | 


--------------------------------------------------------------------------------
/website/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 6 |     <title>🌐 OpenAI / Claude / DeepSeek API Provider Directory</title>
 7 |     <meta name="description" content="精选的第三方平台列表，提供 OpenAI / Claude / DeepSeek API，供学习、研究和非商业使用。" />
 8 |     <meta name="keywords" content="OpenAI, Claude, DeepSeek, API, 第三方, 免费, 人工智能, AI" />
 9 |     
10 |     <!-- Open Graph tags -->
11 |     <meta property="og:title" content="OpenAI / Claude / DeepSeek API Provider Directory" />
12 |     <meta property="og:description" content="精选的第三方平台列表，提供 OpenAI / Claude / DeepSeek API，供学习、研究和非商业使用。" />
13 |     <meta property="og:type" content="website" />
14 |     <meta property="og:url" content="https://api-directory.example.com" />
15 |     
16 |     <!-- Twitter Card tags -->
17 |     <meta name="twitter:card" content="summary_large_image" />
18 |     <meta name="twitter:title" content="OpenAI / Claude / DeepSeek API Provider Directory" />
19 |     <meta name="twitter:description" content="精选的第三方平台列表，提供 OpenAI / Claude / DeepSeek API，供学习、研究和非商业使用。" />
20 |     
21 |     <!-- Favicon -->
22 |     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>" />
23 |     
24 |     <!-- Preconnect to improve performance -->
25 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
26 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
27 |     
28 |     <!-- Theme color -->
29 |     <meta name="theme-color" content="#2563eb" />
30 |   </head>
31 |   <body>
32 |     <div id="root"></div>
33 |     <script type="module" src="/src/main.tsx"></script>
34 |     <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
35 |     <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     {...props}
49 |   />
50 | ))
51 | TabsContent.displayName = TabsPrimitive.Content.displayName
52 | 
53 | export { Tabs, TabsList, TabsTrigger, TabsContent }
54 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "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",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/website/server/index.ts:
--------------------------------------------------------------------------------
 1 | import express, { type Request, Response, NextFunction } from "express";
 2 | import { registerRoutes } from "./routes";
 3 | import { setupVite, serveStatic, log } from "./vite";
 4 | 
 5 | const app = express();
 6 | app.use(express.json());
 7 | app.use(express.urlencoded({ extended: false }));
 8 | 
 9 | app.use((req, res, next) => {
10 |   const start = Date.now();
11 |   const path = req.path;
12 |   let capturedJsonResponse: Record<string, any> | undefined = undefined;
13 | 
14 |   const originalResJson = res.json;
15 |   res.json = function (bodyJson, ...args) {
16 |     capturedJsonResponse = bodyJson;
17 |     return originalResJson.apply(res, [bodyJson, ...args]);
18 |   };
19 | 
20 |   res.on("finish", () => {
21 |     const duration = Date.now() - start;
22 |     if (path.startsWith("/api")) {
23 |       let logLine = `${req.method} ${path} ${res.statusCode} in ${duration}ms`;
24 |       if (capturedJsonResponse) {
25 |         logLine += ` :: ${JSON.stringify(capturedJsonResponse)}`;
26 |       }
27 | 
28 |       if (logLine.length > 80) {
29 |         logLine = logLine.slice(0, 79) + "…";
30 |       }
31 | 
32 |       log(logLine);
33 |     }
34 |   });
35 | 
36 |   next();
37 | });
38 | 
39 | (async () => {
40 |   const server = await registerRoutes(app);
41 | 
42 |   app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
43 |     const status = err.status || err.statusCode || 500;
44 |     const message = err.message || "Internal Server Error";
45 | 
46 |     res.status(status).json({ message });
47 |     throw err;
48 |   });
49 | 
50 |   // importantly only setup vite in development and after
51 |   // setting up all the other routes so the catch-all route
52 |   // doesn't interfere with the other routes
53 |   if (app.get("env") === "development") {
54 |     await setupVite(app, server);
55 |   } else {
56 |     serveStatic(app);
57 |   }
58 | 
59 |   // ALWAYS serve the app on port 5000
60 |   // this serves both the API and the client.
61 |   // It is the only port that is not firewalled.
62 |   const port = 5000;
63 |   server.listen({
64 |     port,
65 |     host: "0.0.0.0",
66 |     reusePort: true,
67 |   }, () => {
68 |     log(`serving on port ${port}`);
69 |   });
70 | })();
71 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLDivElement,
49 |   React.HTMLAttributes<HTMLDivElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 3 | import { ChevronDown } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Accordion = AccordionPrimitive.Root
 8 | 
 9 | const AccordionItem = React.forwardRef<
10 |   React.ElementRef<typeof AccordionPrimitive.Item>,
11 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12 | >(({ className, ...props }, ref) => (
13 |   <AccordionPrimitive.Item
14 |     ref={ref}
15 |     className={cn("border-b", className)}
16 |     {...props}
17 |   />
18 | ))
19 | AccordionItem.displayName = "AccordionItem"
20 | 
21 | const AccordionTrigger = React.forwardRef<
22 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
23 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
24 | >(({ className, children, ...props }, ref) => (
25 |   <AccordionPrimitive.Header className="flex">
26 |     <AccordionPrimitive.Trigger
27 |       ref={ref}
28 |       className={cn(
29 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
30 |         className
31 |       )}
32 |       {...props}
33 |     >
34 |       {children}
35 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
36 |     </AccordionPrimitive.Trigger>
37 |   </AccordionPrimitive.Header>
38 | ))
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
40 | 
41 | const AccordionContent = React.forwardRef<
42 |   React.ElementRef<typeof AccordionPrimitive.Content>,
43 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
44 | >(({ className, children, ...props }, ref) => (
45 |   <AccordionPrimitive.Content
46 |     ref={ref}
47 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
48 |     {...props}
49 |   >
50 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
51 |   </AccordionPrimitive.Content>
52 | ))
53 | 
54 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
55 | 
56 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
57 | 


--------------------------------------------------------------------------------
/website/client/src/components/language-switcher.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useRef, useEffect } from "react";
 2 | import { Button } from "@/components/ui/button";
 3 | import { useLanguage } from "@/hooks/use-language";
 4 | import { ChevronDown, Globe } from "lucide-react";
 5 | 
 6 | const languages = {
 7 |   zh: { name: '中文', flag: '🇨🇳' },
 8 |   en: { name: 'English', flag: '🇺🇸' },
 9 |   ru: { name: 'Русский', flag: '🇷🇺' },
10 |   fr: { name: 'Français', flag: '🇫🇷' }
11 | };
12 | 
13 | export function LanguageSwitcher() {
14 |   const { language, setLanguage, t } = useLanguage();
15 |   const [isOpen, setIsOpen] = useState(false);
16 |   const dropdownRef = useRef<HTMLDivElement>(null);
17 | 
18 |   useEffect(() => {
19 |     function handleClickOutside(event: MouseEvent) {
20 |       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
21 |         setIsOpen(false);
22 |       }
23 |     }
24 | 
25 |     document.addEventListener('mousedown', handleClickOutside);
26 |     return () => document.removeEventListener('mousedown', handleClickOutside);
27 |   }, []);
28 | 
29 |   const handleLanguageChange = (lang: keyof typeof languages) => {
30 |     setLanguage(lang);
31 |     setIsOpen(false);
32 |   };
33 | 
34 |   return (
35 |     <div className="relative" ref={dropdownRef}>
36 |       <Button
37 |         variant="ghost"
38 |         onClick={() => setIsOpen(!isOpen)}
39 |         className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors duration-200"
40 |       >
41 |         <Globe className="w-4 h-4" />
42 |         <span>{languages[language].name}</span>
43 |         <ChevronDown className="w-3 h-3" />
44 |       </Button>
45 | 
46 |       {isOpen && (
47 |         <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
48 |           {Object.entries(languages).map(([code, lang]) => (
49 |             <button
50 |               key={code}
51 |               onClick={() => handleLanguageChange(code as keyof typeof languages)}
52 |               className="w-full px-4 py-2 text-left hover:bg-gray-50 flex items-center space-x-2 transition-colors duration-200"
53 |             >
54 |               <span>{lang.flag}</span>
55 |               <span>{lang.name}</span>
56 |             </button>
57 |           ))}
58 |         </div>
59 |       )}
60 |     </div>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { OTPInput, OTPInputContext } from "input-otp"
 3 | import { Dot } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const InputOTP = React.forwardRef<
 8 |   React.ElementRef<typeof OTPInput>,
 9 |   React.ComponentPropsWithoutRef<typeof OTPInput>
10 | >(({ className, containerClassName, ...props }, ref) => (
11 |   <OTPInput
12 |     ref={ref}
13 |     containerClassName={cn(
14 |       "flex items-center gap-2 has-[:disabled]:opacity-50",
15 |       containerClassName
16 |     )}
17 |     className={cn("disabled:cursor-not-allowed", className)}
18 |     {...props}
19 |   />
20 | ))
21 | InputOTP.displayName = "InputOTP"
22 | 
23 | const InputOTPGroup = React.forwardRef<
24 |   React.ElementRef<"div">,
25 |   React.ComponentPropsWithoutRef<"div">
26 | >(({ className, ...props }, ref) => (
27 |   <div ref={ref} className={cn("flex items-center", className)} {...props} />
28 | ))
29 | InputOTPGroup.displayName = "InputOTPGroup"
30 | 
31 | const InputOTPSlot = React.forwardRef<
32 |   React.ElementRef<"div">,
33 |   React.ComponentPropsWithoutRef<"div"> & { index: number }
34 | >(({ index, className, ...props }, ref) => {
35 |   const inputOTPContext = React.useContext(OTPInputContext)
36 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
37 | 
38 |   return (
39 |     <div
40 |       ref={ref}
41 |       className={cn(
42 |         "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
43 |         isActive && "z-10 ring-2 ring-ring ring-offset-background",
44 |         className
45 |       )}
46 |       {...props}
47 |     >
48 |       {char}
49 |       {hasFakeCaret && (
50 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
51 |           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
52 |         </div>
53 |       )}
54 |     </div>
55 |   )
56 | })
57 | InputOTPSlot.displayName = "InputOTPSlot"
58 | 
59 | const InputOTPSeparator = React.forwardRef<
60 |   React.ElementRef<"div">,
61 |   React.ComponentPropsWithoutRef<"div">
62 | >(({ ...props }, ref) => (
63 |   <div ref={ref} role="separator" {...props}>
64 |     <Dot />
65 |   </div>
66 | ))
67 | InputOTPSeparator.displayName = "InputOTPSeparator"
68 | 
69 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
70 | 


--------------------------------------------------------------------------------
/website/client/src/components/usage-guide.tsx:
--------------------------------------------------------------------------------
 1 | import { useLanguage } from "@/hooks/use-language";
 2 | import { Key, Settings, Bot, BarChart3 } from "lucide-react";
 3 | 
 4 | const steps = [
 5 |   {
 6 |     number: "1",
 7 |     icon: Key,
 8 |     titleKey: "getApiKey",
 9 |     title: "🔑 获取 API Key",
10 |     description: "注册平台后，在用户中心复制您的API密钥"
11 |   },
12 |   {
13 |     number: "2",
14 |     icon: Settings,
15 |     titleKey: "configEndpoint",
16 |     title: "⚙ 配置 Endpoint",
17 |     description: "填写 API 地址到支持的应用程序中"
18 |   },
19 |   {
20 |     number: "3",
21 |     icon: Bot,
22 |     titleKey: "selectModel",
23 |     title: "🤖 选择模型",
24 |     description: "根据平台支持情况切换不同的AI模型"
25 |   },
26 |   {
27 |     number: "4",
28 |     icon: BarChart3,
29 |     titleKey: "monitorUsage",
30 |     title: "📊 用量监控",
31 |     description: "推荐使用客户端自带的用量限制功能"
32 |   }
33 | ];
34 | 
35 | export function UsageGuide() {
36 |   const { t } = useLanguage();
37 | 
38 |   return (
39 |     <section id="guide" className="py-16 bg-gray-50">
40 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41 |         <div className="text-center mb-12">
42 |           <h2 className="text-3xl font-bold text-gray-900 mb-4">
43 |             📖 {t('guide.title')}
44 |           </h2>
45 |           <p className="text-gray-600 max-w-2xl mx-auto">
46 |             {t('guide.description')}
47 |           </p>
48 |         </div>
49 | 
50 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
51 |           {steps.map((step) => {
52 |             const IconComponent = step.icon;
53 |             
54 |             return (
55 |               <div key={step.number} className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200">
56 |                 <div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
57 |                   <span className="text-white font-bold text-lg">{step.number}</span>
58 |                 </div>
59 |                 <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
60 |                   <IconComponent className="w-5 h-5 mr-2 text-blue-600" />
61 |                   {step.title}
62 |                 </h3>
63 |                 <p className="text-gray-600 text-sm leading-relaxed">
64 |                   {step.description}
65 |                 </p>
66 |               </div>
67 |             );
68 |           })}
69 |         </div>
70 |       </div>
71 |     </section>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>🌐 OpenAI / Claude / DeepSeek API Provider Directory</title>
 7 |   <meta http-equiv="refresh" content="0; url=index.zh-CN.html">
 8 |   <script>
 9 |     // Detect browser language and redirect
10 |     const browserLang = navigator.language || navigator.userLanguage;
11 |     const lang = browserLang.toLowerCase();
12 |     
13 |     if (lang.startsWith('en')) {
14 |       window.location.href = 'index.en.html';
15 |     } else if (lang.startsWith('ru')) {
16 |       window.location.href = 'index.ru.html';
17 |     } else if (lang.startsWith('fr')) {
18 |       window.location.href = 'index.fr.html';
19 |     } else {
20 |       window.location.href = 'index.zh-CN.html';
21 |     }
22 |   </script>
23 |   <style>
24 |     body {
25 |       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
26 |       display: flex;
27 |       justify-content: center;
28 |       align-items: center;
29 |       min-height: 100vh;
30 |       margin: 0;
31 |       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32 |       color: #fff;
33 |     }
34 |     .loading {
35 |       text-align: center;
36 |     }
37 |     .loading h1 {
38 |       font-size: 3em;
39 |       margin-bottom: 20px;
40 |     }
41 |     .loading p {
42 |       font-size: 1.2em;
43 |     }
44 |     .lang-links {
45 |       margin-top: 30px;
46 |     }
47 |     .lang-links a {
48 |       display: inline-block;
49 |       margin: 10px;
50 |       padding: 12px 24px;
51 |       background: rgba(255, 255, 255, 0.2);
52 |       color: #fff;
53 |       text-decoration: none;
54 |       border-radius: 8px;
55 |       font-weight: 600;
56 |       transition: all 0.3s;
57 |     }
58 |     .lang-links a:hover {
59 |       background: rgba(255, 255, 255, 0.3);
60 |       transform: translateY(-2px);
61 |     }
62 |   </style>
63 | </head>
64 | <body>
65 |   <div class="loading">
66 |     <h1>🌐</h1>
67 |     <p>Redirecting to your language version...</p>
68 |     <p>正在跳转到您的语言版本...</p>
69 |     <div class="lang-links">
70 |       <p>Or choose manually / 或手动选择：</p>
71 |       <a href="index.zh-CN.html">🇨🇳 中文</a>
72 |       <a href="index.en.html">🇬🇧 English</a>
73 |       <a href="index.ru.html">🇷🇺 Русский</a>
74 |       <a href="index.fr.html">🇫🇷 Français</a>
75 |     </div>
76 |   </div>
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/website/client/src/components/hero-section.tsx:
--------------------------------------------------------------------------------
 1 | import { useLanguage } from "@/hooks/use-language";
 2 | import { Badge } from "@/components/ui/badge";
 3 | import { AlertTriangle, Star, Scale, Code } from "lucide-react";
 4 | 
 5 | export function HeroSection() {
 6 |   const { t } = useLanguage();
 7 | 
 8 |   return (
 9 |     <section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
10 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
11 |         <div className="text-center">
12 |           <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
13 |             <span className="text-blue-600">🌐</span>
14 |             <span className="ml-2">{t('hero.title')}</span>
15 |           </h1>
16 |           <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
17 |             {t('hero.description')}
18 |           </p>
19 |           
20 |           {/* Project Badges */}
21 |           <div className="flex flex-wrap justify-center gap-3 mb-8">
22 |             <Badge variant="secondary" className="bg-white shadow-sm">
23 |               <Code className="w-4 h-4 mr-2 text-blue-600" />
24 |               Last Commit
25 |             </Badge>
26 |             <Badge variant="secondary" className="bg-white shadow-sm">
27 |               <Scale className="w-4 h-4 mr-2 text-green-500" />
28 |               MIT License
29 |             </Badge>
30 |             <Badge variant="secondary" className="bg-white shadow-sm">
31 |               <Star className="w-4 h-4 mr-2 text-yellow-500" />
32 |               Free & Open Source
33 |             </Badge>
34 |           </div>
35 | 
36 |           {/* Warning Notice */}
37 |           <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 max-w-4xl mx-auto">
38 |             <div className="flex items-start space-x-3">
39 |               <AlertTriangle className="text-yellow-600 mt-1 flex-shrink-0" size={20} />
40 |               <div className="text-left">
41 |                 <h3 className="font-semibold text-yellow-800 mb-2">{t('warning.title')}</h3>
42 |                 <p className="text-yellow-700 text-sm mb-2">
43 |                   {t('warning.content')}
44 |                 </p>
45 |                 <ul className="text-yellow-700 text-sm space-y-1">
46 |                   <li>• 遵守 OpenAI 使用条款</li>
47 |                   <li>• 遵守《生成式人工智能服务管理暂行办法》</li>
48 |                 </ul>
49 |               </div>
50 |             </div>
51 |           </div>
52 |         </div>
53 |       </div>
54 |     </section>
55 |   );
56 | }
57 | 


--------------------------------------------------------------------------------
/website/server/vite.ts:
--------------------------------------------------------------------------------
 1 | import express, { type Express } from "express";
 2 | import fs from "fs";
 3 | import path from "path";
 4 | import { createServer as createViteServer, createLogger } from "vite";
 5 | import { type Server } from "http";
 6 | import viteConfig from "../vite.config";
 7 | import { nanoid } from "nanoid";
 8 | 
 9 | const viteLogger = createLogger();
10 | 
11 | export function log(message: string, source = "express") {
12 |   const formattedTime = new Date().toLocaleTimeString("en-US", {
13 |     hour: "numeric",
14 |     minute: "2-digit",
15 |     second: "2-digit",
16 |     hour12: true,
17 |   });
18 | 
19 |   console.log(`${formattedTime} [${source}] ${message}`);
20 | }
21 | 
22 | export async function setupVite(app: Express, server: Server) {
23 |   const serverOptions = {
24 |     middlewareMode: true,
25 |     hmr: { server },
26 |     allowedHosts: true,
27 |   };
28 | 
29 |   const vite = await createViteServer({
30 |     ...viteConfig,
31 |     configFile: false,
32 |     customLogger: {
33 |       ...viteLogger,
34 |       error: (msg, options) => {
35 |         viteLogger.error(msg, options);
36 |         process.exit(1);
37 |       },
38 |     },
39 |     server: serverOptions,
40 |     appType: "custom",
41 |   });
42 | 
43 |   app.use(vite.middlewares);
44 |   app.use("*", async (req, res, next) => {
45 |     const url = req.originalUrl;
46 | 
47 |     try {
48 |       const clientTemplate = path.resolve(
49 |         import.meta.dirname,
50 |         "..",
51 |         "client",
52 |         "index.html",
53 |       );
54 | 
55 |       // always reload the index.html file from disk incase it changes
56 |       let template = await fs.promises.readFile(clientTemplate, "utf-8");
57 |       template = template.replace(
58 |         `src="/src/main.tsx"`,
59 |         `src="/src/main.tsx?v=${nanoid()}"`,
60 |       );
61 |       const page = await vite.transformIndexHtml(url, template);
62 |       res.status(200).set({ "Content-Type": "text/html" }).end(page);
63 |     } catch (e) {
64 |       vite.ssrFixStacktrace(e as Error);
65 |       next(e);
66 |     }
67 |   });
68 | }
69 | 
70 | export function serveStatic(app: Express) {
71 |   const distPath = path.resolve(import.meta.dirname, "public");
72 | 
73 |   if (!fs.existsSync(distPath)) {
74 |     throw new Error(
75 |       `Could not find the build directory: ${distPath}, make sure to build the client first`,
76 |     );
77 |   }
78 | 
79 |   app.use(express.static(distPath));
80 | 
81 |   // fall through to index.html if the file doesn't exist
82 |   app.use("*", (_req, res) => {
83 |     res.sendFile(path.resolve(distPath, "index.html"));
84 |   });
85 | }
86 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { ChevronLeft, ChevronRight } from "lucide-react"
 3 | import { DayPicker } from "react-day-picker"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { buttonVariants } from "@/components/ui/button"
 7 | 
 8 | export type CalendarProps = React.ComponentProps<typeof DayPicker>
 9 | 
10 | function Calendar({
11 |   className,
12 |   classNames,
13 |   showOutsideDays = true,
14 |   ...props
15 | }: CalendarProps) {
16 |   return (
17 |     <DayPicker
18 |       showOutsideDays={showOutsideDays}
19 |       className={cn("p-3", className)}
20 |       classNames={{
21 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
22 |         month: "space-y-4",
23 |         caption: "flex justify-center pt-1 relative items-center",
24 |         caption_label: "text-sm font-medium",
25 |         nav: "space-x-1 flex items-center",
26 |         nav_button: cn(
27 |           buttonVariants({ variant: "outline" }),
28 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
29 |         ),
30 |         nav_button_previous: "absolute left-1",
31 |         nav_button_next: "absolute right-1",
32 |         table: "w-full border-collapse space-y-1",
33 |         head_row: "flex",
34 |         head_cell:
35 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
36 |         row: "flex w-full mt-2",
37 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
38 |         day: cn(
39 |           buttonVariants({ variant: "ghost" }),
40 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
41 |         ),
42 |         day_range_end: "day-range-end",
43 |         day_selected:
44 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
45 |         day_today: "bg-accent text-accent-foreground",
46 |         day_outside:
47 |           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
48 |         day_disabled: "text-muted-foreground opacity-50",
49 |         day_range_middle:
50 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
51 |         day_hidden: "invisible",
52 |         ...classNames,
53 |       }}
54 |       components={{
55 |         IconLeft: ({ className, ...props }) => (
56 |           <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
57 |         ),
58 |         IconRight: ({ className, ...props }) => (
59 |           <ChevronRight className={cn("h-4 w-4", className)} {...props} />
60 |         ),
61 |       }}
62 |       {...props}
63 |     />
64 |   )
65 | }
66 | Calendar.displayName = "Calendar"
67 | 
68 | export { Calendar }
69 | 


--------------------------------------------------------------------------------
/website/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   darkMode: ["class"],
 5 |   content: ["./client/index.html", "./client/src/**/*.{js,jsx,ts,tsx}"],
 6 |   theme: {
 7 |     extend: {
 8 |       borderRadius: {
 9 |         lg: "var(--radius)",
10 |         md: "calc(var(--radius) - 2px)",
11 |         sm: "calc(var(--radius) - 4px)",
12 |       },
13 |       colors: {
14 |         background: "var(--background)",
15 |         foreground: "var(--foreground)",
16 |         card: {
17 |           DEFAULT: "var(--card)",
18 |           foreground: "var(--card-foreground)",
19 |         },
20 |         popover: {
21 |           DEFAULT: "var(--popover)",
22 |           foreground: "var(--popover-foreground)",
23 |         },
24 |         primary: {
25 |           DEFAULT: "var(--primary)",
26 |           foreground: "var(--primary-foreground)",
27 |         },
28 |         secondary: {
29 |           DEFAULT: "var(--secondary)",
30 |           foreground: "var(--secondary-foreground)",
31 |         },
32 |         muted: {
33 |           DEFAULT: "var(--muted)",
34 |           foreground: "var(--muted-foreground)",
35 |         },
36 |         accent: {
37 |           DEFAULT: "var(--accent)",
38 |           foreground: "var(--accent-foreground)",
39 |         },
40 |         destructive: {
41 |           DEFAULT: "var(--destructive)",
42 |           foreground: "var(--destructive-foreground)",
43 |         },
44 |         border: "var(--border)",
45 |         input: "var(--input)",
46 |         ring: "var(--ring)",
47 |         chart: {
48 |           "1": "var(--chart-1)",
49 |           "2": "var(--chart-2)",
50 |           "3": "var(--chart-3)",
51 |           "4": "var(--chart-4)",
52 |           "5": "var(--chart-5)",
53 |         },
54 |         sidebar: {
55 |           DEFAULT: "var(--sidebar-background)",
56 |           foreground: "var(--sidebar-foreground)",
57 |           primary: "var(--sidebar-primary)",
58 |           "primary-foreground": "var(--sidebar-primary-foreground)",
59 |           accent: "var(--sidebar-accent)",
60 |           "accent-foreground": "var(--sidebar-accent-foreground)",
61 |           border: "var(--sidebar-border)",
62 |           ring: "var(--sidebar-ring)",
63 |         },
64 |       },
65 |       keyframes: {
66 |         "accordion-down": {
67 |           from: {
68 |             height: "0",
69 |           },
70 |           to: {
71 |             height: "var(--radix-accordion-content-height)",
72 |           },
73 |         },
74 |         "accordion-up": {
75 |           from: {
76 |             height: "var(--radix-accordion-content-height)",
77 |           },
78 |           to: {
79 |             height: "0",
80 |           },
81 |         },
82 |       },
83 |       animation: {
84 |         "accordion-down": "accordion-down 0.2s ease-out",
85 |         "accordion-up": "accordion-up 0.2s ease-out",
86 |       },
87 |     },
88 |   },
89 |   plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
90 | } satisfies Config;
91 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 13 | Breadcrumb.displayName = "Breadcrumb"
 14 | 
 15 | const BreadcrumbList = React.forwardRef<
 16 |   HTMLOListElement,
 17 |   React.ComponentPropsWithoutRef<"ol">
 18 | >(({ className, ...props }, ref) => (
 19 |   <ol
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | BreadcrumbList.displayName = "BreadcrumbList"
 29 | 
 30 | const BreadcrumbItem = React.forwardRef<
 31 |   HTMLLIElement,
 32 |   React.ComponentPropsWithoutRef<"li">
 33 | >(({ className, ...props }, ref) => (
 34 |   <li
 35 |     ref={ref}
 36 |     className={cn("inline-flex items-center gap-1.5", className)}
 37 |     {...props}
 38 |   />
 39 | ))
 40 | BreadcrumbItem.displayName = "BreadcrumbItem"
 41 | 
 42 | const BreadcrumbLink = React.forwardRef<
 43 |   HTMLAnchorElement,
 44 |   React.ComponentPropsWithoutRef<"a"> & {
 45 |     asChild?: boolean
 46 |   }
 47 | >(({ asChild, className, ...props }, ref) => {
 48 |   const Comp = asChild ? Slot : "a"
 49 | 
 50 |   return (
 51 |     <Comp
 52 |       ref={ref}
 53 |       className={cn("transition-colors hover:text-foreground", className)}
 54 |       {...props}
 55 |     />
 56 |   )
 57 | })
 58 | BreadcrumbLink.displayName = "BreadcrumbLink"
 59 | 
 60 | const BreadcrumbPage = React.forwardRef<
 61 |   HTMLSpanElement,
 62 |   React.ComponentPropsWithoutRef<"span">
 63 | >(({ className, ...props }, ref) => (
 64 |   <span
 65 |     ref={ref}
 66 |     role="link"
 67 |     aria-disabled="true"
 68 |     aria-current="page"
 69 |     className={cn("font-normal text-foreground", className)}
 70 |     {...props}
 71 |   />
 72 | ))
 73 | BreadcrumbPage.displayName = "BreadcrumbPage"
 74 | 
 75 | const BreadcrumbSeparator = ({
 76 |   children,
 77 |   className,
 78 |   ...props
 79 | }: React.ComponentProps<"li">) => (
 80 |   <li
 81 |     role="presentation"
 82 |     aria-hidden="true"
 83 |     className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
 84 |     {...props}
 85 |   >
 86 |     {children ?? <ChevronRight />}
 87 |   </li>
 88 | )
 89 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 90 | 
 91 | const BreadcrumbEllipsis = ({
 92 |   className,
 93 |   ...props
 94 | }: React.ComponentProps<"span">) => (
 95 |   <span
 96 |     role="presentation"
 97 |     aria-hidden="true"
 98 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
 99 |     {...props}
100 |   >
101 |     <MoreHorizontal className="h-4 w-4" />
102 |     <span className="sr-only">More</span>
103 |   </span>
104 | )
105 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106 | 
107 | export {
108 |   Breadcrumb,
109 |   BreadcrumbList,
110 |   BreadcrumbItem,
111 |   BreadcrumbLink,
112 |   BreadcrumbPage,
113 |   BreadcrumbSeparator,
114 |   BreadcrumbEllipsis,
115 | }
116 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { ButtonProps, buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Pagination.displayName = "Pagination"
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ))
 27 | PaginationContent.displayName = "PaginationContent"
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("", className)} {...props} />
 34 | ))
 35 | PaginationItem.displayName = "PaginationItem"
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | PaginationLink.displayName = "PaginationLink"
 61 | 
 62 | const PaginationPrevious = ({
 63 |   className,
 64 |   ...props
 65 | }: React.ComponentProps<typeof PaginationLink>) => (
 66 |   <PaginationLink
 67 |     aria-label="Go to previous page"
 68 |     size="default"
 69 |     className={cn("gap-1 pl-2.5", className)}
 70 |     {...props}
 71 |   >
 72 |     <ChevronLeft className="h-4 w-4" />
 73 |     <span>Previous</span>
 74 |   </PaginationLink>
 75 | )
 76 | PaginationPrevious.displayName = "PaginationPrevious"
 77 | 
 78 | const PaginationNext = ({
 79 |   className,
 80 |   ...props
 81 | }: React.ComponentProps<typeof PaginationLink>) => (
 82 |   <PaginationLink
 83 |     aria-label="Go to next page"
 84 |     size="default"
 85 |     className={cn("gap-1 pr-2.5", className)}
 86 |     {...props}
 87 |   >
 88 |     <span>Next</span>
 89 |     <ChevronRight className="h-4 w-4" />
 90 |   </PaginationLink>
 91 | )
 92 | PaginationNext.displayName = "PaginationNext"
 93 | 
 94 | const PaginationEllipsis = ({
 95 |   className,
 96 |   ...props
 97 | }: React.ComponentProps<"span">) => (
 98 |   <span
 99 |     aria-hidden
100 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
101 |     {...props}
102 |   >
103 |     <MoreHorizontal className="h-4 w-4" />
104 |     <span className="sr-only">More pages</span>
105 |   </span>
106 | )
107 | PaginationEllipsis.displayName = "PaginationEllipsis"
108 | 
109 | export {
110 |   Pagination,
111 |   PaginationContent,
112 |   PaginationEllipsis,
113 |   PaginationItem,
114 |   PaginationLink,
115 |   PaginationNext,
116 |   PaginationPrevious,
117 | }
118 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 | 


--------------------------------------------------------------------------------
/website/client/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | :root {
  6 |   --background: hsl(0, 0%, 100%);
  7 |   --foreground: hsl(20, 14.3%, 4.1%);
  8 |   --muted: hsl(60, 4.8%, 95.9%);
  9 |   --muted-foreground: hsl(25, 5.3%, 44.7%);
 10 |   --popover: hsl(0, 0%, 100%);
 11 |   --popover-foreground: hsl(20, 14.3%, 4.1%);
 12 |   --card: hsl(0, 0%, 100%);
 13 |   --card-foreground: hsl(20, 14.3%, 4.1%);
 14 |   --border: hsl(20, 5.9%, 90%);
 15 |   --input: hsl(20, 5.9%, 90%);
 16 |   --primary: hsl(207, 90%, 54%);
 17 |   --primary-foreground: hsl(211, 100%, 99%);
 18 |   --secondary: hsl(60, 4.8%, 95.9%);
 19 |   --secondary-foreground: hsl(24, 9.8%, 10%);
 20 |   --accent: hsl(60, 4.8%, 95.9%);
 21 |   --accent-foreground: hsl(24, 9.8%, 10%);
 22 |   --destructive: hsl(0, 84.2%, 60.2%);
 23 |   --destructive-foreground: hsl(60, 9.1%, 97.8%);
 24 |   --ring: hsl(20, 14.3%, 4.1%);
 25 |   --radius: 0.5rem;
 26 | }
 27 | 
 28 | .dark {
 29 |   --background: hsl(240, 10%, 3.9%);
 30 |   --foreground: hsl(0, 0%, 98%);
 31 |   --muted: hsl(240, 3.7%, 15.9%);
 32 |   --muted-foreground: hsl(240, 5%, 64.9%);
 33 |   --popover: hsl(240, 10%, 3.9%);
 34 |   --popover-foreground: hsl(0, 0%, 98%);
 35 |   --card: hsl(240, 10%, 3.9%);
 36 |   --card-foreground: hsl(0, 0%, 98%);
 37 |   --border: hsl(240, 3.7%, 15.9%);
 38 |   --input: hsl(240, 3.7%, 15.9%);
 39 |   --primary: hsl(207, 90%, 54%);
 40 |   --primary-foreground: hsl(211, 100%, 99%);
 41 |   --secondary: hsl(240, 3.7%, 15.9%);
 42 |   --secondary-foreground: hsl(0, 0%, 98%);
 43 |   --accent: hsl(240, 3.7%, 15.9%);
 44 |   --accent-foreground: hsl(0, 0%, 98%);
 45 |   --destructive: hsl(0, 62.8%, 30.6%);
 46 |   --destructive-foreground: hsl(0, 0%, 98%);
 47 |   --ring: hsl(240, 4.9%, 83.9%);
 48 |   --radius: 0.5rem;
 49 | }
 50 | 
 51 | @layer base {
 52 |   * {
 53 |     @apply border-border;
 54 |   }
 55 | 
 56 |   body {
 57 |     @apply font-sans antialiased bg-background text-foreground;
 58 |   }
 59 | }
 60 | 
 61 | @layer utilities {
 62 |   .line-clamp-2 {
 63 |     display: -webkit-box;
 64 |     -webkit-line-clamp: 2;
 65 |     -webkit-box-orient: vertical;
 66 |     overflow: hidden;
 67 |   }
 68 | 
 69 |   .animate-fade-in {
 70 |     animation: fadeIn 0.6s ease-out forwards;
 71 |   }
 72 | 
 73 |   @keyframes fadeIn {
 74 |     from {
 75 |       opacity: 0;
 76 |       transform: translateY(20px);
 77 |     }
 78 |     to {
 79 |       opacity: 1;
 80 |       transform: translateY(0);
 81 |     }
 82 |   }
 83 | }
 84 | 
 85 | /* Custom scrollbar */
 86 | ::-webkit-scrollbar {
 87 |   width: 8px;
 88 |   height: 8px;
 89 | }
 90 | 
 91 | ::-webkit-scrollbar-track {
 92 |   background: hsl(var(--muted));
 93 | }
 94 | 
 95 | ::-webkit-scrollbar-thumb {
 96 |   background: hsl(var(--muted-foreground));
 97 |   border-radius: 4px;
 98 | }
 99 | 
100 | ::-webkit-scrollbar-thumb:hover {
101 |   background: hsl(var(--foreground));
102 | }
103 | 
104 | /* Smooth scrolling */
105 | html {
106 |   scroll-behavior: smooth;
107 | }
108 | 
109 | /* Focus styles */
110 | .focus\:ring-2:focus {
111 |   outline: 2px solid transparent;
112 |   outline-offset: 2px;
113 |   box-shadow: 0 0 0 2px hsl(var(--ring));
114 | }
115 | 
116 | /* Hover effects */
117 | .hover-lift:hover {
118 |   transform: translateY(-2px);
119 |   box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
120 | }
121 | 
122 | /* Responsive table */
123 | @media (max-width: 1024px) {
124 |   .table-container {
125 |     overflow-x: auto;
126 |     -webkit-overflow-scrolling: touch;
127 |   }
128 |   
129 |   .table-container::-webkit-scrollbar {
130 |     height: 6px;
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Drawer as DrawerPrimitive } from "vaul"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const Drawer = ({
  9 |   shouldScaleBackground = true,
 10 |   ...props
 11 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 12 |   <DrawerPrimitive.Root
 13 |     shouldScaleBackground={shouldScaleBackground}
 14 |     {...props}
 15 |   />
 16 | )
 17 | Drawer.displayName = "Drawer"
 18 | 
 19 | const DrawerTrigger = DrawerPrimitive.Trigger
 20 | 
 21 | const DrawerPortal = DrawerPrimitive.Portal
 22 | 
 23 | const DrawerClose = DrawerPrimitive.Close
 24 | 
 25 | const DrawerOverlay = React.forwardRef<
 26 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 27 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 28 | >(({ className, ...props }, ref) => (
 29 |   <DrawerPrimitive.Overlay
 30 |     ref={ref}
 31 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 32 |     {...props}
 33 |   />
 34 | ))
 35 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 36 | 
 37 | const DrawerContent = React.forwardRef<
 38 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 39 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 40 | >(({ className, children, ...props }, ref) => (
 41 |   <DrawerPortal>
 42 |     <DrawerOverlay />
 43 |     <DrawerPrimitive.Content
 44 |       ref={ref}
 45 |       className={cn(
 46 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 47 |         className
 48 |       )}
 49 |       {...props}
 50 |     >
 51 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 52 |       {children}
 53 |     </DrawerPrimitive.Content>
 54 |   </DrawerPortal>
 55 | ))
 56 | DrawerContent.displayName = "DrawerContent"
 57 | 
 58 | const DrawerHeader = ({
 59 |   className,
 60 |   ...props
 61 | }: React.HTMLAttributes<HTMLDivElement>) => (
 62 |   <div
 63 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 64 |     {...props}
 65 |   />
 66 | )
 67 | DrawerHeader.displayName = "DrawerHeader"
 68 | 
 69 | const DrawerFooter = ({
 70 |   className,
 71 |   ...props
 72 | }: React.HTMLAttributes<HTMLDivElement>) => (
 73 |   <div
 74 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 75 |     {...props}
 76 |   />
 77 | )
 78 | DrawerFooter.displayName = "DrawerFooter"
 79 | 
 80 | const DrawerTitle = React.forwardRef<
 81 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 82 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 83 | >(({ className, ...props }, ref) => (
 84 |   <DrawerPrimitive.Title
 85 |     ref={ref}
 86 |     className={cn(
 87 |       "text-lg font-semibold leading-none tracking-tight",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 94 | 
 95 | const DrawerDescription = React.forwardRef<
 96 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 97 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 98 | >(({ className, ...props }, ref) => (
 99 |   <DrawerPrimitive.Description
100 |     ref={ref}
101 |     className={cn("text-sm text-muted-foreground", className)}
102 |     {...props}
103 |   />
104 | ))
105 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
106 | 
107 | export {
108 |   Drawer,
109 |   DrawerPortal,
110 |   DrawerOverlay,
111 |   DrawerTrigger,
112 |   DrawerClose,
113 |   DrawerContent,
114 |   DrawerHeader,
115 |   DrawerFooter,
116 |   DrawerTitle,
117 |   DrawerDescription,
118 | }
119 | 


--------------------------------------------------------------------------------
/website/client/src/components/contribute-section.tsx:
--------------------------------------------------------------------------------
 1 | import { useLanguage } from "@/hooks/use-language";
 2 | import { Button } from "@/components/ui/button";
 3 | import { Plus, Book, Code, Globe, Github, Bug } from "lucide-react";
 4 | 
 5 | const contributions = [
 6 |   {
 7 |     icon: Plus,
 8 |     titleKey: "addProvider",
 9 |     title: "✨ 添加新 API 提供商",
10 |     description: "需稳定运行 ≥ 3 天，提供详细的功能说明和使用方法",
11 |     color: "bg-green-100 text-green-600"
12 |   },
13 |   {
14 |     icon: Book,
15 |     titleKey: "addTutorial",
16 |     title: "🧰 补充使用教程",
17 |     description: "包括配置截图、录屏演示等详细的使用指导",
18 |     color: "bg-blue-100 text-blue-600"
19 |   },
20 |   {
21 |     icon: Code,
22 |     titleKey: "developScript",
23 |     title: "🧪 开发验证脚本",
24 |     description: "自动检测失效平台，提高维护效率",
25 |     color: "bg-purple-100 text-purple-600"
26 |   },
27 |   {
28 |     icon: Globe,
29 |     titleKey: "translate",
30 |     title: "🌍 多语言翻译",
31 |     description: "如：英文、日文、韩文等语言版本的翻译工作",
32 |     color: "bg-orange-100 text-orange-600"
33 |   }
34 | ];
35 | 
36 | export function ContributeSection() {
37 |   const { t } = useLanguage();
38 | 
39 |   return (
40 |     <section id="contribute" className="py-16 bg-white">
41 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42 |         <div className="text-center mb-12">
43 |           <h2 className="text-3xl font-bold text-gray-900 mb-4">
44 |             🙌 {t('contribute.title')}
45 |           </h2>
46 |           <p className="text-gray-600 max-w-2xl mx-auto">
47 |             {t('contribute.description')}
48 |           </p>
49 |         </div>
50 | 
51 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
52 |           {contributions.map((contribution, index) => {
53 |             const IconComponent = contribution.icon;
54 |             
55 |             return (
56 |               <div key={index} className="flex items-start space-x-4">
57 |                 <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${contribution.color}`}>
58 |                   <IconComponent size={16} />
59 |                 </div>
60 |                 <div>
61 |                   <h3 className="text-lg font-semibold text-gray-900 mb-2">
62 |                     {contribution.title}
63 |                   </h3>
64 |                   <p className="text-gray-600 text-sm">
65 |                     {contribution.description}
66 |                   </p>
67 |                 </div>
68 |               </div>
69 |             );
70 |           })}
71 |         </div>
72 | 
73 |         <div className="text-center mt-12">
74 |           <div className="bg-gray-50 rounded-lg p-6 inline-block">
75 |             <p className="text-gray-700 mb-4">请提交 Pull Request 或 Issue，我们将尽快处理！</p>
76 |             <div className="flex justify-center space-x-4">
77 |               <Button 
78 |                 className="bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200"
79 |                 onClick={() => window.open('https://github.com/TechnologyStar/Openai-Claude-Deepseek-API-provider', '_blank')}
80 |               >
81 |                 <Github className="mr-2" size={16} />
82 |                 GitHub
83 |               </Button>
84 |               <Button 
85 |                 variant="outline"
86 |                 className="border-gray-600 text-gray-600 hover:bg-gray-50 transition-colors duration-200"
87 |                 onClick={() => window.open('https://github.com/TechnologyStar/Openai-Claude-Deepseek-API-provider/issues', '_blank')}
88 |               >
89 |                 <Bug className="mr-2" size={16} />
90 |                 Report Issue
91 |               </Button>
92 |             </div>
93 |           </div>
94 |         </div>
95 |       </div>
96 |     </section>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/website/attached_assets/Pasted--Logo-lionbridge-com-weglot-c-1750993147083_1750993147084.txt:
--------------------------------------------------------------------------------
  1 | 网站应采用一致的全局模板保证各语言界面风格统一。页面风格要简洁明快，品牌元素（Logo、色彩、字体）在各语种页面中保持一致，这可以提高用户识别度和信任感
  2 | lionbridge.com
  3 | weglot.com
  4 | 。推荐使用响应式设计与灵活布局，以便不同语言（包括中、英、俄、法等）文字长度变化时，都能自动适配界面而不破坏排版。 图：带有全球旗帜的地图示意网站面向全球用户。
  5 | 全局模板：采用相同布局模板，各语种页面仅作必要定制，避免重复开发，确保品牌形象一致
  6 | lionbridge.com
  7 | weglot.com
  8 | 。例如，所有语言版本应使用相同的导航栏、页面结构和配色方案。
  9 | 简洁风格：界面应保持简洁，避免过度复杂的交互（如多层级步骤），否则会增加后续本地化难度
 10 | rubric.com
 11 | 。文本用语应清晰易懂，并预留足够空间，因为多数语言（如德语、法语）翻译后比英语或中文占用更大篇幅
 12 | rubric.com
 13 | smart-interface-design-patterns.com
 14 | 。
 15 | 语言切换与导航设计
 16 | 页面顶部或底部要放置语言切换器，位置醒目且易于访问
 17 | weglot.com
 18 | lionbridge.com
 19 | 。常见做法是在顶栏右上角或页脚提供下拉菜单，让用户能够随时更换语言。语言列表应以原生语言名称显示（如「English」、「中文」、「Русский」、「Français」），而不是使用国旗图标，以避免同一语言对应多个国家（如阿拉伯语）或多语言国家的歧义
 20 | lionbridge.com
 21 | weglot.com
 22 | 。也可以根据需要结合自动检测（根据浏览器语言或地区）与手动选择，使用户体验更友好
 23 | rubric.com
 24 | rubric.com
 25 | 。
 26 | 易查找：确保切换器在每页均可见；使用下拉框或固定按钮形式都可，但要直观标明“语言”或使用地球等通用图标。
 27 | weglot.com
 28 | 语言名称：始终用目标语言自身的名称标识（如「Deutsch」而非“German”）
 29 | weglot.com
 30 | ；避免使用国家/地区标志图标来代表语言
 31 | lionbridge.com
 32 | 。
 33 | 导航一致：导航菜单、侧边栏等在不同语言间结构相同，各项功能（如 API 列表、使用指南、失效列表等）应一一对应，保持布局和层级一致性。
 34 | 图：手机应用中的语言选择界面示例（原生语言名称）。
 35 | 内容展示与数据表格
 36 | 项目的核心是第三方 API 提供商列表，界面展示时可采用表格或卡片式列表。表格设计应遵循可读性和响应式原则
 37 | uxpin.com
 38 | uxpin.com
 39 | ：
 40 | 清晰表头与排版：每列有明确表头（如「序号」「网站」「链接」「标签」「备注」）。使用可分辨的字体、适当的行列间距，以及斑马纹等视觉分隔
 41 | uxpin.com
 42 | uxpin.com
 43 | ，以提高扫描效率。
 44 | 信息层级：重要信息置于左侧（如网站名和链接），按重要性合理排序
 45 | uxpin.com
 46 | 。标签列可使用图标+文字（例如🔓 表示解锁模式，🆓 表示免费），使属性一目了然。链接列可以提供超链接或复制按钮方便访问。
 47 | 响应式布局：表格在小屏设备上应自动适应。可以在移动端使用水平滚动或卡片布局，确保阅读体验不受影响
 48 | uxpin.com
 49 | rubric.com
 50 | 。
 51 | 辅助功能：为表格添加 <caption>、表头作用域（<th scope>）等 HTML 标记，以提升可访问性；确保文字大小、颜色对比度满足无障碍标准，便于不同用户群体使用
 52 | uxpin.com
 53 | 。
 54 | 若列表数据较长，可加入搜索和筛选功能，让用户按标签（如免费、有优惠、支持模型）过滤平台；或者提供分页、排序等交互，方便快速定位目标项
 55 | uxpin.com
 56 | uxpin.com
 57 | 。
 58 | 图标、徽章与交互元素
 59 | 在品牌和表格基础上，可使用**徽章（Badge）**或图标来突出信息，但要保持简洁不繁琐
 60 | cieden.com
 61 | cieden.com
 62 | ：
 63 | 状态徽章：在表格“标签”列为各平台添加状态徽章，如“🆓”标记免费，“✔”标记已验证，“💰”表示付费等。使用简短文字或符号加图标的组合，以提高可读性
 64 | cieden.com
 65 | 。
 66 | 一致风格：徽章大小、形状和颜色应与整体UI风格一致，不抢夺主体内容注意力。图标选用各文化通用的符号，避免含义可能产生歧义的表情或国旗
 67 | cieden.com
 68 | rubric.com
 69 | 。
 70 | 可交互提示：对重要按钮（如“复制链接”、“更多详情”等）使用悬浮提示（Tooltip）说明其功能，或增加点击反馈。确保交互元素（链接、按钮）明显可识别，并使用对比色或下划线加以区分。
 71 | 响应式布局与无障碍
 72 | 网站必须响应式设计，在不同分辨率和设备上均能良好展示
 73 | uxpin.com
 74 | rubric.com
 75 | 。设计时要考虑文字长度变化对布局的影响
 76 | smart-interface-design-patterns.com
 77 | ：例如中文标题较短但德语或俄语可能更长，应留白以防文字溢出。可以通过**伪本地化（pseudolocalization）**测试工具，模拟文本拉长后界面表现，及时调整布局。
 78 | smart-interface-design-patterns.com
 79 | 移动端优先：鉴于手机用户众多，设计要保证在小屏幕下菜单可折叠、表格可横向滑动或变换为卡片显示
 80 | rubric.com
 81 | uxpin.com
 82 | 。关键按钮和链接区域留足点触尺寸，使用弹性布局避免内容被遮挡。
 83 | 字体与图形：选择支持多语言字符集的字体，尤其要涵盖汉字、西里尔字母、拉丁字母等字符。考虑界面元素在不同语言下的视觉效果（如翻译后图像描述是否适用）。
 84 | 无障碍：所有图片应提供 alt 文本说明，表格提供 caption 说明。导航和互动元素使用语义 HTML（如 <nav>, <button>）并保证键盘可操作，以方便使用辅助技术的用户。
 85 | 国际化和本地化细节
 86 | 从项目一开始就规划国际化非常关键
 87 | rubric.com
 88 | 。以下是一些关键点：
 89 | 避免拼接文本：设计界面时尽量不将可变部分和固定文本简单拼接。各语言语法顺序不同，拼接容易导致翻译错误
 90 | rubric.com
 91 | 。可用占位符方式或整体短语来避免翻译紊乱。
 92 | 文化差异：图标、颜色和习惯用语在不同文化中含义不同。使用前测试图标象征意义，避免敏感色彩（如部分地区避免红色、白色组合），确保所用图像和例子在目标市场可接受。
 93 | RTL 支持：若未来支持阿拉伯语、希伯来语等右到左语言，需要提前考虑整个界面水平翻转的能力
 94 | smart-interface-design-patterns.com
 95 | 。字体选择、组件方向（如切换器下拉打开方向）都需适配。
 96 | 测试与迭代：利用多语言测试和用户反馈，不断改进。可以请不同母语的同事或用户试用并提出意见，确保文本无歧义、界面易用。
 97 | 总之，高质量多语言网站应以一致性和简洁性为核心，结合响应式布局、清晰交互和国际化设计，确保无论用何种语言访问，用户都能获得流畅、直观的体验
 98 | weglot.com
 99 | rubric.com
100 | 。 主要设计要点：
101 | 使用全局模板保证品牌和布局一致；界面简洁，考虑文本长度差异
102 | lionbridge.com
103 | rubric.com
104 | 。
105 | 语言切换器显眼可点，列出语言本名，避免单用国旗
106 | weglot.com
107 | lionbridge.com
108 | 。
109 | 列表或表格遵循可读性原则：清晰表头、固定首行、适度空白、斑马线划分
110 | uxpin.com
111 | uxpin.com
112 | 。
113 | 徽章和图标要简练、可理解，提示性功能使用悬停提示
114 | cieden.com
115 | rubric.com
116 | 。
117 | 界面需响应式且无障碍：在不同设备上都能正常操作，并支持辅助技术
118 | uxpin.com
119 | rubric.com
120 | 。
121 | 从设计阶段即支持国际化，预留布局灵活性，避免拼接文本，以便后续翻译和语言扩展


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "rest-express",
  3 |   "version": "1.0.0",
  4 |   "type": "module",
  5 |   "license": "MIT",
  6 |   "scripts": {
  7 |     "dev": "NODE_ENV=development tsx server/index.ts",
  8 |     "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist",
  9 |     "start": "NODE_ENV=production node dist/index.js",
 10 |     "check": "tsc",
 11 |     "db:push": "drizzle-kit push"
 12 |   },
 13 |   "dependencies": {
 14 |     "@hookform/resolvers": "^3.10.0",
 15 |     "@jridgewell/trace-mapping": "^0.3.25",
 16 |     "@neondatabase/serverless": "^0.10.4",
 17 |     "@radix-ui/react-accordion": "^1.2.4",
 18 |     "@radix-ui/react-alert-dialog": "^1.1.7",
 19 |     "@radix-ui/react-aspect-ratio": "^1.1.3",
 20 |     "@radix-ui/react-avatar": "^1.1.4",
 21 |     "@radix-ui/react-checkbox": "^1.1.5",
 22 |     "@radix-ui/react-collapsible": "^1.1.4",
 23 |     "@radix-ui/react-context-menu": "^2.2.7",
 24 |     "@radix-ui/react-dialog": "^1.1.7",
 25 |     "@radix-ui/react-dropdown-menu": "^2.1.7",
 26 |     "@radix-ui/react-hover-card": "^1.1.7",
 27 |     "@radix-ui/react-label": "^2.1.3",
 28 |     "@radix-ui/react-menubar": "^1.1.7",
 29 |     "@radix-ui/react-navigation-menu": "^1.2.6",
 30 |     "@radix-ui/react-popover": "^1.1.7",
 31 |     "@radix-ui/react-progress": "^1.1.7",
 32 |     "@radix-ui/react-radio-group": "^1.2.4",
 33 |     "@radix-ui/react-scroll-area": "^1.2.4",
 34 |     "@radix-ui/react-select": "^2.1.7",
 35 |     "@radix-ui/react-separator": "^1.1.3",
 36 |     "@radix-ui/react-slider": "^1.2.4",
 37 |     "@radix-ui/react-slot": "^1.2.0",
 38 |     "@radix-ui/react-switch": "^1.1.4",
 39 |     "@radix-ui/react-tabs": "^1.1.4",
 40 |     "@radix-ui/react-toast": "^1.2.7",
 41 |     "@radix-ui/react-toggle": "^1.1.3",
 42 |     "@radix-ui/react-toggle-group": "^1.1.3",
 43 |     "@radix-ui/react-tooltip": "^1.2.0",
 44 |     "@tanstack/react-query": "^5.60.5",
 45 |     "class-variance-authority": "^0.7.1",
 46 |     "clsx": "^2.1.1",
 47 |     "cmdk": "^1.1.1",
 48 |     "connect-pg-simple": "^10.0.0",
 49 |     "date-fns": "^3.6.0",
 50 |     "drizzle-orm": "^0.39.1",
 51 |     "drizzle-zod": "^0.7.0",
 52 |     "embla-carousel-react": "^8.6.0",
 53 |     "express": "^4.21.2",
 54 |     "express-session": "^1.18.1",
 55 |     "framer-motion": "^11.13.1",
 56 |     "input-otp": "^1.4.2",
 57 |     "lucide-react": "^0.453.0",
 58 |     "memorystore": "^1.6.7",
 59 |     "next-themes": "^0.4.6",
 60 |     "passport": "^0.7.0",
 61 |     "passport-local": "^1.0.0",
 62 |     "react": "^18.3.1",
 63 |     "react-day-picker": "^8.10.1",
 64 |     "react-dom": "^18.3.1",
 65 |     "react-hook-form": "^7.55.0",
 66 |     "react-icons": "^5.4.0",
 67 |     "react-resizable-panels": "^2.1.7",
 68 |     "recharts": "^2.15.2",
 69 |     "tailwind-merge": "^2.6.0",
 70 |     "tailwindcss-animate": "^1.0.7",
 71 |     "tw-animate-css": "^1.2.5",
 72 |     "vaul": "^1.1.2",
 73 |     "wouter": "^3.3.5",
 74 |     "ws": "^8.18.0",
 75 |     "zod": "^3.24.2",
 76 |     "zod-validation-error": "^3.4.0"
 77 |   },
 78 |   "devDependencies": {
 79 |     "@replit/vite-plugin-cartographer": "^0.2.7",
 80 |     "@replit/vite-plugin-runtime-error-modal": "^0.0.3",
 81 |     "@tailwindcss/typography": "^0.5.15",
 82 |     "@tailwindcss/vite": "^4.1.3",
 83 |     "@types/connect-pg-simple": "^7.0.3",
 84 |     "@types/express": "4.17.21",
 85 |     "@types/express-session": "^1.18.0",
 86 |     "@types/node": "20.16.11",
 87 |     "@types/passport": "^1.0.16",
 88 |     "@types/passport-local": "^1.0.38",
 89 |     "@types/react": "^18.3.11",
 90 |     "@types/react-dom": "^18.3.1",
 91 |     "@types/ws": "^8.5.13",
 92 |     "@vitejs/plugin-react": "^4.3.2",
 93 |     "autoprefixer": "^10.4.20",
 94 |     "drizzle-kit": "^0.30.4",
 95 |     "esbuild": "^0.25.0",
 96 |     "postcss": "^8.4.47",
 97 |     "tailwindcss": "^3.4.17",
 98 |     "tsx": "^4.19.1",
 99 |     "typescript": "5.6.3",
100 |     "vite": "^5.4.19"
101 |   },
102 |   "optionalDependencies": {
103 |     "bufferutil": "^4.0.8"
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/website/client/src/components/footer.tsx:
--------------------------------------------------------------------------------
  1 | import { useLanguage } from "@/hooks/use-language";
  2 | import { Globe, Github, Twitter } from "lucide-react";
  3 | 
  4 | export function Footer() {
  5 |   const { t } = useLanguage();
  6 | 
  7 |   const scrollToSection = (sectionId: string) => {
  8 |     const element = document.getElementById(sectionId);
  9 |     if (element) {
 10 |       element.scrollIntoView({ behavior: 'smooth', block: 'start' });
 11 |     }
 12 |   };
 13 | 
 14 |   return (
 15 |     <footer className="bg-gray-900 text-gray-300 py-12">
 16 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 17 |         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
 18 |           <div>
 19 |             <div className="flex items-center space-x-2 mb-4">
 20 |               <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
 21 |                 <Globe className="w-4 h-4 text-white" />
 22 |               </div>
 23 |               <span className="text-xl font-bold text-white">API Directory</span>
 24 |             </div>
 25 |             <p className="text-sm text-gray-400 mb-4">
 26 |               精选的第三方API提供商目录，供学习研究使用。
 27 |             </p>
 28 |             <div className="flex space-x-4">
 29 |               <button
 30 |                 onClick={() => window.open('https://github.com/TechnologyStar/Openai-Claude-Deepseek-API-provider', '_blank')}
 31 |                 className="text-gray-400 hover:text-white transition-colors duration-200"
 32 |               >
 33 |                 <Github size={20} />
 34 |               </button>
 35 |               <button className="text-gray-400 hover:text-white transition-colors duration-200">
 36 |                 <Twitter size={20} />
 37 |               </button>
 38 |             </div>
 39 |           </div>
 40 | 
 41 |           <div>
 42 |             <h3 className="text-lg font-semibold text-white mb-4">
 43 |               {t('footer.links')}
 44 |             </h3>
 45 |             <ul className="space-y-2">
 46 |               <li>
 47 |                 <button
 48 |                   onClick={() => scrollToSection('providers')}
 49 |                   className="text-gray-400 hover:text-white transition-colors duration-200"
 50 |                 >
 51 |                   {t('footer.providers')}
 52 |                 </button>
 53 |               </li>
 54 |               <li>
 55 |                 <button
 56 |                   onClick={() => scrollToSection('apps')}
 57 |                   className="text-gray-400 hover:text-white transition-colors duration-200"
 58 |                 >
 59 |                   {t('footer.apps')}
 60 |                 </button>
 61 |               </li>
 62 |               <li>
 63 |                 <button
 64 |                   onClick={() => scrollToSection('guide')}
 65 |                   className="text-gray-400 hover:text-white transition-colors duration-200"
 66 |                 >
 67 |                   {t('footer.guide')}
 68 |                 </button>
 69 |               </li>
 70 |               <li>
 71 |                 <button
 72 |                   onClick={() => scrollToSection('contribute')}
 73 |                   className="text-gray-400 hover:text-white transition-colors duration-200"
 74 |                 >
 75 |                   {t('footer.contribute')}
 76 |                 </button>
 77 |               </li>
 78 |             </ul>
 79 |           </div>
 80 | 
 81 |           <div>
 82 |             <h3 className="text-lg font-semibold text-white mb-4">
 83 |               {t('footer.legal')}
 84 |             </h3>
 85 |             <ul className="space-y-2 text-sm text-gray-400">
 86 |               <li>• 本项目不存储任何 API Key</li>
 87 |               <li>• 不提供代理或转发服务</li>
 88 |               <li>• 使用风险请自行评估</li>
 89 |               <li>• 遵守相关法律法规</li>
 90 |             </ul>
 91 |           </div>
 92 |         </div>
 93 | 
 94 |         <div className="border-t border-gray-800 mt-8 pt-8 text-center">
 95 |           <p className="text-sm text-gray-400">
 96 |             Made with ❤️ by{" "}
 97 |             <button
 98 |               onClick={() => window.open('https://github.com/TechnologyStar', '_blank')}
 99 |               className="text-blue-400 hover:text-blue-300 transition-colors duration-200"
100 |             >
101 |               TechnologyStar
102 |             </button>
103 |           </p>
104 |         </div>
105 |       </div>
106 |     </footer>
107 |   );
108 | }
109 | 


--------------------------------------------------------------------------------
/website/replit.md:
--------------------------------------------------------------------------------
 1 | # OpenAI / Claude / DeepSeek API Provider Directory
 2 | 
 3 | ## Overview
 4 | 
 5 | This is a full-stack web application that serves as a directory for third-party API providers offering OpenAI, Claude, and DeepSeek APIs. The application is built with a modern React frontend and Express.js backend, designed to help users discover and compare different API providers for learning and research purposes.
 6 | 
 7 | ## System Architecture
 8 | 
 9 | The application follows a traditional client-server architecture with clear separation of concerns:
10 | 
11 | - **Frontend**: React-based SPA using Vite for bundling and development
12 | - **Backend**: Express.js REST API server
13 | - **Database**: PostgreSQL with Drizzle ORM for type-safe database operations
14 | - **Styling**: Tailwind CSS with shadcn/ui component library for consistent UI
15 | - **State Management**: TanStack Query for server state management
16 | - **Routing**: Wouter for lightweight client-side routing
17 | 
18 | ## Key Components
19 | 
20 | ### Frontend Architecture
21 | - **Component-Based**: Uses shadcn/ui components for consistent design system
22 | - **Internationalization**: Multi-language support with context-based language switching
23 | - **Responsive Design**: Mobile-first approach with Tailwind CSS
24 | - **Type Safety**: Full TypeScript implementation with shared types
25 | 
26 | ### Backend Architecture
27 | - **RESTful API**: Express.js server with structured route handling
28 | - **Storage Abstraction**: Interface-based storage layer supporting both in-memory and database implementations
29 | - **Type Safety**: Shared schema definitions between frontend and backend
30 | - **Middleware**: Request logging and error handling middleware
31 | 
32 | ### Database Schema
33 | - **API Providers Table**: Stores information about third-party API providers including name, URL, tags, and metadata
34 | - **Recommended Apps Table**: Contains curated applications that work with the API providers
35 | - **Flexible Tagging**: JSON-based tag system for categorizing providers and apps
36 | 
37 | ### UI Components
38 | - **Providers Table**: Searchable and filterable table of API providers
39 | - **Tags Legend**: Visual explanation of provider capabilities and features
40 | - **Recommended Apps**: Grid layout showcasing compatible applications
41 | - **Usage Guide**: Step-by-step instructions for using the APIs
42 | - **Contribution Section**: Information for community contributions
43 | 
44 | ## Data Flow
45 | 
46 | 1. **Initial Load**: Client fetches API providers and recommended apps from REST endpoints
47 | 2. **Filtering**: Client-side filtering based on search terms and tag categories
48 | 3. **User Interactions**: Real-time UI updates with optimistic loading states
49 | 4. **Data Persistence**: All changes go through the backend API to ensure consistency
50 | 
51 | ## External Dependencies
52 | 
53 | ### Frontend Dependencies
54 | - **React**: Core UI library with hooks-based architecture
55 | - **TanStack Query**: Server state management and caching
56 | - **Radix UI**: Accessible component primitives
57 | - **Tailwind CSS**: Utility-first CSS framework
58 | - **Lucide React**: Consistent icon library
59 | 
60 | ### Backend Dependencies
61 | - **Express.js**: Web application framework
62 | - **Drizzle ORM**: Type-safe database operations
63 | - **Neon Database**: Serverless PostgreSQL provider
64 | - **Zod**: Runtime type validation
65 | 
66 | ### Development Tools
67 | - **Vite**: Fast build tool and development server
68 | - **TypeScript**: Static type checking
69 | - **ESBuild**: Fast JavaScript bundler for production
70 | 
71 | ## Deployment Strategy
72 | 
73 | The application is configured for deployment on Replit with the following setup:
74 | 
75 | - **Development**: `npm run dev` runs both frontend and backend in development mode
76 | - **Build Process**: Vite builds the frontend, ESBuild bundles the backend
77 | - **Production**: Serves static files through Express with API routes
78 | - **Database**: Uses PostgreSQL module provided by Replit environment
79 | - **Port Configuration**: Configured to run on port 5000 with external port 80
80 | 
81 | The build process creates optimized bundles for both client and server code, with the frontend assets served as static files by the Express server in production.
82 | 
83 | ## Changelog
84 | 
85 | ```
86 | Changelog:
87 | - June 27, 2025. Initial setup
88 | ```
89 | 
90 | ## User Preferences
91 | 
92 | ```
93 | Preferred communication style: Simple, everyday language.
94 | ```


--------------------------------------------------------------------------------
/website/client/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/website/client/src/components/header.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Button } from "@/components/ui/button";
  3 | import { LanguageSwitcher } from "@/components/language-switcher";
  4 | import { useLanguage } from "@/hooks/use-language";
  5 | import { Globe, Menu, X } from "lucide-react";
  6 | 
  7 | export function Header() {
  8 |   const { t } = useLanguage();
  9 |   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 10 | 
 11 |   const scrollToSection = (sectionId: string) => {
 12 |     const element = document.getElementById(sectionId);
 13 |     if (element) {
 14 |       element.scrollIntoView({ behavior: 'smooth', block: 'start' });
 15 |     }
 16 |     setIsMobileMenuOpen(false);
 17 |   };
 18 | 
 19 |   return (
 20 |     <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
 21 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 22 |         <div className="flex justify-between items-center h-16">
 23 |           {/* Logo and Brand */}
 24 |           <div className="flex items-center space-x-4">
 25 |             <div className="flex items-center space-x-2">
 26 |               <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
 27 |                 <Globe className="w-4 h-4 text-white" />
 28 |               </div>
 29 |               <span className="text-xl font-bold text-gray-900">API Directory</span>
 30 |             </div>
 31 |           </div>
 32 | 
 33 |           {/* Desktop Navigation */}
 34 |           <nav className="hidden md:flex items-center space-x-8">
 35 |             <button
 36 |               onClick={() => scrollToSection('providers')}
 37 |               className="text-gray-700 hover:text-blue-600 transition-colors duration-200 font-medium"
 38 |             >
 39 |               {t('nav.providers')}
 40 |             </button>
 41 |             <button
 42 |               onClick={() => scrollToSection('apps')}
 43 |               className="text-gray-700 hover:text-blue-600 transition-colors duration-200 font-medium"
 44 |             >
 45 |               {t('nav.apps')}
 46 |             </button>
 47 |             <button
 48 |               onClick={() => scrollToSection('guide')}
 49 |               className="text-gray-700 hover:text-blue-600 transition-colors duration-200 font-medium"
 50 |             >
 51 |               {t('nav.guide')}
 52 |             </button>
 53 |             <button
 54 |               onClick={() => scrollToSection('contribute')}
 55 |               className="text-gray-700 hover:text-blue-600 transition-colors duration-200 font-medium"
 56 |             >
 57 |               {t('nav.contribute')}
 58 |             </button>
 59 |           </nav>
 60 | 
 61 |           {/* Language Switcher and Mobile Menu Button */}
 62 |           <div className="flex items-center space-x-4">
 63 |             <LanguageSwitcher />
 64 |             <Button
 65 |               variant="ghost"
 66 |               size="sm"
 67 |               className="md:hidden p-2 rounded-lg hover:bg-gray-100"
 68 |               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
 69 |             >
 70 |               {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
 71 |             </Button>
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 | 
 76 |       {/* Mobile Navigation */}
 77 |       {isMobileMenuOpen && (
 78 |         <div className="md:hidden bg-white border-t border-gray-200">
 79 |           <div className="px-4 py-2 space-y-2">
 80 |             <button
 81 |               onClick={() => scrollToSection('providers')}
 82 |               className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
 83 |             >
 84 |               {t('nav.providers')}
 85 |             </button>
 86 |             <button
 87 |               onClick={() => scrollToSection('apps')}
 88 |               className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
 89 |             >
 90 |               {t('nav.apps')}
 91 |             </button>
 92 |             <button
 93 |               onClick={() => scrollToSection('guide')}
 94 |               className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
 95 |             >
 96 |               {t('nav.guide')}
 97 |             </button>
 98 |             <button
 99 |               onClick={() => scrollToSection('contribute')}
100 |               className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
101 |             >
102 |               {t('nav.contribute')}
103 |             </button>
104 |           </div>
105 |         </div>
106 |       )}
107 |     </header>
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/website/README-HTML.md:
--------------------------------------------------------------------------------
  1 | # 静态HTML多语言版本 / Static HTML Multilingual Version
  2 | 
  3 | ## 📁 文件说明 / File Description
  4 | 
  5 | 本目录包含完全独立的多语言静态HTML页面，无需Node.js环境即可直接在浏览器中打开使用。
  6 | 
  7 | This directory contains fully standalone multilingual static HTML pages that can be opened directly in a browser without requiring a Node.js environment.
  8 | 
  9 | ### 文件列表 / File List
 10 | 
 11 | - **index.html** - 自动语言检测入口页面 / Auto language detection entry page
 12 | - **index.zh-CN.html** - 中文版本（底本）/ Chinese version (base)
 13 | - **index.en.html** - 英文版本 / English version
 14 | - **index.ru.html** - 俄语版本 / Russian version
 15 | - **index.fr.html** - 法语版本 / French version
 16 | 
 17 | ## 🌟 特性 / Features
 18 | 
 19 | ### ✅ 完全自包含 / Fully Self-Contained
 20 | - 所有样式直接内嵌在HTML中
 21 | - 无需外部CSS/JS文件
 22 | - 无需构建工具或服务器
 23 | - 可直接用浏览器打开
 24 | 
 25 | All styles are embedded directly in the HTML
 26 | No external CSS/JS files required
 27 | No build tools or server needed
 28 | Can be opened directly with a browser
 29 | 
 30 | ### 🌍 多语言支持 / Multilingual Support
 31 | - 🇨🇳 中文 (Chinese) - 底本版本
 32 | - 🇬🇧 English - Based on Chinese content
 33 | - 🇷🇺 Русский (Russian) - Based on Chinese content
 34 | - 🇫🇷 Français (French) - Based on Chinese content
 35 | 
 36 | ### 📊 完整数据 / Complete Data
 37 | - 60+ API提供商信息
 38 | - 8个推荐应用
 39 | - 标签图例说明
 40 | - 使用指南
 41 | - 贡献指南
 42 | 
 43 | 60+ API providers information
 44 | 8 recommended applications
 45 | Tag legend explanations
 46 | Usage guide
 47 | Contribution guide
 48 | 
 49 | ### 🎨 现代设计 / Modern Design
 50 | - 渐变背景色
 51 | - 毛玻璃效果
 52 | - 响应式布局
 53 | - 移动端适配
 54 | - 悬停动画效果
 55 | 
 56 | Gradient backgrounds
 57 | Glassmorphism effects
 58 | Responsive layout
 59 | Mobile-friendly
 60 | Hover animations
 61 | 
 62 | ## 🚀 使用方法 / Usage
 63 | 
 64 | ### 方法1：直接打开 / Method 1: Direct Opening
 65 | 
 66 | ```bash
 67 | # 在浏览器中打开任意HTML文件
 68 | # Open any HTML file in a browser
 69 | 
 70 | # Windows
 71 | start index.html
 72 | 
 73 | # Mac
 74 | open index.html
 75 | 
 76 | # Linux
 77 | xdg-open index.html
 78 | ```
 79 | 
 80 | ### 方法2：本地服务器 / Method 2: Local Server
 81 | 
 82 | ```bash
 83 | # Python 3
 84 | python3 -m http.server 8000
 85 | 
 86 | # Python 2
 87 | python -m SimpleHTTPServer 8000
 88 | 
 89 | # Node.js (如果已安装 / if installed)
 90 | npx http-server -p 8000
 91 | 
 92 | # 然后访问 / Then visit
 93 | # http://localhost:8000
 94 | ```
 95 | 
 96 | ### 方法3：在线部署 / Method 3: Online Deployment
 97 | 
 98 | 可以直接将HTML文件部署到以下平台：
 99 | You can directly deploy HTML files to the following platforms:
100 | 
101 | - **GitHub Pages**
102 | - **Netlify**
103 | - **Vercel**
104 | - **Cloudflare Pages**
105 | - **GitLab Pages**
106 | - 任何支持静态文件的主机 / Any static file hosting
107 | 
108 | ## 🔄 与React版本的关系 / Relationship with React Version
109 | 
110 | ### React版本 (client/) / React Version
111 | - 需要Node.js环境和构建
112 | - 支持更复杂的交互功能
113 | - 使用TanStack Query进行数据获取
114 | - 支持客户端路由
115 | - 适合开发和扩展功能
116 | 
117 | Requires Node.js environment and build
118 | Supports more complex interactive features
119 | Uses TanStack Query for data fetching
120 | Supports client-side routing
121 | Suitable for development and extending features
122 | 
123 | ### HTML版本 (当前目录) / HTML Version (Current Directory)
124 | - 纯静态文件，无需构建
125 | - 完全自包含，易于部署
126 | - 可直接分享和使用
127 | - 适合快速查看和分享
128 | - 适合无法运行Node.js的环境
129 | 
130 | Pure static files, no build required
131 | Fully self-contained, easy to deploy
132 | Can be directly shared and used
133 | Suitable for quick viewing and sharing
134 | Suitable for environments without Node.js
135 | 
136 | ## 📝 内容更新 / Content Updates
137 | 
138 | 如需更新内容，请遵循以下步骤：
139 | To update content, follow these steps:
140 | 
141 | 1. **更新中文版本（底本）**：编辑 `index.zh-CN.html`
142 |    Update Chinese version (base): Edit `index.zh-CN.html`
143 | 
144 | 2. **同步到其他语言**：根据中文版本更新其他语言文件
145 |    Sync to other languages: Update other language files based on Chinese version
146 | 
147 | 3. **保持一致性**：确保所有语言版本的数据条目数量一致
148 |    Maintain consistency: Ensure all language versions have the same number of data entries
149 | 
150 | ## 🎯 浏览器兼容性 / Browser Compatibility
151 | 
152 | 支持所有现代浏览器：
153 | Supports all modern browsers:
154 | 
155 | - ✅ Chrome/Edge 90+
156 | - ✅ Firefox 88+
157 | - ✅ Safari 14+
158 | - ✅ Opera 76+
159 | 
160 | ## 📱 移动端支持 / Mobile Support
161 | 
162 | 所有HTML页面都经过优化，支持移动设备：
163 | All HTML pages are optimized for mobile devices:
164 | 
165 | - 响应式设计 / Responsive design
166 | - 触摸友好 / Touch-friendly
167 | - 性能优化 / Performance optimized
168 | - 小屏幕适配 / Small screen adapted
169 | 
170 | ## 🔗 相关链接 / Related Links
171 | 
172 | - 项目主页 / Project Homepage: https://github.com/TechnologyStar/Openai-Claude-Deepseek-API-provider
173 | - 中文README / Chinese README: [../README.md](../README.md)
174 | - React版本 / React Version: [./client/](./client/)
175 | 
176 | ## 📄 许可证 / License
177 | 
178 | 与项目主仓库保持一致。
179 | Same as the main project repository.
180 | 
181 | ---
182 | 
183 | **Made with ❤️ by TechnologyStar**
184 | 


--------------------------------------------------------------------------------
/website/client/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import type {
  4 |   ToastActionElement,
  5 |   ToastProps,
  6 | } from "@/components/ui/toast"
  7 | 
  8 | const TOAST_LIMIT = 1
  9 | const TOAST_REMOVE_DELAY = 1000000
 10 | 
 11 | type ToasterToast = ToastProps & {
 12 |   id: string
 13 |   title?: React.ReactNode
 14 |   description?: React.ReactNode
 15 |   action?: ToastActionElement
 16 | }
 17 | 
 18 | const actionTypes = {
 19 |   ADD_TOAST: "ADD_TOAST",
 20 |   UPDATE_TOAST: "UPDATE_TOAST",
 21 |   DISMISS_TOAST: "DISMISS_TOAST",
 22 |   REMOVE_TOAST: "REMOVE_TOAST",
 23 | } as const
 24 | 
 25 | let count = 0
 26 | 
 27 | function genId() {
 28 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 29 |   return count.toString()
 30 | }
 31 | 
 32 | type ActionType = typeof actionTypes
 33 | 
 34 | type Action =
 35 |   | {
 36 |       type: ActionType["ADD_TOAST"]
 37 |       toast: ToasterToast
 38 |     }
 39 |   | {
 40 |       type: ActionType["UPDATE_TOAST"]
 41 |       toast: Partial<ToasterToast>
 42 |     }
 43 |   | {
 44 |       type: ActionType["DISMISS_TOAST"]
 45 |       toastId?: ToasterToast["id"]
 46 |     }
 47 |   | {
 48 |       type: ActionType["REMOVE_TOAST"]
 49 |       toastId?: ToasterToast["id"]
 50 |     }
 51 | 
 52 | interface State {
 53 |   toasts: ToasterToast[]
 54 | }
 55 | 
 56 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 57 | 
 58 | const addToRemoveQueue = (toastId: string) => {
 59 |   if (toastTimeouts.has(toastId)) {
 60 |     return
 61 |   }
 62 | 
 63 |   const timeout = setTimeout(() => {
 64 |     toastTimeouts.delete(toastId)
 65 |     dispatch({
 66 |       type: "REMOVE_TOAST",
 67 |       toastId: toastId,
 68 |     })
 69 |   }, TOAST_REMOVE_DELAY)
 70 | 
 71 |   toastTimeouts.set(toastId, timeout)
 72 | }
 73 | 
 74 | export const reducer = (state: State, action: Action): State => {
 75 |   switch (action.type) {
 76 |     case "ADD_TOAST":
 77 |       return {
 78 |         ...state,
 79 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 80 |       }
 81 | 
 82 |     case "UPDATE_TOAST":
 83 |       return {
 84 |         ...state,
 85 |         toasts: state.toasts.map((t) =>
 86 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 87 |         ),
 88 |       }
 89 | 
 90 |     case "DISMISS_TOAST": {
 91 |       const { toastId } = action
 92 | 
 93 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 94 |       // but I'll keep it here for simplicity
 95 |       if (toastId) {
 96 |         addToRemoveQueue(toastId)
 97 |       } else {
 98 |         state.toasts.forEach((toast) => {
 99 |           addToRemoveQueue(toast.id)
100 |         })
101 |       }
102 | 
103 |       return {
104 |         ...state,
105 |         toasts: state.toasts.map((t) =>
106 |           t.id === toastId || toastId === undefined
107 |             ? {
108 |                 ...t,
109 |                 open: false,
110 |               }
111 |             : t
112 |         ),
113 |       }
114 |     }
115 |     case "REMOVE_TOAST":
116 |       if (action.toastId === undefined) {
117 |         return {
118 |           ...state,
119 |           toasts: [],
120 |         }
121 |       }
122 |       return {
123 |         ...state,
124 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
125 |       }
126 |   }
127 | }
128 | 
129 | const listeners: Array<(state: State) => void> = []
130 | 
131 | let memoryState: State = { toasts: [] }
132 | 
133 | function dispatch(action: Action) {
134 |   memoryState = reducer(memoryState, action)
135 |   listeners.forEach((listener) => {
136 |     listener(memoryState)
137 |   })
138 | }
139 | 
140 | type Toast = Omit<ToasterToast, "id">
141 | 
142 | function toast({ ...props }: Toast) {
143 |   const id = genId()
144 | 
145 |   const update = (props: ToasterToast) =>
146 |     dispatch({
147 |       type: "UPDATE_TOAST",
148 |       toast: { ...props, id },
149 |     })
150 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
151 | 
152 |   dispatch({
153 |     type: "ADD_TOAST",
154 |     toast: {
155 |       ...props,
156 |       id,
157 |       open: true,
158 |       onOpenChange: (open) => {
159 |         if (!open) dismiss()
160 |       },
161 |     },
162 |   })
163 | 
164 |   return {
165 |     id: id,
166 |     dismiss,
167 |     update,
168 |   }
169 | }
170 | 
171 | function useToast() {
172 |   const [state, setState] = React.useState<State>(memoryState)
173 | 
174 |   React.useEffect(() => {
175 |     listeners.push(setState)
176 |     return () => {
177 |       const index = listeners.indexOf(setState)
178 |       if (index > -1) {
179 |         listeners.splice(index, 1)
180 |       }
181 |     }
182 |   }, [state])
183 | 
184 |   return {
185 |     ...state,
186 |     toast,
187 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
188 |   }
189 | }
190 | 
191 | export { useToast, toast }
192 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as LabelPrimitive from "@radix-ui/react-label"
  5 | import { Slot } from "@radix-ui/react-slot"
  6 | import {
  7 |   Controller,
  8 |   FormProvider,
  9 |   useFormContext,
 10 |   type ControllerProps,
 11 |   type FieldPath,
 12 |   type FieldValues,
 13 | } from "react-hook-form"
 14 | 
 15 | import { cn } from "@/lib/utils"
 16 | import { Label } from "@/components/ui/label"
 17 | 
 18 | const Form = FormProvider
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 23 | > = {
 24 |   name: TName
 25 | }
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue
 29 | )
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   )
 42 | }
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext)
 46 |   const itemContext = React.useContext(FormItemContext)
 47 |   const { getFieldState, formState } = useFormContext()
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState)
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>")
 53 |   }
 54 | 
 55 |   const { id } = itemContext
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   }
 65 | }
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string
 69 | }
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue
 73 | )
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId()
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   )
 86 | })
 87 | FormItem.displayName = "FormItem"
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField()
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 | 
112 |   return (
113 |     <Slot
114 |       ref={ref}
115 |       id={formItemId}
116 |       aria-describedby={
117 |         !error
118 |           ? `${formDescriptionId}`
119 |           : `${formDescriptionId} ${formMessageId}`
120 |       }
121 |       aria-invalid={!!error}
122 |       {...props}
123 |     />
124 |   )
125 | })
126 | FormControl.displayName = "FormControl"
127 | 
128 | const FormDescription = React.forwardRef<
129 |   HTMLParagraphElement,
130 |   React.HTMLAttributes<HTMLParagraphElement>
131 | >(({ className, ...props }, ref) => {
132 |   const { formDescriptionId } = useFormField()
133 | 
134 |   return (
135 |     <p
136 |       ref={ref}
137 |       id={formDescriptionId}
138 |       className={cn("text-sm text-muted-foreground", className)}
139 |       {...props}
140 |     />
141 |   )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 | 
145 | const FormMessage = React.forwardRef<
146 |   HTMLParagraphElement,
147 |   React.HTMLAttributes<HTMLParagraphElement>
148 | >(({ className, children, ...props }, ref) => {
149 |   const { error, formMessageId } = useFormField()
150 |   const body = error ? String(error?.message ?? "") : children
151 | 
152 |   if (!body) {
153 |     return null
154 |   }
155 | 
156 |   return (
157 |     <p
158 |       ref={ref}
159 |       id={formMessageId}
160 |       className={cn("text-sm font-medium text-destructive", className)}
161 |       {...props}
162 |     >
163 |       {body}
164 |     </p>
165 |   )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 | 
169 | export {
170 |   useFormField,
171 |   Form,
172 |   FormItem,
173 |   FormLabel,
174 |   FormControl,
175 |   FormDescription,
176 |   FormMessage,
177 |   FormField,
178 | }
179 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 | 


--------------------------------------------------------------------------------
/website/client/src/components/recommended-apps.tsx:
--------------------------------------------------------------------------------
  1 | import { useQuery } from "@tanstack/react-query";
  2 | import { useLanguage } from "@/hooks/use-language";
  3 | import { Badge } from "@/components/ui/badge";
  4 | import { ExternalLink, Github, Monitor, Globe, MessageSquare, Smartphone, MessageCircle, Zap } from "lucide-react";
  5 | import type { RecommendedApp } from "@shared/schema";
  6 | 
  7 | const iconMap: Record<string, React.ComponentType<any>> = {
  8 |   desktop: Monitor,
  9 |   globe: Globe,
 10 |   comments: MessageSquare,
 11 |   mobile: Smartphone,
 12 |   "message-square": MessageCircle,
 13 |   zap: Zap
 14 | };
 15 | 
 16 | const tagColors: Record<string, string> = {
 17 |   "开源": "bg-green-100 text-green-800",
 18 |   "跨平台": "bg-blue-100 text-blue-800",
 19 |   "网页端": "bg-purple-100 text-purple-800",
 20 |   "多模态": "bg-red-100 text-red-800",
 21 |   "移动端": "bg-indigo-100 text-indigo-800",
 22 |   "语音": "bg-orange-100 text-orange-800",
 23 |   "现代界面": "bg-cyan-100 text-cyan-800",
 24 |   "企业级": "bg-gray-100 text-gray-800",
 25 |   "知识库": "bg-yellow-100 text-yellow-800"
 26 | };
 27 | 
 28 | export function RecommendedApps() {
 29 |   const { t } = useLanguage();
 30 | 
 31 |   const { data: apps = [], isLoading } = useQuery<RecommendedApp[]>({
 32 |     queryKey: ['/api/apps']
 33 |   });
 34 | 
 35 |   if (isLoading) {
 36 |     return (
 37 |       <section id="apps" className="py-16 bg-white">
 38 |         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 39 |           <div className="text-center">
 40 |             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
 41 |             <p className="mt-4 text-gray-600">Loading apps...</p>
 42 |           </div>
 43 |         </div>
 44 |       </section>
 45 |     );
 46 |   }
 47 | 
 48 |   return (
 49 |     <section id="apps" className="py-16 bg-white">
 50 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 51 |         <div className="text-center mb-12">
 52 |           <h2 className="text-3xl font-bold text-gray-900 mb-4">
 53 |             📱 {t('apps.title')}
 54 |           </h2>
 55 |           <p className="text-gray-600 max-w-2xl mx-auto">
 56 |             {t('apps.description')}
 57 |           </p>
 58 |         </div>
 59 | 
 60 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 61 |           {apps.map((app) => {
 62 |             const IconComponent = iconMap[app.icon] || Monitor;
 63 |             
 64 |             return (
 65 |               <div key={app.id} className="bg-gray-50 rounded-lg p-6 hover:shadow-lg transition-shadow duration-200">
 66 |                 <div className="flex items-start space-x-4">
 67 |                   <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
 68 |                     <IconComponent className="w-6 h-6 text-white" />
 69 |                   </div>
 70 |                   <div className="flex-1 min-w-0">
 71 |                     <div className="flex items-center justify-between mb-2">
 72 |                       <h3 className="text-lg font-semibold text-gray-900 truncate">
 73 |                         {app.name}
 74 |                       </h3>
 75 |                       <div className="flex space-x-2 ml-2">
 76 |                         {app.githubUrl && (
 77 |                           <a
 78 |                             href={app.githubUrl}
 79 |                             target="_blank"
 80 |                             rel="noopener noreferrer"
 81 |                             className="text-gray-500 hover:text-gray-700 transition-colors duration-200"
 82 |                           >
 83 |                             <Github size={16} />
 84 |                           </a>
 85 |                         )}
 86 |                         {app.websiteUrl && (
 87 |                           <a
 88 |                             href={app.websiteUrl}
 89 |                             target="_blank"
 90 |                             rel="noopener noreferrer"
 91 |                             className="text-gray-500 hover:text-gray-700 transition-colors duration-200"
 92 |                           >
 93 |                             <ExternalLink size={16} />
 94 |                           </a>
 95 |                         )}
 96 |                       </div>
 97 |                     </div>
 98 |                     <p className="text-sm text-gray-600 mb-3 line-clamp-2">
 99 |                       {app.description}
100 |                     </p>
101 |                     <div className="flex flex-wrap gap-1">
102 |                       {app.tags.map((tag, index) => (
103 |                         <Badge
104 |                           key={index}
105 |                           className={`text-xs ${tagColors[tag] || 'bg-gray-100 text-gray-800'}`}
106 |                         >
107 |                           {tag}
108 |                         </Badge>
109 |                       ))}
110 |                     </div>
111 |                   </div>
112 |                 </div>
113 |               </div>
114 |             );
115 |           })}
116 |         </div>
117 |       </div>
118 |     </section>
119 |   );
120 | }
121 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | const CommandDialog = ({ children, ...props }: DialogProps) => {
 25 |   return (
 26 |     <Dialog {...props}>
 27 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 28 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 29 |           {children}
 30 |         </Command>
 31 |       </DialogContent>
 32 |     </Dialog>
 33 |   )
 34 | }
 35 | 
 36 | const CommandInput = React.forwardRef<
 37 |   React.ElementRef<typeof CommandPrimitive.Input>,
 38 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 39 | >(({ className, ...props }, ref) => (
 40 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 41 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 42 |     <CommandPrimitive.Input
 43 |       ref={ref}
 44 |       className={cn(
 45 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 46 |         className
 47 |       )}
 48 |       {...props}
 49 |     />
 50 |   </div>
 51 | ))
 52 | 
 53 | CommandInput.displayName = CommandPrimitive.Input.displayName
 54 | 
 55 | const CommandList = React.forwardRef<
 56 |   React.ElementRef<typeof CommandPrimitive.List>,
 57 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 58 | >(({ className, ...props }, ref) => (
 59 |   <CommandPrimitive.List
 60 |     ref={ref}
 61 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 62 |     {...props}
 63 |   />
 64 | ))
 65 | 
 66 | CommandList.displayName = CommandPrimitive.List.displayName
 67 | 
 68 | const CommandEmpty = React.forwardRef<
 69 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 70 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 71 | >((props, ref) => (
 72 |   <CommandPrimitive.Empty
 73 |     ref={ref}
 74 |     className="py-6 text-center text-sm"
 75 |     {...props}
 76 |   />
 77 | ))
 78 | 
 79 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 80 | 
 81 | const CommandGroup = React.forwardRef<
 82 |   React.ElementRef<typeof CommandPrimitive.Group>,
 83 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 84 | >(({ className, ...props }, ref) => (
 85 |   <CommandPrimitive.Group
 86 |     ref={ref}
 87 |     className={cn(
 88 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 89 |       className
 90 |     )}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | 
 95 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 96 | 
 97 | const CommandSeparator = React.forwardRef<
 98 |   React.ElementRef<typeof CommandPrimitive.Separator>,
 99 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
100 | >(({ className, ...props }, ref) => (
101 |   <CommandPrimitive.Separator
102 |     ref={ref}
103 |     className={cn("-mx-1 h-px bg-border", className)}
104 |     {...props}
105 |   />
106 | ))
107 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
108 | 
109 | const CommandItem = React.forwardRef<
110 |   React.ElementRef<typeof CommandPrimitive.Item>,
111 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
112 | >(({ className, ...props }, ref) => (
113 |   <CommandPrimitive.Item
114 |     ref={ref}
115 |     className={cn(
116 |       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
117 |       className
118 |     )}
119 |     {...props}
120 |   />
121 | ))
122 | 
123 | CommandItem.displayName = CommandPrimitive.Item.displayName
124 | 
125 | const CommandShortcut = ({
126 |   className,
127 |   ...props
128 | }: React.HTMLAttributes<HTMLSpanElement>) => {
129 |   return (
130 |     <span
131 |       className={cn(
132 |         "ml-auto text-xs tracking-widest text-muted-foreground",
133 |         className
134 |       )}
135 |       {...props}
136 |     />
137 |   )
138 | }
139 | CommandShortcut.displayName = "CommandShortcut"
140 | 
141 | export {
142 |   Command,
143 |   CommandDialog,
144 |   CommandInput,
145 |   CommandList,
146 |   CommandEmpty,
147 |   CommandGroup,
148 |   CommandItem,
149 |   CommandShortcut,
150 |   CommandSeparator,
151 | }
152 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  3 | import { cva } from "class-variance-authority"
  4 | import { ChevronDown } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn(
 15 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 16 |       className
 17 |     )}
 18 |     {...props}
 19 |   >
 20 |     {children}
 21 |     <NavigationMenuViewport />
 22 |   </NavigationMenuPrimitive.Root>
 23 | ))
 24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 25 | 
 26 | const NavigationMenuList = React.forwardRef<
 27 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 28 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 29 | >(({ className, ...props }, ref) => (
 30 |   <NavigationMenuPrimitive.List
 31 |     ref={ref}
 32 |     className={cn(
 33 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 34 |       className
 35 |     )}
 36 |     {...props}
 37 |   />
 38 | ))
 39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 40 | 
 41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 42 | 
 43 | const navigationMenuTriggerStyle = cva(
 44 |   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 45 | )
 46 | 
 47 | const NavigationMenuTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 49 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 50 | >(({ className, children, ...props }, ref) => (
 51 |   <NavigationMenuPrimitive.Trigger
 52 |     ref={ref}
 53 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 54 |     {...props}
 55 |   >
 56 |     {children}{" "}
 57 |     <ChevronDown
 58 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
 59 |       aria-hidden="true"
 60 |     />
 61 |   </NavigationMenuPrimitive.Trigger>
 62 | ))
 63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 64 | 
 65 | const NavigationMenuContent = React.forwardRef<
 66 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 67 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 68 | >(({ className, ...props }, ref) => (
 69 |   <NavigationMenuPrimitive.Content
 70 |     ref={ref}
 71 |     className={cn(
 72 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 73 |       className
 74 |     )}
 75 |     {...props}
 76 |   />
 77 | ))
 78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 79 | 
 80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 81 | 
 82 | const NavigationMenuViewport = React.forwardRef<
 83 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 84 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 85 | >(({ className, ...props }, ref) => (
 86 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 87 |     <NavigationMenuPrimitive.Viewport
 88 |       className={cn(
 89 |         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 90 |         className
 91 |       )}
 92 |       ref={ref}
 93 |       {...props}
 94 |     />
 95 |   </div>
 96 | ))
 97 | NavigationMenuViewport.displayName =
 98 |   NavigationMenuPrimitive.Viewport.displayName
 99 | 
100 | const NavigationMenuIndicator = React.forwardRef<
101 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103 | >(({ className, ...props }, ref) => (
104 |   <NavigationMenuPrimitive.Indicator
105 |     ref={ref}
106 |     className={cn(
107 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
108 |       className
109 |     )}
110 |     {...props}
111 |   >
112 |     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
113 |   </NavigationMenuPrimitive.Indicator>
114 | ))
115 | NavigationMenuIndicator.displayName =
116 |   NavigationMenuPrimitive.Indicator.displayName
117 | 
118 | export {
119 |   navigationMenuTriggerStyle,
120 |   NavigationMenu,
121 |   NavigationMenuList,
122 |   NavigationMenuItem,
123 |   NavigationMenuContent,
124 |   NavigationMenuTrigger,
125 |   NavigationMenuLink,
126 |   NavigationMenuIndicator,
127 |   NavigationMenuViewport,
128 | }
129 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ))
135 | SelectItem.displayName = SelectPrimitive.Item.displayName
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ))
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | }
161 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import useEmblaCarousel, {
  3 |   type UseEmblaCarouselType,
  4 | } from "embla-carousel-react"
  5 | import { ArrowLeft, ArrowRight } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | import { Button } from "@/components/ui/button"
  9 | 
 10 | type CarouselApi = UseEmblaCarouselType[1]
 11 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 12 | type CarouselOptions = UseCarouselParameters[0]
 13 | type CarouselPlugin = UseCarouselParameters[1]
 14 | 
 15 | type CarouselProps = {
 16 |   opts?: CarouselOptions
 17 |   plugins?: CarouselPlugin
 18 |   orientation?: "horizontal" | "vertical"
 19 |   setApi?: (api: CarouselApi) => void
 20 | }
 21 | 
 22 | type CarouselContextProps = {
 23 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
 24 |   api: ReturnType<typeof useEmblaCarousel>[1]
 25 |   scrollPrev: () => void
 26 |   scrollNext: () => void
 27 |   canScrollPrev: boolean
 28 |   canScrollNext: boolean
 29 | } & CarouselProps
 30 | 
 31 | const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 32 | 
 33 | function useCarousel() {
 34 |   const context = React.useContext(CarouselContext)
 35 | 
 36 |   if (!context) {
 37 |     throw new Error("useCarousel must be used within a <Carousel />")
 38 |   }
 39 | 
 40 |   return context
 41 | }
 42 | 
 43 | const Carousel = React.forwardRef<
 44 |   HTMLDivElement,
 45 |   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 46 | >(
 47 |   (
 48 |     {
 49 |       orientation = "horizontal",
 50 |       opts,
 51 |       setApi,
 52 |       plugins,
 53 |       className,
 54 |       children,
 55 |       ...props
 56 |     },
 57 |     ref
 58 |   ) => {
 59 |     const [carouselRef, api] = useEmblaCarousel(
 60 |       {
 61 |         ...opts,
 62 |         axis: orientation === "horizontal" ? "x" : "y",
 63 |       },
 64 |       plugins
 65 |     )
 66 |     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
 67 |     const [canScrollNext, setCanScrollNext] = React.useState(false)
 68 | 
 69 |     const onSelect = React.useCallback((api: CarouselApi) => {
 70 |       if (!api) {
 71 |         return
 72 |       }
 73 | 
 74 |       setCanScrollPrev(api.canScrollPrev())
 75 |       setCanScrollNext(api.canScrollNext())
 76 |     }, [])
 77 | 
 78 |     const scrollPrev = React.useCallback(() => {
 79 |       api?.scrollPrev()
 80 |     }, [api])
 81 | 
 82 |     const scrollNext = React.useCallback(() => {
 83 |       api?.scrollNext()
 84 |     }, [api])
 85 | 
 86 |     const handleKeyDown = React.useCallback(
 87 |       (event: React.KeyboardEvent<HTMLDivElement>) => {
 88 |         if (event.key === "ArrowLeft") {
 89 |           event.preventDefault()
 90 |           scrollPrev()
 91 |         } else if (event.key === "ArrowRight") {
 92 |           event.preventDefault()
 93 |           scrollNext()
 94 |         }
 95 |       },
 96 |       [scrollPrev, scrollNext]
 97 |     )
 98 | 
 99 |     React.useEffect(() => {
100 |       if (!api || !setApi) {
101 |         return
102 |       }
103 | 
104 |       setApi(api)
105 |     }, [api, setApi])
106 | 
107 |     React.useEffect(() => {
108 |       if (!api) {
109 |         return
110 |       }
111 | 
112 |       onSelect(api)
113 |       api.on("reInit", onSelect)
114 |       api.on("select", onSelect)
115 | 
116 |       return () => {
117 |         api?.off("select", onSelect)
118 |       }
119 |     }, [api, onSelect])
120 | 
121 |     return (
122 |       <CarouselContext.Provider
123 |         value={{
124 |           carouselRef,
125 |           api: api,
126 |           opts,
127 |           orientation:
128 |             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
129 |           scrollPrev,
130 |           scrollNext,
131 |           canScrollPrev,
132 |           canScrollNext,
133 |         }}
134 |       >
135 |         <div
136 |           ref={ref}
137 |           onKeyDownCapture={handleKeyDown}
138 |           className={cn("relative", className)}
139 |           role="region"
140 |           aria-roledescription="carousel"
141 |           {...props}
142 |         >
143 |           {children}
144 |         </div>
145 |       </CarouselContext.Provider>
146 |     )
147 |   }
148 | )
149 | Carousel.displayName = "Carousel"
150 | 
151 | const CarouselContent = React.forwardRef<
152 |   HTMLDivElement,
153 |   React.HTMLAttributes<HTMLDivElement>
154 | >(({ className, ...props }, ref) => {
155 |   const { carouselRef, orientation } = useCarousel()
156 | 
157 |   return (
158 |     <div ref={carouselRef} className="overflow-hidden">
159 |       <div
160 |         ref={ref}
161 |         className={cn(
162 |           "flex",
163 |           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
164 |           className
165 |         )}
166 |         {...props}
167 |       />
168 |     </div>
169 |   )
170 | })
171 | CarouselContent.displayName = "CarouselContent"
172 | 
173 | const CarouselItem = React.forwardRef<
174 |   HTMLDivElement,
175 |   React.HTMLAttributes<HTMLDivElement>
176 | >(({ className, ...props }, ref) => {
177 |   const { orientation } = useCarousel()
178 | 
179 |   return (
180 |     <div
181 |       ref={ref}
182 |       role="group"
183 |       aria-roledescription="slide"
184 |       className={cn(
185 |         "min-w-0 shrink-0 grow-0 basis-full",
186 |         orientation === "horizontal" ? "pl-4" : "pt-4",
187 |         className
188 |       )}
189 |       {...props}
190 |     />
191 |   )
192 | })
193 | CarouselItem.displayName = "CarouselItem"
194 | 
195 | const CarouselPrevious = React.forwardRef<
196 |   HTMLButtonElement,
197 |   React.ComponentProps<typeof Button>
198 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
199 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
200 | 
201 |   return (
202 |     <Button
203 |       ref={ref}
204 |       variant={variant}
205 |       size={size}
206 |       className={cn(
207 |         "absolute  h-8 w-8 rounded-full",
208 |         orientation === "horizontal"
209 |           ? "-left-12 top-1/2 -translate-y-1/2"
210 |           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
211 |         className
212 |       )}
213 |       disabled={!canScrollPrev}
214 |       onClick={scrollPrev}
215 |       {...props}
216 |     >
217 |       <ArrowLeft className="h-4 w-4" />
218 |       <span className="sr-only">Previous slide</span>
219 |     </Button>
220 |   )
221 | })
222 | CarouselPrevious.displayName = "CarouselPrevious"
223 | 
224 | const CarouselNext = React.forwardRef<
225 |   HTMLButtonElement,
226 |   React.ComponentProps<typeof Button>
227 | >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
228 |   const { orientation, scrollNext, canScrollNext } = useCarousel()
229 | 
230 |   return (
231 |     <Button
232 |       ref={ref}
233 |       variant={variant}
234 |       size={size}
235 |       className={cn(
236 |         "absolute h-8 w-8 rounded-full",
237 |         orientation === "horizontal"
238 |           ? "-right-12 top-1/2 -translate-y-1/2"
239 |           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
240 |         className
241 |       )}
242 |       disabled={!canScrollNext}
243 |       onClick={scrollNext}
244 |       {...props}
245 |     >
246 |       <ArrowRight className="h-4 w-4" />
247 |       <span className="sr-only">Next slide</span>
248 |     </Button>
249 |   )
250 | })
251 | CarouselNext.displayName = "CarouselNext"
252 | 
253 | export {
254 |   type CarouselApi,
255 |   Carousel,
256 |   CarouselContent,
257 |   CarouselItem,
258 |   CarouselPrevious,
259 |   CarouselNext,
260 | }
261 | 


--------------------------------------------------------------------------------
/website/client/src/lib/api-providers-data.ts:
--------------------------------------------------------------------------------
  1 | // Utility functions and constants for API providers
  2 | export const TAG_DESCRIPTIONS = {
  3 |   "🆓": "completely_free",
  4 |   "🔓": "free_credits", 
  5 |   "💰": "requires_payment",
  6 |   "💪": "claude_support",
  7 |   "✌": "openai_support", 
  8 |   "🎉": "other_models",
  9 |   "🌎": "international_network",
 10 |   "🎁": "recharge_bonus",
 11 |   "🚀": "high_concurrency",
 12 |   "😆": "daily_checkin",
 13 |   "🚩": "registered_platform",
 14 |   "✔": "verified_authentic",
 15 |   "🌹": "premium_service"
 16 | } as const;
 17 | 
 18 | export const TAG_COLORS = {
 19 |   "🆓": "bg-green-100 text-green-800",
 20 |   "🔓": "bg-green-100 text-green-800", 
 21 |   "💰": "bg-yellow-100 text-yellow-800",
 22 |   "💪": "bg-red-100 text-red-800",
 23 |   "✌": "bg-blue-100 text-blue-800",
 24 |   "🎉": "bg-indigo-100 text-indigo-800",
 25 |   "🌎": "bg-cyan-100 text-cyan-800",
 26 |   "🎁": "bg-purple-100 text-purple-800",
 27 |   "🚀": "bg-orange-100 text-orange-800",
 28 |   "😆": "bg-yellow-100 text-yellow-800",
 29 |   "🚩": "bg-green-100 text-green-800",
 30 |   "✔": "bg-gray-100 text-gray-800",
 31 |   "🌹": "bg-pink-100 text-pink-800"
 32 | } as const;
 33 | 
 34 | export const FILTER_OPTIONS = [
 35 |   { key: 'all', emoji: '', label: 'all' },
 36 |   { key: 'free', emoji: '🆓', label: 'free' },
 37 |   { key: 'claude', emoji: '💪', label: 'claude' },
 38 |   { key: 'openai', emoji: '✌', label: 'openai' },
 39 |   { key: 'verified', emoji: '✔', label: 'verified' }
 40 | ] as const;
 41 | 
 42 | export const APP_ICON_MAP = {
 43 |   desktop: "Monitor",
 44 |   globe: "Globe", 
 45 |   comments: "MessageSquare",
 46 |   mobile: "Smartphone",
 47 |   "message-square": "MessageCircle",
 48 |   zap: "Zap"
 49 | } as const;
 50 | 
 51 | export const APP_TAG_COLORS = {
 52 |   "开源": "bg-green-100 text-green-800",
 53 |   "跨平台": "bg-blue-100 text-blue-800",
 54 |   "网页端": "bg-purple-100 text-purple-800", 
 55 |   "多模态": "bg-red-100 text-red-800",
 56 |   "移动端": "bg-indigo-100 text-indigo-800",
 57 |   "语音": "bg-orange-100 text-orange-800",
 58 |   "现代界面": "bg-cyan-100 text-cyan-800",
 59 |   "企业级": "bg-gray-100 text-gray-800",
 60 |   "知识库": "bg-yellow-100 text-yellow-800"
 61 | } as const;
 62 | 
 63 | // Helper functions for filtering and searching
 64 | export function filterProvidersByTag(providers: any[], tag: string): any[] {
 65 |   if (tag === 'all') return providers;
 66 |   return providers.filter(provider => provider.tags.includes(getTagEmoji(tag)));
 67 | }
 68 | 
 69 | export function searchProviders(providers: any[], searchTerm: string): any[] {
 70 |   if (!searchTerm.trim()) return providers;
 71 |   
 72 |   const term = searchTerm.toLowerCase();
 73 |   return providers.filter(provider => 
 74 |     provider.displayName.toLowerCase().includes(term) ||
 75 |     provider.name.toLowerCase().includes(term) ||
 76 |     provider.notes?.toLowerCase().includes(term) ||
 77 |     provider.url.toLowerCase().includes(term)
 78 |   );
 79 | }
 80 | 
 81 | export function getTagEmoji(filterKey: string): string {
 82 |   const option = FILTER_OPTIONS.find(opt => opt.key === filterKey);
 83 |   return option?.emoji || '';
 84 | }
 85 | 
 86 | export function getTagColor(tag: string): string {
 87 |   return TAG_COLORS[tag as keyof typeof TAG_COLORS] || 'bg-gray-100 text-gray-800';
 88 | }
 89 | 
 90 | export function getAppTagColor(tag: string): string {
 91 |   return APP_TAG_COLORS[tag as keyof typeof APP_TAG_COLORS] || 'bg-gray-100 text-gray-800';
 92 | }
 93 | 
 94 | // URL validation and formatting
 95 | export function formatUrl(url: string): string {
 96 |   return url.replace(/^https?:\/\//, '');
 97 | }
 98 | 
 99 | export function isValidUrl(url: string): boolean {
100 |   try {
101 |     new URL(url.startsWith('http') ? url : `https://${url}`);
102 |     return true;
103 |   } catch {
104 |     return false;
105 |   }
106 | }
107 | 
108 | // Local storage helpers for user preferences
109 | export function saveFavorites(favorites: Set<number>): void {
110 |   localStorage.setItem('api-provider-favorites', JSON.stringify(Array.from(favorites)));
111 | }
112 | 
113 | export function loadFavorites(): Set<number> {
114 |   try {
115 |     const saved = localStorage.getItem('api-provider-favorites');
116 |     return new Set(saved ? JSON.parse(saved) : []);
117 |   } catch {
118 |     return new Set();
119 |   }
120 | }
121 | 
122 | export function saveFilterPreference(filter: string): void {
123 |   localStorage.setItem('api-provider-filter', filter);
124 | }
125 | 
126 | export function loadFilterPreference(): string {
127 |   return localStorage.getItem('api-provider-filter') || 'all';
128 | }
129 | 
130 | // Analytics and tracking helpers (for future implementation)
131 | export function trackProviderClick(providerId: number, providerName: string): void {
132 |   // This could be implemented to track user interactions
133 |   console.log(`Provider clicked: ${providerName} (ID: ${providerId})`);
134 | }
135 | 
136 | export function trackSearch(searchTerm: string): void {
137 |   // This could be implemented to track search patterns
138 |   console.log(`Search performed: ${searchTerm}`);
139 | }
140 | 
141 | export function trackFilterUsage(filter: string): void {
142 |   // This could be implemented to track filter usage
143 |   console.log(`Filter applied: ${filter}`);
144 | }
145 | 
146 | // Copy to clipboard with fallback
147 | export async function copyToClipboard(text: string): Promise<boolean> {
148 |   try {
149 |     if (navigator.clipboard && window.isSecureContext) {
150 |       await navigator.clipboard.writeText(text);
151 |       return true;
152 |     } else {
153 |       // Fallback for older browsers or non-secure contexts
154 |       const textArea = document.createElement('textarea');
155 |       textArea.value = text;
156 |       textArea.style.position = 'fixed';
157 |       textArea.style.left = '-999999px';
158 |       textArea.style.top = '-999999px';
159 |       document.body.appendChild(textArea);
160 |       textArea.focus();
161 |       textArea.select();
162 |       const successful = document.execCommand('copy');
163 |       document.body.removeChild(textArea);
164 |       return successful;
165 |     }
166 |   } catch (err) {
167 |     console.error('Failed to copy text: ', err);
168 |     return false;
169 |   }
170 | }
171 | 
172 | // Scroll utilities
173 | export function scrollToSection(sectionId: string): void {
174 |   const element = document.getElementById(sectionId);
175 |   if (element) {
176 |     const headerHeight = 80; // Account for sticky header
177 |     const elementPosition = element.offsetTop - headerHeight;
178 |     window.scrollTo({
179 |       top: elementPosition,
180 |       behavior: 'smooth'
181 |     });
182 |   }
183 | }
184 | 
185 | // Debounce function for search input
186 | export function debounce<T extends (...args: any[]) => any>(
187 |   func: T,
188 |   wait: number
189 | ): (...args: Parameters<T>) => void {
190 |   let timeout: NodeJS.Timeout;
191 |   return (...args: Parameters<T>) => {
192 |     clearTimeout(timeout);
193 |     timeout = setTimeout(() => func(...args), wait);
194 |   };
195 | }
196 | 
197 | // Sort providers by various criteria
198 | export function sortProviders(providers: any[], sortBy: 'name' | 'recommended' | 'tags' = 'recommended'): any[] {
199 |   return [...providers].sort((a, b) => {
200 |     switch (sortBy) {
201 |       case 'name':
202 |         return a.displayName.localeCompare(b.displayName);
203 |       case 'recommended':
204 |         if (a.isRecommended && !b.isRecommended) return -1;
205 |         if (!a.isRecommended && b.isRecommended) return 1;
206 |         return a.sortOrder - b.sortOrder;
207 |       case 'tags':
208 |         return b.tags.length - a.tags.length;
209 |       default:
210 |         return a.sortOrder - b.sortOrder;
211 |     }
212 |   });
213 | }
214 | 
215 | // Constants for UI
216 | export const MOBILE_BREAKPOINT = 1024;
217 | export const SEARCH_DEBOUNCE_MS = 300;
218 | export const TOAST_DURATION = 3000;
219 | export const ANIMATION_DURATION = 200;
220 | 
221 | // Language-specific formatting
222 | export const LANGUAGE_FLAGS = {
223 |   zh: '🇨🇳',
224 |   en: '🇺🇸', 
225 |   ru: '🇷🇺',
226 |   fr: '🇫🇷'
227 | } as const;
228 | 
229 | export const LANGUAGE_NAMES = {
230 |   zh: '中文',
231 |   en: 'English',
232 |   ru: 'Русский', 
233 |   fr: 'Français'
234 | } as const;
235 | 


--------------------------------------------------------------------------------
/website/client/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const ContextMenu = ContextMenuPrimitive.Root
  8 | 
  9 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 10 | 
 11 | const ContextMenuGroup = ContextMenuPrimitive.Group
 12 | 
 13 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 14 | 
 15 | const ContextMenuSub = ContextMenuPrimitive.Sub
 16 | 
 17 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 18 | 
 19 | const ContextMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <ContextMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </ContextMenuPrimitive.SubTrigger>
 37 | ))
 38 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 39 | 
 40 | const ContextMenuSubContent = React.forwardRef<
 41 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 42 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 43 | >(({ className, ...props }, ref) => (
 44 |   <ContextMenuPrimitive.SubContent
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   />
 52 | ))
 53 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 54 | 
 55 | const ContextMenuContent = React.forwardRef<
 56 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 57 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 58 | >(({ className, ...props }, ref) => (
 59 |   <ContextMenuPrimitive.Portal>
 60 |     <ContextMenuPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(
 63 |         "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
 64 |         className
 65 |       )}
 66 |       {...props}
 67 |     />
 68 |   </ContextMenuPrimitive.Portal>
 69 | ))
 70 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 71 | 
 72 | const ContextMenuItem = React.forwardRef<
 73 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 74 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 75 |     inset?: boolean
 76 |   }
 77 | >(({ className, inset, ...props }, ref) => (
 78 |   <ContextMenuPrimitive.Item
 79 |     ref={ref}
 80 |     className={cn(
 81 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 82 |       inset && "pl-8",
 83 |       className
 84 |     )}
 85 |     {...props}
 86 |   />
 87 | ))
 88 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 89 | 
 90 | const ContextMenuCheckboxItem = React.forwardRef<
 91 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 92 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 93 | >(({ className, children, checked, ...props }, ref) => (
 94 |   <ContextMenuPrimitive.CheckboxItem
 95 |     ref={ref}
 96 |     className={cn(
 97 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 98 |       className
 99 |     )}
100 |     checked={checked}
101 |     {...props}
102 |   >
103 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
104 |       <ContextMenuPrimitive.ItemIndicator>
105 |         <Check className="h-4 w-4" />
106 |       </ContextMenuPrimitive.ItemIndicator>
107 |     </span>
108 |     {children}
109 |   </ContextMenuPrimitive.CheckboxItem>
110 | ))
111 | ContextMenuCheckboxItem.displayName =
112 |   ContextMenuPrimitive.CheckboxItem.displayName
113 | 
114 | const ContextMenuRadioItem = React.forwardRef<
115 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
116 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
117 | >(({ className, children, ...props }, ref) => (
118 |   <ContextMenuPrimitive.RadioItem
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <ContextMenuPrimitive.ItemIndicator>
128 |         <Circle className="h-2 w-2 fill-current" />
129 |       </ContextMenuPrimitive.ItemIndicator>
130 |     </span>
131 |     {children}
132 |   </ContextMenuPrimitive.RadioItem>
133 | ))
134 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
135 | 
136 | const ContextMenuLabel = React.forwardRef<
137 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
138 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
139 |     inset?: boolean
140 |   }
141 | >(({ className, inset, ...props }, ref) => (
142 |   <ContextMenuPrimitive.Label
143 |     ref={ref}
144 |     className={cn(
145 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
146 |       inset && "pl-8",
147 |       className
148 |     )}
149 |     {...props}
150 |   />
151 | ))
152 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
153 | 
154 | const ContextMenuSeparator = React.forwardRef<
155 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
156 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
157 | >(({ className, ...props }, ref) => (
158 |   <ContextMenuPrimitive.Separator
159 |     ref={ref}
160 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
161 |     {...props}
162 |   />
163 | ))
164 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
165 | 
166 | const ContextMenuShortcut = ({
167 |   className,
168 |   ...props
169 | }: React.HTMLAttributes<HTMLSpanElement>) => {
170 |   return (
171 |     <span
172 |       className={cn(
173 |         "ml-auto text-xs tracking-widest text-muted-foreground",
174 |         className
175 |       )}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
181 | 
182 | export {
183 |   ContextMenu,
184 |   ContextMenuTrigger,
185 |   ContextMenuContent,
186 |   ContextMenuItem,
187 |   ContextMenuCheckboxItem,
188 |   ContextMenuRadioItem,
189 |   ContextMenuLabel,
190 |   ContextMenuSeparator,
191 |   ContextMenuShortcut,
192 |   ContextMenuGroup,
193 |   ContextMenuPortal,
194 |   ContextMenuSub,
195 |   ContextMenuSubContent,
196 |   ContextMenuSubTrigger,
197 |   ContextMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------
/website/client/src/components/provider-stats.tsx:
--------------------------------------------------------------------------------
  1 | import { useQuery } from "@tanstack/react-query";
  2 | import { useLanguage } from "@/hooks/use-language";
  3 | import { Badge } from "@/components/ui/badge";
  4 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
  5 | import { Progress } from "@/components/ui/progress";
  6 | import { BarChart, TrendingUp, Users, Shield, Zap, DollarSign } from "lucide-react";
  7 | import type { ApiProvider } from "@shared/schema";
  8 | 
  9 | export function ProviderStats() {
 10 |   const { t } = useLanguage();
 11 | 
 12 |   const { data: providers = [], isLoading } = useQuery<ApiProvider[]>({
 13 |     queryKey: ['/api/providers']
 14 |   });
 15 | 
 16 |   if (isLoading) {
 17 |     return (
 18 |       <section className="py-12 bg-white">
 19 |         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 20 |           <div className="animate-pulse">
 21 |             <div className="h-8 bg-gray-200 rounded w-1/3 mx-auto mb-8"></div>
 22 |             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 23 |               {[...Array(4)].map((_, i) => (
 24 |                 <div key={i} className="h-32 bg-gray-200 rounded-lg"></div>
 25 |               ))}
 26 |             </div>
 27 |           </div>
 28 |         </div>
 29 |       </section>
 30 |     );
 31 |   }
 32 | 
 33 |   // 计算统计数据
 34 |   const totalProviders = providers.length;
 35 |   const freeProviders = providers.filter(p => p.tags.includes('🆓')).length;
 36 |   const freemiumProviders = providers.filter(p => p.tags.includes('🔓')).length;
 37 |   const claudeProviders = providers.filter(p => p.tags.includes('💪')).length;
 38 |   const openaiProviders = providers.filter(p => p.tags.includes('✌')).length;
 39 |   const verifiedProviders = providers.filter(p => p.tags.includes('✔')).length;
 40 |   const highConcurrencyProviders = providers.filter(p => p.tags.includes('🚀')).length;
 41 |   const recommendedProviders = providers.filter(p => p.isRecommended).length;
 42 | 
 43 |   const stats = [
 44 |     {
 45 |       title: "总提供商数量",
 46 |       value: totalProviders,
 47 |       icon: BarChart,
 48 |       color: "text-blue-600",
 49 |       bgColor: "bg-blue-50"
 50 |     },
 51 |     {
 52 |       title: "免费服务",
 53 |       value: freeProviders + freemiumProviders,
 54 |       subtitle: `${freeProviders} 完全免费 + ${freemiumProviders} 有免费额度`,
 55 |       icon: DollarSign,
 56 |       color: "text-green-600",
 57 |       bgColor: "bg-green-50"
 58 |     },
 59 |     {
 60 |       title: "已验证平台",
 61 |       value: verifiedProviders,
 62 |       subtitle: `${Math.round((verifiedProviders / totalProviders) * 100)}% 通过验证`,
 63 |       icon: Shield,
 64 |       color: "text-purple-600",
 65 |       bgColor: "bg-purple-50"
 66 |     },
 67 |     {
 68 |       title: "高并发支持",
 69 |       value: highConcurrencyProviders,
 70 |       subtitle: `${Math.round((highConcurrencyProviders / totalProviders) * 100)}% 支持高并发`,
 71 |       icon: Zap,
 72 |       color: "text-orange-600",
 73 |       bgColor: "bg-orange-50"
 74 |     }
 75 |   ];
 76 | 
 77 |   const modelStats = [
 78 |     {
 79 |       name: "OpenAI 支持",
 80 |       count: openaiProviders,
 81 |       percentage: Math.round((openaiProviders / totalProviders) * 100),
 82 |       color: "bg-blue-500"
 83 |     },
 84 |     {
 85 |       name: "Claude 支持", 
 86 |       count: claudeProviders,
 87 |       percentage: Math.round((claudeProviders / totalProviders) * 100),
 88 |       color: "bg-red-500"
 89 |     },
 90 |     {
 91 |       name: "推荐平台",
 92 |       count: recommendedProviders,
 93 |       percentage: Math.round((recommendedProviders / totalProviders) * 100),
 94 |       color: "bg-yellow-500"
 95 |     }
 96 |   ];
 97 | 
 98 |   return (
 99 |     <section className="py-12 bg-white">
100 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101 |         <div className="text-center mb-12">
102 |           <h2 className="text-3xl font-bold text-gray-900 mb-4">
103 |             📊 平台统计分析
104 |           </h2>
105 |           <p className="text-gray-600 max-w-2xl mx-auto">
106 |             实时统计和分析当前收录的API提供商数据
107 |           </p>
108 |         </div>
109 | 
110 |         {/* 主要统计卡片 */}
111 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
112 |           {stats.map((stat, index) => {
113 |             const IconComponent = stat.icon;
114 |             return (
115 |               <Card key={index} className="hover:shadow-lg transition-shadow duration-200">
116 |                 <CardContent className="p-6">
117 |                   <div className="flex items-center justify-between">
118 |                     <div>
119 |                       <p className="text-sm font-medium text-gray-600 mb-1">
120 |                         {stat.title}
121 |                       </p>
122 |                       <p className="text-3xl font-bold text-gray-900">
123 |                         {stat.value}
124 |                       </p>
125 |                       {stat.subtitle && (
126 |                         <p className="text-xs text-gray-500 mt-1">
127 |                           {stat.subtitle}
128 |                         </p>
129 |                       )}
130 |                     </div>
131 |                     <div className={`w-12 h-12 ${stat.bgColor} rounded-lg flex items-center justify-center`}>
132 |                       <IconComponent className={`w-6 h-6 ${stat.color}`} />
133 |                     </div>
134 |                   </div>
135 |                 </CardContent>
136 |               </Card>
137 |             );
138 |           })}
139 |         </div>
140 | 
141 |         {/* 模型支持统计 */}
142 |         <Card>
143 |           <CardHeader>
144 |             <CardTitle className="flex items-center">
145 |               <TrendingUp className="w-5 h-5 mr-2 text-blue-600" />
146 |               模型支持分布
147 |             </CardTitle>
148 |           </CardHeader>
149 |           <CardContent>
150 |             <div className="space-y-6">
151 |               {modelStats.map((model, index) => (
152 |                 <div key={index} className="space-y-2">
153 |                   <div className="flex justify-between items-center">
154 |                     <span className="text-sm font-medium text-gray-700">
155 |                       {model.name}
156 |                     </span>
157 |                     <div className="flex items-center space-x-2">
158 |                       <span className="text-sm text-gray-600">
159 |                         {model.count} 个平台
160 |                       </span>
161 |                       <Badge variant="secondary" className="text-xs">
162 |                         {model.percentage}%
163 |                       </Badge>
164 |                     </div>
165 |                   </div>
166 |                   <Progress value={model.percentage} className="h-2" />
167 |                 </div>
168 |               ))}
169 |             </div>
170 |           </CardContent>
171 |         </Card>
172 | 
173 |         {/* 标签统计 */}
174 |         <Card className="mt-6">
175 |           <CardHeader>
176 |             <CardTitle className="flex items-center">
177 |               <Users className="w-5 h-5 mr-2 text-green-600" />
178 |               功能标签分布
179 |             </CardTitle>
180 |           </CardHeader>
181 |           <CardContent>
182 |             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
183 |               {[
184 |                 { tag: '🆓', name: '完全免费', count: freeProviders },
185 |                 { tag: '🔓', name: '有免费额度', count: freemiumProviders },
186 |                 { tag: '💪', name: 'Claude支持', count: claudeProviders },
187 |                 { tag: '✌', name: 'OpenAI支持', count: openaiProviders },
188 |                 { tag: '🚀', name: '高并发', count: highConcurrencyProviders },
189 |                 { tag: '✔', name: '已验证', count: verifiedProviders }
190 |               ].map((item, index) => (
191 |                 <div key={index} className="text-center p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
192 |                   <div className="text-2xl mb-2">{item.tag}</div>
193 |                   <div className="text-lg font-semibold text-gray-900">{item.count}</div>
194 |                   <div className="text-xs text-gray-600">{item.name}</div>
195 |                 </div>
196 |               ))}
197 |             </div>
198 |           </CardContent>
199 |         </Card>
200 |       </div>
201 |     </section>
202 |   );
203 | }


--------------------------------------------------------------------------------
/website/client/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------