[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.985 0.002 247); --foreground: oklch(0.13 0.028 261); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0.028 261); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0.028 261); --primary: oklch(0.55 0.18 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.96 0.01 250); --secondary-foreground: oklch(0.35 0.05 250); --muted: oklch(0.96 0.008 250); --muted-foreground: oklch(0.5 0.02 250); --accent: oklch(0.92 0.03 250); --accent-foreground: oklch(0.35 0.05 250); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.01 250); --input: oklch(0.92 0.01 250); --ring: oklch(0.55 0.18 250); --chart-1: oklch(0.55 0.18 250); --chart-2: oklch(0.6 0.15 160); --chart-3: oklch(0.65 0.2 30); --chart-4: oklch(0.7 0.15 80); --chart-5: oklch(0.6 0.18 300); --radius: 0.75rem; --sidebar: oklch(0.985 0.002 247); --sidebar-foreground: oklch(0.13 0.028 261); --sidebar-primary: oklch(0.55 0.18 250); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.92 0.03 250); --sidebar-accent-foreground: oklch(0.35 0.05 250); --sidebar-border: oklch(0.92 0.01 250); --sidebar-ring: oklch(0.55 0.18 250); /* Forum specific colors */ --success: oklch(0.65 0.18 145); --success-foreground: oklch(0.98 0 0); --warning: oklch(0.75 0.15 75); --warning-foreground: oklch(0.25 0.05 75); --info: oklch(0.6 0.15 230); --info-foreground: oklch(0.98 0 0); } .dark { --background: oklch(0.13 0.02 260); --foreground: oklch(0.95 0.01 250); --card: oklch(0.17 0.02 260); --card-foreground: oklch(0.95 0.01 250); --popover: oklch(0.17 0.02 260); --popover-foreground: oklch(0.95 0.01 250); --primary: oklch(0.65 0.18 250); --primary-foreground: oklch(0.13 0.02 260); --secondary: oklch(0.22 0.02 260); --secondary-foreground: oklch(0.9 0.01 250); --muted: oklch(0.22 0.02 260); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.25 0.03 260); --accent-foreground: oklch(0.9 0.01 250); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.25 0.02 260); --input: oklch(0.25 0.02 260); --ring: oklch(0.65 0.18 250); --chart-1: oklch(0.65 0.18 250); --chart-2: oklch(0.65 0.15 160); --chart-3: oklch(0.7 0.2 30); --chart-4: oklch(0.75 0.15 80); --chart-5: oklch(0.65 0.18 300); --sidebar: oklch(0.15 0.02 260); --sidebar-foreground: oklch(0.95 0.01 250); --sidebar-primary: oklch(0.65 0.18 250); --sidebar-primary-foreground: oklch(0.13 0.02 260); --sidebar-accent: oklch(0.25 0.03 260); --sidebar-accent-foreground: oklch(0.9 0.01 250); --sidebar-border: oklch(0.25 0.02 260); --sidebar-ring: oklch(0.65 0.18 250); --success: oklch(0.7 0.18 145); --success-foreground: oklch(0.13 0.02 145); --warning: oklch(0.8 0.15 75); --warning-foreground: oklch(0.2 0.05 75); --info: oklch(0.65 0.15 230); --info-foreground: oklch(0.13 0.02 230); } @theme inline { --font-sans: "Geist", "Geist Fallback", system-ui, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--muted); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--foreground); } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { AuthProvider } from "@/lib/auth-context" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "NodeBBS - 现代化论坛社区", description: "一个现代化的论坛社区，分享知识、交流想法、结识朋友", generator: "v0.app", keywords: ["论坛", "社区", "讨论", "分享", "BBS"], icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { themeColor: [ { media: "(prefers-color-scheme: light)", color: "#f8fafc" }, { media: "(prefers-color-scheme: dark)", color: "#1e1b4b" }, ], width: "device-width", initialScale: 1, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="lib/api.ts" isEdit="true" isQuickEdit="true" isMerged="true" const API_BASE_URL = "https://nodebbs.com" interface ApiOptions { method?: "GET" | "POST" | "PATCH" | "DELETE" body?: unknown token?: string } async function apiRequest(endpoint: string, options: ApiOptions = {}): Promise { const { method = "GET", body, token } = options const headers: HeadersInit = { "Content-Type": "application/json", } if (token) { headers["Authorization"] = `Bearer ${token}` } const response = await fetch(`${API_BASE_URL}${endpoint}`, { method, headers, body: body ? JSON.stringify(body) : undefined, }) if (!response.ok) { const error = await response.json().catch(() => ({ error: "Unknown error" })) throw new Error(error.error || error.message || "Request failed") } return response.json() } // Auth APIs export const authApi = { login: (identifier: string, password: string) => apiRequest<{ user: User; token: string }>("/api/auth/login", { method: "POST", body: { identifier, password }, }), register: (username: string, email: string, password: string, name?: string) => apiRequest<{ user: User; token: string }>("/api/auth/register", { method: "POST", body: { username, email, password, name }, }), me: (token: string) => apiRequest("/api/auth/me", { token }), logout: (token: string) => apiRequest<{ message: string }>("/api/auth/logout", { method: "POST", token }), } // Topics APIs export const topicsApi = { list: (params?: { page?: number limit?: number categoryId?: number userId?: number tag?: string search?: string sort?: "latest" | "popular" | "trending" }) => { const searchParams = new URLSearchParams() if (params) { Object.entries(params).forEach(([key, value]) => { if (value !== undefined) searchParams.set(key, String(value)) }) } return apiRequest>(`/api/topics/?${searchParams}`) }, get: (id: number, token?: string) => apiRequest(`/api/topics/${id}`, { token }), create: (data: { title: string; categoryId: number; content: string; tags?: string[] }, token: string) => apiRequest("/api/topics/", { method: "POST", body: data, token }), update: ( id: number, data: { title?: string; content?: string; categoryId?: number; tags?: string[] }, token: string, ) => apiRequest(`/api/topics/${id}`, { method: "PATCH", body: data, token }), delete: (id: number, token: string, permanent = false) => apiRequest<{ message: string }>(`/api/topics/${id}?permanent=${permanent}`, { method: "DELETE", token }), bookmark: (id: number, token: string) => apiRequest<{ message: string }>(`/api/topics/${id}/bookmark`, { method: "POST", token }), unbookmark: (id: number, token: string) => apiRequest<{ message: string }>(`/api/topics/${id}/bookmark`, { method: "DELETE", token }), } // Posts APIs export const postsApi = { list: (params?: { topicId?: number; userId?: number; page?: number; limit?: number }, token?: string) => { const searchParams = new URLSearchParams() if (params) { Object.entries(params).forEach(([key, value]) => { if (value !== undefined) searchParams.set(key, String(value)) }) } return apiRequest>(`/api/posts/?${searchParams}`, { token }) }, create: (data: { topicId: number; content: string; replyToPostId?: number }, token: string) => apiRequest("/api/posts/", { method: "POST", body: data, token }), update: (id: number, content: string, token: string) => apiRequest(`/api/posts/${id}`, { method: "PATCH", body: { content }, token }), delete: (id: number, token: string, permanent = false) => apiRequest<{ message: string }>(`/api/posts/${id}?permanent=${permanent}`, { method: "DELETE", token }), like: (id: number, token: string) => apiRequest<{ message: string }>(`/api/posts/${id}/like`, { method: "POST", token }), unlike: (id: number, token: string) => apiRequest<{ message: string }>(`/api/posts/${id}/like`, { method: "DELETE", token }), } // Categories APIs export const categoriesApi = { list: (params?: { isFeatured?: boolean; search?: string }) => { const searchParams = new URLSearchParams() if (params) { Object.entries(params).forEach(([key, value]) => { if (value !== undefined) searchParams.set(key, String(value)) }) } return apiRequest(`/api/categories/?${searchParams}`) }, get: (slug: string) => apiRequest(`/api/categories/${slug}`), } // Tags APIs export const tagsApi = { list: (params?: { page?: number; limit?: number; search?: string }) => { const searchParams = new URLSearchParams() if (params) { Object.entries(params).forEach(([key, value]) => { if (value !== undefined) searchParams.set(key, String(value)) }) } return apiRequest>(`/api/tags/?${searchParams}`) }, trending: () => apiRequest("/api/tags"), } // Users APIs export const usersApi = { getProfile: (username: string, token?: string) => apiRequest(`/api/users/${username}`, { token }), updateProfile: (data: { name?: string; bio?: string; avatar?: string }, token: string) => apiRequest("/api/users/me", { method: "PATCH", body: data, token }), follow: (id: number, token: string) => apiRequest<{ message: string }>(`/api/users/${id}/follow`, { method: "POST", token }), unfollow: (id: number, token: string) => apiRequest<{ message: string }>(`/api/users/${id}/follow`, { method: "DELETE", token }), } // Notifications APIs export const notificationsApi = { list: (params?: { page?: number; limit?: number; unreadOnly?: boolean }, token?: string) => { const searchParams = new URLSearchParams() if (params) { Object.entries(params).forEach(([key, value]) => { if (value !== undefined) searchParams.set(key, String(value)) }) } return apiRequest>(`/api/notifications/?${searchParams}`, { token }) }, markAsRead: (id: number, token: string) => apiRequest<{ message: string }>(`/api/notifications/${id}/read`, { method: "PATCH", token }), markAllAsRead: (token: string) => apiRequest<{ message: string; count: number }>("/api/notifications/read-all", { method: "POST", token }), } // Stats APIs export const statsApi = { get: () => apiRequest<{ userCount: number; topicCount: number; postCount: number; onlineCount: number }>("/api/stats"), } // Types export interface User { id: number username: string email: string name: string bio?: string | null avatar?: string | null role: "user" | "moderator" | "admin" | "vip" isBanned: boolean isEmailVerified: boolean createdAt: string lastSeenAt?: string | null } export interface UserProfile { id: number username: string name: string bio?: string | null avatar?: string | null role: "user" | "moderator" | "admin" | "vip" topicCount: number postCount: number followerCount: number followingCount: number isFollowing: boolean createdAt: string } export interface Topic { id: number title: string slug: string categoryId: number categoryName: string categorySlug: string categoryColor: string userId: number username: string userAvatar?: string | null viewCount: number postCount: number isPinned: boolean isClosed: boolean lastPostAt?: string | null createdAt: string } export interface TopicDetail extends Topic { content: string userName: string firstPostId: number firstPostLikeCount: number isFirstPostLiked: boolean isDeleted: boolean approvalStatus: "pending" | "approved" | "rejected" editCount: number editedAt?: string | null lastPostNumber: number tags: Tag[] isBookmarked: boolean isSubscribed: boolean updatedAt: string } export interface Post { id: number topicId: number topicTitle: string topicSlug: string userId: number username: string userName: string userAvatar?: string | null userRole: "user" | "moderator" | "admin" | "vip" content: string postNumber: number replyToPostId?: number | null likeCount: number isLiked: boolean approvalStatus: "pending" | "approved" | "rejected" editCount: number editedAt?: string | null createdAt: string } export interface Category { id: number name: string slug: string description?: string | null color: string icon?: string | null parentId?: number | null position: number isPrivate: boolean isFeatured: boolean createdAt: string updatedAt: string } export interface Tag { id: number name: string slug: string description?: string | null color: string topicCount: number } export interface Notification { id: number type: "reply" | "like" | "mention" | "topic_reply" | "follow" | "system" content: string isRead: boolean relatedTopicId?: number | null relatedPostId?: number | null relatedUserId?: number | null relatedUsername?: string | null createdAt: string } export interface PaginatedResponse { items: T[] page: number limit: number total: number } [V0_FILE]typescriptreact:file="lib/auth-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react" import { authApi, type User } from "./api" interface AuthContextType { user: User | null token: string | null isLoading: boolean login: (identifier: string, password: string) => Promise register: (username: string, email: string, password: string, name?: string) => Promise logout: () => void } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [token, setToken] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const storedToken = localStorage.getItem("token") if (storedToken) { setToken(storedToken) authApi .me(storedToken) .then(setUser) .catch(() => { localStorage.removeItem("token") setToken(null) }) .finally(() => setIsLoading(false)) } else { setIsLoading(false) } }, []) const login = useCallback(async (identifier: string, password: string) => { const { user, token } = await authApi.login(identifier, password) localStorage.setItem("token", token) setToken(token) setUser(user) }, []) const register = useCallback(async (username: string, email: string, password: string, name?: string) => { const { user, token } = await authApi.register(username, email, password, name) localStorage.setItem("token", token) setToken(token) setUser(user) }, []) const logout = useCallback(() => { localStorage.removeItem("token") setToken(null) setUser(null) }, []) return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="lib/mock-data.ts" isMerged="true" import type { Topic, Category, Tag, User, Post, UserProfile } from "./api" export const mockCategories: Category[] = [ { id: 1, name: "技术讨论", slug: "tech", description: "分享技术知识、讨论编程问题", color: "#3B82F6", icon: "code", parentId: null, position: 1, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 2, name: "前端开发", slug: "frontend", description: "React、Vue、Angular 等前端技术", color: "#10B981", icon: "layout", parentId: 1, position: 2, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 3, name: "后端开发", slug: "backend", description: "Node.js、Python、Java 等后端技术", color: "#8B5CF6", icon: "server", parentId: 1, position: 3, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 4, name: "产品设计", slug: "design", description: "UI/UX 设计、产品思维", color: "#F59E0B", icon: "palette", parentId: null, position: 4, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 5, name: "职场交流", slug: "career", description: "职场经验、面试技巧、薪资讨论", color: "#EC4899", icon: "briefcase", parentId: null, position: 5, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 6, name: "开源项目", slug: "opensource", description: "分享和讨论开源项目", color: "#06B6D4", icon: "git-branch", parentId: null, position: 6, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 7, name: "闲聊灌水", slug: "casual", description: "轻松聊天、分享生活", color: "#84CC16", icon: "coffee", parentId: null, position: 7, isPrivate: false, isFeatured: false, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, { id: 8, name: "问答求助", slug: "qa", description: "技术问题求助", color: "#EF4444", icon: "help-circle", parentId: null, position: 8, isPrivate: false, isFeatured: true, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, ] export const mockTags: Tag[] = [ { id: 1, name: "React", slug: "react", description: "React 相关话题", color: "#61DAFB", topicCount: 128 }, { id: 2, name: "TypeScript", slug: "typescript", description: "TypeScript 相关话题", color: "#3178C6", topicCount: 96, }, { id: 3, name: "Next.js", slug: "nextjs", description: "Next.js 相关话题", color: "#000000", topicCount: 84 }, { id: 4, name: "Node.js", slug: "nodejs", description: "Node.js 相关话题", color: "#339933", topicCount: 72 }, { id: 5, name: "Python", slug: "python", description: "Python 相关话题", color: "#3776AB", topicCount: 65 }, { id: 6, name: "Vue", slug: "vue", description: "Vue.js 相关话题", color: "#4FC08D", topicCount: 58 }, { id: 7, name: "Docker", slug: "docker", description: "Docker 容器技术", color: "#2496ED", topicCount: 45 }, { id: 8, name: "AI", slug: "ai", description: "人工智能相关话题", color: "#FF6B6B", topicCount: 156 }, ] export const mockUsers: User[] = [ { id: 1, username: "zhangsan", email: "zhangsan@example.com", name: "张三", bio: "全栈开发工程师，热爱开源", avatar: "/male-developer-avatar.png", role: "admin", isBanned: false, isEmailVerified: true, createdAt: "2023-01-15T08:00:00Z", lastSeenAt: "2024-12-03T10:30:00Z", }, { id: 2, username: "lisi", email: "lisi@example.com", name: "李四", bio: "前端架构师，Vue.js 核心团队成员", avatar: "/female-developer-avatar.png", role: "moderator", isBanned: false, isEmailVerified: true, createdAt: "2023-02-20T09:00:00Z", lastSeenAt: "2024-12-03T09:45:00Z", }, { id: 3, username: "wangwu", email: "wangwu@example.com", name: "王五", bio: "后端开发，专注于高并发系统", avatar: "/asian-male-avatar.png", role: "vip", isBanned: false, isEmailVerified: true, createdAt: "2023-03-10T10:00:00Z", lastSeenAt: "2024-12-02T18:20:00Z", }, { id: 4, username: "zhaoliu", email: "zhaoliu@example.com", name: "赵六", bio: "UI/UX 设计师", avatar: "/female-designer-avatar.png", role: "user", isBanned: false, isEmailVerified: true, createdAt: "2023-04-05T11:00:00Z", lastSeenAt: "2024-12-03T11:00:00Z", }, ] export const mockTopics: Topic[] = [ { id: 1, title: "2024 年前端开发趋势展望：AI 驱动的开发工具将如何改变我们的工作方式？", slug: "frontend-trends-2024", categoryId: 2, categoryName: "前端开发", categorySlug: "frontend", categoryColor: "#10B981", userId: 1, username: "zhangsan", userAvatar: "/male-developer-avatar.png", viewCount: 2580, postCount: 45, isPinned: true, isClosed: false, lastPostAt: "2024-12-03T10:30:00Z", createdAt: "2024-12-01T08:00:00Z", }, { id: 2, title: "Next.js 15 新特性深度解析：从 App Router 到 Server Actions", slug: "nextjs-15-deep-dive", categoryId: 2, categoryName: "前端开发", categorySlug: "frontend", categoryColor: "#10B981", userId: 2, username: "lisi", userAvatar: "/female-developer-avatar.png", viewCount: 1890, postCount: 32, isPinned: true, isClosed: false, lastPostAt: "2024-12-03T09:15:00Z", createdAt: "2024-11-28T14:00:00Z", }, { id: 3, title: "分享我的 Side Project：一个基于 AI 的代码审查工具", slug: "ai-code-review-tool", categoryId: 6, categoryName: "开源项目", categorySlug: "opensource", categoryColor: "#06B6D4", userId: 3, username: "wangwu", userAvatar: "/asian-male-avatar.png", viewCount: 3420, postCount: 67, isPinned: false, isClosed: false, lastPostAt: "2024-12-03T11:20:00Z", createdAt: "2024-11-25T16:30:00Z", }, { id: 4, title: "求助：React 18 并发模式下的状态管理最佳实践", slug: "react-18-state-management", categoryId: 8, categoryName: "问答求助", categorySlug: "qa", categoryColor: "#EF4444", userId: 4, username: "zhaoliu", userAvatar: "/female-designer-avatar.png", viewCount: 856, postCount: 23, isPinned: false, isClosed: false, lastPostAt: "2024-12-03T08:45:00Z", createdAt: "2024-12-02T19:00:00Z", }, { id: 5, title: "2024 年终总结：从初级到高级前端的成长之路", slug: "year-end-review-2024", categoryId: 5, categoryName: "职场交流", categorySlug: "career", categoryColor: "#EC4899", userId: 2, username: "lisi", userAvatar: "/female-developer-avatar.png", viewCount: 4521, postCount: 89, isPinned: false, isClosed: false, lastPostAt: "2024-12-03T10:00:00Z", createdAt: "2024-11-30T09:00:00Z", }, { id: 6, title: "TypeScript 5.3 新特性介绍与实战应用", slug: "typescript-53-features", categoryId: 1, categoryName: "技术讨论", categorySlug: "tech", categoryColor: "#3B82F6", userId: 1, username: "zhangsan", userAvatar: "/male-developer-avatar.png", viewCount: 1567, postCount: 28, isPinned: false, isClosed: false, lastPostAt: "2024-12-02T22:30:00Z", createdAt: "2024-11-29T11:00:00Z", }, { id: 7, title: "微服务架构中的分布式事务处理方案对比", slug: "distributed-transactions", categoryId: 3, categoryName: "后端开发", categorySlug: "backend", categoryColor: "#8B5CF6", userId: 3, username: "wangwu", userAvatar: "/asian-male-avatar.png", viewCount: 2134, postCount: 41, isPinned: false, isClosed: false, lastPostAt: "2024-12-02T20:15:00Z", createdAt: "2024-11-27T13:30:00Z", }, { id: 8, title: "设计系统从 0 到 1：我是如何为团队建立设计规范的", slug: "design-system-guide", categoryId: 4, categoryName: "产品设计", categorySlug: "design", categoryColor: "#F59E0B", userId: 4, username: "zhaoliu", userAvatar: "/female-designer-avatar.png", viewCount: 1823, postCount: 35, isPinned: false, isClosed: false, lastPostAt: "2024-12-01T16:45:00Z", createdAt: "2024-11-26T10:00:00Z", }, { id: 9, title: "Docker Compose 实战：从开发到生产的完整工作流", slug: "docker-compose-workflow", categoryId: 3, categoryName: "后端开发", categorySlug: "backend", categoryColor: "#8B5CF6", userId: 1, username: "zhangsan", userAvatar: "/male-developer-avatar.png", viewCount: 1245, postCount: 19, isPinned: false, isClosed: false, lastPostAt: "2024-12-01T14:20:00Z", createdAt: "2024-11-24T15:00:00Z", }, { id: 10, title: "周末一起来打羽毛球吗？北京望京约球", slug: "badminton-beijing", categoryId: 7, categoryName: "闲聊灌水", categorySlug: "casual", categoryColor: "#84CC16", userId: 2, username: "lisi", userAvatar: "/female-developer-avatar.png", viewCount: 432, postCount: 12, isPinned: false, isClosed: false, lastPostAt: "2024-12-03T07:30:00Z", createdAt: "2024-12-02T12:00:00Z", }, ] export const mockPosts: Post[] = [ { id: 1, topicId: 1, topicTitle: "2024 年前端开发趋势展望", topicSlug: "frontend-trends-2024", userId: 1, username: "zhangsan", userName: "张三", userAvatar: "/male-developer-avatar.png", userRole: "admin", content: "随着 AI 技术的快速发展，我们看到越来越多的 AI 驱动开发工具涌现出来。从 GitHub Copilot 到 Cursor，这些工具正在改变我们编写代码的方式。\n\n在 2024 年，我认为以下几个趋势值得关注：\n\n1. **AI 辅助编程将成为主流**\n2. **边缘计算与前端的结合**\n3. **WebAssembly 的进一步普及**\n4. **更加强调开发者体验**\n\n大家怎么看？", postNumber: 1, replyToPostId: null, likeCount: 128, isLiked: false, approvalStatus: "approved", editCount: 0, editedAt: null, createdAt: "2024-12-01T08:00:00Z", }, { id: 2, topicId: 1, topicTitle: "2024 年前端开发趋势展望", topicSlug: "frontend-trends-2024", userId: 2, username: "lisi", userName: "李四", userAvatar: "/female-developer-avatar.png", userRole: "moderator", content: "非常同意！我最近一直在使用 Cursor，生产力提升了不少。特别是在处理重复性代码和写测试用例时特别有帮助。\n\n不过我想补充一点：**Server Components** 和 **Server Actions** 可能会成为 2024 年最重要的前端架构变革。", postNumber: 2, replyToPostId: null, likeCount: 56, isLiked: true, approvalStatus: "approved", editCount: 0, editedAt: null, createdAt: "2024-12-01T08:30:00Z", }, { id: 3, topicId: 1, topicTitle: "2024 年前端开发趋势展望", topicSlug: "frontend-trends-2024", userId: 3, username: "wangwu", userName: "王五", userAvatar: "/asian-male-avatar.png", userRole: "vip", content: "@李四 Server Components 确实很强大！我们团队已经开始在生产环境中使用了，性能提升非常明显。\n\n另外想问一下楼主，你觉得 **Bun** 会在 2024 年取代 Node.js 吗？", postNumber: 3, replyToPostId: 2, likeCount: 32, isLiked: false, approvalStatus: "approved", editCount: 1, editedAt: "2024-12-01T10:15:00Z", createdAt: "2024-12-01T09:00:00Z", }, ] export const mockUserProfile: UserProfile = { id: 1, username: "zhangsan", name: "张三", bio: "全栈开发工程师，热爱开源。目前专注于 React 生态和 Node.js 后端开发。喜欢分享技术文章和开源项目。", avatar: "/male-developer-portrait.png", role: "admin", topicCount: 42, postCount: 256, followerCount: 1280, followingCount: 89, isFollowing: false, createdAt: "2023-01-15T08:00:00Z", } export const mockStats = { userCount: 12580, topicCount: 8964, postCount: 156789, onlineCount: 342, } [V0_FILE]typescriptreact:file="components/forum/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useAuth } from "@/lib/auth-context" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Search, Bell, MessageSquare, Menu, X, User, Settings, LogOut, PenSquare, Sun, Moon, Bookmark, } from "lucide-react" export function Header() { const { user, logout } = useAuth() const [isSearchOpen, setIsSearchOpen] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [isDark, setIsDark] = useState(false) const toggleTheme = () => { setIsDark(!isDark) document.documentElement.classList.toggle("dark") } return (

{/* Logo */}

NodeBBS {/* Desktop Navigation */}

{/* Search & Actions */}

{/* Desktop Search */}

{/* Mobile Search Toggle */} {/* Theme Toggle */} {user ? ( <> {/* Notifications */} 通知

李四回复了你的话题 2 分钟前王五点赞了你的回复 10 分钟前赵六关注了你 1 小时前

查看全部通知 {/* Messages */} {/* New Topic Button */} {/* User Menu */}

{user.name} @{user.username}

个人主页我的收藏设置退出登录 ) : (

)} {/* Mobile Menu Toggle */}

{/* Mobile Search */} {isSearchOpen && (

)} {/* Mobile Menu */} {isMobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/forum/topic-card.tsx" isMerged="true" import Link from "next/link" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Eye, MessageSquare, Pin, Lock } from "lucide-react" import { formatDistanceToNow } from "date-fns" import { zhCN } from "date-fns/locale" import type { Topic } from "@/lib/api" interface TopicCardProps { topic: Topic } export function TopicCard({ topic }: TopicCardProps) { const timeAgo = formatDistanceToNow(new Date(topic.lastPostAt || topic.createdAt), { addSuffix: true, locale: zhCN, }) return (

{/* User Avatar */} {topic.username.slice(0, 1).toUpperCase()} {/* Content */}

{/* Title & Badges */}

{topic.isPinned && ( 置顶 )} {topic.isClosed && ( 已关闭 )} {topic.categoryName}

{/* Title */}

{topic.title}

{/* Meta Info */}

{topic.username} · {topic.viewCount.toLocaleString()} {topic.postCount} · {timeAgo}

{/* Reply Count Badge */}

{topic.postCount} 回复

) } [V0_FILE]typescriptreact:file="components/forum/category-card.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { Code, Layout, Server, Palette, Briefcase, GitBranch, Coffee, HelpCircle } from "lucide-react" import type { Category } from "@/lib/api" interface CategoryCardProps { category: Category topicCount?: number } const iconMap: Record = { code: Code, layout: Layout, server: Server, palette: Palette, briefcase: Briefcase, "git-branch": GitBranch, coffee: Coffee, "help-circle": HelpCircle, } export function CategoryCard({ category, topicCount = 0 }: CategoryCardProps) { const Icon = iconMap[category.icon || "code"] || Code return (

{category.name}

{category.description || "暂无描述"}

{topicCount}

话题

) } [V0_FILE]typescriptreact:file="components/forum/sidebar.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Flame, TrendingUp, Users, MessageSquare, FileText, Zap } from "lucide-react" import { tagsApi, statsApi, type Tag } from "@/lib/api" export async function Sidebar() { let tags: Tag[] = [] let stats = { totalTopics: 0, totalPosts: 0, totalUsers: 0, online: {total: 0} } try { const [tagsRes, statsRes] = await Promise.all([tagsApi.trending(), statsApi.get()]) tags = tagsRes?.items || [] stats = statsRes || stats } catch (error) { console.log("[v0] Error fetching sidebar data:", error) } return (

{/* Stats Card */} 社区数据

{stats.totalUsers}

注册用户

{stats.totalTopics}

话题数

{stats.totalPosts}

回复数

{stats.online.total}

在线

{/* Trending Tags */} 热门标签

{tags.length > 0 ? ( tags.slice(0, 8).map((tag) => ( #{tag.name} {tag.topicCount} )) ) : (

暂无标签数据

)}

{/* Active Users - Static for now since API doesn't have trending users */} 活跃用户

登录后查看活跃用户

{/* Footer Links */}

关于我们社区规范隐私政策联系我们

) } [V0_FILE]typescriptreact:file="components/forum/topic-filters.tsx" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Clock, Flame, TrendingUp, Filter } from "lucide-react" interface TopicFiltersProps { onSortChange?: (sort: string) => void onCategoryChange?: (categoryId: string) => void } export function TopicFilters({ onSortChange, onCategoryChange }: TopicFiltersProps) { const [sort, setSort] = useState("latest") const handleSortChange = (value: string) => { setSort(value) onSortChange?.(value) } return (

{/* Sort Tabs */} 最新热门趋势 {/* Category Filter */}

) } [V0_FILE]typescriptreact:file="components/forum/footer.tsx" isMerged="true" import Link from "next/link" import { Github, Twitter, Mail } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/forum/header" import { Footer } from "@/components/forum/footer" import { TopicCard } from "@/components/forum/topic-card" import { CategoryCard } from "@/components/forum/category-card" import { Sidebar } from "@/components/forum/sidebar" import { TopicFilters } from "@/components/forum/topic-filters" import { Button } from "@/components/ui/button" import { topicsApi, categoriesApi, type Topic, type Category } from "@/lib/api" import { Sparkles, ArrowRight, ChevronRight } from "lucide-react" import Link from "next/link" export default async function HomePage() { let topics: Topic[] = [] let categories: Category[] = [] try { const [topicsRes, categoriesRes] = await Promise.all([ topicsApi.list({ limit: 20, sort: "latest" }), categoriesApi.list({ isFeatured: true }), ]) topics = topicsRes.items || [] categories = Array.isArray(categoriesRes) ? categoriesRes : [] } catch (error) { console.log("[v0] Error fetching data:", error) } const pinnedTopics = topics.filter((t) => t.isPinned) const regularTopics = topics.filter((t) => !t.isPinned) const featuredCategories = categories.filter((c) => c.isFeatured).slice(0, 6) return (

{/* Hero Section */}

欢迎来到 NodeBBS 社区

发现、分享、成长

一个开放的技术社区，汇聚了各行各业的开发者。在这里，你可以分享知识、讨论技术、结识志同道合的朋友。

{/* Featured Categories */}

{/* Actions */}

编辑举报删除

) } [V0_FILE]typescriptreact:file="components/forum/post-list.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Heart, MessageSquare, MoreHorizontal, Flag, Edit, Trash2, Quote, Reply } from "lucide-react" import { formatDistanceToNow } from "date-fns" import { zhCN } from "date-fns/locale" import type { Post } from "@/lib/api" interface PostListProps { posts: Post[] } interface PostCardProps { post: Post onReply: (postId: number) => void } function PostCard({ post, onReply }: PostCardProps) { const [isLiked, setIsLiked] = useState(post.isLiked) const [likeCount, setLikeCount] = useState(post.likeCount) const timeAgo = formatDistanceToNow(new Date(post.createdAt), { addSuffix: true, locale: zhCN, }) const handleLike = () => { setIsLiked(!isLiked) setLikeCount((prev) => (isLiked ? prev - 1 : prev + 1)) } const getRoleBadge = (role: string) => { switch (role) { case "admin": return { label: "管理员", color: "#EF4444" } case "moderator": return { label: "版主", color: "#8B5CF6" } case "vip": return { label: "VIP", color: "#F59E0B" } default: return null } } const roleBadge = getRoleBadge(post.userRole) return (

{/* Floor Number */}

#{post.postNumber}

{/* Post Content */}

{/* Author Info */}

{post.userName.slice(0, 1)}

{post.userName} {roleBadge && ( {roleBadge.label} )}

#{post.postNumber} {timeAgo} {post.editCount > 0 && (已编辑)}

引用编辑举报删除

{/* Reply To */} {post.replyToPostId && (

回复 #{post.replyToPostId}

)} {/* Content */}

{post.content}

{/* Actions */}

) } export function PostList({ posts }: PostListProps) { const handleReply = (postId: number) => { // Scroll to reply form document.getElementById("reply-form")?.scrollIntoView({ behavior: "smooth" }) } return (

全部回复 ({posts.length})

{posts.map((post) => ( ))}

) } [V0_FILE]typescriptreact:file="components/forum/reply-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { postsApi } from "@/lib/api" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Send, Bold, Italic, Link2, ImageIcon, Code, List, Quote, Loader2 } from "lucide-react" import Link from "next/link" interface ReplyFormProps { topicId: number replyToPostId?: number } export function ReplyForm({ topicId, replyToPostId }: ReplyFormProps) { const router = useRouter() const { user, token } = useAuth() const [content, setContent] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!content.trim() || !token) return setIsSubmitting(true) setError("") try { await postsApi.create( { topicId, content: content.trim(), replyToPostId, }, token, ) setContent("") // Refresh the page to show the new reply router.refresh() } catch (err) { setError(err instanceof Error ? err.message : "发布失败，请重试") } finally { setIsSubmitting(false) } } if (!user) { return (

登录后才能参与讨论

) } return ( 发表回复

{error &&

{error}

}

{user.name.slice(0, 1)}

{/* Toolbar */}



              {/* Textarea */}
               setContent(e.target.value)}
                rows={5}
                className="min-h-[120px] resize-none"
              />

              {/* Submit */}
              <div className="flex items-center justify-between">
                <p className="text-xs text-muted-foreground">支持 Markdown 格式</p>
                <Button type="submit" disabled={!content.trim() || isSubmitting}>
                  {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  {isSubmitting ? "发送中..." : "发布回复"}
                </Button>
              </div>
            </div>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { LoginForm } from "@/components/forum/login-form"

export default function LoginPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex flex-1 items-center justify-center px-4 py-12">
        <LoginForm />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/forum/login-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useAuth } from "@/lib/auth-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Loader2, Mail, Lock, Github, Chrome } from "lucide-react"

export function LoginForm() {
  const router = useRouter()
  const { login } = useAuth()
  const [identifier, setIdentifier] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setIsLoading(true)

    try {
      await login(identifier, password)
      router.push("/")
    } catch (err) {
      setError(err instanceof Error ? err.message : "登录失败，请重试")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader className="text-center">
        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary">
          <span className="text-2xl font-bold text-primary-foreground">N</span>
        </div>
        <CardTitle className="text-2xl">欢迎回来</CardTitle>
        <CardDescription>登录到 NodeBBS 社区</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="space-y-2">
            <Label htmlFor="identifier">用户名或邮箱</Label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="identifier"
                type="text"
                placeholder="请输入用户名或邮箱"
                value={identifier}
                onChange={(e) => setIdentifier(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="password">密码</Label>
              <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                忘记密码？
              </Link>
            </div>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="password"
                type="password"
                placeholder="请输入密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>

          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            登录
          </Button>
        </form>

        <div className="relative my-6">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t border-border" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-card px-2 text-muted-foreground">或使用</span>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <Button variant="outline" className="gap-2 bg-transparent">
            <Github className="h-4 w-4" />
            GitHub
          </Button>
          <Button variant="outline" className="gap-2 bg-transparent">
            <Chrome className="h-4 w-4" />
            Google
          </Button>
        </div>

        <p className="mt-6 text-center text-sm text-muted-foreground">
          还没有账号？{" "}
          <Link href="/register" className="font-medium text-primary hover:underline">
            立即注册
          </Link>
        </p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { RegisterForm } from "@/components/forum/register-form"

export default function RegisterPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex flex-1 items-center justify-center px-4 py-12">
        <RegisterForm />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/forum/register-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useAuth } from "@/lib/auth-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Checkbox } from "@/components/ui/checkbox"
import { Loader2, User, Mail, Lock, Github, Chrome } from "lucide-react"

export function RegisterForm() {
  const router = useRouter()
  const { register } = useAuth()
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [agreed, setAgreed] = useState(false)
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

    if (password !== confirmPassword) {
      setError("两次输入的密码不一致")
      return
    }

    if (!agreed) {
      setError("请先同意服务条款和隐私政策")
      return
    }

    setIsLoading(true)

    try {
      await register(username, email, password)
      router.push("/")
    } catch (err) {
      setError(err instanceof Error ? err.message : "注册失败，请重试")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader className="text-center">
        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary">
          <span className="text-2xl font-bold text-primary-foreground">N</span>
        </div>
        <CardTitle className="text-2xl">创建账号</CardTitle>
        <CardDescription>加入 NodeBBS 社区</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="space-y-2">
            <Label htmlFor="username">用户名</Label>
            <div className="relative">
              <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="username"
                type="text"
                placeholder="请输入用户名"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="pl-10"
                required
                minLength={3}
                maxLength={50}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="email">邮箱</Label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="email"
                type="email"
                placeholder="请输入邮箱"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="password">密码</Label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="password"
                type="password"
                placeholder="请输入密码（至少6位）"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pl-10"
                required
                minLength={6}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="confirmPassword">确认密码</Label>
            <div className="relative">
              <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                id="confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className="pl-10"
                required
              />
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox id="terms" checked={agreed} onCheckedChange={(checked) => setAgreed(checked as boolean)} />
            <label htmlFor="terms" className="text-sm text-muted-foreground">
              我已阅读并同意{" "}
              <Link href="/terms" className="text-primary hover:underline">
                服务条款
              </Link>{" "}
              和{" "}
              <Link href="/privacy" className="text-primary hover:underline">
                隐私政策
              </Link>
            </label>
          </div>

          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            注册
          </Button>
        </form>

        <div className="relative my-6">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t border-border" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-card px-2 text-muted-foreground">或使用</span>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <Button variant="outline" className="gap-2 bg-transparent">
            <Github className="h-4 w-4" />
            GitHub
          </Button>
          <Button variant="outline" className="gap-2 bg-transparent">
            <Chrome className="h-4 w-4" />
            Google
          </Button>
        </div>

        <p className="mt-6 text-center text-sm text-muted-foreground">
          已有账号？{" "}
          <Link href="/login" className="font-medium text-primary hover:underline">
            立即登录
          </Link>
        </p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/user/[username]/page.tsx" isEdit="true" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { UserProfile } from "@/components/forum/user-profile"
import { UserTopics } from "@/components/forum/user-topics"
import { usersApi, topicsApi, type UserProfile as UserProfileType, type Topic } from "@/lib/api"
import { notFound } from "next/navigation"

interface UserPageProps {
  params: Promise<{ username: string }>
}

export default async function UserPage({ params }: UserPageProps) {
  const { username } = await params

  let user: UserProfileType | null = null
  let userTopics: Topic[] = []

  try {
    const [userRes, topicsRes] = await Promise.all([
      usersApi.getProfile(username),
      topicsApi.list({ userId: undefined, limit: 20 }), // API needs userId, but we can filter client-side
    ])
    user = userRes
    // Filter topics by username since API might return all topics
    userTopics = (topicsRes.items || []).filter((t) => t.username === username)
  } catch (error) {
    console.log("[v0] Error fetching user profile:", error)
  }

  if (!user) {
    notFound()
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1 py-8">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <UserProfile user={user} />
          <UserTopics topics={userTopics} />
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/forum/user-profile.tsx" isTerminated="true" isMerged="true"
"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import { formatDistanceToNow } from "date-fns"
import { zhCN } from "date-fns/locale"
import type { UserProfile as UserProfileType } from "@/lib/api"

interface UserProfileProps {
  user: UserProfileType
}

export function UserProfile({ user }: UserProfileProps) {
  const [isFollowing, setIsFollowing] = useState(user.isFollowing)
  const [followerCount, setFollowerCount] = useState(user.followerCount)

  const joinDate = formatDistanceToNow(new Date(user.createdAt), {
    addSuffix: true,
    locale: zhCN,
  })

  const handleFollow = () => {
    setIsFollowing(!isFollowing)
    setFollowerCount((prev) => (isFollowing ? prev - 1 : prev + 1))
  }

  const getRoleBadge = (role: string) => {
    switch (role) {
      case 'admin':
        return { label: '管理员', color: '#EF4444', bgColor: '#EF444420' }
      case 'moderator':
        return { label: '版主', color: '#8B5CF6', bgColor: '#8B5CF620' }
      case 'vip':
        return { label: 'VIP', color: '#F59E0B', bgColor: '#F59E0B20' }
      default:
        return null
    }
  }

  const roleBadge = getRoleBadge(user.role)

  return (
    <Card className="mb-8 overflow-hidden">
      {/* Cover Image */}
      <div className="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-primary/5 sm:h-48" />

      <CardContent className="relative -mt-16 pb-6 pt-0 sm:-mt-20">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          {/* Avatar & Info */}
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-end">
            <Avatar className="h-24 w-24 border-4 border-card ring-4 ring-primary/20 sm:h-32 sm:w-32">
              <AvatarImage src={user.avatar || undefined} alt={user.name} />
              <AvatarFallback className="\
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.3",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/categories/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { CategoryCard } from "@/components/forum/category-card"
import { categoriesApi, type Category } from "@/lib/api"

export default async function CategoriesPage() {
  let categories: Category[] = []

  try {
    const res = await categoriesApi.list()
    categories = Array.isArray(res) ? res : []
  } catch (error) {
    console.log("[v0] Error fetching categories:", error)
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />

      <main className="flex-1 py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-foreground">所有分类</h1>
            <p className="mt-2 text-muted-foreground">浏览所有话题分类，找到你感兴趣的内容</p>
          </div>

          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {categories.length > 0 ? (
              categories.map((category) => (
                <CategoryCard
                  key={category.id}
                  category={category}
                  topicCount={Math.floor(Math.random() * 500) + 100}
                />
              ))
            ) : (
              <p className="col-span-full text-center text-muted-foreground py-8">暂无分类数据</p>
            )}
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { TopicCard } from "@/components/forum/topic-card"
import { Sidebar } from "@/components/forum/sidebar"
import { TopicFilters } from "@/components/forum/topic-filters"
import { categoriesApi, topicsApi, type Category, type Topic } from "@/lib/api"
import { notFound } from "next/navigation"

interface CategoryPageProps {
  params: Promise<{ slug: string }>
}

export default async function CategoryPage({ params }: CategoryPageProps) {
  const { slug } = await params

  let category: Category | null = null
  let topics: Topic[] = []

  try {
    const [categoryRes, topicsRes] = await Promise.all([categoriesApi.get(slug), topicsApi.list({ limit: 30 })])
    category = categoryRes
    // Filter topics by category
    topics = (topicsRes.items || []).filter((t) => t.categorySlug === slug)
  } catch (error) {
    console.log("[v0] Error fetching category:", error)
  }

  if (!category) {
    notFound()
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />

      <main className="flex-1 py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {/* Category Header */}
          <div className="mb-8">
            <div className="flex items-center gap-3">
              <div className="h-4 w-4 rounded-full" style={{ backgroundColor: category.color }} />
              <h1 className="text-3xl font-bold text-foreground">{category.name}</h1>
            </div>
            {category.description && <p className="mt-2 text-muted-foreground">{category.description}</p>}
          </div>

          <div className="grid gap-8 lg:grid-cols-[1fr_320px]">
            {/* Topics List */}
            <div className="space-y-6">
              <TopicFilters />

              <div className="space-y-3">
                {topics.length > 0 ? (
                  topics.map((topic) => <TopicCard key={topic.id} topic={topic} />)
                ) : (
                  <p className="text-center text-muted-foreground py-8">该分类暂无话题</p>
                )}
              </div>
            </div>

            {/* Sidebar */}
            <div className="hidden lg:block">
              <Sidebar />
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tag/[slug]/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { TopicCard } from "@/components/forum/topic-card"
import { Sidebar } from "@/components/forum/sidebar"
import { TopicFilters } from "@/components/forum/topic-filters"
import { topicsApi, type Topic } from "@/lib/api"
import { Badge } from "@/components/ui/badge"
import { Hash } from "lucide-react"

interface TagPageProps {
  params: Promise<{ slug: string }>
}

export default async function TagPage({ params }: TagPageProps) {
  const { slug } = await params

  let topics: Topic[] = []

  try {
    const res = await topicsApi.list({ tag: slug, limit: 30 })
    topics = res.items || []
  } catch (error) {
    console.log("[v0] Error fetching topics by tag:", error)
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />

      <main className="flex-1 py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {/* Tag Header */}
          <div className="mb-8">
            <div className="flex items-center gap-3">
              <Badge variant="secondary" className="gap-1 text-lg px-3 py-1">
                <Hash className="h-4 w-4" />
                {slug}
              </Badge>
            </div>
            <p className="mt-2 text-muted-foreground">浏览所有包含该标签的话题</p>
          </div>

          <div className="grid gap-8 lg:grid-cols-[1fr_320px]">
            {/* Topics List */}
            <div className="space-y-6">
              <TopicFilters />

              <div className="space-y-3">
                {topics.length > 0 ? (
                  topics.map((topic) => <TopicCard key={topic.id} topic={topic} />)
                ) : (
                  <p className="text-center text-muted-foreground py-8">该标签暂无相关话题</p>
                )}
              </div>
            </div>

            {/* Sidebar */}
            <div className="hidden lg:block">
              <Sidebar />
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/new/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { NewTopicForm } from "@/components/forum/new-topic-form"
import { categoriesApi, type Category } from "@/lib/api"

export default async function NewTopicPage() {
  let categories: Category[] = []

  try {
    const res = await categoriesApi.list()
    categories = Array.isArray(res) ? res : []
  } catch (error) {
    console.log("[v0] Error fetching categories:", error)
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />

      <main className="flex-1 py-8">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-foreground">发布新话题</h1>
            <p className="mt-2 text-muted-foreground">分享你的想法、问题或经验</p>
          </div>

          <NewTopicForm categories={categories} />
        </div>
      </main>

      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/forum/new-topic-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/lib/auth-context"
import { topicsApi, type Category } from "@/lib/api"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { PenSquare, Loader2, X, Bold, Italic, Link2, ImageIcon, Code, List, Quote, Eye } from "lucide-react"
import Link from "next/link"

interface NewTopicFormProps {
  categories: Category[]
}

export function NewTopicForm({ categories }: NewTopicFormProps) {
  const router = useRouter()
  const { user, token } = useAuth()
  const [title, setTitle] = useState("")
  const [categoryId, setCategoryId] = useState("")
  const [content, setContent] = useState("")
  const [tagInput, setTagInput] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [error, setError] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isPreview, setIsPreview] = useState(false)

  const handleAddTag = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && tagInput.trim()) {
      e.preventDefault()
      if (tags.length < 5 && !tags.includes(tagInput.trim())) {
        setTags([...tags, tagInput.trim()])
        setTagInput("")
      }
    }
  }

  const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

    if (!title.trim()) {
      setError("请输入话题标题")
      return
    }

    if (!categoryId) {
      setError("请选择话题分类")
      return
    }

    if (!content.trim()) {
      setError("请输入话题内容")
      return
    }

    if (!token) {
      setError("请先登录")
      return
    }

    setIsSubmitting(true)

    try {
      const result = await topicsApi.create(
        {
          title: title.trim(),
          categoryId: Number.parseInt(categoryId),
          content: content.trim(),
          tags: tags.length > 0 ? tags : undefined,
        },
        token,
      )
      router.push(`/topic/${result.id}`)
    } catch (err) {
      setError(err instanceof Error ? err.message : "发布失败，请重试")
    } finally {
      setIsSubmitting(false)
    }
  }

  if (!user) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-16">
          <PenSquare className="mb-4 h-12 w-12 text-muted-foreground" />
          <h2 className="mb-2 text-xl font-semibold text-foreground">登录后发布话题</h2>
          <p className="mb-6 text-center text-muted-foreground">加入社区，分享你的想法和经验</p>
          <div className="flex gap-3">
            <Link href="/login">
              <Button>登录</Button>
            </Link>
            <Link href="/register">
              <Button variant="outline">注册</Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <PenSquare className="h-5 w-5 text-primary" />
          编写话题内容
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          {/* Title */}
          <div className="space-y-2">
            <Label htmlFor="title">话题标题</Label>
            <Input
              id="title"
              placeholder="输入一个清晰的标题..."
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              maxLength={200}
            />
            <p className="text-xs text-muted-foreground text-right">{title.length}/200</p>
          </div>

          {/* Category */}
          <div className="space-y-2">
            <Label htmlFor="category">话题分类</Label>
            <Select value={categoryId} onValueChange={setCategoryId}>
              <SelectTrigger>
                <SelectValue placeholder="选择一个分类" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category.id} value={String(category.id)}>
                    <div className="flex items-center gap-2">
                      <span className="h-3 w-3 rounded-full" style={{ backgroundColor: category.color }} />
                      {category.name}
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Tags */}
          <div className="space-y-2">
            <Label htmlFor="tags">标签（可选，最多 5 个）</Label>
            <div className="flex flex-wrap gap-2 mb-2">
              {tags.map((tag) => (
                <Badge key={tag} variant="secondary" className="gap-1 pr-1">
                  #{tag}
                  <button
                    type="button"
                    onClick={() => handleRemoveTag(tag)}
                    className="ml-1 rounded-full p-0.5 hover:bg-muted"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </Badge>
              ))}
            </div>
            <Input
              id="tags"
              placeholder="输入标签后按 Enter 添加"
              value={tagInput}
              onChange={(e) => setTagInput(e.target.value)}
              onKeyDown={handleAddTag}
              disabled={tags.length >= 5}
            />
          </div>

          {/* Content */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="content">话题内容</Label>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => setIsPreview(!isPreview)}
                className="gap-1 text-xs"
              >
                <Eye className="h-3.5 w-3.5" />
                {isPreview ? "编辑" : "预览"}
              </Button>
            </div>

            {/* Toolbar */}
            {!isPreview && (
              <div className="flex flex-wrap items-center gap-1 rounded-lg border border-border bg-secondary/30 p-1">
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <Bold className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <Italic className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <Link2 className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <ImageIcon className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <Code className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <List className="h-4 w-4" />
                </Button>
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
                  <Quote className="h-4 w-4" />
                </Button>
              </div>
            )}

            {isPreview ? (
              <div className="min-h-[300px] rounded-lg border border-border bg-secondary/30 p-4">
                <div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
                  {content || "暂无内容..."}
                </div>
              </div>
            ) : (
              <Textarea
                id="content"
                placeholder="使用 Markdown 格式编写内容..."
                value={content}
                onChange={(e) => setContent(e.target.value)}
                rows={12}
                className="min-h-[300px] resize-none font-mono"
              />
            )}
            <p className="text-xs text-muted-foreground">支持 Markdown 格式</p>
          </div>

          {/* Actions */}
          <div className="flex items-center justify-between pt-4 border-t border-border">
            <Button type="button" variant="outline" onClick={() => router.back()}>
              取消
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              发布话题
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/tags/page.tsx" isMerged="true"
import { Header } from "@/components/forum/header"
import { Footer } from "@/components/forum/footer"
import { tagsApi, type Tag } from "@/lib/api"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Hash } from "lucide-react"

export default async function TagsPage() {
  let tags: Tag[] = []

  try {
    const res = await tagsApi.list({ limit: 100 })
    tags = res.items || []
  } catch (error) {
    console.log("[v0] Error fetching tags:", error)
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />

      <main className="flex-1 py-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-foreground">所有标签</h1>
            <p className="mt-2 text-muted-foreground">浏览所有话题标签，找到你感兴趣的内容</p>
          </div>

          {tags.length > 0 ? (
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {tags.map((tag) => (
                <Link key={tag.id} href={`/tag/${tag.slug}`}>
                  <Card className="transition-all hover:border-primary/50 hover:shadow-md">
                    <CardContent className="p-4">
                      <div className="flex items-center gap-3">
                        <div
                          className="flex h-10 w-10 items-center justify-center rounded-lg"
                          style={{ backgroundColor: `${tag.color}20` }}
                        >
                          <Hash className="h-5 w-5" style={{ color: tag.color }} />
                        </div>
                        <div className="flex-1 min-w-0">
                          <h3 className="font-medium text-foreground truncate">{tag.name}</h3>
                          <p className="text-sm text-muted-foreground">{tag.topicCount} 个话题</p>
                        </div>
                      </div>
                      {tag.description && (
                        <p className="mt-3 text-sm text-muted-foreground line-clamp-2">{tag.description}</p>
                      )}
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          ) : (
            <p className="text-center text-muted-foreground py-12">暂无标签数据</p>
          )}
        </div>
      </main>

      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/forum/user-topics.tsx"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TopicCard } from "./topic-card"
import type { Topic } from "@/lib/api"
import { FileText } from "lucide-react"

interface UserTopicsProps {
  topics: Topic[]
}

export function UserTopics({ topics }: UserTopicsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <FileText className="h-5 w-5 text-primary" />
          发布的话题
        </CardTitle>
      </CardHeader>
      <CardContent>
        {topics.length > 0 ? (
          <div className="space-y-3">
            {topics.map((topic) => (
              <TopicCard key={topic.id} topic={topic} />
            ))}
          </div>
        ) : (
          <p className="text-center text-muted-foreground py-8">暂无发布的话题</p>
        )}
      </CardContent>
    </Card>
  )
}</article></body></html>

{topic.title}

{category.name}

发现、分享、成长

热门分类

置顶话题

最新话题

{topic.title}

全部回复 ({posts.length})

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This