podflow 20250327__tar.gz → 20250330__tar.gz

{podflow-20250327 → podflow-20250330}/PKG-INFO

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

{podflow-20250327 → podflow-20250330}/podflow/__init__.py

@@ -119,6 +119,12 @@ class Application_gVar:
         self.upload_data = {}  # 上传用户账号密码字典
 
         self.shortcuts_url = {}  # 输出至shortcut的url字典
+        
+        self.index_message = {  # 图形界面显示信息字典
+            "podflow": [],  # 主窗口信息列表
+            "http": [],  # httpfs窗口信息列表
+            "enter": True,  # 是否换行
+        }
 
 
 # 参数变量

podflow-20250330/podflow/basic/time_print.py

@@ -0,0 +1,27 @@
+# podflow/basic/time_print.py
+# coding: utf-8
+
+from datetime import datetime
+from podflow import gVar
+from podflow.httpfs.ansi_to_html import ansi_to_html
+
+
+def time_print(text, Top=False, NoEnter=False, Time=True):
+    if Time:
+        text = f"{datetime.now().strftime('%H:%M:%S')}|{text}"
+    if Top:
+        text = f"\r{text}"
+    if NoEnter:
+        print(text, end="")
+    else:
+        print(text)
+    text = ansi_to_html(text)
+    if not gVar.index_message["enter"] and gVar.index_message["podflow"]:
+        if Top:
+            gVar.index_message["podflow"][0] = text
+        else:
+            gVar.index_message["podflow"][0] += (text)
+    else:
+        gVar.index_message["podflow"].append(text)
+    if NoEnter:
+        gVar.index_message["enter"] = False

{podflow-20250327 → podflow-20250330}/podflow/basic/write_log.py

@@ -3,6 +3,8 @@
 
 import re
 from datetime import datetime
+from podflow import gVar
+from podflow.httpfs.ansi_to_html import ansi_to_html
 
 
 # 日志模块
@@ -34,4 +36,5 @@ def write_log(
         formatted_time_mini = current_time.strftime("%H:%M:%S")
         log_print = f"{formatted_time_mini}|{log}" if time_display else f"{log}"
         log_print = f"{log_print}|{suffix}" if suffix else f"{log_print}"
+        gVar.index_message["podflow"].append(ansi_to_html(log_print))
         print(log_print)

podflow-20250330/podflow/httpfs/ansi_to_html.py

@@ -0,0 +1,52 @@
+# podflow/httpfs/ansi_to_htmlpy
+# coding: utf-8
+
+import re
+import html
+
+
+def ansi_to_html(ansi_text):
+    html_output = ""
+    ansi_codes = {
+        "\033[30m": "color: black;",  # 黑色
+        "\033[31m": "color: red;",  # 红色
+        "\033[32m": "color: green;",  # 绿色
+        "\033[33m": "color: yellow;",  # 黄色
+        "\033[34m": "color: blue;",  # 蓝色
+        "\033[35m": "color: magenta;",  # 品红
+        "\033[36m": "color: cyan;",  # 青色
+        "\033[37m": "color: white;",  # 白色
+        "\033[90m": "color: gray;",  # 亮黑色 (通常显示为灰色)
+        "\033[91m": "color: #ff69b4;",  # 亮红色 (例如：热粉色)
+        "\033[92m": "color: #90ee90;",  # 亮绿色 (例如：浅绿色)
+        "\033[93m": "color: #ffff00;",  # 亮黄色 (通常与黄色相同)
+        "\033[94m": "color: #add8e6;",  # 亮蓝色 (例如：浅蓝色)
+        "\033[95m": "color: #ff00ff;",  # 亮品红 (通常与品红相同)
+        "\033[96m": "color: #00ffff;",  # 亮青色 (通常与青色相同)
+        "\033[97m": "color: #f0f8ff;",  # 亮白色 (例如：爱丽丝蓝)
+        "\033[0m": "",  # 重置
+    }
+    inside_span = False
+
+    parts = re.split(r"(\033\[\d+m)", ansi_text)
+
+    for part in parts:
+        if part in ansi_codes:
+            style = ansi_codes[part]
+            if style:
+                if inside_span:
+                    html_output += "</span>"
+                html_output += f'<span style="{style}">'
+                inside_span = True
+            elif inside_span:  # Reset code
+                html_output += "</span>"
+                inside_span = False
+        else:
+            escaped_part = html.escape(part)
+            html_output += escaped_part
+
+    if inside_span:
+        html_output += "</span>"
+
+    #html_output = html_output.replace("\n", "</p><p>")
+    return html_output

{podflow-20250327 → podflow-20250330}/podflow/httpfs/app_bottle.py

@@ -13,6 +13,7 @@ from podflow.basic.file_save import file_save
 from podflow.basic.write_log import write_log
 from podflow.upload.build_hash import build_hash
 from podflow.upload.time_key import check_time_key
+from podflow.httpfs.ansi_to_html import ansi_to_html
 from podflow.httpfs.get_channelid import get_channelid
 
 
@@ -40,6 +41,7 @@ class bottle_app:
             self.app_bottle.route("/index", callback=self.index)
             self.app_bottle.route("/getid", method="POST", callback=self.getid)
             self.app_bottle.route("/<filename:path>", callback=self.serve_static)
+            self.app_bottle.route("/message", callback=self.message)
 
     # 设置日志文件名及写入判断
     def set_logname(self, logname="httpfs.log", http_fs=False):
@@ -92,7 +94,9 @@ class bottle_app:
             )
         for suffix in suffixs:
             filename = filename.replace(suffix, "")
-        self.bottle_print.append(f"{now_time}|{client_ip} {filename} {status}")
+        bottle_text = f"{now_time}|{client_ip} {filename} {status}"
+        self.bottle_print.append(bottle_text)
+        gVar.index_message["http"].append(ansi_to_html(bottle_text))
 
     # CherryPy 服务器打印模块
     def cherry_print(self, flag_judgment=True):
@@ -376,23 +380,30 @@ class bottle_app:
                     },
                 }
 
+    # 使用pkg_resources获取模板文件路径
     def index(self):
-        # 使用pkg_resources获取模板文件路径
         template_path = pkg_resources.resource_filename('podflow', 'templates/index.html')
         with open(template_path, 'r', encoding="UTF-8") as f:
             html_content = f.read()
+        self.print_out("index", 200)
         return html_content
 
+    # 获取 JSON 数据，Bottle 会自动解析请求体中的 JSON 数据
     def getid(self):
-        # 获取 JSON 数据，Bottle 会自动解析请求体中的 JSON 数据
-        getid_data = request.json
-        # 提取内容（若不存在则默认为空字符串）
-        content = getid_data.get("content", "") if getid_data else ""
+        if getid_data := request.json:
+            content = getid_data.get("content", "")
+        else:
+            content = ""
         response_message = get_channelid(content)
         self.print_out("channelid", 200)
         # 设置响应头为 application/json
         response.content_type = 'application/json'
         return {"response": response_message}
 
+    # 处理消息的接收和发送。
+    def message(self):
+        response.content_type = 'application/json'
+        return gVar.index_message # 获取消息列表
+
 
 bottle_app_instance = bottle_app()

{podflow-20250327 → podflow-20250330}/podflow/makeup/make_up_file_format_mod.py

@@ -31,9 +31,9 @@ def makeup_format(video_id, makeup_format_lock):
                     "channel_data/yt_dlp_youtube.txt",
                 )
                 if fail_info in makeup_id_format:
-                    makeup_id_format = f"\x1b[31m{fail_info}\x1b[0m(Cookies错误)"
+                    makeup_id_format = f"\033[31m{fail_info}\033[0m(Cookies错误)"
             else:
-                makeup_id_format = f"\x1b[31m{fail_info}\x1b[0m(需要Cookies)"
+                makeup_id_format = f"\033[31m{fail_info}\033[0m(需要Cookies)"
             break
     if isinstance(makeup_id_format, list):
         if len(makeup_id_format) == 1:

{podflow-20250327 → podflow-20250330}/podflow/message/get_youtube_and_bilibili_video_format.py

@@ -53,15 +53,15 @@ def get_youtube_and_bilibili_video_format(
                         gVar.video_id_update_format[id_num]["cookie"],
                     )
                     if fail_info in id_update_format:
-                        id_update_format = f"\x1b[31m{fail_info}\x1b[0m(Cookies错误)"
+                        id_update_format = f"\033[31m{fail_info}\033[0m(Cookies错误)"
                 else:
-                    id_update_format = f"\x1b[31m{fail_info}\x1b[0m(需要Cookies)"
+                    id_update_format = f"\033[31m{fail_info}\033[0m(需要Cookies)"
                 break
     else:
         if gVar.video_id_update_format[id_num]["power"] is True and (
             "试看" in id_update_format or id_update_format == "无法获取音频ID"
         ):
-            id_update_format = "\x1b[31m充电专属\x1b[0m"
+            id_update_format = "\033[31m充电专属\033[0m"
     if isinstance(id_update_format, list):
         if len(id_update_format) == 1:
             one_format(id_update_format, id_num)

podflow-20250330/podflow/templates/index.html

@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Podflow</title>
+  <style>
+    /* 定义颜色变量 - 浅色模式 */
+    :root {
+      --bg-color: #f8f9fa;
+      --text-color: #333333;
+      --secondary-text: #666666;
+      --input-bg: #ffffff;
+      --input-border: #cccccc;
+      --button-bg: #007bff;
+      --button-hover: #0056b3;
+      --button-text: #ffffff;
+      --button-shadow: hsla(0, 0%, 0%, 0.20);
+      --menu-bg: #f0f0f0;
+      --menu-text: #333333;
+      --menu-width: 170px;
+      --menu-selected-bg: #cccccc;
+      .ansi-black { color: black; }
+      .ansi-red { color: red; }
+      .ansi-green { color: green; }
+      .ansi-yellow { color: yellow; }
+      .ansi-blue { color: blue; }
+      .ansi-magenta { color: magenta; }
+      .ansi-cyan { color: cyan; }
+      .ansi-white { color: white; }
+      .ansi-bright-black { color: gray; }
+      .ansi-bright-red { color: #ff69b4; }
+      .ansi-bright-green { color: #90ee90; }
+      .ansi-bright-yellow { color: #ffff00; }
+      .ansi-bright-blue { color: #add8e6; }
+      .ansi-bright-magenta { color: #ff00ff; }
+      .ansi-bright-cyan { color: #00ffff; }
+      .ansi-bright-white { color: #f0f8ff; }
+    }
+    
+    /* 深色模式变量 */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg-color: #222222;
+        --text-color: #e0e0e0;
+        --secondary-text: #aaaaaa;
+        --input-bg: #333333;
+        --input-border: #555555;
+        --button-bg: #0062cc;
+        --button-hover: #0069d9;
+        --button-text: #f0f0f0;
+        --button-shadow: hsla(0, 0%, 0%, 0.40);
+        --menu-bg: #333333;
+        --menu-text: #e0e0e0;
+        --menu-selected-bg: #555555;
+        .ansi-black { color: #d3d3d3; /* LightGray */ }
+        .ansi-red { color: #ff4d4d; /* Lighter Red */ }
+        .ansi-green { color: #98fb98; /* PaleGreen */ }
+        .ansi-yellow { color: #ffff66; /* Lighter Yellow */ }
+        .ansi-blue { color: #87cefa; /* LightSkyBlue */ }
+        .ansi-magenta { color: #ff80ff; /* Lighter Magenta */ }
+        .ansi-cyan { color: #00ced1; /* DarkTurquoise */ }
+        .ansi-white { color: #333; /* Dark Gray */ }
+        .ansi-bright-black { color: #a9a9a9; /* DarkGray */ }
+        .ansi-bright-red { color: #ff8080; /* Brighter Red */ }
+        .ansi-bright-green { color: #b0f0b0; /* Brighter Green */ }
+        .ansi-bright-yellow { color: #ffff80; /* Brighter Yellow */ }
+        .ansi-bright-blue { color: #a0cfff; /* Brighter Blue */ }
+        .ansi-bright-magenta { color: #ff80ff; /* Brighter Magenta */ }
+        .ansi-bright-cyan { color: #80ffff; /* Brighter Cyan */ }
+        .ansi-bright-white { color: #fff; /* White */ }
+      }
+    }
+    
+    /* 基本样式 */
+    body {
+      font-family: Arial, sans-serif;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      transition: background-color 0.3s, color 0.3s;
+      margin: 0;
+      display: flex;
+    }
+    nav {
+      width: var(--menu-width);
+      background-color: var(--menu-bg);
+      color: var(--menu-text);
+      height: 100vh;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      transition: width 0.3s, padding 0.3s, color 0.3s;
+    }
+    nav.hidden {
+      width: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+    nav ul {
+      list-style: none;
+      padding: 0;
+    }
+    nav h3 {
+      text-align: center;
+      margin: 20px 0 0;
+      font-size: 20px;
+    }
+    nav li {
+      margin: 5px 0;
+      cursor: pointer;
+      transition: background-color 0.3s, color 0.3s;
+      padding: 0 20px;
+      height: 40px;
+      line-height: 40px;
+    }
+    nav li:hover {
+      background-color: var(--menu-selected-bg);
+      color: var(--button-hover);
+    }
+    main {
+      flex: 1;
+      padding: 40px;
+      max-width: 520px;
+      transition: margin-left 0.3s;
+    }
+    main.full {
+      margin-left: 0;
+    }
+    
+    /* 表单与消息区域共用样式 */
+    .common-area {
+      width: 100%;
+      max-width: 520px;
+      font-size: 16px;
+      padding: 2px;
+      border: 1px solid var(--input-border);
+      border-radius: 4px;
+      background-color: var(--input-bg);
+      color: var(--text-color);
+      transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+      box-sizing: border-box;
+      line-height: 1.1;
+      overflow-x: auto; /* 当内容超出宽度时显示水平滚动条（可选） */
+      overflow-y: auto;
+    }
+    textarea {
+      height: 250px;
+    }
+    #messageArea {
+      height: 250px;
+    }
+    #messageHttp {
+      height: 150px;
+    }
+    .button-container {
+      margin-top: 10px;
+    }
+    button {
+      background-color: var(--button-bg);
+      color: var(--button-text);
+      border: none;
+      padding: 12px 18px;
+      font-size: 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.3s, box-shadow 0.3s;
+      box-shadow: 2px 2px 8px var(--button-shadow);
+      margin: 5px;
+    }
+    button:hover {
+      background-color: var(--button-hover);
+    }
+    .hint {
+      font-size: 14px;
+      color: var(--secondary-text);
+      margin-top: 10px;
+    }
+    
+    /* 菜单切换按钮 */
+    #toggleMenu {
+      width: 35px;
+      height: 40px;
+      position: fixed;
+      left: var(--menu-width);
+      top: 5px;
+      background: var(--menu-bg);
+      border: none;
+      font-size: 20px;
+      color: var(--text-color);
+      cursor: pointer;
+      transition: left 0.3s, color 0.3s;
+      border-radius: 0 10px 10px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 0px 0px 8px var(--button-shadow);
+      margin: 0;
+    }
+    #toggleMenu:hover {
+      color: var(--button-hover);
+    }
+    
+    /* 手机端优化 */
+    @media (max-width: 600px) {
+      #messageArea, textarea {
+        max-width: none;
+      }
+      textarea {
+        font-size: 18px;
+      }
+      button {
+        width: 90%;
+        font-size: 18px;
+      }
+      nav {
+        position: fixed;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- 菜单栏 -->
+  <nav id="menu">
+    <h3>菜单栏</h3>
+    <ul>
+      <li data-page="pageMessage">Podflow 运行情况</li>
+      <li data-page="pageChannel">获取媒体频道 ID</li>
+    </ul>
+  </nav>
+  <!-- 菜单切换按钮 -->
+  <button id="toggleMenu">❮</button>
+  <!-- 主体区域 -->
+  <main id="main">
+    <!-- 获取 Channel-ID 页面 -->
+    <section id="pageChannel" style="display: none;">
+      <h2>获取媒体频道 ID</h2>
+      <form id="inputForm" method="post" action="getid">
+        <label for="inputOutput">请输入：</label><br>
+        <textarea class="common-area" name="inputOutput" id="inputOutput"></textarea><br>
+        <div class="button-container">
+          <button type="button" id="pasteBtn">📋 粘贴</button>
+          <button type="submit">✅ 提交</button>
+          <button type="button" id="copyBtn">📄 拷贝</button>
+          <button type="button" id="clearBtn">🗑️ 清空</button>
+        </div>
+        <p class="hint">📌 如果粘贴按钮无效，请长按输入框手动粘贴。</p>
+      </form>
+    </section>
+    <!-- 消息滚动显示页面 -->
+    <section id="pageMessage">
+      <h2>Podflow 运行情况</h2>
+      <form>
+        <label>构建服务：</label><br>
+        <div class="common-area" id="messageArea"></div>
+        <label>服务器：</label><br>
+        <div class="common-area" id="messageHttp"></div>
+      </form>
+    </section>
+  </main>
+  <script>
+    (function() {
+      // 缓存常用节点
+      const menu = document.getElementById('menu');
+      const toggleMenuBtn = document.getElementById('toggleMenu');
+      const mainArea = document.getElementById('main');
+      const pages = {
+        pageChannel: document.getElementById('pageChannel'),
+        pageMessage: document.getElementById('pageMessage')
+      };
+      const inputForm = document.getElementById('inputForm');
+      const inputOutput = document.getElementById('inputOutput');
+      const messageArea = document.getElementById('messageArea');
+      const messageHttp = document.getElementById('messageHttp');
+      const pasteBtn = document.getElementById('pasteBtn');
+      const copyBtn = document.getElementById('copyBtn');
+      const clearBtn = document.getElementById('clearBtn');
+
+      let pollingTimer = null;
+
+      // 菜单切换函数
+      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 = '❮';
+        }
+      }
+
+      // 根据页面标识显示对应面板
+      function showPage(pageId) {
+        Object.values(pages).forEach(page => page.style.display = 'none');
+        if (pages[pageId]) {
+          pages[pageId].style.display = 'block';
+          // 手机模式下自动隐藏菜单
+          if (window.innerWidth <= 600 && !menu.classList.contains('hidden')) {
+            toggleMenu();
+          }
+          pageId === 'pageMessage' ? startMessagePolling() : stopMessagePolling();
+        }
+      }
+
+      // 初始化默认页面
+      showPage('pageMessage');
+
+      let lastMessage = { podflow: [], http: [] };
+      let userScrolled = false;
+    
+      // 监听滚动事件，检测用户是否手动滚动
+      function onUserScroll(event) {
+        const element = event.target;
+        // 判断是否接近底部
+        const nearBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 10;
+        userScrolled = !nearBottom;
+      }
+    
+      messageArea.addEventListener('scroll', onUserScroll);
+      messageHttp.addEventListener('scroll', onUserScroll);
+
+      // 轮询消息更新，更新 messageArea 与 messageHttp
+      function getMessages() {
+        fetch('message')
+          .then(response => response.json()) // 解析 JSON 数据
+          .then(data => {
+            if (JSON.stringify(data) !== JSON.stringify(lastMessage)) {
+              // 追加新消息
+              appendMessages(messageArea, data.podflow, lastMessage.podflow);
+              appendMessages(messageHttp, data.http, lastMessage.http);
+              lastMessage = data;
+            }
+          })
+          .catch(error => console.error('获取消息失败:', error));
+      }
+
+      function appendMessages(container, newMessages, oldMessages) {
+        // 判断当前是否在底部
+        const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10;
+    
+        // 只追加新数据，避免重复渲染
+        if (newMessages.length === oldMessages.length && newMessages.length > 0) {
+          const lastNewMessage = newMessages[newMessages.length - 1];
+          const lastOldMessage = oldMessages[oldMessages.length - 1];
+          if (lastNewMessage !== lastOldMessage) {
+            const br = document.createElement('br'); // 创建 <br> 标签
+            const textNode = document.createTextNode(lastNewMessage); // 创建文本节点
+
+            // 获取容器的最后一个子元素
+            const lastChild = container.lastElementChild;
+
+            // 如果容器有子元素，则替换最后一个（这里逻辑可能需要调整，因为你不再替换 <p>）
+            if (lastChild) {
+              container.removeChild(lastChild); // 移除最后一个元素
+              container.appendChild(textNode);   // 添加新的文本节点
+              container.appendChild(br);       // 添加换行符
+            } else {
+              container.appendChild(textNode);
+              container.appendChild(br);
+            }
+          }
+        } else {
+          // 如果 newMessages 和 oldMessages 元素数量不一致，则执行原来的添加逻辑
+          newMessages.slice(oldMessages.length).forEach(msg => {
+            const br = document.createElement('br');
+            const textNode = document.createTextNode(msg);
+            container.appendChild(textNode);
+            container.appendChild(br);
+          });
+        }
+    
+        // 如果用户没有主动滚动，才自动滚动到底部
+        if (!userScrolled) {
+          container.scrollTop = container.scrollHeight;
+        }
+      }
+
+      function startMessagePolling() {
+        getMessages();
+        pollingTimer = setInterval(getMessages, 1000);
+      }
+
+      function stopMessagePolling() {
+        if (pollingTimer !== null) {
+          clearInterval(pollingTimer);
+          pollingTimer = null;
+        }
+      }
+
+      startMessagePolling();
+
+      // 表单异步提交（获取 Channel-ID）
+      inputForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        const content = inputOutput.value;
+        fetch('getid', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content })
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('网络响应异常');
+          }
+          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("无法读取剪贴板，请手动粘贴！");
+          });
+        } else {
+          try {
+            inputOutput.focus();
+            document.execCommand('paste');
+          } catch (err) {
+            console.warn("execCommand 粘贴失败:", err);
+            alert("您的浏览器不支持自动粘贴，请手动操作！");
+          }
+        }
+      });
+
+      // 复制功能
+      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("您的浏览器不支持复制，请手动操作！");
+          }
+        }
+      });
+
+      // 清空输入框
+      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 (window.innerWidth <= 600) {
+        menu.classList.add('hidden');
+        toggleMenuBtn.style.left = '0px';
+        toggleMenuBtn.textContent = '❯';
+      }
+    })();
+  </script>
+</body>
+</html>