-
- {category.label}
-
-
- {category.skills.map((skill) => (
+ {recentTutorials.length > 0 ? (
+
+ {recentTutorials.map((tutorial) => {
+ const isCompleted = progress[tutorial.id]?.completed;
+ return (
router.push(`/tutorial/${tutorial.id}`)}
>
-
- {skill.name}
-
-
+
+
+
+
+ {getDifficultyText(tutorial.difficulty)}
+
+ {isCompleted && (
+
+
+ 已完成
+
+ )}
+
+
+ {tutorial.title}
+
+
+
+ {isCompleted ? : }
+
+
-
-
{skill.time}
-
-
{skill.platforms.join(" / ")}
+
+ {tutorial.description}
+
+
+
+
+
+ {tutorial.duration} 分钟
+
+
+
- ))}
+ );
+ })}
+
+
+
没有找到匹配的教程
+
+
+
- ))}
-
- 共 {totalSkills} 个教程 | 从入门到高级逐步解锁
+
+
+
+
+
-
);
diff --git a/playground/apps/desktop/src/app/series/[id]/client.tsx b/playground/apps/desktop/src/app/series/[id]/client.tsx
new file mode 100644
index 0000000..84f74e5
--- /dev/null
+++ b/playground/apps/desktop/src/app/series/[id]/client.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useAppStore } from "@/store/useAppStore";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+ Button,
+ Badge,
+} from "@innate/ui";
+import {
+ ArrowLeft,
+ BookOpen,
+ Clock,
+ BarChart3,
+ Trophy,
+ Play,
+ Sparkles,
+ CheckCircle,
+ Circle,
+} from "lucide-react";
+
+interface SeriesDetailClientProps {
+ id: string;
+}
+
+export default function SeriesDetailClient({ id }: SeriesDetailClientProps) {
+ const router = useRouter();
+ const seriesId = id;
+
+ const { series, getTutorialsBySeries, progress } = useAppStore();
+
+ const currentSeries = series.find((s) => s.id === seriesId);
+ const tutorials = getTutorialsBySeries(seriesId);
+
+ if (!currentSeries) {
+ return (
+
+ );
+ }
+
+ const completedCount = tutorials.filter((t) => progress[t.id]?.completed).length;
+ const progressPercent = tutorials.length > 0 ? (completedCount / tutorials.length) * 100 : 0;
+ const totalDuration = tutorials.reduce((sum, t) => sum + t.duration, 0);
+ const nextTutorial = tutorials.find((t) => !progress[t.id]?.completed);
+
+ const getDifficultyColor = (difficulty: string) => {
+ switch (difficulty) {
+ case "beginner":
+ return "from-emerald-500 to-teal-500";
+ case "intermediate":
+ return "from-amber-500 to-orange-500";
+ case "advanced":
+ return "from-rose-500 to-pink-500";
+ default:
+ return "from-primary to-secondary";
+ }
+ };
+
+ const getDifficultyText = (difficulty: string) => {
+ switch (difficulty) {
+ case "beginner":
+ return "入门";
+ case "intermediate":
+ return "进阶";
+ case "advanced":
+ return "高级";
+ default:
+ return "入门";
+ }
+ };
+
+ return (
+
+ {/* Hero Header */}
+
+
+
+
+
+
+
+
+
+ {currentSeries.icon || "📚"}
+
+
+
+
+
+ {getDifficultyText(currentSeries.difficulty)}
+
+
+
+ {tutorials.length} 个教程
+
+
+
+ {totalDuration} 分钟
+
+
+
+
{currentSeries.title}
+
+ {currentSeries.description}
+
+
+ {/* Progress Section */}
+
+
+
+
+ 学习进度
+
+
+ {Math.round(progressPercent)}%
+
+ ({completedCount}/{tutorials.length})
+
+
+
+
+
+ {nextTutorial && progressPercent < 100 && (
+
+ )}
+
+ {progressPercent === 100 && (
+
+
+ 恭喜！你已完成本系列所有教程
+
+ )}
+
+
+
+
+
+
+ {/* Tutorials List */}
+
+
+
+ {tutorials.length > 0 ? (
+
+ {tutorials.map((tutorial) => {
+ const isCompleted = progress[tutorial.id]?.completed;
+ return (
+
router.push(`/tutorial/${tutorial.id}`)}
+ >
+
+
+
+
+
+ {getDifficultyText(tutorial.difficulty)}
+
+ {isCompleted && (
+
+
+ 已完成
+
+ )}
+
+
+ {tutorial.title}
+
+
+
+ {isCompleted ? : }
+
+
+ {tutorial.description}
+
+
+
+
+
+ {tutorial.duration} 分钟
+
+
+
+
+ );
+ })}
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/playground/apps/desktop/src/app/series/[id]/page.tsx b/playground/apps/desktop/src/app/series/[id]/page.tsx
new file mode 100644
index 0000000..4cdd915
--- /dev/null
+++ b/playground/apps/desktop/src/app/series/[id]/page.tsx
@@ -0,0 +1,11 @@
+import { series } from "@/data/series";
+import SeriesDetailClient from "./client";
+
+export function generateStaticParams() {
+ return series.map((s) => ({ id: s.id }));
+}
+
+export default async function SeriesDetailPage({ params }: { params: Promise<{ id: string }> }) {
+ const { id } = await params;
+ return
;
+}
diff --git a/playground/apps/desktop/src/app/tutorial/[id]/client.tsx b/playground/apps/desktop/src/app/tutorial/[id]/client.tsx
new file mode 100644
index 0000000..9cdf57b
--- /dev/null
+++ b/playground/apps/desktop/src/app/tutorial/[id]/client.tsx
@@ -0,0 +1,285 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAppStore } from "@/store/useAppStore";
+import {
+ Card,
+ CardContent,
+ Button,
+ Badge,
+ Separator,
+ ScrollArea,
+} from "@innate/ui";
+import {
+ ArrowLeft,
+ Play,
+ CheckCircle,
+ Clock,
+ Terminal,
+ Copy,
+ Check,
+ Sparkles,
+ RotateCcw,
+} from "lucide-react";
+
+interface TutorialDetailClientProps {
+ id: string;
+}
+
+export default function TutorialDetailClient({ id }: TutorialDetailClientProps) {
+ const router = useRouter();
+ const tutorialId = id;
+ const [copiedId, setCopiedId] = useState
(null);
+
+ const {
+ tutorials,
+ showTerminal,
+ addTerminalOutput,
+ setIsExecuting,
+ updateProgress,
+ progress,
+ } = useAppStore();
+
+ const tutorial = tutorials.find((t) => t.id === tutorialId);
+ const tutorialProgress = progress[tutorialId];
+
+ if (!tutorial) {
+ return (
+
+ );
+ }
+
+ const handleRun = (code: string, id: string) => {
+ showTerminal();
+ setIsExecuting(true);
+
+ addTerminalOutput(`$ ${code}`);
+
+ setTimeout(() => {
+ addTerminalOutput("");
+ addTerminalOutput("\x1b[36mℹ\x1b[0m 正在执行命令...");
+ addTerminalOutput("");
+
+ setTimeout(() => {
+ addTerminalOutput("\x1b[32m✓\x1b[0m 命令执行成功！");
+ addTerminalOutput("");
+ setIsExecuting(false);
+ }, 800);
+ }, 300);
+ };
+
+ const handleCopy = (code: string, id: string) => {
+ navigator.clipboard.writeText(code);
+ setCopiedId(id);
+ setTimeout(() => setCopiedId(null), 2000);
+ };
+
+ const handleMarkComplete = () => {
+ updateProgress({
+ tutorialId,
+ completed: true,
+ completedSections: [],
+ completedAt: new Date().toISOString(),
+ });
+ };
+
+ const handleReset = () => {
+ updateProgress({
+ tutorialId,
+ completed: false,
+ completedSections: [],
+ });
+ };
+
+ const getDifficultyConfig = (difficulty: string) => {
+ switch (difficulty) {
+ case "beginner":
+ return { text: "入门", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20" };
+ case "intermediate":
+ return { text: "进阶", color: "text-amber-500", bg: "bg-amber-500/10", border: "border-amber-500/20" };
+ case "advanced":
+ return { text: "高级", color: "text-rose-500", bg: "bg-rose-500/10", border: "border-rose-500/20" };
+ default:
+ return { text: "入门", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20" };
+ }
+ };
+
+ const difficulty = getDifficultyConfig(tutorial.difficulty);
+
+ const sections = [
+ {
+ type: "text" as const,
+ content: `## 什么是 ${tutorial.title}？\n\n这是一个关于 ${tutorial.title} 的教程。在这里，你将学习如何使用相关工具，并通过实际操作来掌握核心概念。本教程适合${difficulty.text}水平的用户。`,
+ },
+ {
+ type: "text" as const,
+ content: "## 前置条件\n\n在开始之前，请确保你已经：\n- 安装了终端工具\n- 具备基本的命令行知识\n- 有稳定的网络连接",
+ },
+ {
+ type: "executable" as const,
+ id: "step-1",
+ title: "安装",
+ description: "执行以下命令进行安装：",
+ code: "brew install node",
+ language: "bash",
+ },
+ {
+ type: "text" as const,
+ content: "安装完成后，你可以通过运行 `node -v` 来验证安装是否成功。如果看到版本号输出，说明安装成功。",
+ },
+ {
+ type: "executable" as const,
+ id: "step-2",
+ title: "验证安装",
+ description: "验证 Node.js 和 npm 是否正确安装：",
+ code: "node -v && npm -v",
+ language: "bash",
+ },
+ {
+ type: "text" as const,
+ content: "## 总结\n\n恭喜！你已经完成了本教程的学习。现在你可以开始使用这个工具了。建议继续学习系列中的其他教程，以获得更全面的知识。",
+ },
+ ];
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
+ {difficulty.text}
+
+
+
+ {tutorial.duration} 分钟
+
+ {tutorialProgress?.completed && (
+
+
+ 已完成
+
+ )}
+
+
+
{tutorial.title}
+
{tutorial.description}
+
+
+
+ {tutorialProgress?.completed ? (
+ <>
+
+
+
+ 已完成
+
+
+ ) : (
+
+ )}
+
+
+
+
+ {/* Content */}
+
+
+ {sections.map((section, index) => (
+
+ {section.type === "text" ? (
+
+
$1')
+ .replace(/- (.*)/g, '
$1')
+ .replace(/`([^`]+)`/g, '$1'),
+ }}
+ />
+
+ ) : section.type === "executable" ? (
+
+
+
+
+
+
+
+
{(section as any).title}
+
{(section as any).description}
+
+
+
+
+
+
+
+
+ {(section as any).code}
+
+
+ ) : null}
+
+ ))}
+
+
+ {/* Footer CTA */}
+
+
+
+
+
+
+
+ {tutorialProgress?.completed ? "想要学习更多？" : "完成本教程！"}
+
+
+ {tutorialProgress?.completed
+ ? "继续探索系列中的其他教程，提升你的技能。"
+ : "完成上面的步骤，然后点击\"标记完成\"按钮。"}
+
+
+
+
+
+
+ );
+}
diff --git a/playground/apps/desktop/src/app/tutorial/[id]/page.tsx b/playground/apps/desktop/src/app/tutorial/[id]/page.tsx
new file mode 100644
index 0000000..564f2cd
--- /dev/null
+++ b/playground/apps/desktop/src/app/tutorial/[id]/page.tsx
@@ -0,0 +1,11 @@
+import { tutorials } from "@/data/tutorials";
+import TutorialDetailClient from "./client";
+
+export function generateStaticParams() {
+ return tutorials.map((t) => ({ id: t.id }));
+}
+
+export default async function TutorialDetailPage({ params }: { params: Promise<{ id: string }> }) {
+ const { id } = await params;
+ return
;
+}
diff --git a/playground/apps/desktop/src/app/tutorial/[slug]/page.tsx b/playground/apps/desktop/src/app/tutorial/[slug]/page.tsx
deleted file mode 100644
index 7cbe9f3..0000000
--- a/playground/apps/desktop/src/app/tutorial/[slug]/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { notFound } from "next/navigation";
-import { TutorialPageClient } from "./tutorial-client";
-
-const tutorialMeta: Record
= {
- "terminal-setup": {
- title: "终端环境配置",
- files: ["/tutorials/terminal-setup-mac.md"],
- tag: "入门",
- },
- "cmd-basics": {
- title: "命令行 5 分钟入门",
- files: ["/tutorials/cmd-basics.md"],
- tag: "入门",
- },
-};
-
-export function generateStaticParams() {
- return Object.keys(tutorialMeta).map((slug) => ({ slug }));
-}
-
-export default function TutorialPage({ params }: { params: Promise<{ slug: string }> }) {
- return ;
-}
-
-async function TutorialPageClientWrapper({ params }: { params: Promise<{ slug: string }> }) {
- const { slug } = await params;
- const meta = tutorialMeta[slug];
- if (!meta) notFound();
- return ;
-}
diff --git a/playground/apps/desktop/src/app/tutorial/[slug]/tutorial-client.tsx b/playground/apps/desktop/src/app/tutorial/[slug]/tutorial-client.tsx
deleted file mode 100644
index 0aa9ee5..0000000
--- a/playground/apps/desktop/src/app/tutorial/[slug]/tutorial-client.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import {
- Button,
- Separator,
- SidebarTrigger,
- Badge,
-} from "@innate/ui";
-import {
- ResizablePanelGroup,
- ResizablePanel,
- ResizableHandle,
-} from "@innate/ui";
-import { ArrowLeft, BookOpen } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { TutorialMarkdown } from "@/components/tutorial/tutorial-markdown";
-import { TerminalPanel } from "@/components/tutorial/terminal-panel";
-import { TerminalProvider, useTerminal } from "@/components/tutorial/terminal-context";
-
-interface TutorialMeta {
- title: string;
- files: string[];
- tag: string;
-}
-
-export function TutorialPageClient({ meta }: { meta: TutorialMeta }) {
- return (
-
-
-
- );
-}
-
-function TutorialPageInner({ meta }: { meta: TutorialMeta }) {
- const router = useRouter();
- const [content, setContent] = useState(null);
- const [loading, setLoading] = useState(true);
- const { pendingCommand, sendCommand } = useTerminal();
-
- useEffect(() => {
- async function load() {
- try {
- const parts = await Promise.all(
- meta.files.map(async (file) => {
- const res = await fetch(file);
- if (!res.ok) throw new Error(`Failed to load ${file}`);
- return res.text();
- })
- );
- setContent(parts.join("\n\n---\n\n"));
- } catch {
- setContent("# 加载失败\n\n教程内容加载出错，请确认 `/public/tutorials/` 目录中有对应的 Markdown 文件。");
- } finally {
- setLoading(false);
- }
- }
- load();
- }, [meta]);
-
- const commandForTerminal = pendingCommand ? pendingCommand.split("__")[0] : null;
-
- return (
-
-
-
-
-
-
- {meta.title}
- {meta.tag}
-
-
-
-
-
-
- {loading ? (
-
加载中...
- ) : content ? (
-
- ) : null}
-
-
-
{children}
+
+
+
+ {children}
+
+
+ {/* Terminal - Right Side */}
+ {terminalVisible && terminalPosition === "right" && (
+
+ )}
+
+
+ {/* Terminal - Bottom */}
+ {terminalVisible && terminalPosition === "bottom" && (
+
+ )}
+
-
+
- Loading...
+function AppShellContent({ children }: { children: ReactNode }) {
+ const { terminalVisible, terminalPosition } = useAppStore();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ // Prevent hydration mismatch by not rendering until mounted
+ if (!mounted) {
+ return (
+
- ),
+ );
}
-);
+
+ return (
+
+
+
+
+
+ {children}
+
+
+ {/* Terminal - Right Side */}
+ {terminalVisible && terminalPosition === "right" && (
+
+ )}
+
+
+ {/* Terminal - Bottom */}
+ {terminalVisible && terminalPosition === "bottom" && (
+
+ )}
+
+
+
+ );
+}
export function AppShell({ children }: { children: ReactNode }) {
- return
{children};
+ return
{children};
}
diff --git a/playground/apps/desktop/src/components/terminal-panel.tsx b/playground/apps/desktop/src/components/terminal-panel.tsx
new file mode 100644
index 0000000..3406b08
--- /dev/null
+++ b/playground/apps/desktop/src/components/terminal-panel.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAppStore } from "@/store/useAppStore";
+import { Card, Button, ScrollArea } from "@innate/ui";
+import { X, Minimize2, PanelRight, PanelBottom, Trash2, Terminal } from "lucide-react";
+
+export function TerminalPanel() {
+ const scrollRef = useRef
(null);
+ const {
+ terminalPosition,
+ terminalVisible,
+ terminalOutput,
+ isExecuting,
+ hideTerminal,
+ toggleTerminalPosition,
+ clearTerminal,
+ } = useAppStore();
+
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+ }
+ }, [terminalOutput]);
+
+ if (!terminalVisible) return null;
+
+ const renderOutput = (line: string, index: number) => {
+ if (line.startsWith("$")) {
+ return (
+
+ ➜
+ ~
+ {line.slice(2)}
+
+ );
+ }
+
+ const parts = line.split(/(\x1b\[\d+m)/g);
+ const elements: React.ReactNode[] = [];
+ let currentColor = "";
+
+ parts.forEach((part, i) => {
+ if (part.startsWith("\x1b[")) {
+ const code = part.slice(2, -1);
+ switch (code) {
+ case "32m":
+ currentColor = "text-emerald-400";
+ break;
+ case "31m":
+ currentColor = "text-rose-400";
+ break;
+ case "33m":
+ currentColor = "text-amber-400";
+ break;
+ case "36m":
+ currentColor = "text-cyan-400";
+ break;
+ case "35m":
+ currentColor = "text-fuchsia-400";
+ break;
+ case "0m":
+ currentColor = "";
+ break;
+ }
+ } else if (part) {
+ elements.push(
+
+ {part}
+
+ );
+ }
+ });
+
+ return {elements.length > 0 ? elements : line}
;
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+ 终端
+ {isExecuting && (
+
+
+ 执行中
+
+ )}
+
+
+
+
+
+
+
+
+
+ {terminalOutput.length === 0 ? (
+
+ ) : (
+ terminalOutput.map((line, index) => renderOutput(line, index))
+ )}
+