@@ -1,48 +1,45 @@
 import { LanguageProvider } from './LanguageProvider'
-import ReactMarkdown from 'react-markdown'
+import Link from 'next/link'
 
-function findFirstTutorial(tutorials: any[]): any {
-  for (const item of tutorials) {
-    if (item.items) {
-      const found = findFirstTutorial(item.items)
-      if (found) return found
-    } else {
-      return item
-    }
-  }
-  return null
+interface TutorialItem {
+  title: string;
+  path: string;
+  items?: TutorialItem[];
+}
+
+function renderTutorialTree(items: TutorialItem[], language: string, depth = 0) {
+  return (
+    <ul className={`pl-${depth * 4}`}>
+      {items.map((item) => (
+        <li key={item.path} className="my-2">
+          {item.items ? (
+            <>
+              <span className="font-semibold">{item.title}</span>
+              {renderTutorialTree(item.items, language, depth + 1)}
+            </>
+          ) : (
+            <Link 
+              href={`/${encodeURIComponent(language)}/${encodeURIComponent(item.path)}`} 
+              className="text-blue-600 hover:underline"
+            >
+              {item.title}
+            </Link>
+          )}
+        </li>
+      ))}
+    </ul>
+  )
 }
 
 export default async function Page({ params }: { params: { language: string } }) {
-  const { tutorials } = await LanguageProvider({ language: params.language })
-  const firstTutorial = findFirstTutorial(tutorials)
-  
-  let content = 'No tutorial content available.'
-  if (firstTutorial) {
-    const encodedLanguage = encodeURIComponent(params.language)
-    const encodedPath = encodeURIComponent(firstTutorial.path)
-    const url = new URL('/api/tutorial-content', 'http://localhost:3000')
-    url.searchParams.set('language', encodedLanguage)
-    url.searchParams.set('path', encodedPath)
-    
-    try {
-      const res = await fetch(url.toString(), { cache: 'no-store' })
-      if (res.ok) {
-        content = await res.text()
-      } else {
-        console.error('Failed to fetch tutorial content:', await res.text())
-        content = 'Failed to load tutorial content.'
-      }
-    } catch (error) {
-      console.error('Error fetching tutorial content:', error)
-      content = 'Error loading tutorial content.'
-    }
-  }
+  const { tutorials, language } = await LanguageProvider({ language: params.language })
 
   return (
-    <div className="prose max-w-none">
-      <h1 className="text-3xl font-bold mb-4">{decodeURIComponent(params.language)} Tutorials</h1>
-      <ReactMarkdown>{content}</ReactMarkdown>
+    <div className="p-4">
+      <h1 className="text-3xl font-bold mb-4">{decodeURIComponent(language)} Tutorials</h1>
+      <div className="bg-white shadow-md rounded p-6">
+        {renderTutorialTree(tutorials, language)}
+      </div>
     </div>
   )
 }
@@ -36,14 +36,14 @@ function TutorialItem({ item, language, depth = 0 }: { item: Tutorial, language:
         <Link 
           href={`/${encodeURIComponent(language)}/${encodeURIComponent(item.path)}`}
           onClick={toggleOpen}
-          className={`hover:text-blue-600 transition-colors duration-200 ${depth === 0 ? 'font-semibold' : ''} ${isActive ? 'text-blue-600' : ''}`}
+          className={`hover:text-blue-600 transition-colors duration-200 ${depth === 0 ? 'font-semibold' : ''} ${isActive ? 'text-blue-600' : ''} ${item.isOutline ? 'font-bold' : ''}`}
         >
           {item.title}
         </Link>
       </div>
       {hasItems && isOpen && (
         <ul>
-          {item.items.map((subItem: any) => (
+          {item.items.map((subItem: Tutorial) => (
             <TutorialItem key={subItem.path} item={subItem} language={language} depth={depth + 1} />
           ))}
         </ul>
 
@@ -7,6 +7,8 @@ export interface Tutorial {
   title: string;
   path: string;
   items?: Tutorial[];
+  isOutline?: boolean;
+  sortOrder: number;
 }
 
 export function sortLanguages(languages: string[]): string[] {
@@ -56,31 +58,50 @@ function getDirectoryStructure(dirPath: string, basePath: string): Tutorial[] {
   const items = fs.readdirSync(dirPath, { withFileTypes: true })
   const structure = items.map(item => {
     const itemPath = path.join(dirPath, item.name)
+    const relativePath = path.relative(path.join(tutorialsDirectory, basePath), itemPath)
+    const sortOrderMatch = item.name.match(/^(\d+)/)
+    const sortOrder = sortOrderMatch ? parseInt(sortOrderMatch[1], 10) : Infinity
+
     if (item.isDirectory()) {
+      const children = getDirectoryStructure(itemPath, basePath)
       return {
         title: item.name,
-        path: path.relative(path.join(tutorialsDirectory, basePath), itemPath),
-        items: getDirectoryStructure(itemPath, basePath)
+        path: relativePath,
+        items: children,
+        sortOrder: sortOrder,
+        isOutline: false
       }
     } else if (item.isFile() && item.name.endsWith('.md')) {
       try {
         const fileContents = fs.readFileSync(itemPath, 'utf8')
         const { data } = matter(fileContents)
+        const isOutline = !relativePath.includes(path.sep) || item.name.toLowerCase().includes('大纲')
         return {
           title: data.title || item.name.replace('.md', ''),
-          path: path.relative(path.join(tutorialsDirectory, basePath), itemPath).replace('.md', '')
+          path: relativePath.replace('.md', ''),
+          isOutline: isOutline,
+          sortOrder: isOutline ? -1 : sortOrder
         }
       } catch (error) {
         console.error(`Error parsing file ${itemPath}:`, error)
         return {
           title: item.name.replace('.md', ''),
-          path: path.relative(path.join(tutorialsDirectory, basePath), itemPath).replace('.md', '')
+          path: relativePath.replace('.md', ''),
+          isOutline: false,
+          sortOrder: sortOrder
         }
       }
     }
     return null
   }).filter((item): item is Tutorial => item !== null)
 
+  // 修改排序逻辑
+  structure.sort((a, b) => {
+    if (a.isOutline && !b.isOutline) return -1
+    if (!a.isOutline && b.isOutline) return 1
+    return a.sortOrder - b.sortOrder
+  })
+
   return structure
 }
 
 
@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+const tutorialsDir = path.join(process.cwd(), 'tutorials');
+
+function padFolderNames(dir) {
+  const items = fs.readdirSync(dir, { withFileTypes: true });
+  const renamedItems = [];
+
+  items.forEach(item => {
+    if (item.isDirectory()) {
+      const match = item.name.match(/^(\d+)\./);
+      if (match && parseInt(match[1]) < 10) {
+        const newName = `0${item.name}`;
+        const oldPath = path.join(dir, item.name);
+        const newPath = path.join(dir, newName);
+        fs.renameSync(oldPath, newPath);
+        console.log(`Renamed: ${item.name} -> ${newName}`);
+        renamedItems.push({ oldName: item.name, newName: newName });
+      }
+    }
+  });
+
+  // 处理重命名后的文件夹
+  renamedItems.forEach(({ newName }) => {
+    const newPath = path.join(dir, newName);
+    padFolderNames(newPath);
+  });
+
+  // 处理未重命名的文件夹
+  items.forEach(item => {
+    if (item.isDirectory() && !renamedItems.some(ri => ri.oldName === item.name)) {
+      padFolderNames(path.join(dir, item.name));
+    }
+  });
+}
+
+// 处理所有语言目录
+fs.readdirSync(tutorialsDir, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .forEach(dirent => {
+    console.log(`Processing ${dirent.name} tutorials...`);
+    padFolderNames(path.join(tutorialsDir, dirent.name));
+  });
+
+console.log('Folder renaming completed for all languages.');