podflow 20250427__py3-none-any.whl → 20250429__py3-none-any.whl

podflow/download/show_progress.py

@@ -42,7 +42,8 @@ def show_progress(stream):
             mod=1,
             per=stream["downloaded_bytes"] / stream["total_bytes"],
             retime=eta,
-            speed=f"{speed}/s\t{downloaded_bytes}/{total_bytes}",
+            speed=f"{speed}/s",
+            part=f"{downloaded_bytes}/{total_bytes}",
             status="下载中",
         )
     if stream["status"] == "finished":
@@ -59,6 +60,7 @@ def show_progress(stream):
             mod=1,
             per=1,
             retime=elapsed,
-            speed=f"{speed}/s\t{downloaded_bytes}/{total_bytes}",
+            speed=f"{speed}/s",
+            part=f"{downloaded_bytes}/{total_bytes}",
             status="下载完成",
         )

podflow/httpfs/app_bottle.py

@@ -363,7 +363,7 @@ class bottle_app:
         filename = upload_file.filename
         name = filename.split(".")[0]
         suffix = filename.split(".")[1]
-        if suffix in ["mp4", "m4a"]:
+        if suffix not in ["mp4", "m4a"]:
             self.print_out("upload", 404)
             return {
                 "code": -6,

podflow/httpfs/download_bar.py

@@ -9,6 +9,7 @@ def download_bar(
     per=0,
     retime="00:00",
     speed="   0.00 B",
+    part="",
     status="准备中",
     idname="",
     nametext="",
@@ -20,6 +21,7 @@ def download_bar(
                 per,
                 retime,
                 speed,
+                part,
                 status,
                 idname,
                 nametext,
@@ -30,6 +32,7 @@ def download_bar(
         gVar.index_message["download"][-1][0] = per
         gVar.index_message["download"][-1][1] = retime
         gVar.index_message["download"][-1][2] = speed
-        gVar.index_message["download"][-1][3] = status
+        gVar.index_message["download"][-1][3] = part
+        gVar.index_message["download"][-1][4] = status
     elif mod == 2 and gVar.index_message["download"]:
-        gVar.index_message["download"][-1][3] = status
+        gVar.index_message["download"][-1][4] = status

podflow/main_podcast.py

@@ -69,7 +69,7 @@ def main_podcast():
     # 初始化
     build_original()
     # http共享
-    port = gVar.config.get("port", 8080) # 使用 .get 获取端口
+    port = gVar.config.get("port", 8000) # 使用 .get 获取端口
     hostip = "0.0.0.0"
 
     if port_judge(hostip, port): # 假设 port_judge 存在
@@ -102,8 +102,8 @@ def main_podcast():
         )
         cherrypy.engine.start()  # 启动 CherryPy 服务器
         time_print(f"HTTP服务器启动, 端口: \033[32m{port}\033[0m")
-        if parse.index: # 假设 parse 已定义
-            open_url(f"{gVar.config['address']}/index") # 假设 open_url 已定义
+        if parse.index:
+            open_url(f"{gVar.config['address']}/index")
         if parse.httpfs:  # HttpFS参数判断, 是否继续运行
             cherrypy.engine.block()  # 阻止程序退出, 保持HTTP服务运行
             sys.exit(0)

podflow/templates/css/index.css

@@ -140,7 +140,6 @@ main.full {
 .common-area {
   width: 100%;
   max-width: 520px;
-  padding: 0 8px;
   color: var(--text-color);
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   box-sizing: border-box;
@@ -159,7 +158,11 @@ textarea {
   background-color: var(--input-bg);
   font-family: 'Courier New', Courier, monospace; /* 添加字体 */
 }
+#inputOutput {
+  padding: 4px 8px;
+}
 #messageDownload {
+  padding: 0 8px;
   max-height: 180px;
   max-width: 99%;
   height: auto;  
@@ -168,6 +171,7 @@ textarea {
   background-color: var(--bg-color);
 }
 #messageArea {
+  padding: 4px 8px;
   height: 250px;
   font-size: 12px;
   border: 1px solid var(--input-border);
@@ -176,6 +180,7 @@ textarea {
   font-family: 'Courier New', Courier, monospace; /* 添加字体 */
 }
 #messageHttp {
+  padding: 4px 8px;
   height: 100px;
   font-size: 12px;
   border: 1px solid var(--input-border);
@@ -347,6 +352,8 @@ button:hover {
   margin-left: auto;
   flex-shrink: 0;
   align-self: flex-end;
+  position: relative;
+  top: -2px;
 }
 .scroll-container {
   flex: 1; /* 自适应宽度 */

podflow/templates/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Podflow</title>
   <link rel="stylesheet" href="/templates/css/index.css" />
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
 <body>
   <!-- 菜单栏 -->
@@ -53,7 +54,7 @@
       </form>
     </section>
   </main>
-  <script src="/templates/js/qrcode.min.js"></script>
   <script src="/templates/js/index.js"></script>
+  <script src="/templates/js/qrcode.min.js"></script>
 </body>
 </html>

podflow/templates/js/index.js

@@ -1,481 +1,725 @@
 (function() {
-  // 缓存常用节点
+  // --- 缓存常用 DOM 节点 ---
+  // 菜单相关
   const menu = document.getElementById('menu');
   const toggleMenuBtn = document.getElementById('toggleMenu');
+  // 页面容器
   const pages = {
     pageChannel: document.getElementById('pageChannel'),
     pageMessage: document.getElementById('pageMessage')
   };
+  // Channel ID 相关表单
   const inputForm = document.getElementById('inputForm');
   const inputOutput = document.getElementById('inputOutput');
   const pasteBtn = document.getElementById('pasteBtn');
   const copyBtn = document.getElementById('copyBtn');
   const clearBtn = document.getElementById('clearBtn');
-  // 缓存进度条和文本元素
+  // 主进度条相关
   const mainProgress = document.getElementById('mainProgress');
   const progressStatus = document.getElementById('progressStatus');
   const progressPercentage = document.getElementById('progressPercentage');
-  const messageArea = document.getElementById('messageArea');
-  const messageHttp = document.getElementById('messageHttp');
-  const messageDownload = document.getElementById('messageDownload');
+  // 消息显示区域
+  const messageArea = document.getElementById('messageArea'); // Podflow 消息
+  const messageHttp = document.getElementById('messageHttp'); // HTTP 消息
+  const messageDownload = document.getElementById('messageDownload'); // 下载进度条容器
+  const downloadLabel = document.getElementById('downloadLabel'); // 下载进度标题 (假设存在)
 
-  let lastMessage = { schedule: [], podflow: [], http: [], download: [] };
-  let pollingTimer = null;
-  let userScrolled = false;
+  // --- 状态变量 ---
+  let lastMessage = { schedule: [], podflow: [], http: [], download: [] }; // 缓存上一次的消息数据
+  let userScrolled = { // 分别跟踪每个滚动区域的用户滚动状态
+    messageArea: false,
+    messageHttp: false,
+    messageDownload: false
+  };
   let eventSource = null; // 用于存储 EventSource 实例
-  
-  // 生成单个二维码的函数
+
+  // --- 二维码生成 ---
+  /**
+   * 为指定的 DOM 容器生成二维码
+   * @param {HTMLElement} container - 要生成二维码的容器元素，需要有 data-url 属性
+   */
   function generateQRCodeForNode(container) {
     const rootStyles = getComputedStyle(document.documentElement);
     const textColor = rootStyles.getPropertyValue('--text-color').trim();
     const inputBg = rootStyles.getPropertyValue('--input-bg').trim();
     const url = container.dataset.url;
-    container.innerHTML = '';
+    container.innerHTML = ''; // 清空容器
     if (url) {
-      new QRCode(container, {
-        text: url,
-        width: 220,
-        height: 220,
-        colorDark: textColor,
-        colorLight: inputBg,
-        correctLevel: QRCode.CorrectLevel.L
-      });
+      try {
+        new QRCode(container, {
+          text: url,
+          width: 220,
+          height: 220,
+          colorDark: textColor,
+          colorLight: inputBg,
+          correctLevel: QRCode.CorrectLevel.L
+        });
+      } catch (e) {
+        console.error("生成二维码失败:", e);
+        container.textContent = '二维码生成失败';
+      }
     } else {
       container.textContent = 'URL 未提供';
     }
   }
 
-  // 菜单切换函数
+  // --- 菜单控制 ---
+  /**
+   * 切换侧边菜单的显示/隐藏状态
+   */
   function toggleMenu() {
     menu.classList.toggle('hidden');
-    if (menu.classList.contains('hidden')) {
-      toggleMenuBtn.style.left = '0px';
-      toggleMenuBtn.textContent = '❯';
-    } else {
-      toggleMenuBtn.style.left = 'var(--menu-width)';
-      toggleMenuBtn.textContent = '❮';
-    }
+    const isHidden = menu.classList.contains('hidden');
+    toggleMenuBtn.style.left = isHidden ? '0px' : 'var(--menu-width)';
+    toggleMenuBtn.textContent = isHidden ? '❯' : '❮';
   }
 
-  // 根据页面标识显示对应面板
+  /**
+   * 根据页面 ID 显示对应的页面内容，并管理 SSE 连接
+   * @param {string} pageId - 'pageChannel' 或 'pageMessage'
+   */
   function showPage(pageId) {
+    // 隐藏所有页面
     Object.values(pages).forEach(page => page.style.display = 'none');
+
+    // 显示目标页面
     if (pages[pageId]) {
       pages[pageId].style.display = 'block';
-      // 手机模式下自动隐藏菜单
-      if (window.innerWidth <= 600 && typeof menu !== 'undefined' && !menu.classList.contains('hidden')) {
-        if (typeof toggleMenu === 'function') {
-          toggleMenu();
-        }
+
+      // 手机模式下，切换页面时自动隐藏菜单
+      if (window.innerWidth <= 600 && !menu.classList.contains('hidden')) {
+        toggleMenu();
       }
+
       // --- SSE 连接管理 ---
       if (pageId === 'pageMessage') {
-        startMessageStream(); // <--- 启动 SSE 连接
+        startMessageStream(); // 显示消息页面时，启动 SSE 连接
       } else {
-        stopMessageStream(); // <--- 关闭 SSE 连接
+        stopMessageStream(); // 切换到其他页面时，关闭 SSE 连接
       }
+    } else {
+      console.warn(`未找到 ID 为 "${pageId}" 的页面`);
     }
   }
 
-  // 监听滚动事件，检测用户是否手动滚动
+  // --- 滚动处理 ---
+  /**
+   * 监听滚动事件，判断用户是否手动滚动了消息区域
+   * @param {Event} event - 滚动事件对象
+   */
   function onUserScroll(event) {
     const element = event.target;
-    // 判断是否接近底部，增加一定的容差值
-    const nearBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 10;
-    userScrolled = !nearBottom;
+    const containerId = element.id; // 获取滚动容器的ID
+    if (userScrolled.hasOwnProperty(containerId)) { // 确保是我们关心的容器
+        // 判断是否滚动到接近底部 (增加 10px 容差)
+        const isNearBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 10;
+        userScrolled[containerId] = !isNearBottom; // 如果没在底部，则标记为用户已滚动
+    }
   }
 
-  // 轮询消息更新，更新 messageArea 与 messageHttp
-  function getMessages() {
-    fetch('message')
-      .then(response => response.json()) // 解析 JSON 数据
-      .then(data => {
-        // 更新进度条
-        if (JSON.stringify(data.schedule) !== JSON.stringify(lastMessage.schedule)) {
-          updateProgress(data.schedule);
-          lastMessage.schedule = data.schedule;
-        }
-        // 追加新消息
-        if (JSON.stringify(data.podflow) !== JSON.stringify(lastMessage.podflow)) {
-          appendMessages(messageArea, data.podflow, lastMessage.podflow);
-          lastMessage.podflow = data.podflow;
-        }
-        if (JSON.stringify(data.http) !== JSON.stringify(lastMessage.http)) {
-          appendMessages(messageHttp, data.http, lastMessage.http);
-          lastMessage.http = data.http;
-        }
-        if (JSON.stringify(data.download) !== JSON.stringify(lastMessage.download)) {
-          appendBar(messageDownload, data.download, lastMessage.download);
-          lastMessage.download = data.download
-        }
-      })
-      .catch(error => console.error('获取消息失败:', error));
-  }
-  
-  // 更新进度条并显示状态和百分比
+  // --- 消息处理 ---
+  /**
+   * 更新主进度条的状态和百分比
+   * @param {Array} scheduleData - 包含状态和进度的数组，例如 ["状态", 0.5]
+   */
   function updateProgress(scheduleData) {
-    // 检查 schedule 数据是否存在且长度为 2
-    if (scheduleData && scheduleData.length === 2) {
-      const [status, progress] = scheduleData; // 直接解构数组
+    if (Array.isArray(scheduleData) && scheduleData.length === 2) {
+      const [status, progress] = scheduleData;
+      const percentage = progress * 100;
+
+      // 确保 DOM 元素存在
+      if (!mainProgress || !progressStatus || !progressPercentage) {
+          console.warn("进度条相关 DOM 元素未找到");
+          return;
+      }
+
       if (status === "准备中" || status === "构建中") {
-        mainProgress.style.width = `${progress * 100}%`;
-        progressStatus.textContent = status;   // 显示状态
-        progressPercentage.textContent = `${(progress * 100).toFixed(2)}%`;   // 显示百分比，保留两位小数
+        mainProgress.style.width = `${percentage}%`;
+        progressStatus.textContent = status;
+        progressPercentage.textContent = `${percentage.toFixed(2)}%`;
       } else if (status === "已完成") {
         mainProgress.style.width = '100%';
-        progressStatus.textContent = '已完成';   // 显示完成状态
-        progressPercentage.textContent = '100.0%';   // 显示百分比
+        progressStatus.textContent = '已完成';
+        progressPercentage.textContent = '100.00%'; // 保持格式一致
       }
+      // 可以选择性地处理其他状态或进度为 null/undefined 的情况
+    } else {
+        // console.warn("接收到的进度数据格式不正确:", scheduleData);
     }
   }
-  
+
+  /**
+   * 创建单个消息元素的 DOM 结构
+   * @param {string} message - 包含 HTML 的消息字符串
+   * @returns {HTMLDivElement} - 创建的消息元素
+   */
   function createMessageElement(message) {
     const div = document.createElement('div');
+    // 使用 innerHTML，因为消息内容可能包含 HTML 标签 (如二维码容器)
     div.innerHTML = message;
-    div.className = 'message';
+    div.className = 'message'; // 假设 'message' 是单个消息的样式类
     return div;
   }
-  
-  function processQRCodeContainers(div) {
-    const qrContainers = div.querySelectorAll('.qrcode-container');
+
+  /**
+   * 处理消息元素内部的二维码容器
+   * @param {HTMLElement} element - 包含 .qrcode-container 的父元素
+   */
+  function processQRCodeContainers(element) {
+    const qrContainers = element.querySelectorAll('.qrcode-container');
     qrContainers.forEach(container => {
-      // 判断当前容器是否有 data-url 属性，并且值不为空
       if (container.dataset.url) {
         generateQRCodeForNode(container);
       } else {
-        // 如果没有 data-url 或值为空，可以执行其他操作，例如输出提示信息
         console.log('容器中未提供 URL，跳过二维码生成:', container);
-        container.textContent = '未提供二维码 URL'; // 可选：在容器中显示提示
+        container.textContent = '未提供二维码 URL';
       }
     });
   }
-  
-  // 修改后的 appendMessages 函数：先生成消息节点内的二维码，再将节点追加或替换到消息容器中
+
+  /**
+   * 更新消息显示区域 (Podflow / HTTP)，保留向上更新四行的逻辑
+   * @param {HTMLElement} container - 消息容器元素 (messageArea 或 messageHttp)
+   * @param {string[]} newMessages - 最新的消息数组
+   * @param {string[]} oldMessages - 上一次的消息数组
+   */
   function appendMessages(container, newMessages, oldMessages) {
-    // 判断当前是否在底部
-    const wasAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10;
-    // 较为简单的情况：两数组长度相同且有内容，只比较最后四项
-    if (newMessages.length === oldMessages.length && newMessages.length > 0) {
-      let replaceCount;
-      if (newMessages[newMessages.length - 1].includes("未扫描") || 
-          newMessages[newMessages.length - 1].includes("二维码超时, 请重试")) {
-        replaceCount = Math.min(4, newMessages.length);
-      } else {
-        replaceCount = 1;
+    if (!container) return; // 防御性编程
+
+    const containerId = container.id;
+    const wasAtBottom = !userScrolled[containerId] && (container.scrollHeight - container.scrollTop <= container.clientHeight + 10);
+    const newLength = newMessages.length;
+    const oldLength = oldMessages.length;
+
+    // --- 主要逻辑：比较新旧消息，更新 DOM ---
+    if (newLength === oldLength && newLength > 0) {
+      // --- 长度相同：检查最后几条消息是否有变化 ---
+      let replaceCount = 1; // 默认只检查最后一条
+      const lastMessageContent = newMessages[newLength - 1];
+      // 特殊逻辑：如果最后一条消息包含特定文本，则检查最后四条
+      if (lastMessageContent.includes("未扫描") || lastMessageContent.includes("二维码超时, 请重试")) {
+        replaceCount = Math.min(4, newLength); // 最多检查4条或数组长度
       }
+
+      // 从后往前比较并替换变化的元素
       for (let i = 0; i < replaceCount; i++) {
-        // 计算从后向前的索引位置
-        const index = newMessages.length - 1 - i;
+        const index = newLength - 1 - i;
         const newMessage = newMessages[index];
         const oldMessage = oldMessages[index];
+
         if (newMessage !== oldMessage) {
-          // 先创建消息节点
           const div = createMessageElement(newMessage);
-          // 在插入前先处理二维码生成
-          processQRCodeContainers(div);
-          // 替换到容器中 - 注意这里要找到对应位置的子元素
+          processQRCodeContainers(div); // 处理二维码
           const childToReplace = container.children[index];
           if (childToReplace) {
             container.replaceChild(div, childToReplace);
+          } else {
+            // 如果预期的子元素不存在（理论上不应发生），则追加
+            console.warn(`试图替换索引 ${index} 的子元素，但未找到。将追加。`);
+            container.appendChild(div);
           }
         }
       }
-    } else {
-      // 当 newMessages 与 oldMessages 数量不一致时
-      // 如果 oldMessages 存在数据，先替换容器中最后一项对应的消息
-      if (oldMessages.length > 0) {
-        const replaceIndex = oldMessages.length - 1;
-        const div = createMessageElement(newMessages[replaceIndex]);
-        // 先生成二维码
-        processQRCodeContainers(div);
-        const lastChild = container.lastElementChild;
-        if (lastChild) {
-          container.replaceChild(div, lastChild);
-        } else {
-          container.appendChild(div);
+    } else if (newLength > oldLength) {
+      // --- 新消息比旧消息多 ---
+      // 1. 如果旧消息存在，替换旧消息数组中最后一条对应的 DOM 元素
+      if (oldLength > 0) {
+        const replaceIndex = oldLength - 1;
+        const newMessageToReplace = newMessages[replaceIndex];
+        const oldMessageToCompare = oldMessages[replaceIndex];
+
+        // 仅当内容实际改变时才替换
+        if (newMessageToReplace !== oldMessageToCompare) {
+          const div = createMessageElement(newMessageToReplace);
+          processQRCodeContainers(div); // 处理二维码
+          const childToReplace = container.children[replaceIndex]; // 替换对应索引的元素
+          if (childToReplace) {
+            container.replaceChild(div, childToReplace);
+          } else {
+            console.warn(`试图替换索引 ${replaceIndex} 的子元素，但未找到。`);
+            // 此处可以选择追加或其他错误处理
+          }
         }
       }
-      // 再追加从 oldMessages.length 开始的后续消息
-      newMessages.slice(oldMessages.length).forEach(msg => {
+
+      // 2. *** 优化点：使用 DocumentFragment 批量追加新增的消息 ***
+      const fragment = document.createDocumentFragment();
+      for (let i = oldLength; i < newLength; i++) {
+        const div = createMessageElement(newMessages[i]);
+        processQRCodeContainers(div); // 处理二维码
+        fragment.appendChild(div);
+      }
+      container.appendChild(fragment); // 一次性追加所有新消息
+
+    } else if (newLength < oldLength) {
+      // --- 新消息比旧消息少（通常意味着列表被清空或重置）---
+      // 简单处理：清空容器，重新添加所有新消息
+      console.log("新消息数量少于旧消息，将重新渲染整个列表。");
+      container.innerHTML = ''; // 清空
+      const fragment = document.createDocumentFragment();
+      newMessages.forEach(msg => {
         const div = createMessageElement(msg);
-        // 先生成二维码
         processQRCodeContainers(div);
-        // 插入容器中
-        container.appendChild(div);
+        fragment.appendChild(div);
       });
+      container.appendChild(fragment);
+      // 重置滚动状态，因为内容完全变了
+      userScrolled[containerId] = false;
     }
-    // 如果之前在底部且用户没有主动滚动，则自动滚动到底部
-    if (wasAtBottom && !userScrolled) {
+
+    // --- 自动滚动到底部 ---
+    if (wasAtBottom && !userScrolled[containerId]) {
       container.scrollTop = container.scrollHeight;
     }
   }
 
+
+  // --- 下载进度条处理 ---
+  /**
+   * 创建单个下载进度条的 DOM 结构 (!!! 内部逻辑未修改 !!!)
+   * @param {number} i - 索引
+   * @param {number} percentageText - 进度百分比 (0-1)
+   * @param {string} time - 剩余时间
+   * @param {string} speed - 下载速度
+   * @param {string} part - 分片信息
+   * @param {string} status - 状态文本
+   * @param {string} idname - 标识名称
+   * @param {string} nameText - 文件名 (可能需要滚动)
+   * @param {string} file - 文件后缀或类型
+   * @returns {HTMLDivElement} - 创建的进度条容器元素
+   */
+  function addProgressBar(i, percentageText, time, speed, part, status, idname, nameText, file){
+    const download = document.createElement('div');
+    download.className = 'download-container';
+    // 创建 idname 文本节点（只创建一次）
+    const idnameText = document.createElement('div');
+    idnameText.className = 'scroll-text'; // 可能也需要滚动？根据 CSS 定义
+    idnameText.innerHTML = '  ' + idname; // 前导空格？
+    // 创建文件信息部分
+    const fileInfo = document.createElement('div');
+    fileInfo.className = 'scroll'; // 类名可能与滚动有关
+    const filesuffix = document.createElement('div');
+    filesuffix.className = 'scroll-suffix';
+    filesuffix.innerHTML = file;
+    // 创建滚动文本区域
+    const scroll = document.createElement('div');
+    scroll.className = 'scroll-container';
+    const namebar = document.createElement('div');
+    namebar.className = 'scroll-content';
+    const filename = document.createElement('div');
+    filename.className = 'scroll-text';
+    filename.innerHTML = nameText;
+    // 组合元素
+    namebar.appendChild(filename);
+    scroll.appendChild(namebar);
+    fileInfo.appendChild(scroll);
+    fileInfo.appendChild(filesuffix);
+    download.appendChild(idnameText);
+    download.appendChild(fileInfo);
+    // 延迟测量文本宽度，决定是否滚动 (!!! 原始逻辑 !!!)
+    setTimeout(() => {
+        const contentWidth = filename.scrollWidth;  // 单份文本宽度
+        const containerWidth = scroll.clientWidth;
+        if (contentWidth > containerWidth) {
+            // 需要滚动，添加第二份文本实现无缝滚动
+            const filename1 = document.createElement('div');
+            filename1.className = 'scroll-text';
+            filename1.innerHTML = nameText;
+            namebar.appendChild(filename1);
+            // 重新计算宽度，这次是双倍宽度中的单份宽度用于计算时间
+            const singleContentWidth = namebar.scrollWidth / 2;
+            const scrollSpeed = 30; // 滚动速度 (像素/秒)
+            const duration = singleContentWidth / scrollSpeed;
+            namebar.style.animationDuration = duration + 's';
+            // 延迟添加滚动类
+            setTimeout(() => {
+                namebar.classList.add('scrolling');
+            }, 1500); // 1.5秒延迟
+        } else {
+            // 不需要滚动，确保移除动画类和样式
+            namebar.classList.remove('scrolling');
+            namebar.style.animationDuration = '';
+        }
+    }, 0); // 使用 setTimeout 0ms 延迟，等待浏览器渲染后测量
+    // 进度条部分
+    const pbBar = document.createElement('div');
+    pbBar.className = 'pb-bar';
+    const pbProgress = document.createElement('div');
+    pbProgress.className = 'pb-progress pb-animated'; // 假设有动画效果
+    pbProgress.style.width = `${percentageText * 100}%`;
+    pbProgress.id = 'pbProgress' + (i+1); // ID 基于索引
+    const pbStatusText = document.createElement('div');
+    pbStatusText.className = 'pb-status-text';
+    pbStatusText.innerHTML = status;
+    pbStatusText.id = 'pbStatusText' + (i+1);
+    const pbPercentageText = document.createElement('div');
+    pbPercentageText.className = 'pb-percentage-text';
+    pbPercentageText.innerHTML = `${(percentageText * 100).toFixed(2)}%`;
+    pbPercentageText.id = 'pbPercentageText' + (i+1);
+    pbBar.appendChild(pbProgress);
+    pbBar.appendChild(pbStatusText);
+    pbBar.appendChild(pbPercentageText);
+    download.appendChild(pbBar);
+    // 速度、分片、时间部分
+    const speedContainer = document.createElement('div'); // 使用 div 而非 table 可能更灵活
+    speedContainer.className = 'scroll';
+    const speedText = document.createElement('div');
+    speedText.className = 'speed-text';
+    speedText.innerHTML = speed;
+    speedText.id = 'speedText' + (i+1);
+    const partText = document.createElement('div');
+    partText.className = 'speed-text';
+    partText.innerHTML = part;
+    partText.id = 'partText' + (i+1);
+    const timeText = document.createElement('div');
+    timeText.className = 'time-text';
+    timeText.innerHTML = time;
+    timeText.id = 'timeText' + (i+1);
+    speedContainer.appendChild(speedText);
+    speedContainer.appendChild(partText);
+    speedContainer.appendChild(timeText);
+    download.appendChild(speedContainer);
+    return download;
+  }
+
+  /**
+   * 更新下载进度条区域 (!!! 内部逻辑未修改 !!!)
+   * @param {HTMLElement} container - 下载进度条容器 (messageDownload)
+   * @param {Array[]} newMessages - 最新的下载信息数组，每个元素是 [percentage, time, speed, part, status, idname, nameText, file]
+   * @param {Array[]} oldMessages - 上一次的下载信息数组
+   */
   function appendBar(container, newMessages, oldMessages) {
-    // 遍历新的消息并渲染进度条
-    if (newMessages.length > 0) {
-      downloadLabel.textContent = '下载进度：';
-      const newlength = newMessages.length;
-      const oldlength = oldMessages.length;
-      if (oldlength!== 0){
-        const childToReplace = container.children[0];
-        const newMessage = newMessages[oldlength - 1];
-        const oldMessage = oldMessages[oldlength - 1];
-        if (newMessage !== oldMessage){
-          const [percentageText, time, speed, status, idname, nameText, file] = newMessage;
-          childToReplace.querySelector('#pbProgress' + oldlength).style.width = `${percentageText * 100}%`;
-          childToReplace.querySelector('#pbStatusText' + oldlength).innerHTML = status;
-          childToReplace.querySelector('#pbPercentageText' + oldlength).innerHTML = `${(percentageText * 100).toFixed(2)}%`;
-          childToReplace.querySelector('#speedText' + oldlength).innerHTML = speed;
-          childToReplace.querySelector('#timeText' + oldlength).innerHTML = time;
+    if (!container) return; // 防御
+
+    const containerId = container.id;
+    const wasAtBottom = !userScrolled[containerId] && (container.scrollHeight - container.scrollTop <= container.clientHeight + 10);
+    const newlength = newMessages.length;
+    const oldlength = oldMessages.length;
+
+    // --- 原始逻辑开始 ---
+    if (newlength > 0) {
+        if (downloadLabel) downloadLabel.textContent = '下载进度：'; // 更新标题
+
+        // --- 更新已存在的进度条 (对应旧消息列表中的最后一项) ---
+        if (oldlength !== 0) {
+          // 假设进度条是按顺序添加的，旧消息的最后一个对应容器中的第一个子元素（因为是 insertBefore(firstChild)）
+          // 或者需要更可靠的方式定位？如果 ID 总是连续且从1开始，可以查找 #pbProgress{oldlength} 的父元素
+          // 这里我们假设原始逻辑依赖于 DOM 结构顺序
+          const childToUpdate = container.children[newlength - oldlength]; // 找到对应旧列表最后一项的DOM元素
+
+          if(childToUpdate) {
+            const newMessage = newMessages[oldlength - 1];
+            const oldMessage = oldMessages[oldlength - 1];
+
+            // 比较整个数组是否相同可能更可靠，或者比较关键字段
+            if (JSON.stringify(newMessage) !== JSON.stringify(oldMessage)) {
+              const [percentageText, time, speed, part, status] = newMessage; // 只需要更新这些字段
+              const progressElement = childToUpdate.querySelector('#pbProgress' + oldlength);
+              const statusElement = childToUpdate.querySelector('#pbStatusText' + oldlength);
+              const percentageElement = childToUpdate.querySelector('#pbPercentageText' + oldlength);
+              const speedElement = childToUpdate.querySelector('#speedText' + oldlength);
+              const partElement = childToUpdate.querySelector('#partText' + oldlength);
+              const timeElement = childToUpdate.querySelector('#timeText' + oldlength);
+
+              if (progressElement) progressElement.style.width = `${percentageText * 100}%`;
+              if (statusElement) statusElement.innerHTML = status;
+              if (percentageElement) percentageElement.innerHTML = `${(percentageText * 100).toFixed(2)}%`;
+              if (speedElement) speedElement.innerHTML = speed;
+              if (partElement) partElement.innerHTML = part;
+              if (timeElement) timeElement.innerHTML = time;
+            }
+          } else {
+            console.warn(`appendBar: 尝试更新旧进度条 #${oldlength} 时未找到对应的 DOM 元素。`);
+          }
         }
-      }
-      if (newlength !== oldlength) {
-        for (let i = oldlength; i < newlength; i++) {
-          const messageContent = newMessages[i];
-          const [percentageText, time, speed, status, idname, nameText, file] = messageContent;
-          const download = document.createElement('div');
-          download.className = 'download-container';
-          // 创建 idname 文本节点（只创建一次）
-          const idnameText = document.createElement('div');
-          idnameText.className = 'scroll-text';
-          idnameText.innerHTML = '  ' + idname;
-          // 创建文件信息部分
-          const fileInfo = document.createElement('div');
-          fileInfo.className = 'scroll';
-          const filesuffix = document.createElement('div');
-          filesuffix.className = 'scroll-suffix';
-          filesuffix.innerHTML = file;
-          // 创建滚动文本区域
-          const scroll = document.createElement('div');
-          scroll.className = 'scroll-container';
-          const namebar = document.createElement('div');
-          namebar.className = 'scroll-content';
-          const filename = document.createElement('div');
-          filename.className = 'scroll-text';
-          filename.innerHTML = nameText;
-          // 组合元素
-          namebar.appendChild(filename);
-          scroll.appendChild(namebar);
-          fileInfo.appendChild(scroll);
-          fileInfo.appendChild(filesuffix);
-          download.appendChild(idnameText);
-          download.appendChild(fileInfo);
-          // 延迟测量文本宽度，决定是否滚动
-          setTimeout(() => {
-              const contentWidth = filename.scrollWidth;  // 单份文本宽度
-              const containerWidth = scroll.clientWidth;
-              if (contentWidth > containerWidth) {
-                  // 需要滚动，添加第二份文本实现无缝滚动
-                  const filename1 = document.createElement('div');
-                  filename1.className = 'scroll-text';
-                  filename1.innerHTML = nameText;
-                  namebar.appendChild(filename1);
-                  // 重新计算宽度，这次是双倍宽度中的单份宽度用于计算时间
-                  const singleContentWidth = namebar.scrollWidth / 2;
-                  const speed = 30;
-                  const duration = singleContentWidth / speed;
-                  namebar.style.animationDuration = duration + 's';
-                  // 延迟添加滚动类
-                  setTimeout(() => {
-                      namebar.classList.add('scrolling');
-                  }, 1500);
-              } else {
-                  // 不需要滚动，确保移除动画类和样式
-                  namebar.classList.remove('scrolling');
-                  namebar.style.animationDuration = '';
-              }
-          }, 0);
-          // 进度条部分
-          const pbBar = document.createElement('div');
-          pbBar.className = 'pb-bar';
-          const pbProgress = document.createElement('div');
-          pbProgress.className = 'pb-progress pb-animated';
-          pbProgress.style.width = `${percentageText * 100}%`;
-          pbProgress.id = 'pbProgress' + (i+1);
-          const pbStatusText = document.createElement('div');
-          pbStatusText.className = 'pb-status-text';
-          pbStatusText.innerHTML = status;
-          pbStatusText.id = 'pbStatusText' + (i+1);
-          const pbPercentageText = document.createElement('div');
-          pbPercentageText.className = 'pb-percentage-text';
-          pbPercentageText.innerHTML = `${(percentageText * 100).toFixed(2)}%`;
-          pbPercentageText.id = 'pbPercentageText' + (i+1);
-          pbBar.appendChild(pbProgress);
-          pbBar.appendChild(pbStatusText);
-          pbBar.appendChild(pbPercentageText);
-          download.appendChild(pbBar);
-          // 速度部分
-          const speedContainer = document.createElement('div');
-          speedContainer.className = 'scroll';
-          const speedText = document.createElement('div');
-          speedText.className = 'speed-text';
-          speedText.innerHTML = speed;
-          speedText.id = 'speedText' + (i+1);
-          const timeText = document.createElement('div');
-          timeText.className = 'time-text';
-          timeText.innerHTML = time;
-          timeText.id = 'timeText' + (i+1);
-          speedContainer.appendChild(speedText);
-          speedContainer.appendChild(timeText);
-          download.appendChild(speedContainer);
-          container.insertBefore(download, container.firstChild);
+
+        // --- 添加新的进度条 ---
+        if (newlength !== oldlength) {
+          // *** 优化点：同样可以使用 DocumentFragment 批量添加 ***
+          const fragment = document.createDocumentFragment();
+          for (let i = oldlength; i < newlength; i++) {
+            const messageContent = newMessages[i];
+            // 解构赋值，确保顺序正确
+            const [percentageText, time, speed, part, status, idname, nameText, file] = messageContent;
+            // 调用未修改的 addProgressBar 来创建元素
+            const downloadElement = addProgressBar(i, percentageText, time, speed, part, status, idname, nameText, file);
+            fragment.appendChild(downloadElement);
+          }
+          // 使用 insertBefore 将新的进度条批量插入到容器顶部
+          container.insertBefore(fragment, container.firstChild);
         }
-      }
+    } else {
+        // 如果新消息为空，可以选择清空进度条区域或显示提示
+        if (downloadLabel) downloadLabel.textContent = '暂无下载任务';
+        // container.innerHTML = ''; // 清空旧的进度条
+    }
+    // --- 原始逻辑结束 ---
+
+    // --- 自动滚动到底部 (对于进度条区域，通常是希望看到最新的，即顶部，所以可能不需要自动滚动到底部) ---
+    // 如果确实需要滚动到底部（显示旧的在上面）：
+    // if (wasAtBottom && !userScrolled[containerId]) {
+    //   container.scrollTop = container.scrollHeight;
+    // }
+    // 如果希望保持在顶部看到新添加的：
+    if (newlength > oldlength && !userScrolled[containerId]) { // 如果是新增了进度条且用户没滚动
+      container.scrollTop = 0; // 滚动到顶部
+    } else if (wasAtBottom && !userScrolled[containerId]) { // 如果是更新现有条目且之前在底部
+      container.scrollTop = container.scrollHeight; // 保持在底部
     }
   }
 
-  // 启动 SSE 连接
+
+  // --- SSE (Server-Sent Events) 处理 ---
+  /**
+   * 启动 SSE 连接，接收服务器推送的消息
+   */
   function startMessageStream() {
     // 如果已存在连接，先关闭
     if (eventSource) {
+      console.log("SSE 连接已存在，将重新启动...");
       eventSource.close();
     }
-    // 创建新的 EventSource 连接到 /stream 端点
-    eventSource = new EventSource('/stream'); // <--- 连接到新的 SSE 端点
+
+    console.log("正在启动 SSE 连接到 /stream ...");
+    eventSource = new EventSource('/stream');
+
     // 监听 'message' 事件 (默认事件)
     eventSource.onmessage = function(event) {
       try {
-        // event.data 是服务器发送的 JSON 字符串
         const data = JSON.parse(event.data);
-        // --- 更新 UI (逻辑与原 getMessages 类似) ---
-        // 确保 lastMessage 和 data 结构完整
-        lastMessage = lastMessage || { schedule: {}, podflow: [], http: [], download: [] };
-        data.schedule = data.schedule || {};
+
+        // --- 使用接收到的数据更新 UI ---
+        // 确保 lastMessage 和 data 结构完整，提供默认值防止错误
+        lastMessage = lastMessage || { schedule: [], podflow: [], http: [], download: [] };
+        data.schedule = data.schedule || [];
         data.podflow = data.podflow || [];
         data.http = data.http || [];
         data.download = data.download || [];
-        // 更新进度条 (如果 updateProgress 存在)
-        if (typeof updateProgress === 'function' && JSON.stringify(data.schedule) !== JSON.stringify(lastMessage.schedule)) {
+
+        // 1. 更新主进度条
+        // 使用 stringify 比较是为了简单深比较，对于小对象性能影响不大
+        if (JSON.stringify(data.schedule) !== JSON.stringify(lastMessage.schedule)) {
           updateProgress(data.schedule);
-          lastMessage.schedule = data.schedule;
+          lastMessage.schedule = data.schedule; // 更新缓存
         }
-        // 追加新消息 (如果 appendMessages 存在)
-        if (typeof appendMessages === 'function') {
-          if (JSON.stringify(data.podflow) !== JSON.stringify(lastMessage.podflow)) {
-            appendMessages(messageArea, data.podflow, lastMessage.podflow || []); // 传入旧消息用于比较
-            lastMessage.podflow = [...data.podflow]; // 创建副本以避免引用问题
-          }
-          if (JSON.stringify(data.http) !== JSON.stringify(lastMessage.http)) {
-            appendMessages(messageHttp, data.http, lastMessage.http || []); // 传入旧消息
-            lastMessage.http = [...data.http]; // 创建副本
-          }
+
+        // 2. 更新 Podflow 消息区域
+        if (JSON.stringify(data.podflow) !== JSON.stringify(lastMessage.podflow)) {
+          appendMessages(messageArea, data.podflow, lastMessage.podflow || []);
+          lastMessage.podflow = [...data.podflow]; // 更新缓存 (使用浅拷贝)
         }
-        // 更新下载栏 (如果 appendBar 存在)
-        if (typeof appendBar === 'function' && JSON.stringify(data.download) !== JSON.stringify(lastMessage.download)) {
-          appendBar(messageDownload, data.download, lastMessage.download || []); // 传入旧消息
-          lastMessage.download = [...data.download]; // 创建副本
+
+        // 3. 更新 HTTP 消息区域
+        if (JSON.stringify(data.http) !== JSON.stringify(lastMessage.http)) {
+          appendMessages(messageHttp, data.http, lastMessage.http || []);
+          lastMessage.http = [...data.http]; // 更新缓存 (使用浅拷贝)
         }
+
+        // 4. 更新下载进度条区域
+        if (JSON.stringify(data.download) !== JSON.stringify(lastMessage.download)) {
+          appendBar(messageDownload, data.download, lastMessage.download || []);
+          lastMessage.download = [...data.download]; // 更新缓存 (使用浅拷贝)
+        }
+
       } catch (error) {
         console.error('处理 SSE 消息失败:', error, '原始数据:', event.data);
       }
     };
+
     // 监听错误事件
     eventSource.onerror = function(error) {
-      console.error('EventSource 失败:', error);
-      // 可以选择在这里关闭连接或尝试重连，但 EventSource 通常会自动重连
-      // eventSource.close(); // 如果需要手动停止
+      console.error('SSE 连接发生错误:', error);
+      // EventSource 默认会自动尝试重连，通常不需要手动处理
+      // 如果需要彻底停止，可以在这里关闭
+      // eventSource.close();
+      // eventSource = null;
+      // 可以考虑在这里添加 UI 提示，告知用户连接中断
     };
-    console.log("SSE 连接已启动");
+
+    // 监听连接打开事件 (可选)
+    eventSource.onopen = function() {
+      console.log("SSE 连接已成功建立。");
+      // 连接成功后，可能需要立即获取一次全量数据？或者依赖于服务器推送
+    };
+
+    console.log("SSE 事件监听器已设置。");
   }
 
-  // 停止 SSE 连接
+  /**
+   * 停止 SSE 连接
+   */
   function stopMessageStream() {
     if (eventSource) {
       eventSource.close(); // 关闭连接
       eventSource = null; // 清除引用
-      console.log("SSE 连接已关闭");
+      console.log("SSE 连接已关闭。");
     }
   }
 
-  // 滚动事件监听器
-  messageArea.addEventListener('scroll', onUserScroll);
-  messageHttp.addEventListener('scroll', onUserScroll);
-  messageDownload.addEventListener('scroll', onUserScroll);
-
-  // 初始化默认页面
-  showPage('pageMessage');
+  // --- 事件监听器绑定 ---
+  // 滚动事件 (确保所有相关容器都监听)
+  if (messageArea) messageArea.addEventListener('scroll', onUserScroll);
+  if (messageHttp) messageHttp.addEventListener('scroll', onUserScroll);
+  if (messageDownload) messageDownload.addEventListener('scroll', onUserScroll); // 添加 messageDownload 的监听
 
-  // 表单异步提交（获取 Channel-ID）
-  inputForm && inputForm.addEventListener('submit', function(event) {
-    event.preventDefault();
-    const content = inputOutput.value;
-    fetch('getid', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ content })
-    })
+  // Channel ID 表单异步提交
+  if (inputForm) {
+    inputForm.addEventListener('submit', function(event) {
+      event.preventDefault(); // 阻止表单默认提交行为
+      const content = inputOutput.value.trim(); // 获取并去除首尾空格
+      if (!content) {
+        alert('请输入内容！');
+        return;
+      }
+      // 可以添加一个加载状态提示
+      console.log("正在提交内容获取 Channel ID...");
+      fetch('getid', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json' // 明确希望接收 JSON
+        },
+        body: JSON.stringify({ content: content }) // 发送 JSON 数据
+      })
       .then(response => {
         if (!response.ok) {
-          throw new Error('网络响应异常');
+          // 如果服务器返回错误状态码，尝试读取错误信息
+          return response.json().catch(() => {
+            // 如果无法解析 JSON 错误体，抛出通用错误
+            throw new Error(`网络响应错误: ${response.status} ${response.statusText}`);
+          }).then(errorData => {
+            // 如果解析成功，抛出包含服务器信息的错误
+            throw new Error(errorData.error || `请求失败: ${response.status}`);
+          });
+        }
+        return response.json(); // 解析成功的 JSON 响应
+      })
+      .then(data => {
+        if (data && data.response) {
+           inputOutput.value = data.response; // 更新输入框内容
+          console.log("成功获取 Channel ID:", data.response);
+        } else {
+          console.warn("服务器响应格式不正确:", data);
+          alert('服务器返回数据格式错误！');
         }
-        return response.json();
       })
-      .then(data => inputOutput.value = data.response)
       .catch(error => {
-        console.error('请求失败:', error);
-        alert('请求失败，请稍后重试！');
-      });
-  });
-
-  // 粘贴功能
-  pasteBtn.addEventListener('click', function() {
-    if (navigator.clipboard && navigator.clipboard.readText) {
-      navigator.clipboard.readText().then(text => {
-        inputOutput.value = text;
-        inputOutput.focus();
-      }).catch(err => {
-        console.warn("剪贴板读取失败:", err);
-        alert("无法读取剪贴板，请手动粘贴！");
+        console.error('获取 Channel ID 请求失败:', error);
+        alert(`请求失败：${error.message || '请检查网络或联系管理员'}`);
       });
-    } else {
-      try {
-        inputOutput.focus();
-        document.execCommand('paste');
-      } catch (err) {
-        console.warn("execCommand 粘贴失败:", err);
-        alert("您的浏览器不支持自动粘贴，请手动操作！");
+    });
+  }
+
+  // 粘贴按钮
+  if (pasteBtn) {
+    pasteBtn.addEventListener('click', function() {
+      if (navigator.clipboard && navigator.clipboard.readText) {
+        navigator.clipboard.readText()
+          .then(text => {
+            inputOutput.value = text;
+            inputOutput.focus(); // 粘贴后聚焦
+          })
+          .catch(err => {
+            console.warn("通过 navigator.clipboard 读取剪贴板失败:", err);
+            alert("无法自动读取剪贴板，请手动粘贴 (Ctrl+V)！");
+            inputOutput.focus(); // 提示后聚焦，方便手动粘贴
+          });
+      } else {
+        // 备选方案 (可能在非 HTTPS 或旧浏览器中需要)
+        try {
+          inputOutput.focus();
+          // execCommand 已不推荐使用，但作为后备
+          if (!document.execCommand('paste')) {
+            throw new Error('execCommand paste failed');
+          }
+        } catch (err) {
+          console.warn("execCommand 粘贴失败:", err);
+          alert("您的浏览器不支持自动粘贴，请手动操作 (Ctrl+V)！");
+          inputOutput.focus();
+        }
       }
-    }
-  });
-
-  // 复制功能
-  copyBtn.addEventListener('click', function() {
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(inputOutput.value).catch(err => {
-        console.warn("复制失败:", err);
-        alert("无法复制，请手动选择文本后按 Ctrl+C 复制！");
-      });
-    } else {
-      try {
-        inputOutput.select();
-        document.execCommand('copy');
-      } catch (err) {
-        console.warn("execCommand 复制失败:", err);
-        alert("您的浏览器不支持复制，请手动操作！");
+    });
+  }
+
+  // 复制按钮
+  if (copyBtn) {
+    copyBtn.addEventListener('click', function() {
+      const textToCopy = inputOutput.value;
+      if (!textToCopy) return; // 没有内容则不复制
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => {
+            // 可以给用户一个成功的视觉反馈，例如按钮变色或提示
+            console.log("内容已复制到剪贴板");
+            // alert("已复制！"); // 或者使用更友好的提示方式
+          })
+          .catch(err => {
+            console.warn("通过 navigator.clipboard 写入剪贴板失败:", err);
+            alert("自动复制失败，请手动选择文本后按 Ctrl+C 复制！");
+            inputOutput.select(); // 选中内容方便手动复制
+          });
+      } else {
+        // 备选方案
+        try {
+          inputOutput.select(); // 选中输入框中的文本
+          if (!document.execCommand('copy')) { // 执行复制命令
+            throw new Error('execCommand copy failed');
+          }
+          console.log("内容已通过 execCommand 复制");
+          // alert("已复制！");
+        } catch (err) {
+          console.warn("execCommand 复制失败:", err);
+          alert("您的浏览器不支持自动复制，请手动选择文本后按 Ctrl+C 复制！");
+          inputOutput.select();
+        }
       }
-    }
-  });
-
-  // 清空输入框
-  clearBtn.addEventListener('click', function() {
-    inputOutput.value = '';
-  });
-
-  // 菜单项点击事件委托
-  menu.addEventListener('click', function(event) {
-    const target = event.target;
-    if (target.tagName.toLowerCase() === 'li' && target.dataset.page) {
-      showPage(target.dataset.page);
-    }
-  });
+    });
+  }
 
-  // 菜单切换按钮事件绑定
-  toggleMenuBtn.addEventListener('click', toggleMenu);
+  // 清空按钮
+  if (clearBtn) {
+    clearBtn.addEventListener('click', function() {
+      inputOutput.value = '';
+      inputOutput.focus(); // 清空后聚焦
+    });
+  }
+
+  // 菜单项点击事件 (使用事件委托)
+  if (menu) {
+    menu.addEventListener('click', function(event) {
+      // 确保点击的是 LI 元素且具有 data-page 属性
+      const target = event.target.closest('li[data-page]');
+      if (target) {
+        const pageId = target.dataset.page;
+        showPage(pageId); // 调用页面切换函数
+      }
+    });
+  }
 
-  // 针对手机端，初始化时隐藏菜单
+  // 菜单切换按钮
+  if (toggleMenuBtn) {
+    toggleMenuBtn.addEventListener('click', toggleMenu);
+  }
+
+  // --- 初始化 ---
+  // 根据屏幕宽度初始化菜单状态
   if (window.innerWidth <= 600) {
     menu.classList.add('hidden');
     toggleMenuBtn.style.left = '0px';
     toggleMenuBtn.textContent = '❯';
+  } else {
+    // 确保大屏幕下按钮初始状态正确 (如果默认不是展开的话)
+    if (menu.classList.contains('hidden')) {
+      toggleMenuBtn.style.left = '0px';
+      toggleMenuBtn.textContent = '❯';
+    } else {
+      toggleMenuBtn.style.left = 'var(--menu-width)';
+      toggleMenuBtn.textContent = '❮';
+    }
   }
-})();
+
+  // 初始化时显示默认页面 (例如消息页面)
+  showPage('pageMessage');
+
+})(); // IIFE 结束

{podflow-20250427.dist-info → podflow-20250429.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: podflow
-Version: 20250427
+Version: 20250429
 Summary: A podcast server that includes YouTube and BiliBili
 Home-page: https://github.com/gruel-zxz/podflow
 Author: gruel_zxz

{podflow-20250427.dist-info → podflow-20250429.dist-info}/RECORD

@@ -2,7 +2,7 @@ podflow/__init__.py,sha256=aXqsJ8qN7VHvMdcgtRwR1p95my8mj9QsjOHklypRBiU,7381
 podflow/download_and_build.py,sha256=GKQ1uX8Nuwdhr4wgnGr3jP1Mu0llRUPFcboQ3S05WkU,671
 podflow/ffmpeg_judge.py,sha256=wM49pPXOFwFAA_8TKHal5fV6ka9sAA87yGQMDOssvXo,1340
 podflow/main.py,sha256=Cz2E33-Kcc_1_oxNs4Z1OoqJYhonmClsrtoCW1oQmZA,739
-podflow/main_podcast.py,sha256=P7aSJSpLLTO2AHtqZLNKMLEdzYcwDM9PSFfuY2KdjQs,12374
+podflow/main_podcast.py,sha256=D1eBxeGNks0q8_zhVG2uUuE1pBcPEXGDAfd1CwAtuOs,12321
 podflow/main_upload.py,sha256=H_T5KQMYzToqzQbjGQ6DWDGziy8iMnpmf7A1qOStJuo,2296
 podflow/parse_arguments.py,sha256=h3a7EaRZS04kNMFYbxTW9Ch29KgZ7dyS-yqEEt_etQI,2592
 podflow/basic/__init__.py,sha256=CAfI6mVQtz7KKbAiTIZ9_IbvaTXeAqxR1U7ov9GDoDo,44
@@ -36,13 +36,13 @@ podflow/download/__init__.py,sha256=1lATXiOAEx5oDUDR99mQRiTrQlQ9CQkJNAKpsLrnPCo,
 podflow/download/convert_bytes.py,sha256=6Q3TcPGzCO2FlhOKWbp9RB_GPmfuyKY5suIyE9EJf6k,543
 podflow/download/delete_part.py,sha256=wjY6WulpUMjLx38on0kTLXj0gA04rIuKAdwFidZtWGU,679
 podflow/download/dl_aideo_video.py,sha256=HoiAYf1QpHG17U9y--ixKOT2aupeGA2vAleVvC1JoV8,10765
-podflow/download/show_progress.py,sha256=Mg_HM5HZPM4MVZ8Nu0zJ28Io-dyTBDc-9P89nkY2DI8,2208
+podflow/download/show_progress.py,sha256=y46chchUC9eZCg4ZdNMFnx_bXJQV_IUq15jVzZtLlJM,2248
 podflow/download/wait_animation.py,sha256=AUTvszXF89QA7XYjocFIauPKV7Qj8cFqry44teClaLQ,1314
 podflow/download/youtube_and_bilibili_download.py,sha256=VCEhz6pGXFWXusdbGWqkCzi4f4VsKQVn6sZz1pfGsns,1335
 podflow/httpfs/__init__.py,sha256=BxEXkufjcx-a0F7sDVXo65hmyANqCCbZUd6EH9i8T2c,45
-podflow/httpfs/app_bottle.py,sha256=cN5cxz1uFJnNH890NvXM4eHkbFMLxv78yhiPc4IO5RU,20676
+podflow/httpfs/app_bottle.py,sha256=_6yXYEMf9hxNwnj1kC1Sjf--fca3P8wadlmTKpcKSu8,20680
 podflow/httpfs/browser.py,sha256=BJ4Xkfiki_tDr0Sc9RqAcEfIVpkAZ3RFOwo0aMHlY3U,197
-podflow/httpfs/download_bar.py,sha256=BS-8FvQr5xIS5jNIMOvqtQ3NxgpbM52cvTO1XvAfXeM,877
+podflow/httpfs/download_bar.py,sha256=0n3HATEO3pdsIpx-E_IZG9OlXa6u-9SeBCoZVgUutyc,965
 podflow/httpfs/get_channelid.py,sha256=gcwy4IVHBWNQz7qPCpjwiAklGFLRGzvM33-UZz7oFvo,2296
 podflow/httpfs/port_judge.py,sha256=l_nLpsSiIhAzfJGCOWyYC-KkCCWPUW2ybe_5hdMOEzE,764
 podflow/httpfs/progress_bar.py,sha256=mMkP92SrZZ-IBFz9ombWxzRJfMq20h5IbSc_eFcbZZA,682
@@ -83,9 +83,9 @@ podflow/remove/remove_dir.py,sha256=xQIhrnqnYjMzXjoSWaTvm7JwPYOFTN1muuTPdaLDXpQ,
 podflow/remove/remove_file.py,sha256=8wAJQehs-XBqvu0vPlEme2_tt0FZxc5ELwGMxXA_558,982
 podflow/repair/__init__.py,sha256=Gpc1i6xiSLodKjjmzH66c_Y1z0HQ9E9CS3p95FRnVFM,45
 podflow/repair/reverse_log.py,sha256=Wc_vAH0WB-z1fNdWx7FYaVH4caRPtot7tDwDwFhmpz4,1106
-podflow/templates/index.html,sha256=e7BVTWTNWrYWAUxqV9NO4BOdaKpvQSgbi4uss3QXqAg,2243
-podflow/templates/css/index.css,sha256=PwWvEfpHsT0-5bxauNNToo0_ppDF-3drYOs3Zl_bMJc,9529
-podflow/templates/js/index.js,sha256=awngRPOcOcEY0bUYMN7xA7b_sxrkaD9oOHZz9NWKUUM,19900
+podflow/templates/index.html,sha256=QFzKmMVfEgwaP-KRGJ_PuU178IS1G3Eojaw55R8aJC4,2302
+podflow/templates/css/index.css,sha256=dgrlonF2BYdAtIFYpDChvSBnXAndbdoyY6c2ysOgdL0,9641
+podflow/templates/js/index.js,sha256=D_vcWiUzWjdvaSc0zvk3wSwX3G5wjAfnFjBaBNnvtHI,30465
 podflow/templates/js/qrcode.min.js,sha256=xUHvBjJ4hahBW8qN9gceFBibSFUzbe9PNttUvehITzY,19927
 podflow/upload/__init__.py,sha256=AtOSXDrE5EjUe3z-iBd1NTDaH8n_X9qA5WXdBLkONjA,45
 podflow/upload/add_upload.py,sha256=_2-V0z75Lwu-PUCfMD9HOSxZTB102yZlZW5hSdlHcsc,1432
@@ -101,8 +101,8 @@ podflow/youtube/__init__.py,sha256=pgXod8gq0IijZxIkPSwgAOcb9JI5rd1mqMomoR7bcJ4,4
 podflow/youtube/build.py,sha256=67m74rQOrvqU6ZZybP85ORpg3pOCkpoikttBbtO_PxY,12315
 podflow/youtube/get.py,sha256=oO32GjTFvUgP5AfFX5AlIuXU2UT6QtOUOXWLFzi8XtI,17157
 podflow/youtube/login.py,sha256=KYl--ya6Z1u0uIcOp9l8i3DIIj9hsYUDH4dtJjI0MLM,1295
-podflow-20250427.dist-info/METADATA,sha256=grRFyZf4oiugxaC81-DTGPujyq4OwJM0PdqmQVuR1VE,14195
-podflow-20250427.dist-info/WHEEL,sha256=tZoeGjtWxWRfdplE7E3d45VPlLNQnvbKiYnx7gwAy8A,92
-podflow-20250427.dist-info/entry_points.txt,sha256=mn7hD_c_dmpKe3XU0KNekheBvD01LhlJ9htY-Df0j2A,131
-podflow-20250427.dist-info/top_level.txt,sha256=fUujhhz-RrMI8aGvi-3Ey5y7FQnpOOgoFw9OWM3yLCU,8
-podflow-20250427.dist-info/RECORD,,
+podflow-20250429.dist-info/METADATA,sha256=CpRALr7Yyq_jsbypM6B-xyGBfiYb0PROY1GmNRr2FJ8,14195
+podflow-20250429.dist-info/WHEEL,sha256=tZoeGjtWxWRfdplE7E3d45VPlLNQnvbKiYnx7gwAy8A,92
+podflow-20250429.dist-info/entry_points.txt,sha256=mn7hD_c_dmpKe3XU0KNekheBvD01LhlJ9htY-Df0j2A,131
+podflow-20250429.dist-info/top_level.txt,sha256=fUujhhz-RrMI8aGvi-3Ey5y7FQnpOOgoFw9OWM3yLCU,8
+podflow-20250429.dist-info/RECORD,,