feat: implement UC1 - upload markdown/mdx files for executable tutorials

- Add SeriesLesson and LessonSection types for file-based tutorial management
- Create CreateLessonPage with two-step flow: create lesson metadata then upload files
- Create LessonPreviewPage with sequential section navigation and markdown rendering
- Create LessonListPage for managing created lessons
- Add markdown utility for file parsing and code block extraction
- Update Zustand store with full CRUD actions for lessons and sections
- Support section reordering with up/down buttons
- Fix pre-existing TS errors in Terminal, TutorialCard, and TutorialDetail

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: qdriven

apps/desktop/package.json

@@ -11,10 +11,14 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^2.10.1",
+    "@tauri-apps/plugin-dialog": "^2.7.0",
+    "@tauri-apps/plugin-fs": "^2.5.0",
     "@tauri-apps/plugin-opener": "^2",
     "lucide-react": "^1.7.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "zustand": "^5.0.12"
   },
   "devDependencies": {

apps/desktop/src/App.tsx

@@ -4,41 +4,59 @@ import { Terminal } from './components/terminal/Terminal';
 import { Home } from './components/Home';
 import { SeriesDetail } from './components/SeriesDetail';
 import { TutorialDetail } from './components/TutorialDetail';
+import { CreateLessonPage } from './components/lesson/CreateLessonPage';
+import { LessonPreviewPage } from './components/lesson/LessonPreviewPage';
+import { LessonListPage } from './components/lesson/LessonListPage';
 import { useAppStore } from './store/useAppStore';
 
 type Tab = 'home' | 'tutorials' | 'series' | 'settings';
-type View = 
+type View =
   | { type: 'home' }
   | { type: 'series'; seriesId: string }
-  | { type: 'tutorial'; tutorialId: string };
+  | { type: 'tutorial'; tutorialId: string }
+  | { type: 'create-lesson' }
+  | { type: 'lesson-list' }
+  | { type: 'lesson-preview'; lessonId: string };
 
 function App() {
   const [activeTab, setActiveTab] = useState<Tab>('home');
   const [currentView, setCurrentView] = useState<View>({ type: 'home' });
-  const { terminalPosition, terminalVisible } = useAppStore();
-  
+  const { terminalPosition, terminalVisible, setPreviewSectionIndex } = useAppStore();
+
   const handleSeriesClick = (seriesId: string) => {
     setCurrentView({ type: 'series', seriesId });
   };
-  
+
   const handleTutorialClick = (tutorialId: string) => {
     setCurrentView({ type: 'tutorial', tutorialId });
   };
-  
+
   const handleBack = () => {
     setCurrentView({ type: 'home' });
   };
-  
+
   const handleImportClick = () => {
-    // TODO: Implement import functionality
-    alert('导入功能开发中...');
+    setCurrentView({ type: 'create-lesson' });
   };
-  
+
   const handleAddDirectoryClick = () => {
-    // TODO: Implement add directory functionality
-    alert('添加目录功能开发中...');
+    setCurrentView({ type: 'create-lesson' });
+  };
+
+  const handleLessonCreated = (lessonId: string) => {
+    setPreviewSectionIndex(0);
+    setCurrentView({ type: 'lesson-preview', lessonId });
   };
-  
+
+  const handleTabChange = (tab: Tab) => {
+    setActiveTab(tab);
+    if (tab === 'series') {
+      setCurrentView({ type: 'lesson-list' });
+    } else if (tab === 'home') {
+      setCurrentView({ type: 'home' });
+    }
+  };
+
   const renderContent = () => {
     switch (currentView.type) {
       case 'home':
@@ -65,29 +83,54 @@ function App() {
             onBack={handleBack}
           />
         );
+      case 'create-lesson':
+        return (
+          <CreateLessonPage
+            onBack={handleBack}
+            onLessonCreated={handleLessonCreated}
+          />
+        );
+      case 'lesson-list':
+        return (
+          <LessonListPage
+            onBack={handleBack}
+            onCreateNew={() => setCurrentView({ type: 'create-lesson' })}
+            onLessonClick={(id) => {
+              setPreviewSectionIndex(0);
+              setCurrentView({ type: 'lesson-preview', lessonId: id });
+            }}
+          />
+        );
+      case 'lesson-preview':
+        return (
+          <LessonPreviewPage
+            lessonId={currentView.lessonId}
+            onBack={() => setCurrentView({ type: 'lesson-list' })}
+          />
+        );
       default:
         return <div className="p-8 text-text-muted">页面开发中...</div>;
     }
   };
-  
+
   return (
     <div className="h-screen w-screen flex flex-col bg-bg-primary text-text-primary overflow-hidden">
       {/* Header */}
-      <Header activeTab={activeTab} onTabChange={setActiveTab} />
-      
+      <Header activeTab={activeTab} onTabChange={handleTabChange} />
+
       {/* Main Content Area */}
       <div className="flex-1 flex overflow-hidden">
         {/* Content */}
         <main className="flex-1 overflow-hidden">
           {renderContent()}
         </main>
-        
+
         {/* Terminal - Right Side */}
         {terminalVisible && terminalPosition === 'right' && (
           <Terminal />
         )}
       </div>
-      
+
       {/* Terminal - Bottom */}
       {terminalVisible && terminalPosition === 'bottom' && (
         <Terminal />

apps/desktop/src/components/TutorialDetail.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ArrowLeft, Play, CheckCircle, Clock, BookOpen, Terminal, Copy, Check, Sparkles, RotateCcw } from 'lucide-react';
+import { ArrowLeft, Play, CheckCircle, Clock, Terminal, Copy, Check, Sparkles, RotateCcw } from 'lucide-react';
 import { useAppStore } from '../store/useAppStore';
 
 interface TutorialDetailProps {
@@ -30,7 +30,7 @@ export function TutorialDetail({ tutorialId, onBack }: TutorialDetailProps) {
     );
   }
 
-  const handleRun = (code: string, id: string) => {
+  const handleRun = (code: string, _id: string) => {
     showTerminal();
     setIsExecuting(true);
 
@@ -196,7 +196,7 @@ export function TutorialDetail({ tutorialId, onBack }: TutorialDetailProps) {
                   <div 
                     className="text-text-secondary leading-relaxed"
                     dangerouslySetInnerHTML={{
-                      __html: section.content
+                      __html: (section.content || "")
                         .replace(/## (.*)/, '<h2 class="text-2xl font-bold text-text-primary mb-4 mt-8">$1</h2>')
                         .replace(/- (.*)/g, '<li class="ml-4 mb-2">$1</li>')
                         .replace(/`([^`]+)`/g, '<code class="px-1.5 py-0.5 bg-bg-card rounded text-accent text-sm">$1</code>')
@@ -218,14 +218,14 @@ export function TutorialDetail({ tutorialId, onBack }: TutorialDetailProps) {
                     </div>
                     <div className="flex items-center gap-2">
                       <button
-                        onClick={() => handleCopy(section.code, section.id)}
+                        onClick={() => handleCopy(section.code!, section.id!)}
                         className="p-2 text-text-muted hover:text-text-primary hover:bg-bg-tertiary rounded-lg transition-all"
                         title="复制"
                       >
                         {copiedId === section.id ? <Check size={18} className="text-success" /> : <Copy size={18} />}
                       </button>
                       <button
-                        onClick={() => handleRun(section.code, section.id)}
+                        onClick={() => handleRun(section.code!, section.id!)}
                         className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-accent to-secondary text-white font-medium rounded-xl hover:shadow-glow transition-all"
                       >
                         <Play size={16} className="fill-current" />