+
+
+
+
+
+ )
+}
diff --git a/web/src/app/providers.tsx b/web/src/app/providers.tsx
new file mode 100644
index 00000000..1661d244
--- /dev/null
+++ b/web/src/app/providers.tsx
@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider } from '@tanstack/react-router'
+import { router } from './router'
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 5 * 60 * 1000, // 5 分钟
+ retry: 1,
+ refetchOnWindowFocus: false,
+ },
+ },
+})
+
+export function App() {
+ return (
+
+
+ SkillHub
+
+
+
+
+
+ )
+ }
+
+ if (!isAuthenticated) {
+ return null
+ }
+
+ return <>{children}
+}
diff --git a/web/src/features/auth/login-button.tsx b/web/src/features/auth/login-button.tsx
new file mode 100644
index 00000000..57db8e2f
--- /dev/null
+++ b/web/src/features/auth/login-button.tsx
@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { authApi } from '@/api/client'
+import { Button } from '@/shared/ui/button'
+import type { OAuthProvider } from '@/api/types'
+
+export function LoginButton() {
+ const { data, isLoading } = useQuery加载中...
+
+
+
+ )
+ }
+
+ return (
+
+ {providers.map((provider) => (
+
+ ))}
+
+ )
+}
diff --git a/web/src/features/auth/use-auth.ts b/web/src/features/auth/use-auth.ts
new file mode 100644
index 00000000..2ead0532
--- /dev/null
+++ b/web/src/features/auth/use-auth.ts
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { authApi } from '@/api/client'
+import type { User } from '@/api/types'
+
+export function useAuth() {
+ const { data: user, isLoading, error } = useQuery加载中...
+ }
+
+ return (
+
+
+ )
+}
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 00000000..10c2d37f
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 00000000..9438cdcc
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './app/providers'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+ {!tokens || tokens.length === 0 ? (
+ API Tokens
+
+
+ ) : (
+ 还没有创建任何 Token
+点击上方按钮创建第一个 Token
+
+
+
+
+ )}
+
+
+
+ 用户信息
+ 你的账户详情
+
+
+
+
+
+
+
+
+
+ Dashboard
++ 管理你的账户和 API Tokens +
+
+ {user?.avatarUrl && (
+ 
+ )}
+
+ {user?.platformRoles && user.platformRoles.length > 0 && (
+
+
+ {user?.displayName}
+ {user?.email}
+
+ 通过 {user?.oauthProvider} 登录
+
+
+
+ )}
+ 平台角色
+
+ {user.platformRoles.map((role) => (
+
+ {role}
+
+ ))}
+
+
+
+ )
+}
diff --git a/web/src/pages/login.tsx b/web/src/pages/login.tsx
new file mode 100644
index 00000000..0ec7add0
--- /dev/null
+++ b/web/src/pages/login.tsx
@@ -0,0 +1,17 @@
+import { LoginButton } from '@/features/auth/login-button'
+
+export function LoginPage() {
+ return (
+
+
+ SkillHub
+技能注册中心
+
+
+ + 欢迎来到 SkillHub，这是一个技能管理和分享平台。 +
++ 请登录以访问完整功能。 +
+
+
+ )
+}
diff --git a/web/src/shared/lib/utils.ts b/web/src/shared/lib/utils.ts
new file mode 100644
index 00000000..d32b0fe6
--- /dev/null
+++ b/web/src/shared/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/web/src/shared/ui/button.tsx b/web/src/shared/ui/button.tsx
new file mode 100644
index 00000000..4b81f45e
--- /dev/null
+++ b/web/src/shared/ui/button.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/shared/lib/utils'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center 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',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+ outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+
+
+
+ 登录 SkillHub
++ 选择一个方式登录以继续 +
+ onOpenChange(false)}
+ {...props}
+ />
+ )
+ }
+)
+DialogOverlay.displayName = 'DialogOverlay'
+
+const DialogContent = React.forwardRef>(
+ ({ className, children, ...props }, ref) => {
+ const { onOpenChange } = useDialog()
+ return (
+
+
+ )
+ }
+)
+DialogContent.displayName = 'DialogContent'
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+DialogTitle.displayName = 'DialogTitle'
+
+const DialogDescription = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+DialogDescription.displayName = 'DialogDescription'
+
+export {
+ Dialog,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+}
diff --git a/web/src/shared/ui/input.tsx b/web/src/shared/ui/input.tsx
new file mode 100644
index 00000000..d79fca56
--- /dev/null
+++ b/web/src/shared/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { cn } from '@/shared/lib/utils'
+
+export interface InputProps extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/web/src/shared/ui/label.tsx b/web/src/shared/ui/label.tsx
new file mode 100644
index 00000000..0f64edc5
--- /dev/null
+++ b/web/src/shared/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { cn } from '@/shared/lib/utils'
+
+export interface LabelProps extends React.LabelHTMLAttributes {}
+
+const Label = React.forwardRef(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+Label.displayName = 'Label'
+
+export { Label }
diff --git a/web/src/shared/ui/table.tsx b/web/src/shared/ui/table.tsx
new file mode 100644
index 00000000..ec871374
--- /dev/null
+++ b/web/src/shared/ui/table.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { cn } from '@/shared/lib/utils'
+
+const Table = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+ >(
+ ({ className, ...props }, ref) =>
+)
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+TableBody.displayName = 'TableBody'
+
+const TableRow = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+ >(
+ ({ className, ...props }, ref) => (
+ >(
+ ({ className, ...props }, ref) => (
+
+
+ e.stopPropagation()}
+ {...props}
+ >
+ {children}
+
+
+
+
+
+ )
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef