Track frontend files directly and fix Docker package copy

frontend

@@ -1 +0,0 @@
-Subproject commit 1a5a16cecf142db89f5b4f8afa50849c9283949f

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/next.config.mjs

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const backendInternalUrl = process.env.BACKEND_INTERNAL_URL || "http://127.0.0.1:3001";
+
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${backendInternalUrl}/api/:path*`,
+      },
+      {
+        source: "/uploads/:path*",
+        destination: `${backendInternalUrl}/uploads/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "axios": "^1.13.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "next": "14.2.35",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^3.5.0",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

frontend/src/app/admin/page.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/lib/store";
+import { Plus, LayoutDashboard, ShoppingCart, Settings } from "lucide-react";
+
+export default function AdminDashboard() {
+  const router = useRouter();
+  const { user, token } = useAuthStore();
+  const [activeTab, setActiveTab] = useState<'courses' | 'orders'>('courses');
+  const [courses, setCourses] = useState<any[]>([]);
+  const [orders, setOrders] = useState<any[]>([]);
+  
+  // Course Form
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [coverImage, setCoverImage] = useState('');
+  const [driveLink, setDriveLink] = useState('');
+  const [price, setPrice] = useState('');
+  const [category, setCategory] = useState('');
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!token || user?.role !== 'admin') {
+      router.push('/login');
+      return;
+    }
+    fetchData();
+  }, [token, user, activeTab]);
+
+  const fetchData = async () => {
+    try {
+      if (activeTab === 'courses') {
+        const res = await api.get('/api/courses'); // In real app, might want a specific admin endpoint to see inactive ones too
+        if (res.success) setCourses(res.data);
+      } else {
+        const res = await api.get('/api/admin/orders');
+        if (res.success) setOrders(res.data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleSubmitCourse = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const payload = {
+        title,
+        description,
+        coverImage,
+        driveLink,
+        price: Number(price),
+        category
+      };
+      
+      let res;
+      if (editingCourseId) {
+        res = await api.put(`/api/admin/courses/${editingCourseId}`, payload) as any;
+      } else {
+        res = await api.post('/api/admin/courses', payload) as any;
+      }
+      
+      if (res.success) {
+        alert(editingCourseId ? '课程更新成功' : '课程创建成功');
+        setShowAddForm(false);
+        setEditingCourseId(null);
+        fetchData();
+        // Reset form
+        setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory('');
+      }
+    } catch (err) {
+      console.error(err);
+      alert(editingCourseId ? '更新课程失败' : '创建课程失败');
+    }
+  };
+
+  const handleEdit = (course: any) => {
+    setEditingCourseId(course.id);
+    setTitle(course.title);
+    setDescription(course.description || '');
+    setCoverImage(course.coverImage || '');
+    setDriveLink(course.driveLink || '');
+    setPrice(course.price ? course.price.toString() : '');
+    setCategory(course.category || '');
+    setShowAddForm(true);
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row gap-8 min-h-[calc(100vh-12rem)]">
+      {/* Sidebar */}
+      <div className="w-full md:w-64 bg-white rounded-2xl shadow-sm border border-gray-100 p-6 self-start">
+        <div className="flex items-center gap-3 mb-8 px-2">
+          <div className="w-10 h-10 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center font-bold text-lg">
+            A
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-900">管理后台</h3>
+            <p className="text-xs text-gray-500">管理您的店铺</p>
+          </div>
+        </div>
+        
+        <nav className="space-y-2">
+          <button 
+            onClick={() => setActiveTab('courses')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'courses' ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
+          >
+            <LayoutDashboard className="w-5 h-5" />
+            课程管理
+          </button>
+          <button 
+            onClick={() => setActiveTab('orders')}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-colors ${activeTab === 'orders' ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`}
+          >
+            <ShoppingCart className="w-5 h-5" />
+            订单管理
+          </button>
+        </nav>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
+        {activeTab === 'courses' && (
+          <div>
+            <div className="flex justify-between items-center mb-8">
+              <h2 className="text-2xl font-bold text-gray-900">课程管理</h2>
+              <button 
+                onClick={() => {
+                  if (showAddForm) {
+                    setShowAddForm(false);
+                    setEditingCourseId(null);
+                    setTitle(''); setDescription(''); setCoverImage(''); setDriveLink(''); setPrice(''); setCategory('');
+                  } else {
+                    setShowAddForm(true);
+                  }
+                }}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+              >
+                {showAddForm ? '取消' : <><Plus className="w-4 h-4" /> 添加课程</>}
+              </button>
+            </div>
+
+            {showAddForm && (
+              <form onSubmit={handleSubmitCourse} className="bg-gray-50 p-6 rounded-xl mb-8 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">标题</label>
+                    <input type="text" required value={title} onChange={e => setTitle(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-200" />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
+                    <input type="number" required value={price} onChange={e => setPrice(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-200" />
+                  </div>
+                  <div className="col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">描述</label>
+                    <textarea rows={3} value={description} onChange={e => setDescription(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-200"></textarea>
+                  </div>
+                  <div className="col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">封面图片URL</label>
+                    <div className="flex gap-2">
+                      <input type="text" required value={coverImage} onChange={e => setCoverImage(e.target.value)} className="flex-1 px-4 py-2 rounded-lg border border-gray-200" placeholder="请输入图片URL或点击右侧上传" />
+                      <label className="cursor-pointer px-4 py-2 bg-gray-100 text-gray-700 rounded-lg border border-gray-200 hover:bg-gray-200 transition-colors whitespace-nowrap flex items-center justify-center">
+                        上传图片
+                        <input 
+                          type="file" 
+                          accept="image/*" 
+                          className="hidden" 
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file) return;
+                            const formData = new FormData();
+                            formData.append('file', file);
+                            try {
+                              const res = await api.post('/api/upload', formData, {
+                                headers: {
+                                  'Content-Type': 'multipart/form-data'
+                                }
+                              }) as any;
+                              if (res.success) {
+                                setCoverImage(res.url);
+                              } else {
+                                alert('上传失败');
+                              }
+                            } catch (err) {
+                              console.error(err);
+                              alert('上传失败');
+                            }
+                          }} 
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div className="col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">分类</label>
+                    <input type="text" value={category} onChange={e => setCategory(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-200" />
+                  </div>
+                  <div className="col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">网盘链接 (受保护)</label>
+                    <input type="text" required value={driveLink} onChange={e => setDriveLink(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-200" />
+                  </div>
+                </div>
+                <div className="flex justify-end pt-4">
+                  <button type="submit" className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
+                    {editingCourseId ? '更新课程' : '保存课程'}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b border-gray-200 text-sm text-gray-500">
+                    <th className="pb-3 font-medium">ID</th>
+                    <th className="pb-3 font-medium">课程标题</th>
+                    <th className="pb-3 font-medium">价格</th>
+                    <th className="pb-3 font-medium">分类</th>
+                    <th className="pb-3 font-medium">操作</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100">
+                  {courses.map(course => (
+                    <tr key={course.id} className="text-sm">
+                      <td className="py-4 text-gray-500">#{course.id}</td>
+                      <td className="py-4 font-medium text-gray-900">{course.title}</td>
+                      <td className="py-4">¥{course.price}</td>
+                      <td className="py-4"><span className="px-2 py-1 bg-gray-100 rounded-md text-xs">{course.category || 'N/A'}</span></td>
+                      <td className="py-4">
+                        <button onClick={() => handleEdit(course)} className="text-blue-600 hover:underline mr-3">编辑</button>
+                      </td>
+                    </tr>
+                  ))}
+                  {courses.length === 0 && (
+                    <tr>
+                      <td colSpan={5} className="py-8 text-center text-gray-500">未找到课程</td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'orders' && (
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-8">订单管理</h2>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b border-gray-200 text-sm text-gray-500">
+                    <th className="pb-3 font-medium">订单号</th>
+                    <th className="pb-3 font-medium">课程</th>
+                    <th className="pb-3 font-medium">金额</th>
+                    <th className="pb-3 font-medium">状态</th>
+                    <th className="pb-3 font-medium">日期</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100">
+                  {orders.map(order => (
+                    <tr key={order.id} className="text-sm">
+                      <td className="py-4 text-gray-500">{order.orderNo}</td>
+                      <td className="py-4 font-medium text-gray-900 line-clamp-1 max-w-[200px]">{order.course?.title}</td>
+                      <td className="py-4">¥{order.amount}</td>
+                      <td className="py-4">
+                        <span className={`px-2 py-1 rounded-md text-xs font-medium ${
+                          order.status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
+                        }`}>
+                          {order.status.toUpperCase()}
+                        </span>
+                      </td>
+                      <td className="py-4 text-gray-500">{new Date(order.createdAt).toLocaleDateString()}</td>
+                    </tr>
+                  ))}
+                  {orders.length === 0 && (
+                    <tr>
+                      <td colSpan={5} className="py-8 text-center text-gray-500">未找到订单</td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/client-layout.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { useAuthStore } from "@/lib/store";
+import { useRouter } from "next/navigation";
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const { user, logout } = useAuthStore();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    logout();
+    router.push('/');
+  };
+
+  return (
+    <>
+      <header className="bg-white border-b sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+          <Link href="/" className="text-xl font-bold text-blue-600">课程中心</Link>
+          <nav className="flex items-center gap-6">
+            <Link href="/" className="text-gray-600 hover:text-blue-600 font-medium">发现课程</Link>
+            
+            {user ? (
+              <>
+                <Link href="/user/courses" className="text-gray-600 hover:text-blue-600 font-medium">我的学习</Link>
+                {user.role === 'admin' && (
+                  <Link href="/admin" className="text-gray-600 hover:text-blue-600 font-medium">管理后台</Link>
+                )}
+                <div className="flex items-center gap-4 border-l pl-6 ml-2">
+                  <span className="text-sm font-medium text-gray-900">{user.nickname}</span>
+                  <button 
+                    onClick={handleLogout}
+                    className="text-sm text-gray-500 hover:text-gray-900"
+                  >
+                    退出登录
+                  </button>
+                </div>
+              </>
+            ) : (
+              <Link href="/login" className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm">
+                登录 / 注册
+              </Link>
+            )}
+          </nav>
+        </div>
+      </header>
+      
+      <main className="flex-1 max-w-7xl mx-auto w-full px-4 py-8">
+        {children}
+      </main>
+
+      <footer className="bg-white border-t py-8 mt-auto">
+        <div className="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm">
+          © 2024 课程中心. 保留所有权利。
+        </div>
+      </footer>
+    </>
+  );
+}

frontend/src/app/course/[id]/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { ArrowLeft, CheckCircle } from "lucide-react";
+import Link from "next/link";
+import { useAuthStore } from "@/lib/store";
+
+export default function CourseDetail() {
+  const { id } = useParams();
+  const router = useRouter();
+  const { token } = useAuthStore();
+  
+  const [course, setCourse] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCourse = async () => {
+      try {
+        const res = await api.get(`/api/courses/${id}`);
+        if (res.success) {
+          setCourse(res.data);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCourse();
+  }, [id]);
+
+  const handleBuy = async () => {
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+    
+    try {
+      const res = await api.post('/api/orders/create', {
+        courseId: Number(id),
+        price: Number(course.price)
+      });
+      
+      if (res.success) {
+        router.push(`/payment/${res.data.orderId}`);
+      }
+    } catch (err) {
+      console.error(err);
+      alert('创建订单失败');
+    }
+  };
+
+  if (loading) {
+    return <div className="animate-pulse h-96 bg-white rounded-xl"></div>;
+  }
+
+  if (!course) {
+    return <div className="text-center py-20">课程未找到</div>;
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <Link href="/" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-900">
+        <ArrowLeft className="w-4 h-4 mr-1" /> 返回课程列表
+      </Link>
+      
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+        <div className="aspect-video w-full bg-gray-100">
+          <img 
+            src={course.coverImage || "https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=educational%20course%20cover%20design&image_size=landscape_16_9"} 
+            alt={course.title}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        
+        <div className="p-8">
+          <div className="flex items-start justify-between mb-6">
+            <div>
+              <div className="inline-block px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-3">
+                {course.category || '通用'}
+              </div>
+              <h1 className="text-3xl font-bold text-gray-900">{course.title}</h1>
+            </div>
+            <div className="text-right">
+              <div className="text-3xl font-bold text-blue-600">¥{course.price}</div>
+            </div>
+          </div>
+          
+          <div className="prose max-w-none text-gray-600 mb-8">
+            <h3 className="text-xl font-semibold text-gray-900 mb-4">关于本课程</h3>
+            <p className="whitespace-pre-line">{course.description}</p>
+          </div>
+          
+          <div className="bg-gray-50 rounded-xl p-6 mb-8">
+            <h4 className="font-semibold text-gray-900 mb-4">你将获得：</h4>
+            <ul className="space-y-3">
+              {['终身访问权限', '高质量学习资料', '支持手机和电视访问', '直达网盘链接'].map((item, i) => (
+                <li key={i} className="flex items-center text-gray-600">
+                  <CheckCircle className="w-5 h-5 text-green-500 mr-3" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+          
+          <div className="flex justify-end pt-6 border-t">
+            <button 
+              onClick={handleBuy}
+              className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200"
+            >
+              立即购买
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import ClientLayout from "./client-layout";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "课程订阅平台",
+  description: "学习并与我们的优质课程一起成长",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body className={`${inter.className} min-h-screen bg-gray-50 flex flex-col antialiased`}>
+        <ClientLayout>
+          {children}
+        </ClientLayout>
+      </body>
+    </html>
+  );
+}

frontend/src/app/login/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/lib/store";
+
+export default function Login() {
+  const router = useRouter();
+  const { setAuth } = useAuthStore();
+  const [isLogin, setIsLogin] = useState(true);
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [smsCode, setSmsCode] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    
+    try {
+      if (isLogin) {
+        const res = await api.post('/api/auth/login', { phone, password });
+        if (res.success) {
+          setAuth(
+            { id: res.data.userId, phone, nickname: res.data.nickname, role: res.data.role }, 
+            res.data.token
+          );
+          router.push('/');
+        }
+      } else {
+        const res = await api.post('/api/auth/register', { phone, password, smsCode: smsCode || '123456' });
+        if (res.success) {
+          setAuth(
+            { id: res.data.userId, phone, nickname: res.data.nickname, role: res.data.role }, 
+            res.data.token
+          );
+          router.push('/');
+        }
+      }
+    } catch (err: any) {
+      console.error(err);
+      alert(err.response?.data?.message || '认证失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-20">
+      <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
+        <h1 className="text-2xl font-bold text-center text-gray-900 mb-8">
+          {isLogin ? '欢迎回来' : '创建账号'}
+        </h1>
+        
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
+            <input 
+              type="text" 
+              required
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
+              placeholder="请输入手机号码"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">密码</label>
+            <input 
+              type="password" 
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
+              placeholder="请输入密码"
+            />
+          </div>
+
+          {!isLogin && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">短信验证码 (模拟: 123456)</label>
+              <div className="flex gap-3">
+                <input 
+                  type="text" 
+                  required
+                  value={smsCode}
+                  onChange={(e) => setSmsCode(e.target.value)}
+                  className="flex-1 px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
+                  placeholder="6位验证码"
+                />
+                <button type="button" className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">
+                  发送验证码
+                </button>
+              </div>
+            </div>
+          )}
+
+          <button 
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-3.5 rounded-xl font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 mt-4"
+          >
+            {loading ? '处理中...' : (isLogin ? '登录' : '注册')}
+          </button>
+        </form>
+        
+        <div className="mt-6 text-center text-sm text-gray-500">
+          {isLogin ? "没有账号？ " : "已有账号？ "}
+          <button 
+            onClick={() => setIsLogin(!isLogin)}
+            className="text-blue-600 font-medium hover:underline"
+          >
+            {isLogin ? '去注册' : '去登录'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import Link from "next/link";
+import { BookOpen, User } from "lucide-react";
+
+export default function Home() {
+  const [courses, setCourses] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCourses = async () => {
+      try {
+        const res = await api.get('/api/courses');
+        if (res.success) {
+          setCourses(res.data);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCourses();
+  }, []);
+
+  return (
+    <div className="space-y-12">
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-12 text-white shadow-xl">
+        <div className="max-w-2xl">
+          <h1 className="text-4xl font-bold mb-4">获取优质课程，提升你的技能</h1>
+          <p className="text-blue-100 text-lg mb-8">访问由行业专家精心打造的高质量课程资料。一次购买，终身受益。</p>
+          <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
+            浏览课程
+          </button>
+        </div>
+      </section>
+
+      {/* Course List */}
+      <section>
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">精选课程</h2>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="bg-white rounded-xl h-80 animate-pulse"></div>
+            ))}
+          </div>
+        ) : courses.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {courses.map((course) => (
+              <Link href={`/course/${course.id}`} key={course.id}>
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow group">
+                  <div className="aspect-video w-full bg-gray-200 relative overflow-hidden">
+                    <img 
+                      src={course.coverImage || "https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=educational%20course%20cover%20design%20with%20books%20and%20laptop%20clean%20style&image_size=landscape_16_9"} 
+                      alt={course.title}
+                      className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
+                    />
+                  </div>
+                  <div className="p-5">
+                    <div className="text-xs font-medium text-blue-600 mb-2">{course.category || '通用'}</div>
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-1">{course.title}</h3>
+                    <p className="text-gray-500 text-sm mb-4 line-clamp-2">{course.description}</p>
+                    <div className="flex items-center justify-between mt-auto">
+                      <span className="text-xl font-bold text-gray-900">¥{course.price}</span>
+                      <span className="text-sm text-blue-600 font-medium">了解详情 →</span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12 bg-white rounded-xl border border-gray-100">
+            <BookOpen className="w-12 h-12 text-gray-300 mx-auto mb-3" />
+            <p className="text-gray-500">暂无可用课程。</p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

frontend/src/app/payment/[id]/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { CreditCard, Smartphone } from "lucide-react";
+
+export default function Payment() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [payType, setPayType] = useState<'wechat' | 'alipay'>('wechat');
+  const [loading, setLoading] = useState(false);
+
+  const handlePay = async () => {
+    setLoading(true);
+    try {
+      const res = await api.post('/api/payment/prepare', {
+        orderId: id as string,
+        payType
+      });
+      
+      if (res.success) {
+        // Mock payment flow
+        alert('模拟支付成功： ' + payType);
+        
+        // Mock webhook callback
+        await api.post('/api/payment/callback', {
+          paymentNo: res.data.paymentNo,
+          status: 'SUCCESS'
+        });
+
+        router.push('/user/courses');
+      }
+    } catch (err) {
+      console.error(err);
+      alert('支付失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-xl mx-auto mt-10">
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
+        <h1 className="text-2xl font-bold text-gray-900 mb-6 text-center">完成支付</h1>
+        
+        <div className="space-y-4 mb-8">
+          <label 
+            className={`flex items-center p-4 border rounded-xl cursor-pointer transition-colors ${payType === 'wechat' ? 'border-green-500 bg-green-50' : 'hover:bg-gray-50'}`}
+          >
+            <input 
+              type="radio" 
+              name="payType" 
+              value="wechat" 
+              checked={payType === 'wechat'} 
+              onChange={() => setPayType('wechat')}
+              className="hidden" 
+            />
+            <Smartphone className={`w-8 h-8 mr-4 ${payType === 'wechat' ? 'text-green-600' : 'text-gray-400'}`} />
+            <div className="flex-1">
+              <div className="font-semibold text-gray-900">微信支付</div>
+              <div className="text-sm text-gray-500">使用微信APP支付</div>
+            </div>
+            <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${payType === 'wechat' ? 'border-green-500' : 'border-gray-300'}`}>
+              {payType === 'wechat' && <div className="w-3 h-3 rounded-full bg-green-500" />}
+            </div>
+          </label>
+
+          <label 
+            className={`flex items-center p-4 border rounded-xl cursor-pointer transition-colors ${payType === 'alipay' ? 'border-blue-500 bg-blue-50' : 'hover:bg-gray-50'}`}
+          >
+            <input 
+              type="radio" 
+              name="payType" 
+              value="alipay" 
+              checked={payType === 'alipay'} 
+              onChange={() => setPayType('alipay')}
+              className="hidden" 
+            />
+            <CreditCard className={`w-8 h-8 mr-4 ${payType === 'alipay' ? 'text-blue-600' : 'text-gray-400'}`} />
+            <div className="flex-1">
+              <div className="font-semibold text-gray-900">支付宝</div>
+              <div className="text-sm text-gray-500">使用支付宝APP支付</div>
+            </div>
+            <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${payType === 'alipay' ? 'border-blue-500' : 'border-gray-300'}`}>
+              {payType === 'alipay' && <div className="w-3 h-3 rounded-full bg-blue-500" />}
+            </div>
+          </label>
+        </div>
+
+        <button 
+          onClick={handlePay}
+          disabled={loading}
+          className="w-full bg-blue-600 text-white py-4 rounded-xl font-semibold text-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+        >
+          {loading ? '处理中...' : '立即支付'}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/app/user/courses/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { api } from "@/lib/api";
+import { useAuthStore } from "@/lib/store";
+import { BookOpen, ExternalLink, Clock } from "lucide-react";
+import Link from "next/link";
+
+export default function MyCourses() {
+  const router = useRouter();
+  const { token } = useAuthStore();
+  const [courses, setCourses] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+
+    const fetchMyCourses = async () => {
+      try {
+        // Here we use a different endpoint or filter, for mock we just fetch all
+        // In real backend, we need an endpoint /api/courses/my
+        const res = await api.get('/api/courses/my'); 
+        if (res.success) {
+          setCourses(res.data);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMyCourses();
+  }, [token, router]);
+
+  const handleAccess = async (courseId: number) => {
+    try {
+      const res = await api.get(`/api/courses/${courseId}/access`);
+      if (res.success && res.data.hasAccess) {
+        window.open(res.data.driveLink, '_blank');
+      }
+    } catch (err) {
+      console.error(err);
+      alert('获取学习链接失败');
+    }
+  };
+
+  if (loading) {
+    return <div className="animate-pulse h-64 bg-white rounded-xl"></div>;
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto space-y-8">
+      <h1 className="text-3xl font-bold text-gray-900">我的学习</h1>
+      
+      {courses.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {courses.map((course) => (
+            <div key={course.id} className="bg-white rounded-xl shadow-sm border border-gray-100 flex overflow-hidden">
+              <div className="w-1/3 bg-gray-100 flex-shrink-0">
+                <img 
+                  src={course.coverImage || "https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=educational%20course%20cover%20design&image_size=landscape_16_9"} 
+                  alt={course.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div className="p-5 flex-1 flex flex-col">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">{course.title}</h3>
+                
+                <div className="mt-auto space-y-4">
+                  <div className="flex items-center text-sm text-gray-500">
+                    <Clock className="w-4 h-4 mr-1.5" />
+                    到期时间: {new Date(course.expiredAt).toLocaleDateString()}
+                  </div>
+                  
+                  <div className="flex gap-3">
+                    <Link href={`/course/${course.id}`} className="px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
+                      课程详情
+                    </Link>
+                    <button 
+                      onClick={() => handleAccess(course.id)}
+                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors flex items-center justify-center"
+                    >
+                      <ExternalLink className="w-4 h-4 mr-1.5" />
+                      打开网盘
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-20 bg-white rounded-2xl border border-gray-100">
+          <BookOpen className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <h3 className="text-xl font-medium text-gray-900 mb-2">暂无课程</h3>
+          <p className="text-gray-500 mb-6">您还没有购买过任何课程。</p>
+          <Link href="/" className="inline-flex px-6 py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors">
+            浏览课程
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '/api',
+  timeout: 10000,
+});
+
+client.interceptors.request.use((config) => {
+  if (typeof window !== 'undefined') {
+    const token = localStorage.getItem('token');
+    if (token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+  }
+  return config;
+});
+
+client.interceptors.response.use(undefined, (error) => Promise.reject(error));
+
+export const api = {
+  get: (...args: Parameters<typeof client.get>) => client.get(...args).then((response) => response.data as any),
+  post: (...args: Parameters<typeof client.post>) => client.post(...args).then((response) => response.data as any),
+  put: (...args: Parameters<typeof client.put>) => client.put(...args).then((response) => response.data as any),
+  delete: (...args: Parameters<typeof client.delete>) => client.delete(...args).then((response) => response.data as any),
+};

frontend/src/lib/store.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+
+interface User {
+  id: number;
+  phone: string;
+  nickname: string;
+  role: string;
+}
+
+interface AuthState {
+  user: User | null;
+  token: string | null;
+  setAuth: (user: User, token: string) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  token: null,
+  setAuth: (user, token) => {
+    localStorage.setItem('token', token);
+    set({ user, token });
+  },
+  logout: () => {
+    localStorage.removeItem('token');
+    set({ user: null, token: null });
+  },
+}));

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/tailwind.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}