diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9bf62c8..84bd6f1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,14 +1,23 @@
 import React, { useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { Home, Video, Settings, FolderOpen, Music, Image, Sparkles, List, Play, Clock, CheckCircle, XCircle, Layout } from 'lucide-react'
+import { Home, Video, Settings, FolderOpen, Music, Image, Sparkles, Layout, Clock, CheckCircle, XCircle, List } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useAIVideoJobs } from '../stores/useAIVideoStore'
 
 const Sidebar: React.FC = () => {
   const location = useLocation()
-  const jobs = useAIVideoJobs()
   const [activeTab, setActiveTab] = useState<'nav' | 'tasks'>('nav')
 
+  // Mock jobs data - this should be replaced with actual state management
+  const jobs: Array<{
+    id: string
+    type: 'single' | 'batch'
+    status: 'processing' | 'completed' | 'failed'
+    progress: number
+    startTime: number
+    result?: { success_count?: number }
+    error?: string
+  }> = []
+
   const navItems = [
     { path: '/', icon: Home, label: '首页' },
     { path: '/editor', icon: Video, label: '编辑器' },
diff --git a/src/pages/AIVideoPage.tsx b/src/pages/AIVideoPage.tsx
index 33dc683..cee8717 100644
--- a/src/pages/AIVideoPage.tsx
+++ b/src/pages/AIVideoPage.tsx
@@ -1,28 +1,38 @@
 import React, { useState } from 'react'
-import { Sparkles, Info, Settings, HelpCircle, TestTube } from 'lucide-react'
+import { Sparkles, Info, Settings, HelpCircle, List, BookOpen } from 'lucide-react'
 import AIVideoGenerator from '../components/AIVideoGenerator'
-import { AIVideoService } from '../services/tauri'
+import VideoJobList from '../components/ai-video/VideoJobList'
+import { useAIVideoStore } from '../stores/useAIVideoStore'
 
 const AIVideoPage: React.FC = () => {
-  const [testResult, setTestResult] = useState<any>(null)
-  const [isTesting, setIsTesting] = useState(false)
+  const [activeTab, setActiveTab] = useState<'tasks' | 'guide'>('tasks')
 
-  const handleTestEnvironment = async () => {
-    setIsTesting(true)
-    setTestResult(null)
+  // Get jobs from store
+  const jobs = useAIVideoStore(state => state.jobs)
+  const removeJob = useAIVideoStore(state => state.removeJob)
+  const generateSingleVideo = useAIVideoStore(state => state.generateSingleVideo)
+  const batchGenerateVideos = useAIVideoStore(state => state.batchGenerateVideos)
 
+  // Job handlers
+  const handlePreviewJob = (job: any) => {
+    // TODO: Implement job preview
+    console.log('Preview job:', job)
+  }
+
+  const handleDeleteJob = (jobId: string) => {
+    removeJob(jobId)
+  }
+
+  const handleRetryJob = async (job: any) => {
     try {
-      const result = await AIVideoService.testEnvironment()
-      setTestResult(result)
-      console.log('Environment test result:', result)
+      if (job.type === 'single') {
+        await generateSingleVideo(job.request)
+      } else if (job.type === 'batch') {
+        await batchGenerateVideos(job.request)
+      }
     } catch (error) {
-      setTestResult({
-        status: 'error',
-        error: error instanceof Error ? error.message : String(error)
-      })
-      console.error('Environment test failed:', error)
-    } finally {
-      setIsTesting(false)
+      console.error('Retry failed:', error)
+      alert(`重试失败: ${error instanceof Error ? error.message : '未知错误'}`)
     }
   }
 
@@ -62,8 +72,54 @@ const AIVideoPage: React.FC = () => {
           </div>
 
           {/* Sidebar */}
-          <div className="w-64 bg-white border-l border-secondary-200 p-6 overflow-y-auto">
-            <h3 className="text-lg font-semibold text-secondary-900 mb-4">使用说明</h3>
+          <div className="w-80 bg-white border-l border-secondary-200 flex flex-col">
+            {/* Tab Headers */}
+            <div className="border-b border-secondary-200">
+              <div className="flex">
+                <button
+                  onClick={() => setActiveTab('tasks')}
+                  className={`flex-1 px-4 py-3 text-sm font-medium border-b-2 transition-colors flex items-center justify-center gap-2 ${
+                    activeTab === 'tasks'
+                      ? 'border-primary-500 text-primary-600 bg-primary-50'
+                      : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:bg-secondary-50'
+                  }`}
+                >
+                  <List size={16} />
+                  任务列表
+                  {jobs.length > 0 && (
+                    <span className="bg-primary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                      {jobs.length}
+                    </span>
+                  )}
+                </button>
+                <button
+                  onClick={() => setActiveTab('guide')}
+                  className={`flex-1 px-4 py-3 text-sm font-medium border-b-2 transition-colors flex items-center justify-center gap-2 ${
+                    activeTab === 'guide'
+                      ? 'border-primary-500 text-primary-600 bg-primary-50'
+                      : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:bg-secondary-50'
+                  }`}
+                >
+                  <BookOpen size={16} />
+                  使用说明
+                </button>
+              </div>
+            </div>
+
+            {/* Tab Content */}
+            <div className="flex-1 overflow-hidden">
+              {activeTab === 'tasks' ? (
+                <div className="h-full p-4">
+                  <VideoJobList
+                    jobs={jobs}
+                    onPreview={handlePreviewJob}
+                    onDelete={handleDeleteJob}
+                    onRetry={handleRetryJob}
+                  />
+                </div>
+              ) : (
+                <div className="h-full p-6 overflow-y-auto">
+                  <h3 className="text-lg font-semibold text-secondary-900 mb-4">使用说明</h3>
             
             <div className="space-y-4">
               {/* Info Card */}
@@ -201,6 +257,9 @@ const AIVideoPage: React.FC = () => {
                   联系支持
                 </button>
               </div>
+            </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/TemplateManagePage.tsx b/src/pages/TemplateManagePage.tsx
index 5ffebba..148aec5 100644
--- a/src/pages/TemplateManagePage.tsx
+++ b/src/pages/TemplateManagePage.tsx
@@ -64,7 +64,7 @@ const TemplateManagePage: React.FC = () => {
   const handleBatchImport = async () => {
     try {
       // Select folder using Tauri dialog
-      const folderResult = await invoke('select_folder')
+      const folderResult = await invoke<string>('select_folder')
       if (!folderResult) return
 
       setImporting(true)