From 7d7dd1052abdbce0bc5cc4b91206caa3921f7afb Mon Sep 17 00:00:00 2001
From: guru-agent <guru-agent@ideaGuru>
Date: Wed, 6 May 2026 08:50:41 +0000
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B7=B2=E7=BB=8F=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E5=AE=8C=E6=88=90=EF=BC=81=E6=88=91=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E6=88=AA=E5=9B=BE=E5=AE=9E=E7=8E=B0=E4=BA=86=E5=AD=A6=E4=B9=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=8C=85=E5=90=AB=E4=BB=A5=E4=B8=8B?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**页面结构：**

1. **顶部导航栏** - 包含 X 关闭按钮和"学习"标题

2. **筛选区域** -
   - 左侧下拉选...

CCB74DBDB8FF-D11F734A31E94D98BACA34E76D60F54E
---
 src/app/study/page.tsx | 136 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 src/app/study/page.tsx

diff --git a/src/app/study/page.tsx b/src/app/study/page.tsx
new file mode 100644
index 0000000..7218ba9
--- /dev/null
+++ b/src/app/study/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { X, ChevronDown, Home, Grid3X3, Gift, BookOpen, User } from "lucide-react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+// 课程数据
+const courses = [
+  {
+    id: 1,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 2,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 3,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 4,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 45,
+  },
+  {
+    id: 5,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 82,
+  },
+];
+
+// 底部导航项
+const navItems = [
+  { icon: Home, label: "首页", href: "/" },
+  { icon: Grid3X3, label: "分类", href: "/category" },
+  { icon: Gift, label: "活动", href: "/activity" },
+  { icon: BookOpen, label: "学习", href: "/study", active: true },
+  { icon: User, label: "我的", href: "/profile" },
+];
+
+export default function StudyPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-gray-100">
+      {/* 顶部导航 */}
+      <header className="sticky top-0 z-10 bg-white px-4 py-3">
+        <div className="flex items-center justify-between">
+          <Button variant="ghost" size="icon" className="size-8 -ml-2 text-gray-600">
+            <X className="size-5" />
+          </Button>
+          <h1 className="text-lg font-medium text-gray-900">学习</h1>
+          <div className="size-8" />
+        </div>
+      </header>
+
+      {/* 筛选区域 */}
+      <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
+        <button className="flex items-center gap-1 text-sm text-gray-700">
+          <span>一级建造师</span>
+          <ChevronDown className="size-4" />
+        </button>
+        <Link
+          href="/study/track"
+          className="text-sm text-sky-500 hover:text-sky-600"
+        >
+          学习轨迹
+        </Link>
+      </div>
+
+      {/* 课程列表 */}
+      <main className="flex-1 space-y-3 overflow-auto p-3 pb-20">
+        {courses.map((course) => (
+          <Card
+            key={course.id}
+            className="border-0 shadow-sm"
+          >
+            <CardContent className="p-4 space-y-4">
+              {/* 课程标题 */}
+              <h3 className="text-base font-medium leading-relaxed text-gray-900">
+                {course.title}
+              </h3>
+
+              {/* 进度条 */}
+              <div className="space-y-2">
+                <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
+                  <div
+                    className="h-full rounded-full bg-sky-500 transition-all"
+                    style={{ width: `${course.progress}%` }}
+                  />
+                </div>
+                <div className="text-right text-xs text-sky-500">
+                  学习进度{course.progress}%
+                </div>
+              </div>
+
+              {/* 前往学习按钮 */}
+              <Link
+                href={`/study/course/${course.id}`}
+                className={cn(
+                  buttonVariants({ variant: "default" }),
+                  "w-full bg-sky-500 text-white hover:bg-sky-600 h-10 rounded-md"
+                )}
+              >
+                前往学习
+              </Link>
+            </CardContent>
+          </Card>
+        ))}
+      </main>
+
+      {/* 底部导航 */}
+      <nav className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white px-2 pb-safe">
+        <div className="mx-auto flex max-w-md justify-around py-2">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 px-3 py-1",
+                item.active ? "text-sky-500" : "text-gray-500"
+              )}
+            >
+              <item.icon className="size-5" />
+              <span className="text-xs">{item.label}</span>
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}