feat: Phase 1-3 全部完成 — 沙盒增强、学情分析、学习路径

2026-05-18 09:48:51 +08:00
commit 11bb86854c
277 changed files with 37755 additions and 0 deletions
@@ -0,0 +1,102 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../../lib/auth';
+
+interface DailyItem {
+  id: number;
+  title: string;
+  summary?: string;
+  cover?: string;
+  _type: 'course' | 'prompt' | 'content';
+}
+
+export default function DailyPage() {
+  const [items, setItems] = useState<DailyItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadDaily();
+  }, []);
+
+  async function loadDaily() {
+    try {
+      const [coursesRes, promptsRes, contentsRes] = await Promise.all([
+        apiFetch('/courses?pageSize=3'),
+        apiFetch('/prompts?pageSize=3'),
+        apiFetch('/contents?pageSize=3'),
+      ]);
+
+      const coursesData = await coursesRes.json();
+      const promptsData = await promptsRes.json();
+      const contentsData = await contentsRes.json();
+
+      const items: DailyItem[] = [
+        ...(coursesData.items || []).map((c: any) => ({ ...c, _type: 'course' as const })),
+        ...(promptsData.items || []).map((p: any) => ({ ...p, _type: 'prompt' as const })),
+        ...(contentsData.items || []).map((c: any) => ({ ...c, _type: 'content' as const })),
+      ];
+
+      setItems(items);
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <Link href="/discover" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回发现
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground">每日精选</h1>
+        <p className="mt-2 text-muted-foreground">精心挑选的优质内容</p>
+      </div>
+
+      <div className="space-y-4">
+        {items.map((item, index) => (
+          <Link
+            key={`${item._type}-${item.id}`}
+            href={
+              item._type === 'course' ? `/courses/${item.id}` :
+              item._type === 'prompt' ? `/prompts/${item.id}` :
+              `/contents/${item.id}`
+            }
+            className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex gap-4"
+          >
+            {item.cover && (
+              <img src={item.cover} alt={item.title} className="w-20 h-20 object-cover rounded-lg shrink-0" />
+            )}
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <span className={`text-xs px-2 py-0.5 rounded ${
+                  item._type === 'course' ? 'bg-blue-100 text-blue-700' :
+                  item._type === 'prompt' ? 'bg-purple-100 text-purple-700' :
+                  'bg-green-100 text-green-700'
+                }`}>
+                  {item._type === 'course' ? '课程' : item._type === 'prompt' ? '提示词' : '文章'}
+                </span>
+                <span className="text-xs text-muted-foreground">#{index + 1}</span>
+              </div>
+              <h3 className="font-semibold text-foreground mb-1">{item.title}</h3>
+              <p className="text-sm text-muted-foreground line-clamp-2">{item.summary || '暂无描述'}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,115 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../../lib/auth';
+
+interface HotItem {
+  id: number;
+  title: string;
+  viewCount?: number;
+  likeCount?: number;
+  _type: 'course' | 'prompt' | 'post';
+}
+
+export default function HotPage() {
+  const [items, setItems] = useState<HotItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadHot();
+  }, []);
+
+  async function loadHot() {
+    try {
+      const [coursesRes, promptsRes, postsRes] = await Promise.all([
+        apiFetch('/courses?pageSize=10'),
+        apiFetch('/prompts?pageSize=10'),
+        apiFetch('/community/posts?pageSize=10'),
+      ]);
+
+      const coursesData = await coursesRes.json();
+      const promptsData = await promptsRes.json();
+      const postsData = await postsRes.json();
+
+      const items: HotItem[] = [
+        ...(coursesData.items || []).map((c: any) => ({ ...c, _type: 'course' as const })),
+        ...(promptsData.items || []).map((p: any) => ({ ...p, _type: 'prompt' as const })),
+        ...(postsData.items || []).map((p: any) => ({ ...p, _type: 'post' as const })),
+      ].sort((a, b) => {
+        const aScore = (a.viewCount || 0) + (a.likeCount || 0) * 2;
+        const bScore = (b.viewCount || 0) + (b.likeCount || 0) * 2;
+        return bScore - aScore;
+      }).slice(0, 20);
+
+      setItems(items);
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <Link href="/discover" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回发现
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground">热门榜单</h1>
+        <p className="mt-2 text-muted-foreground">最受关注的内容排行</p>
+      </div>
+
+      <div className="bg-card rounded-2xl border border-border overflow-hidden">
+        {items.map((item, index) => (
+          <Link
+            key={`${item._type}-${item.id}`}
+            href={
+              item._type === 'course' ? `/courses/${item.id}` :
+              item._type === 'prompt' ? `/prompts/${item.id}` :
+              `/community/${item.id}`
+            }
+            className={`flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors ${
+              index !== items.length - 1 ? 'border-b border-border' : ''
+            }`}
+          >
+            <span className={`text-2xl font-bold w-10 text-center ${
+              index === 0 ? 'text-yellow-500' :
+              index === 1 ? 'text-muted-foreground' :
+              index === 2 ? 'text-amber-600' :
+              'text-muted-foreground/40'
+            }`}>
+              {index + 1}
+            </span>
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <span className={`text-xs px-2 py-0.5 rounded ${
+                  item._type === 'course' ? 'bg-blue-100 text-blue-700' :
+                  item._type === 'prompt' ? 'bg-purple-100 text-purple-700' :
+                  'bg-green-100 text-green-700'
+                }`}>
+                  {item._type === 'course' ? '课程' : item._type === 'prompt' ? '提示词' : '讨论'}
+                </span>
+              </div>
+              <h3 className="font-medium text-foreground">{item.title}</h3>
+            </div>
+            <div className="text-xs text-muted-foreground text-right">
+              <div>👁 {item.viewCount || 0}</div>
+              <div>❤️ {item.likeCount || 0}</div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,120 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '@/lib/auth';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface HotItem {
+  id: number;
+  title: string;
+  viewCount: number;
+  likeCount: number;
+  _type: 'course' | 'prompt' | 'post';
+}
+
+export default function DiscoverPage() {
+  const [hotCourses, setHotCourses] = useState<HotItem[]>([]);
+  const [hotPrompts, setHotPrompts] = useState<HotItem[]>([]);
+  const [hotPosts, setHotPosts] = useState<HotItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    try {
+      const [coursesRes, promptsRes, postsRes] = await Promise.all([
+        apiFetch('/courses?pageSize=5'),
+        apiFetch('/prompts?pageSize=5'),
+        apiFetch('/community/posts?pageSize=5'),
+      ]);
+
+      const coursesData = await coursesRes.json();
+      const promptsData = await promptsRes.json();
+      const postsData = await postsRes.json();
+
+      setHotCourses((coursesData.items || []).map((c: any) => ({ ...c, _type: 'course' as const })));
+      setHotPrompts((promptsData.items || []).map((p: any) => ({ ...p, _type: 'prompt' as const })));
+      setHotPosts((postsData.items || []).map((p: any) => ({ ...p, _type: 'post' as const })));
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-24 mb-2" />
+      <Skeleton className="h-5 w-64 mb-8" />
+      {[1,2,3].map(i => <Skeleton key={i} className="h-32 rounded-xl mb-4" />)}
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">发现</h1>
+        <p className="mt-2 text-muted-foreground">探索热门内容和精选推荐</p>
+      </div>
+
+      <div className="space-y-8">
+        <section>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-foreground">🔥 热门课程</h2>
+            <Link href="/courses" className="text-sm text-brand-600 hover:underline">查看全部</Link>
+          </div>
+          <div className="grid gap-3">
+            {hotCourses.map((item, index) => (
+              <Link key={item.id} href={`/courses/${item.id}`}
+                className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex items-center gap-4">
+                <span className="text-2xl font-bold text-muted-foreground/20 w-8">{index + 1}</span>
+                <div className="flex-1">
+                  <h3 className="font-medium text-foreground">{item.title}</h3>
+                  <p className="text-xs text-muted-foreground mt-1">👁 {item.viewCount} 浏览</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-foreground">✨ 热门提示词</h2>
+            <Link href="/prompts" className="text-sm text-brand-600 hover:underline">查看全部</Link>
+          </div>
+          <div className="grid gap-3">
+            {hotPrompts.map((item, index) => (
+              <Link key={item.id} href={`/prompts/${item.id}`}
+                className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex items-center gap-4">
+                <span className="text-2xl font-bold text-muted-foreground/20 w-8">{index + 1}</span>
+                <div className="flex-1">
+                  <h3 className="font-medium text-foreground">{item.title}</h3>
+                  <p className="text-xs text-muted-foreground mt-1">❤️ {item.likeCount} 点赞</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold text-foreground">💬 热门讨论</h2>
+            <Link href="/community" className="text-sm text-brand-600 hover:underline">查看全部</Link>
+          </div>
+          <div className="grid gap-3">
+            {hotPosts.map((item, index) => (
+              <Link key={item.id} href={`/community/${item.id}`}
+                className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex items-center gap-4">
+                <span className="text-2xl font-bold text-muted-foreground/20 w-8">{index + 1}</span>
+                <div className="flex-1">
+                  <h3 className="font-medium text-foreground">{item.title}</h3>
+                  <p className="text-xs text-muted-foreground mt-1">❤️ {item.likeCount} 点赞 · 👁 {item.viewCount} 浏览</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,94 @@
+'use client';
+
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiFetch } from '../../../lib/auth';
+
+interface Tool {
+  id: number;
+  name: string;
+  description?: string;
+  url?: string;
+  icon?: string;
+  category?: { name: string };
+}
+
+export default function ToolsRecommendPage() {
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadTools();
+  }, []);
+
+  async function loadTools() {
+    try {
+      const res = await apiFetch('/tools?pageSize=10');
+      const data = await res.json();
+      setTools(data.items || []);
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <Link href="/discover" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+          &larr; 返回发现
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground">工具推荐</h1>
+        <p className="mt-2 text-muted-foreground">精选热门AI工具</p>
+      </div>
+
+      <div className="grid gap-4">
+        {tools.map((tool) => (
+          <Link
+            key={tool.id}
+            href={tool.url || '#'}
+            target="_blank"
+            className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow flex items-center gap-4"
+          >
+            {tool.icon ? (
+              <img src={tool.icon} alt={tool.name} className="w-12 h-12 rounded-lg object-cover" />
+            ) : (
+              <div className="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center text-brand-600 font-bold">
+                {tool.name?.[0] || 'T'}
+              </div>
+            )}
+            <div className="flex-1">
+              <h3 className="font-semibold text-foreground">{tool.name}</h3>
+              <p className="text-sm text-muted-foreground line-clamp-1">{tool.description}</p>
+              {tool.category && (
+                <span className="inline-block mt-1 text-xs px-2 py-0.5 bg-muted rounded">
+                  {tool.category.name}
+                </span>
+              )}
+            </div>
+            <svg className="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </Link>
+        ))}
+      </div>
+
+      {tools.length === 0 && (
+        <div className="text-center py-20 text-muted-foreground">
+          <p>暂无工具推荐</p>
+        </div>
+      )}
+    </div>
+  );
+}