feat: add forum seed categories, improve page layouts and navigation

- Seed default forum categories (announcements, learning, feedback) on startup - Update forum pages with improved category/post/reply UI - Refine navbar, mobile nav, and home page content layout - Improve analytics, course-content, knowledge, profile, settings, spatial pages Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-27 10:02:30 +08:00
parent 45e3da82e1
commit 50faf7ad4e
13 changed files with 592 additions and 389 deletions
@@ -56,6 +56,36 @@ def startup_knowledge_base():
    except Exception as e:
        print(f"启动知识库文件监控服务失败: {str(e)}")

+
+def seed_forum_categories():
+    """初始化论坛默认分类"""
+    from src.core.database import get_db
+    from src.models.forum import ForumCategory
+
+    DEFAULT_CATEGORIES = [
+        {"slug": "announcements", "name": "课程公告", "description": "课程通知、作业安排与重要信息"},
+        {"slug": "course-learning", "name": "学习讨论", "description": "交流学习心得，讨论课程内容与难点"},
+        {"slug": "system-feedback", "name": "使用反馈", "description": "分享系统使用经验，提出改进建议"},
+    ]
+
+    db = next(get_db())
+    try:
+        existing_count = db.query(ForumCategory).count()
+        if existing_count > 0:
+            print(f"论坛分类已存在（{existing_count} 个），跳过初始化")
+            return
+
+        for cat_data in DEFAULT_CATEGORIES:
+            category = ForumCategory(**cat_data)
+            db.add(category)
+        db.commit()
+        print(f"已创建 {len(DEFAULT_CATEGORIES)} 个论坛分类")
+    except Exception as e:
+        db.rollback()
+        print(f"初始化论坛分类失败: {e}")
+    finally:
+        db.close()
+
 # 应用启动事件
@app.on_event("startup")
 async def startup_event():
@@ -97,6 +127,12 @@ async def startup_event():
        startup_knowledge_base()
    except Exception as e:
        print(f"启动知识库服务失败: {e}", file=sys.stderr)
+
+    # 初始化论坛分类
+    try:
+        seed_forum_categories()
+    except Exception as e:
+        print(f"初始化论坛分类失败: {e}", file=sys.stderr)
        sys.stderr.flush()
    
    print("应用启动事件完成", file=sys.stderr)
@@ -161,12 +161,6 @@ export default function AnalyticsPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground mb-2">学习分析</h1>
-          <p className="text-muted-foreground">了解您的学习进度和知识掌握情况</p>
-        </div>
-
        {/* 标签页 */}
        <div className="flex space-x-1 mb-8">
          {[
@@ -93,32 +93,20 @@ export default function CourseContentPage() {
  return (
    <div className="min-h-screen bg-app pb-16 lg:pb-0">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center space-x-3">
-              <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
-                <GraduationCap className="w-6 h-6 text-white" />
-              </div>
-              <div>
-                <h1 className="text-3xl font-bold">课程内容</h1>
-                <p className="text-muted-foreground">探索国土空间规划课程的核心知识点</p>
-              </div>
-            </div>
-            {/* 视图切换 */}
-            <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'graph' | 'list')}>
-              <TabsList>
-                <TabsTrigger value="graph" className="flex items-center space-x-2">
-                  <Network className="w-4 h-4" />
-                  <span className="hidden sm:inline">知识图谱</span>
-                </TabsTrigger>
-                <TabsTrigger value="list" className="flex items-center space-x-2">
-                  <List className="w-4 h-4" />
-                  <span className="hidden sm:inline">列表视图</span>
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
-          </div>
+        {/* 视图切换 */}
+        <div className="flex justify-end mb-4">
+          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'graph' | 'list')}>
+            <TabsList>
+              <TabsTrigger value="graph" className="flex items-center space-x-2">
+                <Network className="w-4 h-4" />
+                <span className="hidden sm:inline">知识图谱</span>
+              </TabsTrigger>
+              <TabsTrigger value="list" className="flex items-center space-x-2">
+                <List className="w-4 h-4" />
+                <span className="hidden sm:inline">列表视图</span>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
        </div>

        {/* 错误提示 */}
@@ -2,17 +2,76 @@

 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { MessageSquare, Loader2, MessageCircle } from "lucide-react";
+import {
+  MessageSquare,
+  Loader2,
+  MessageCircle,
+  BookOpen,
+  Lightbulb,
+  Megaphone,
+  ChevronRight,
+  Clock,
+  User,
+} from "lucide-react";

 import { forumAPI } from "@/lib/api";
 import type { ForumCategory, ForumPostSummary } from "@/types";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription } from "@/components/ui/alert";
+
+const CATEGORY_ICONS: Record<string, React.ReactNode> = {
+  default: <MessageSquare className="w-5 h-5" />,
+};
+
+const CATEGORY_ORDER = ["公告", "通知", "学习", "讨论", "课程", "反馈", "使用"];
+
+function getCategoryIcon(name: string) {
+  if (name.includes("公告") || name.includes("通知"))
+    return <Megaphone className="w-4 h-4" />;
+  if (name.includes("学习") || name.includes("讨论") || name.includes("课程"))
+    return <BookOpen className="w-4 h-4" />;
+  if (name.includes("反馈") || name.includes("使用"))
+    return <Lightbulb className="w-4 h-4" />;
+  return CATEGORY_ICONS.default;
+}
+
+function getCategoryGradient(name: string) {
+  if (name.includes("公告") || name.includes("通知"))
+    return "from-rose-500/10 to-rose-50";
+  if (name.includes("学习") || name.includes("讨论") || name.includes("课程"))
+    return "from-blue-500/10 to-blue-50";
+  if (name.includes("反馈") || name.includes("使用"))
+    return "from-amber-500/10 to-amber-50";
+  return "from-slate-500/10 to-slate-50";
+}
+
+function getCategoryAccent(name: string) {
+  if (name.includes("公告") || name.includes("通知")) return "text-rose-600";
+  if (name.includes("学习") || name.includes("讨论") || name.includes("课程")) return "text-blue-600";
+  if (name.includes("反馈") || name.includes("使用")) return "text-amber-600";
+  return "text-slate-600";
+}
+
+function formatRelativeTime(dateStr: string) {
+  const date = new Date(
+    new Date(dateStr).getTime() + 8 * 60 * 60 * 1000
+  );
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMinutes < 1) return "刚刚";
+  if (diffMinutes < 60) return `${diffMinutes} 分钟前`;
+  if (diffHours < 24) return `${diffHours} 小时前`;
+  if (diffDays < 7) return `${diffDays} 天前`;
+  return date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+}

 export default function ForumHomePage() {
  const [categories, setCategories] = useState<ForumCategory[]>([]);
-  const [categoryPosts, setCategoryPosts] = useState<Record<number, ForumPostSummary[]>>({});
+  const [categoryPosts, setCategoryPosts] = useState<
+    Record<number, ForumPostSummary[]>
+  >({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

@@ -25,10 +84,9 @@ export default function ForumHomePage() {
        const postsEntries = await Promise.all(
          data.map(async (category) => {
            try {
-              const posts = await forumAPI.getPosts(category.id, 10);
+              const posts = await forumAPI.getPosts(category.id, 3);
              return [category.id, posts] as const;
-            } catch (err) {
-              console.warn(`加载分类 ${category.name} 的帖子失败:`, err);
+            } catch {
              return [category.id, []] as const;
            }
          })
@@ -36,7 +94,8 @@ export default function ForumHomePage() {
        setCategoryPosts(Object.fromEntries(postsEntries));
        setError(null);
      } catch (err) {
-        const message = err instanceof Error ? err.message : "加载论坛数据失败";
+        const message =
+          err instanceof Error ? err.message : "加载论坛数据失败";
        setError(message);
      } finally {
        setIsLoading(false);
@@ -47,78 +106,110 @@ export default function ForumHomePage() {
  }, []);

  return (
-    <div className="mit-container py-10 space-y-6">
-      <div className="space-y-2">
-        <h1 className="text-3xl font-bold flex items-center gap-2">
-          <MessageSquare className="h-7 w-7 text-primary" />
-          课程社区
-        </h1>
-        <p className="text-muted-foreground">
-          分享课程学习心得，交流系统使用体验，欢迎参与讨论。
-        </p>
-      </div>
-
+    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-5">
      {isLoading ? (
-        <div className="flex items-center gap-2 text-muted-foreground">
+        <div className="flex items-center justify-center gap-2 text-muted-foreground py-20">
          <Loader2 className="h-4 w-4 animate-spin" />
-          正在加载社区分类...
+          正在加载社区...
        </div>
      ) : error ? (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
+        <div className="text-center py-16">
+          <p className="text-muted-foreground">{error}</p>
+        </div>
      ) : (
-        <div className="grid gap-4 md:grid-cols-2">
-          {categories.map((category) => (
-            <Card key={category.id} className="flex flex-col">
-              <CardHeader>
-                <CardTitle>{category.name}</CardTitle>
-                {category.description && (
-                  <CardDescription>{category.description}</CardDescription>
-                )}
-              </CardHeader>
-              <CardContent className="flex flex-col gap-4 h-full">
-                <div className="flex items-center justify-between text-sm text-muted-foreground">
-                  <span>{category.post_count} 条讨论</span>
-                  <Button asChild size="sm" variant="ghost" className="px-2">
-                    <Link href={`/forum/${category.id}`}>进入讨论</Link>
-                  </Button>
+        <div className="space-y-3">
+          {[...categories]
+            .sort((a, b) => {
+              const getOrder = (name: string) => {
+                for (let i = 0; i < CATEGORY_ORDER.length; i++) {
+                  if (name.includes(CATEGORY_ORDER[i])) return i;
+                }
+                return CATEGORY_ORDER.length;
+              };
+              return getOrder(a.name) - getOrder(b.name);
+            })
+            .map((category) => {
+            const posts = categoryPosts[category.id] || [];
+            return (
+              <div
+                key={category.id}
+                className={`bg-gradient-to-r ${getCategoryGradient(
+                  category.name
+                )} rounded-xl border border-border/40 overflow-hidden`}
+              >
+                {/* Category header */}
+                <div className="px-4 py-3 flex items-center justify-between border-b border-border/20">
+                  <div className="flex items-center gap-2.5">
+                    <span className={getCategoryAccent(category.name)}>
+                      {getCategoryIcon(category.name)}
+                    </span>
+                    <div>
+                      <h2 className="text-sm font-semibold text-foreground">
+                        {category.name}
+                      </h2>
+                      {category.description && (
+                        <p className="text-[11px] text-muted-foreground mt-0">
+                          {category.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2.5">
+                    <span className="text-[11px] text-muted-foreground tabular-nums">
+                      {category.post_count} 条讨论
+                    </span>
+                    <Link
+                      href={`/forum/${category.id}`}
+                      className="text-[11px] font-medium text-primary hover:underline flex items-center gap-0.5"
+                    >
+                      查看全部
+                      <ChevronRight className="w-3 h-3" />
+                    </Link>
+                  </div>
                </div>
-                <div className="flex-1 space-y-3 overflow-y-auto pr-1">
-                  {categoryPosts[category.id] && categoryPosts[category.id].length > 0 ? (
-                    categoryPosts[category.id].map((post) => (
+
+                {/* Posts list */}
+                <div className="divide-y divide-border/20">
+                  {posts.length > 0 ? (
+                    posts.map((post) => (
                      <Link
                        key={post.id}
                        href={`/forum/post/${post.id}`}
-                        className="block rounded-lg border border-border/60 hover:border-primary/50 hover:bg-muted/40 transition-colors"
+                        className="flex items-start gap-2.5 px-4 py-2.5 hover:bg-white/40 transition-colors group"
                      >
-                        <div className="px-3 py-2">
-                          <div className="font-medium text-foreground line-clamp-1">
+                        <div className="mt-0.5 w-6 h-6 rounded-full bg-muted/60 flex items-center justify-center flex-shrink-0">
+                          <User className="w-3 h-3 text-muted-foreground" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-[13px] font-medium text-foreground group-hover:text-primary transition-colors line-clamp-1">
                            {post.title}
-                          </div>
-                          <div className="mt-1 flex items-center text-xs text-muted-foreground gap-2">
+                          </p>
+                          <div className="flex items-center gap-2 mt-0.5 text-[11px] text-muted-foreground">
                            <span>{post.author_name}</span>
-                            <span>·</span>
-                            <span>{new Date(new Date(post.created_at).getTime() + 8 * 60 * 60 * 1000).toLocaleString()}</span>
-                            <span>·</span>
-                            <span>{post.reply_count} 条回复</span>
+                            <span className="inline-flex items-center gap-0.5">
+                              <Clock className="w-2.5 h-2.5" />
+                              {formatRelativeTime(post.created_at)}
+                            </span>
+                            <span className="inline-flex items-center gap-0.5">
+                              <MessageCircle className="w-2.5 h-2.5" />
+                              {post.reply_count}
+                            </span>
                          </div>
                        </div>
+                        <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors mt-1 flex-shrink-0" />
                      </Link>
                    ))
                  ) : (
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <MessageCircle className="h-4 w-4" />
-                      暂无讨论，成为第一个发帖的人吧！
+                    <div className="px-4 py-5 text-center text-xs text-muted-foreground">
+                      暂无讨论，成为第一个发帖的人
                    </div>
                  )}
                </div>
-              </CardContent>
-            </Card>
-          ))}
+              </div>
+            );
+          })}
        </div>
      )}
    </div>
  );
 }
-
@@ -129,12 +129,6 @@ export default function KnowledgePage() {
  return (
    <div className="min-h-screen bg-app pb-16 lg:pb-0">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">知识库管理</h1>
-          <p className="text-muted-foreground">创建和管理您的知识库，组织文档内容</p>
-        </div>
-
        {/* 错误提示 */}
        {error && (
          <Alert variant="destructive" className="mb-6">
@@ -164,12 +164,6 @@ export default function ProfilePage() {
  return (
    <div className="min-h-screen bg-app pb-16 lg:pb-0">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">个人资料</h1>
-          <p className="text-muted-foreground">管理您的个人信息和账户设置</p>
-        </div>
-
        {/* 错误提示 */}
        {error && (
          <Alert variant="destructive" className="mb-6">
@@ -130,12 +130,6 @@ export default function SettingsPage() {
  return (
    <div className="min-h-screen bg-app pb-16 lg:pb-0">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">设置</h1>
-          <p className="text-muted-foreground">管理您的账户设置和偏好</p>
-        </div>
-
        {/* 错误提示 */}
        {error && (
          <Alert variant="destructive" className="mb-6">
@@ -375,12 +375,6 @@ export default function SpatialPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* 页面头部 */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground mb-2">空间出图</h1>
-          <p className="text-muted-foreground">使用AI生成国土空间规划相关的设计图和示意图</p>
-        </div>
-
        {/* Tab导航 */}
        <Tabs defaultValue="text-to-image" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
@@ -5,14 +5,37 @@ import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { forumAPI } from "@/lib/api";
 import type { ForumCategory, ForumPostSummary } from "@/types";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Loader2, MessageCircle } from "lucide-react";
+import {
+  Loader2,
+  MessageCircle,
+  Clock,
+  User,
+  PenLine,
+  Send,
+  ArrowLeft,
+} from "lucide-react";
 import { useAuthStore } from "@/store/auth";

+function formatRelativeTime(dateStr: string) {
+  const date = new Date(
+    new Date(dateStr).getTime() + 8 * 60 * 60 * 1000
+  );
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMinutes < 1) return "刚刚";
+  if (diffMinutes < 60) return `${diffMinutes} 分钟前`;
+  if (diffHours < 24) return `${diffHours} 小时前`;
+  if (diffDays < 7) return `${diffDays} 天前`;
+  return date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+}
+
 export default function ForumCategoryPage() {
  const params = useParams();
  const router = useRouter();
@@ -27,6 +50,7 @@ export default function ForumCategoryPage() {
  const [content, setContent] = useState("");
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showForm, setShowForm] = useState(false);

  const { isAuthenticated } = useAuthStore();

@@ -53,7 +77,8 @@ export default function ForumCategoryPage() {
        setPosts(postList);
        setError(null);
      } catch (err) {
-        const message = err instanceof Error ? err.message : "加载帖子失败";
+        const message =
+          err instanceof Error ? err.message : "加载帖子失败";
        setError(message);
      } finally {
        setIsLoading(false);
@@ -79,10 +104,12 @@ export default function ForumCategoryPage() {
      });
      setTitle("");
      setContent("");
+      setShowForm(false);
      const updatedPosts = await forumAPI.getPosts(categoryId);
      setPosts(updatedPosts);
    } catch (err) {
-      const message = err instanceof Error ? err.message : "发布帖子失败";
+      const message =
+        err instanceof Error ? err.message : "发布帖子失败";
      setSubmitError(message);
    } finally {
      setIsSubmitting(false);
@@ -90,129 +117,155 @@ export default function ForumCategoryPage() {
  };

  return (
-    <div className="min-h-screen bg-app py-10">
-      <div className="max-w-5xl mx-auto px-4 space-y-6">
-        <Button variant="ghost" onClick={() => router.push("/forum")} className="px-0">
-          ← 返回论坛
-        </Button>
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back nav */}
+        <button
+          onClick={() => router.push("/forum")}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          返回社区
+        </button>

-        <div className="space-y-2">
-          <h1 className="text-2xl font-semibold flex items-center gap-2">
-            <MessageCircle className="h-6 w-6 text-primary" />
-            {currentCategory ? currentCategory.name : "论坛分类"}
-          </h1>
-          {currentCategory?.description && (
-            <p className="text-muted-foreground">{currentCategory.description}</p>
+        {/* Category header */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1
+              className="text-xl font-bold tracking-tight"
+              style={{ fontFamily: "var(--font-serif), Georgia, serif" }}
+            >
+              {currentCategory ? currentCategory.name : "论坛分类"}
+            </h1>
+            {currentCategory?.description && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {currentCategory.description}
+              </p>
+            )}
+          </div>
+          {isAuthenticated && (
+            <Button
+              onClick={() => setShowForm(!showForm)}
+              size="sm"
+              className="gap-1.5"
+            >
+              <PenLine className="w-3.5 h-3.5" />
+              {showForm ? "收起" : "发帖"}
+            </Button>
          )}
        </div>

+        {/* New post form (collapsible) */}
+        {showForm && (
+          <div className="bg-muted/30 rounded-xl border border-border/40 p-5 mb-6 space-y-4">
+            <form onSubmit={handleSubmit} className="space-y-3">
+              {submitError && (
+                <p className="text-sm text-destructive">{submitError}</p>
+              )}
+              <Input
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="帖子标题"
+                maxLength={200}
+                disabled={isSubmitting}
+                className="bg-background"
+              />
+              <Textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="分享你的想法或问题..."
+                rows={5}
+                className="resize-none bg-background"
+                disabled={isSubmitting}
+              />
+              <div className="flex justify-end">
+                <Button
+                  type="submit"
+                  size="sm"
+                  disabled={isSubmitting}
+                  className="gap-1.5"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                      发布中...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="w-3.5 h-3.5" />
+                      发布
+                    </>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Login prompt */}
+        {!isAuthenticated && (
+          <div className="text-center py-4 mb-6 bg-muted/20 rounded-lg text-sm text-muted-foreground">
+            需要登录后才能发帖。请先
+            <Link href="/login" className="text-primary hover:underline mx-1">
+              登录
+            </Link>
+            或
+            <Link
+              href="/register"
+              className="text-primary hover:underline mx-1"
+            >
+              注册
+            </Link>
+          </div>
+        )}
+
+        {/* Posts list */}
        {isLoading ? (
          <div className="flex items-center justify-center gap-2 text-muted-foreground py-20">
            <Loader2 className="h-4 w-4 animate-spin" />
-            正在加载帖子...
+            正在加载...
          </div>
        ) : error ? (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
+          <div className="text-center py-16">
+            <p className="text-muted-foreground">{error}</p>
+          </div>
+        ) : posts.length === 0 ? (
+          <div className="text-center py-16">
+            <MessageCircle className="w-10 h-10 text-muted-foreground/40 mx-auto mb-3" />
+            <p className="text-muted-foreground">暂无帖子，来发第一个帖吧</p>
+          </div>
        ) : (
-          <div className="grid gap-6 lg:grid-cols-[2fr,3fr]">
-            <div className="space-y-4">
-              {isAuthenticated ? (
-                <Card className="shadow-md">
-                  <CardHeader>
-                    <CardTitle>发起讨论</CardTitle>
-                    <CardDescription>发表新的帖子，与大家交流想法。</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                      {submitError && (
-                        <Alert variant="destructive">
-                          <AlertDescription>{submitError}</AlertDescription>
-                        </Alert>
-                      )}
-                      <div className="space-y-2">
-                        <label className="text-sm font-medium text-foreground/80">标题</label>
-                        <Input
-                          value={title}
-                          onChange={(event) => setTitle(event.target.value)}
-                          placeholder="写一个简洁的标题"
-                          maxLength={200}
-                          disabled={isSubmitting}
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <label className="text-sm font-medium text-foreground/80">内容</label>
-                        <Textarea
-                          value={content}
-                          onChange={(event) => setContent(event.target.value)}
-                          placeholder="详细描述你的想法或问题..."
-                          rows={8}
-                          className="min-h-[220px] resize-none"
-                          disabled={isSubmitting}
-                        />
-                      </div>
-                      <div className="text-right">
-                        <Button type="submit" disabled={isSubmitting}>
-                          {isSubmitting ? (
-                            <>
-                              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                              发布中...
-                            </>
-                          ) : (
-                            "发布帖子"
-                          )}
-                        </Button>
-                      </div>
-                    </form>
-                  </CardContent>
-                </Card>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    需要登录后才能发表帖子。请先
-                    <Link href="/login" className="underline ml-1">
-                      登录
-                    </Link>
-                    或
-                    <Link href="/register" className="underline ml-1">
-                      注册
-                    </Link>
-                    。
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
-
-            <div className="space-y-3">
-              {posts.length === 0 ? (
-                <Card className="shadow-sm">
-                  <CardContent className="py-6 text-sm text-muted-foreground text-center">
-                    暂时还没有帖子，快来抢先发帖吧！
-                  </CardContent>
-                </Card>
-              ) : (
-                posts.map((post) => (
-                  <Card key={post.id} className="shadow-sm transition hover:shadow-lg">
-                    <CardHeader>
-                      <CardTitle className="text-lg">
-                        <Link href={`/forum/post/${post.id}`} className="hover:underline">
-                          {post.title}
-                        </Link>
-                      </CardTitle>
-                      <CardDescription>
-                        由 {post.author_name} 发布 · {post.reply_count} 条回复 ·{" "}
-                        {new Date(new Date(post.created_at).getTime() + 8 * 60 * 60 * 1000).toLocaleString()}
-                      </CardDescription>
-                    </CardHeader>
-                  </Card>
-                ))
-              )}
-            </div>
+          <div className="divide-y divide-border/40 rounded-xl border border-border/40 overflow-hidden">
+            {posts.map((post) => (
+              <Link
+                key={post.id}
+                href={`/forum/post/${post.id}`}
+                className="flex items-start gap-3 px-5 py-4 hover:bg-muted/30 transition-colors group"
+              >
+                <div className="mt-0.5 w-9 h-9 rounded-full bg-muted/60 flex items-center justify-center flex-shrink-0">
+                  <User className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-foreground group-hover:text-primary transition-colors line-clamp-2">
+                    {post.title}
+                  </p>
+                  <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
+                    <span>{post.author_name}</span>
+                    <span className="inline-flex items-center gap-0.5">
+                      <Clock className="w-3 h-3" />
+                      {formatRelativeTime(post.created_at)}
+                    </span>
+                    <span className="inline-flex items-center gap-0.5">
+                      <MessageCircle className="w-3 h-3" />
+                      {post.reply_count} 回复
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
          </div>
        )}
      </div>
    </div>
  );
 }
-
@@ -5,13 +5,27 @@ import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { forumAPI } from "@/lib/api";
 import type { ForumPostDetail } from "@/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Loader2, MessageCircleReply } from "lucide-react";
+import { Loader2, MessageCircle, Clock, User, Send, ArrowLeft } from "lucide-react";
 import { useAuthStore } from "@/store/auth";

+function formatRelativeTime(dateStr: string) {
+  const date = new Date(
+    new Date(dateStr).getTime() + 8 * 60 * 60 * 1000
+  );
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMinutes < 1) return "刚刚";
+  if (diffMinutes < 60) return `${diffMinutes} 分钟前`;
+  if (diffHours < 24) return `${diffHours} 小时前`;
+  if (diffDays < 7) return `${diffDays} 天前`;
+  return date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
+}
+
 export default function ForumPostPage() {
  const params = useParams();
  const router = useRouter();
@@ -41,7 +55,8 @@ export default function ForumPostPage() {
        setPost(detail);
        setError(null);
      } catch (err) {
-        const message = err instanceof Error ? err.message : "加载帖子详情失败";
+        const message =
+          err instanceof Error ? err.message : "加载帖子详情失败";
        setError(message);
      } finally {
        setIsLoading(false);
@@ -74,116 +89,154 @@ export default function ForumPostPage() {
  };

  return (
-    <div className="min-h-screen bg-app py-10">
-      <div className="max-w-4xl mx-auto px-4 space-y-6">
-        <Button variant="ghost" onClick={() => router.back()} className="px-0">
-          ← 返回列表
-        </Button>
+    <div className="min-h-screen bg-background">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back nav */}
+        <button
+          onClick={() => router.back()}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          返回列表
+        </button>

        {isLoading ? (
          <div className="flex items-center justify-center gap-2 text-muted-foreground py-20">
            <Loader2 className="h-4 w-4 animate-spin" />
-            正在加载帖子...
+            正在加载...
          </div>
        ) : error ? (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
+          <div className="text-center py-16">
+            <p className="text-muted-foreground">{error}</p>
+          </div>
        ) : post ? (
          <div className="space-y-6">
-            <Card className="shadow-md">
-              <CardHeader>
-                <CardTitle className="text-2xl font-semibold">{post.title}</CardTitle>
-                <p className="text-sm text-muted-foreground">
-                  由 {post.author_name} 发布 ·{" "}
-                  {new Date(new Date(post.created_at).getTime() + 8 * 60 * 60 * 1000).toLocaleString()}
-                </p>
-              </CardHeader>
-              <CardContent className="whitespace-pre-wrap leading-relaxed text-foreground/90">
+            {/* Post content */}
+            <article className="rounded-xl border border-border/40 overflow-hidden">
+              <div className="px-6 py-5 border-b border-border/20">
+                <h1
+                  className="text-xl font-bold tracking-tight leading-snug"
+                  style={{ fontFamily: "var(--font-serif), Georgia, serif" }}
+                >
+                  {post.title}
+                </h1>
+                <div className="flex items-center gap-3 mt-3 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-1.5">
+                    <div className="w-6 h-6 rounded-full bg-muted/60 flex items-center justify-center">
+                      <User className="w-3 h-3 text-muted-foreground" />
+                    </div>
+                    <span>{post.author_name}</span>
+                  </div>
+                  <span className="inline-flex items-center gap-0.5">
+                    <Clock className="w-3 h-3" />
+                    {formatRelativeTime(post.created_at)}
+                  </span>
+                </div>
+              </div>
+              <div className="px-6 py-5 whitespace-pre-wrap leading-relaxed text-foreground/90 text-sm">
                {post.content}
-              </CardContent>
-            </Card>
+              </div>
+            </article>

-            <section className="space-y-4">
-              <h2 className="text-lg font-medium flex items-center gap-2">
-                <MessageCircleReply className="h-5 w-5 text-primary" />
-                回复（{post.replies.length}）
-              </h2>
+            {/* Replies section */}
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <MessageCircle className="w-4 h-4 text-primary" />
+                <h2 className="font-medium text-sm">
+                  回复（{post.replies.length}）
+                </h2>
+              </div>

              {post.replies.length === 0 ? (
-                <Card className="text-sm text-muted-foreground">
-                  <CardContent className="py-4">
-                    还没有回复，欢迎分享你的观点。
-                  </CardContent>
-                </Card>
+                <div className="text-center py-8 text-sm text-muted-foreground bg-muted/20 rounded-xl">
+                  暂无回复，欢迎分享你的观点
+                </div>
              ) : (
-                post.replies.map((reply) => (
-                  <Card key={reply.id} className="shadow-sm">
-                    <CardHeader className="pb-2">
-                      <div className="text-sm font-medium text-foreground">{reply.author_name}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {new Date(new Date(reply.created_at).getTime() + 8 * 60 * 60 * 1000).toLocaleString()}
+                <div className="space-y-3">
+                  {post.replies.map((reply) => (
+                    <div
+                      key={reply.id}
+                      className="flex gap-3 px-5 py-4 rounded-xl border border-border/30 hover:border-border/60 transition-colors"
+                    >
+                      <div className="w-8 h-8 rounded-full bg-muted/60 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <User className="w-3.5 h-3.5 text-muted-foreground" />
                      </div>
-                    </CardHeader>
-                    <CardContent className="text-sm whitespace-pre-wrap leading-relaxed">
-                      {reply.content}
-                    </CardContent>
-                  </Card>
-                ))
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1.5">
+                          <span className="text-sm font-medium text-foreground">
+                            {reply.author_name}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {formatRelativeTime(reply.created_at)}
+                          </span>
+                        </div>
+                        <p className="text-sm whitespace-pre-wrap leading-relaxed text-foreground/90">
+                          {reply.content}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
              )}
            </section>

-            <Card className="shadow-sm">
-              <CardContent className="py-6">
-                {isAuthenticated ? (
-                  <form onSubmit={handleReply} className="space-y-4">
-                    {submitError && (
-                      <Alert variant="destructive">
-                        <AlertDescription>{submitError}</AlertDescription>
-                      </Alert>
-                    )}
-                    <Textarea
-                      value={replyContent}
-                      onChange={(event) => setReplyContent(event.target.value)}
-                      placeholder="写下你的想法..."
-                      rows={5}
-                      className="resize-none"
-                      disabled={isSubmitting}
-                    />
-                    <div className="text-right">
-                      <Button type="submit" disabled={isSubmitting}>
-                        {isSubmitting ? (
-                          <>
-                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                            发布中...
-                          </>
-                        ) : (
-                          "提交回复"
-                        )}
-                      </Button>
-                    </div>
-                  </form>
-                ) : (
-                  <Alert>
-                    <AlertDescription>
-                      登录后才能回复帖子。前往
-                      <Link href="/login" className="underline mx-1">
-                        登录
-                      </Link>
-                      或
-                      <Link href="/register" className="underline ml-1">
-                        注册
-                      </Link>
-                      。
-                    </AlertDescription>
-                  </Alert>
-                )}
-              </CardContent>
-            </Card>
+            {/* Reply form */}
+            <div className="rounded-xl border border-border/40 p-5">
+              {isAuthenticated ? (
+                <form onSubmit={handleReply} className="space-y-3">
+                  {submitError && (
+                    <p className="text-sm text-destructive">{submitError}</p>
+                  )}
+                  <Textarea
+                    value={replyContent}
+                    onChange={(e) => setReplyContent(e.target.value)}
+                    placeholder="写下你的想法..."
+                    rows={4}
+                    className="resize-none"
+                    disabled={isSubmitting}
+                  />
+                  <div className="flex justify-end">
+                    <button
+                      type="submit"
+                      disabled={isSubmitting || !replyContent.trim()}
+                      className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-[#2563eb] text-white hover:bg-[#2563eb]/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                          发布中...
+                        </>
+                      ) : (
+                        <>
+                          <Send className="w-3.5 h-3.5" />
+                          回复
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </form>
+              ) : (
+                <div className="text-center py-3 text-sm text-muted-foreground">
+                  登录后才能回复。前往
+                  <Link
+                    href="/login"
+                    className="text-primary hover:underline mx-1"
+                  >
+                    登录
+                  </Link>
+                  或
+                  <Link
+                    href="/register"
+                    className="text-primary hover:underline ml-1"
+                  >
+                    注册
+                  </Link>
+                </div>
+              )}
+            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
 }
-
@@ -38,7 +38,7 @@ const modules = [
    visual: "spatial" as const,
  },
  {
-    title: "论坛社区",
+    title: "课程社区",
    description: "课程讨论与学习经验交流平台，促进师生互动与同伴学习",
    href: "/forum",
    tags: ["协作"],
@@ -436,20 +436,12 @@ export default function HomePageContent() {
                <p className="text-sm text-muted-foreground leading-relaxed mb-5">
                  基于先进AI技术的国土空间规划智能学习平台，集成RAG检索增强生成、图像生成、数据分析等能力，为专业教学与研究提供全方位支持。
                </p>
-                <div className="flex gap-3">
-                  <Button asChild variant="outline" size="sm">
-                    <a href="https://tsp.spacekg.com/#/" target="_blank" rel="noopener noreferrer">
-                      <BookOpen className="mr-2 h-4 w-4" />
-                      课题组主页
-                    </a>
-                  </Button>
-                  <Button asChild variant="outline" size="sm">
-                    <a href="https://homepage.hit.edu.cn/wusongtao" target="_blank" rel="noopener noreferrer">
-                      <Users className="mr-2 h-4 w-4" />
-                      联系我们
-                    </a>
-                  </Button>
-                </div>
+                <Button asChild variant="outline" size="sm">
+                  <a href="https://homepage.hit.edu.cn/wusongtao" target="_blank" rel="noopener noreferrer">
+                    <Users className="mr-2 h-4 w-4" />
+                    联系我们
+                  </a>
+                </Button>
              </div>

              {/* 快速链接 */}
@@ -463,16 +455,6 @@ export default function HomePageContent() {
                      </Link>
                    </li>
                  ))}
-                  <li>
-                    <Link href="/analytics" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                      学习进度
-                    </Link>
-                  </li>
-                  <li>
-                    <Link href="/settings" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                      系统设置
-                    </Link>
-                  </li>
                </ul>
              </div>

@@ -1,12 +1,13 @@
 "use client";

 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { useAuthStore } from "@/store/auth";
-import { BookOpen, LogOut, User as UserIcon, Settings, ChevronDown, MessageSquare, Database, Image, TrendingUp, GraduationCap } from "lucide-react";
+import { BookOpen, LogOut, User as UserIcon, Settings, ChevronDown, MessageSquare, Database, Image, TrendingUp, GraduationCap, Users } from "lucide-react";
 import { User } from "@/types";

 interface NavbarProps {
@@ -14,14 +15,28 @@ interface NavbarProps {
  user: User | null;
 }

+const NAV_LINKS = [
+  { href: "/course-content", label: "课程内容", icon: GraduationCap },
+  { href: "/chat", label: "智能问答", icon: MessageSquare },
+  { href: "/knowledge", label: "知识库", icon: Database },
+  { href: "/spatial", label: "空间设计", icon: Image },
+  { href: "/forum", label: "课程社区", icon: Users },
+];
+
 export default function Navbar({ isAuthenticated, user }: NavbarProps) {
  const { logout } = useAuthStore();
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === "/forum") return pathname === "/forum" || pathname.startsWith("/forum/");
+    return pathname === href || pathname.startsWith(href + "/");
+  };

  return (
    <nav className="border-b bg-background/95 backdrop-blur-sm sticky top-0 z-50">
      <div className="mit-container">
        <div className="flex justify-between items-center h-16">
-          {/* Logo 和标题 */}
+          {/* Logo */}
          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity cursor-pointer">
            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
              <BookOpen className="w-6 h-6 text-white" />
@@ -36,46 +51,60 @@ export default function Navbar({ isAuthenticated, user }: NavbarProps) {
            </div>
          </Link>

-          {/* 导航链接 */}
+          {/* 导航链接 — 带底部下划线指示 */}
          {isAuthenticated && (
-            <div className="hidden md:flex items-center space-x-1">
-              <Link href="/course-content">
-                <Button variant="ghost" className="flex items-center space-x-2 px-3 py-2 hover:bg-muted/50">
-                  <GraduationCap className="w-4 h-4" />
-                  <span className="text-sm">课程内容</span>
-                </Button>
-              </Link>
-              <Link href="/chat">
-                <Button variant="ghost" className="flex items-center space-x-2 px-3 py-2 hover:bg-muted/50">
-                  <MessageSquare className="w-4 h-4" />
-                  <span className="text-sm">智能问答</span>
-                </Button>
-              </Link>
-              <Link href="/knowledge">
-                <Button variant="ghost" className="flex items-center space-x-2 px-3 py-2 hover:bg-muted/50">
-                  <Database className="w-4 h-4" />
-                  <span className="text-sm">知识库</span>
-                </Button>
-              </Link>
-              <Link href="/spatial">
-                <Button variant="ghost" className="flex items-center space-x-2 px-3 py-2 hover:bg-muted/50">
-                  <Image className="w-4 h-4" />
-                  <span className="text-sm">空间设计</span>
-                </Button>
+            <div className="hidden md:flex items-center h-full -mb-px">
+              {NAV_LINKS.map((item) => {
+                const active = isActive(item.href);
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={`
+                      relative flex items-center gap-1.5 px-3 h-full text-sm transition-colors
+                      ${active
+                        ? "text-primary font-medium"
+                        : "text-muted-foreground hover:text-foreground"
+                      }
+                    `}
+                  >
+                    <item.icon className="w-4 h-4" />
+                    <span>{item.label}</span>
+                    {active && (
+                      <span className="absolute bottom-0 left-3 right-3 h-0.5 bg-primary rounded-full" />
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+
+          {/* 未登录时也显示课程社区链接 */}
+          {!isAuthenticated && (
+            <div className="hidden md:flex items-center h-full -mb-px">
+              <Link
+                href="/forum"
+                className={`
+                  relative flex items-center gap-1.5 px-3 h-full text-sm transition-colors
+                  ${isActive("/forum")
+                    ? "text-primary font-medium"
+                    : "text-muted-foreground hover:text-foreground"
+                  }
+                `}
+              >
+                <Users className="w-4 h-4" />
+                <span>课程社区</span>
+                {isActive("/forum") && (
+                  <span className="absolute bottom-0 left-3 right-3 h-0.5 bg-primary rounded-full" />
+                )}
              </Link>
            </div>
          )}

          <div className="flex items-center space-x-3">
            <ThemeToggle />
-            <Link href="/forum">
-              <Button variant="outline" size="sm">
-                课程社区
-              </Button>
-            </Link>

            {isAuthenticated && user ? (
-              // 登录后状态 - 用户下拉菜单
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="flex items-center space-x-2 px-3 hover:bg-muted/50">
@@ -127,7 +156,6 @@ export default function Navbar({ isAuthenticated, user }: NavbarProps) {
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
-              // 未登录状态
              <div className="flex items-center space-x-2">
                <Button variant="ghost" asChild>
                  <Link href="/login">登录</Link>
@@ -14,7 +14,8 @@ import {
  User,
  LogOut,
  GraduationCap,
-  TrendingUp
+  TrendingUp,
+  Users
 } from "lucide-react";

 const navItems = [
@@ -22,6 +23,7 @@ const navItems = [
  { id: "chat", name: "对话", icon: MessageSquare, href: "/chat" },
  { id: "knowledge", name: "知识库", icon: BookOpen, href: "/knowledge" },
  { id: "spatial", name: "空间出图", icon: Image, href: "/spatial" },
+  { id: "forum", name: "社区", icon: Users, href: "/forum" },
 ];

 export default function MobileNav() {