From a356c481ca4200a781dba4a8552c4fbb2edc2cf2 Mon Sep 17 00:00:00 2001
From: "let5sne.win10" <let5sne.win10.pc@gmail.com>
Date: Sat, 10 Jan 2026 02:22:42 +0800
Subject: [PATCH] Add task list page for Video Learning sessions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds a dedicated task list page to view and manage all video
learning sessions, solving the issue where users couldn't find their
background tasks after navigating away.

Features:
- New sessions.html page with card-based layout for all sessions
- Real-time polling for session status updates (every 3 seconds)
- Session control buttons (pause/resume/stop/delete)
- localStorage integration for session persistence across page refreshes
- Navigation links added to main page and video learning page
- Empty state UI when no sessions exist

New files:
- dashboard/static/sessions.html - Task list page
- dashboard/static/js/sessions.js - Sessions module with API calls
- dashboard/static/css/sessions.css - Styling for sessions page

Modified files:
- dashboard/api/video_learning.py - Added /sessions/list endpoint
- dashboard/static/index.html - Added "任务列表" button
- dashboard/static/video-learning.html - Added "任务列表" button and localStorage

Co-Authored-By: Claude <noreply@anthropic.com>
---
 dashboard/api/video_learning.py      |  23 ++
 dashboard/static/css/sessions.css    | 232 +++++++++++++++++++
 dashboard/static/index.html          |   9 +
 dashboard/static/js/sessions.js      | 120 ++++++++++
 dashboard/static/sessions.html       | 330 +++++++++++++++++++++++++++
 dashboard/static/video-learning.html |  30 +++
 6 files changed, 744 insertions(+)
 create mode 100644 dashboard/static/css/sessions.css
 create mode 100644 dashboard/static/js/sessions.js
 create mode 100644 dashboard/static/sessions.html

diff --git a/dashboard/api/video_learning.py b/dashboard/api/video_learning.py
index 4438df2..247aba2 100644
--- a/dashboard/api/video_learning.py
+++ b/dashboard/api/video_learning.py
@@ -351,6 +351,29 @@ async def list_sessions() -> List[str]:
     return list(_active_sessions.keys())
 
 
+@router.get("/sessions/list")
+async def list_all_sessions() -> List[Dict[str, Any]]:
+    """获取所有会话的详细信息（包含进度、状态等）"""
+    result = []
+    for session_id, agent in _active_sessions.items():
+        try:
+            progress = agent.get_session_progress()
+            result.append({
+                "session_id": session_id,
+                "platform": progress.get("platform", ""),
+                "target_count": progress.get("target_count", 0),
+                "watched_count": progress.get("watched_count", 0),
+                "progress_percent": progress.get("progress_percent", 0),
+                "is_active": progress.get("is_active", False),
+                "is_paused": progress.get("is_paused", False),
+                "total_duration": progress.get("total_duration", 0),
+            })
+        except Exception as e:
+            # 跳过出错的会话
+            continue
+    return result
+
+
 @router.delete("/sessions/{session_id}", response_model=Dict[str, str])
 async def delete_session(session_id: str) -> Dict[str, str]:
     """Delete a session and clean up device mapping."""
diff --git a/dashboard/static/css/sessions.css b/dashboard/static/css/sessions.css
new file mode 100644
index 0000000..363423c
--- /dev/null
+++ b/dashboard/static/css/sessions.css
@@ -0,0 +1,232 @@
+/**
+ * Video Learning Sessions Page Styles
+ */
+
+/* Sessions Grid */
+.sessions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+
+/* Session Card */
+.session-card {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.session-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.session-card.completed {
+    opacity: 0.8;
+}
+
+/* Session Header */
+.session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.session-platform {
+    font-weight: 600;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.session-platform::before {
+    content: '';
+    width: 24px;
+    height: 24px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+/* Session Status */
+.session-status {
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.session-status.status-active {
+    background: #10b981;
+    color: white;
+}
+
+.session-status.status-paused {
+    background: #f59e0b;
+    color: white;
+}
+
+.session-status.status-completed {
+    background: #6b7280;
+    color: white;
+}
+
+/* Session ID */
+.session-id {
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    background: #f3f4f6;
+    border-radius: 4px;
+}
+
+.session-id small {
+    display: block;
+    font-size: 11px;
+    color: #6b7280;
+    margin-bottom: 4px;
+}
+
+.session-id code {
+    font-family: 'Monaco', 'Consolas', monospace;
+    font-size: 12px;
+    color: #374151;
+}
+
+/* Session Progress */
+.session-progress {
+    margin-bottom: 12px;
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #374151;
+    margin-bottom: 6px;
+}
+
+.progress-bar {
+    height: 8px;
+    background: #e5e7eb;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    transition: width 0.3s ease;
+}
+
+/* Session Duration */
+.session-duration {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    color: #6b7280;
+}
+
+/* Session Actions */
+.session-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.session-actions .btn {
+    flex: 1;
+    min-width: 80px;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 80px 20px;
+    color: #6b7280;
+}
+
+.empty-state svg {
+    margin-bottom: 20px;
+    color: #d1d5db;
+}
+
+.empty-state h2 {
+    font-size: 24px;
+    margin-bottom: 8px;
+    color: #374151;
+}
+
+.empty-state p {
+    font-size: 16px;
+    margin-bottom: 24px;
+}
+
+/* Button Styles */
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 13px;
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.toast {
+    padding: 12px 20px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    animation: slideIn 0.3s ease;
+}
+
+.toast.info {
+    background: #3b82f6;
+    color: white;
+}
+
+.toast.success {
+    background: #10b981;
+    color: white;
+}
+
+.toast.error {
+    background: #ef4444;
+    color: white;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .sessions-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .session-actions {
+        flex-direction: column;
+    }
+
+    .session-actions .btn {
+        width: 100%;
+    }
+}
diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index 980ac81..ed40c03 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -48,6 +48,15 @@
                     </svg>
                     Video Learning
                 </a>
+                <a href="/static/sessions.html" class="btn btn-secondary">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                    </svg>
+                    任务列表
+                </a>
                 <button @click="refreshDevices" class="btn btn-secondary" :disabled="refreshing">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="{ spinning: refreshing }">
                         <polyline points="23 4 23 10 17 10"></polyline>
diff --git a/dashboard/static/js/sessions.js b/dashboard/static/js/sessions.js
new file mode 100644
index 0000000..af7720c
--- /dev/null
+++ b/dashboard/static/js/sessions.js
@@ -0,0 +1,120 @@
+/**
+ * Video Learning Sessions Module for AutoGLM Dashboard
+ *
+ * This module provides functionality for managing video learning sessions,
+ * including listing, controlling, and monitoring sessions.
+ */
+
+const SessionsModule = {
+    // Current session state
+    sessions: [],
+    isLoading: false,
+
+    /**
+     * Load all sessions
+     */
+    async loadSessions() {
+        try {
+            const response = await axios.get('/api/video-learning/sessions/list');
+            this.sessions = response.data;
+            return this.sessions;
+        } catch (error) {
+            console.error('Error loading sessions:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Get session status
+     */
+    async getSessionStatus(sessionId) {
+        try {
+            const response = await axios.get(`/api/video-learning/sessions/${sessionId}/status`);
+            return response.data;
+        } catch (error) {
+            console.error('Error getting session status:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Get session videos
+     */
+    async getSessionVideos(sessionId) {
+        try {
+            const response = await axios.get(`/api/video-learning/sessions/${sessionId}/videos`);
+            return response.data;
+        } catch (error) {
+            console.error('Error getting session videos:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Control session (pause/resume/stop)
+     */
+    async controlSession(sessionId, action) {
+        try {
+            const response = await axios.post(`/api/video-learning/sessions/${sessionId}/control`, {
+                action: action
+            });
+            return response.data;
+        } catch (error) {
+            console.error('Error controlling session:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Delete session
+     */
+    async deleteSession(sessionId) {
+        try {
+            const response = await axios.delete(`/api/video-learning/sessions/${sessionId}`);
+            return response.data;
+        } catch (error) {
+            console.error('Error deleting session:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Format platform name
+     */
+    getPlatformName(platform) {
+        const names = {
+            'douyin': '抖音',
+            'kuaishou': '快手',
+            'tiktok': 'TikTok'
+        };
+        return names[platform] || platform;
+    },
+
+    /**
+     * Get status text
+     */
+    getStatusText(session) {
+        if (!session.is_active && !session.is_paused) return '已完成';
+        if (session.is_paused) return '已暂停';
+        if (session.is_active) return '进行中';
+        return '未知';
+    },
+
+    /**
+     * Format duration
+     */
+    formatDuration(seconds) {
+        if (!seconds) return '0s';
+        if (seconds < 60) {
+            return `${seconds.toFixed(1)}s`;
+        }
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}m ${remainingSeconds.toFixed(1)}s`;
+    }
+};
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = SessionsModule;
+}
diff --git a/dashboard/static/sessions.html b/dashboard/static/sessions.html
new file mode 100644
index 0000000..bc4b642
--- /dev/null
+++ b/dashboard/static/sessions.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>任务列表 - AutoGLM Dashboard</title>
+    <!-- Vue.js 3 -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Axios for API requests -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <!-- CSS -->
+    <link rel="stylesheet" href="/static/css/dashboard.css">
+    <link rel="stylesheet" href="/static/css/sessions.css">
+</head>
+<body>
+    <div id="app">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                    </svg>
+                    Video Learning 任务列表
+                </h1>
+                <div class="stats">
+                    <span class="stat" v-if="sessions.length > 0">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="14" width="7" height="7"></rect>
+                            <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                        {{ sessions.length }} 个会话
+                    </span>
+                    <span class="stat" v-if="activeCount > 0">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        {{ activeCount }} 活跃中
+                    </span>
+                </div>
+            </div>
+            <div class="header-actions">
+                <button @click="refreshSessions" class="btn btn-secondary" :disabled="loading">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M23 4v6h-6"></path>
+                        <path d="M1 20v-6h6"></path>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                    </svg>
+                    刷新
+                </button>
+                <a href="/" class="btn btn-secondary">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="19" y1="12" x2="5" y2="12"></line>
+                        <polyline points="12 19 5 12 12 5"></polyline>
+                    </svg>
+                    返回主页
+                </a>
+                <a href="/static/video-learning.html" class="btn btn-primary">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="12" y1="5" x2="12" y2="19"></line>
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                    新建任务
+                </a>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Empty State -->
+            <div class="empty-state" v-if="sessions.length === 0 && !loading">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="9" y1="3" x2="9" y2="21"></line>
+                    <line x1="15" y1="3" x2="15" y2="21"></line>
+                    <line x1="3" y1="9" x2="21" y2="9"></line>
+                    <line x1="3" y1="15" x2="21" y2="15"></line>
+                </svg>
+                <h2>暂无任务</h2>
+                <p>还没有创建任何视频学习任务</p>
+                <a href="/static/video-learning.html" class="btn btn-primary">创建第一个任务</a>
+            </div>
+
+            <!-- Sessions Grid -->
+            <div class="sessions-grid" v-if="sessions.length > 0">
+                <div v-for="session in sessions" :key="session.session_id"
+                     class="session-card"
+                     :class="{ 'completed': !session.is_active && !session.is_paused }">
+                    <!-- Card Header -->
+                    <div class="session-header">
+                        <div class="session-platform">
+                            {{ getPlatformName(session.platform) }}
+                        </div>
+                        <div class="session-status" :class="getStatusClass(session)">
+                            {{ getStatusText(session) }}
+                        </div>
+                    </div>
+
+                    <!-- Session ID -->
+                    <div class="session-id">
+                        <small>会话 ID</small>
+                        <code>{{ formatSessionId(session.session_id) }}</code>
+                    </div>
+
+                    <!-- Progress -->
+                    <div class="session-progress">
+                        <div class="progress-info">
+                            <span>进度: {{ session.watched_count }} / {{ session.target_count }}</span>
+                            <span>{{ Math.round(session.progress_percent) }}%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" :style="{ width: session.progress_percent + '%' }"></div>
+                        </div>
+                    </div>
+
+                    <!-- Duration -->
+                    <div class="session-duration" v-if="session.total_duration > 0">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        {{ formatDuration(session.total_duration) }}
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="session-actions">
+                        <button @click="viewDetails(session)" class="btn btn-sm btn-secondary">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M1 12s4-8 11-8 11 8 11 8-11 11-11-11-11z"></path>
+                                <circle cx="12" cy="12" r="3"></circle>
+                            </svg>
+                            详情
+                        </button>
+
+                        <button v-if="session.is_paused" @click="controlSession(session.session_id, 'resume')"
+                                class="btn btn-sm btn-primary">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                            </svg>
+                            恢复
+                        </button>
+
+                        <button v-else-if="session.is_active" @click="controlSession(session.session_id, 'pause')"
+                                class="btn btn-sm btn-warning">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="6" y="4" width="4" height="16"></rect>
+                                <rect x="14" y="4" width="4" height="16"></rect>
+                            </svg>
+                            暂停
+                        </button>
+
+                        <button v-if="session.is_active || session.is_paused"
+                                @click="controlSession(session.session_id, 'stop')"
+                                class="btn btn-sm btn-danger">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="6" y="6" width="12" height="12"></rect>
+                            </svg>
+                            停止
+                        </button>
+
+                        <button v-if="!session.is_active && !session.is_paused"
+                                @click="deleteSession(session.session_id)"
+                                class="btn btn-sm btn-danger">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="3 6 5 6 21 6"></polyline>
+                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                            </svg>
+                            删除
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Toast notifications -->
+        <div class="toast-container">
+            <div v-for="toast in toasts" :key="toast.id" class="toast" :class="toast.type">
+                {{ toast.message }}
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/js/sessions.js"></script>
+    <script>
+        const { createApp } = Vue;
+
+        createApp({
+            data() {
+                return {
+                    sessions: [],
+                    loading: false,
+                    toasts: [],
+                    toastIdCounter: 0,
+                    pollInterval: null,
+                };
+            },
+
+            mounted() {
+                this.loadSessions();
+                this.startPolling();
+            },
+
+            beforeUnmount() {
+                this.stopPolling();
+            },
+
+            methods: {
+                async loadSessions() {
+                    this.loading = true;
+                    try {
+                        const response = await axios.get('/api/video-learning/sessions/list');
+                        this.sessions = response.data;
+                    } catch (error) {
+                        this.showToast('加载失败: ' + error.message, 'error');
+                    } finally {
+                        this.loading = false;
+                    }
+                },
+
+                async refreshSessions() {
+                    await this.loadSessions();
+                    this.showToast('已刷新', 'info');
+                },
+
+                async viewDetails(session) {
+                    // 保存 session_id 到 localStorage
+                    localStorage.setItem('current_session_id', session.session_id);
+                    // 跳转到 Video Learning 详情页
+                    window.location.href = '/static/video-learning.html?session=' + session.session_id;
+                },
+
+                async controlSession(sessionId, action) {
+                    try {
+                        await axios.post(`/api/video-learning/sessions/${sessionId}/control`, { action });
+                        this.showToast(`会话已${action === 'pause' ? '暂停' : action === 'resume' ? '恢复' : '停止'}`, 'success');
+                        await this.loadSessions();
+                    } catch (error) {
+                        this.showToast('操作失败: ' + error.message, 'error');
+                    }
+                },
+
+                async deleteSession(sessionId) {
+                    if (!confirm('确定要删除这个会话吗？')) return;
+
+                    try {
+                        await axios.delete(`/api/video-learning/sessions/${sessionId}`);
+                        this.showToast('会话已删除', 'success');
+                        await this.loadSessions();
+                    } catch (error) {
+                        this.showToast('删除失败: ' + error.message, 'error');
+                    }
+                },
+
+                startPolling() {
+                    this.pollInterval = setInterval(() => {
+                        this.loadSessions();
+                    }, 3000); // 每 3 秒刷新一次
+                },
+
+                stopPolling() {
+                    if (this.pollInterval) {
+                        clearInterval(this.pollInterval);
+                        this.pollInterval = null;
+                    }
+                },
+
+                getPlatformName(platform) {
+                    const names = {
+                        'douyin': '抖音',
+                        'kuaishou': '快手',
+                        'tiktok': 'TikTok'
+                    };
+                    return names[platform] || platform;
+                },
+
+                getStatusText(session) {
+                    if (!session.is_active && !session.is_paused) return '已完成';
+                    if (session.is_paused) return '已暂停';
+                    if (session.is_active) return '进行中';
+                    return '未知';
+                },
+
+                getStatusClass(session) {
+                    if (!session.is_active && !session.is_paused) return 'status-completed';
+                    if (session.is_paused) return 'status-paused';
+                    if (session.is_active) return 'status-active';
+                    return '';
+                },
+
+                formatSessionId(sessionId) {
+                    // 只显示前 8 位和后 4 位
+                    if (sessionId.length > 16) {
+                        return sessionId.substring(0, 8) + '...' + sessionId.substring(sessionId.length - 4);
+                    }
+                    return sessionId;
+                },
+
+                formatDuration(seconds) {
+                    if (seconds < 60) {
+                        return `${seconds.toFixed(1)}s`;
+                    }
+                    const minutes = Math.floor(seconds / 60);
+                    const remainingSeconds = seconds % 60;
+                    return `${minutes}m ${remainingSeconds.toFixed(1)}s`;
+                },
+
+                showToast(message, type = 'info') {
+                    const id = this.toastIdCounter++;
+                    this.toasts.push({ id, message, type });
+                    setTimeout(() => {
+                        this.toasts = this.toasts.filter(t => t.id !== id);
+                    }, 3000);
+                },
+            },
+
+            computed: {
+                activeCount() {
+                    return this.sessions.filter(s => s.is_active).length;
+                }
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>
diff --git a/dashboard/static/video-learning.html b/dashboard/static/video-learning.html
index cbd19e3..a41fd35 100644
--- a/dashboard/static/video-learning.html
+++ b/dashboard/static/video-learning.html
@@ -42,6 +42,15 @@
                 </div>
             </div>
             <div class="header-actions">
+                <a href="/static/sessions.html" class="btn btn-secondary">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                    </svg>
+                    任务列表
+                </a>
                 <button @click="goBack" class="btn btn-secondary">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <line x1="19" y1="12" x2="5" y2="12"></line>
@@ -285,6 +294,23 @@
             mounted() {
                 this.loadDevices();
                 this.setupVideoLearningEvents();
+
+                // 检查 URL 是否有 session 参数
+                const urlParams = new URLSearchParams(window.location.search);
+                const sessionParam = urlParams.get('session');
+                if (sessionParam) {
+                    this.currentSessionId = sessionParam;
+                    this.updateSessionStatus();
+                }
+
+                // 检查 localStorage 中是否有保存的 session_id
+                if (!this.currentSessionId) {
+                    const savedSessionId = localStorage.getItem('current_session_id');
+                    if (savedSessionId) {
+                        this.currentSessionId = savedSessionId;
+                        this.updateSessionStatus();
+                    }
+                }
             },
 
             methods: {
@@ -318,6 +344,10 @@
                         );
 
                         this.currentSessionId = createResult.session_id;
+
+                        // 保存到 localStorage
+                        localStorage.setItem('current_session_id', this.currentSessionId);
+
                         this.showToast('Session created! Starting...', 'success');
 
                         // Start session