feat: 重构移动端布局并新增专用单词本页面

index.html

@@ -6,17 +6,29 @@
   <title>Mi Diario — 西班牙语日记</title>
   <link rel="stylesheet" href="style.css">
 </head>
-<body>
-  <nav id="mobile-nav">
-    <button data-view="list" class="active">📋 日记</button>
-    <button data-view="editor">✏️ 编辑</button>
-    <button data-view="translate">🌐 翻译</button>
-    <button data-view="mine">👤 我的</button>
-  </nav>
+<body data-view="editor">
+  <header id="mobile-header">
+    <button id="menu-btn" title="菜单">☰</button>
+    <span id="mobile-title">Mi Diario</span>
+    <button id="translate-btn" title="翻译">🌐</button>
+  </header>
+  <div id="mobile-menu-overlay">
+    <div id="mobile-menu">
+      <div class="mobile-menu-head">Mi Diario</div>
+      <button data-menu="diary">📋 日记</button>
+      <a data-menu="wordbook" href="wordbook.html">📖 单词本</a>
+      <a data-menu="knowledge" href="knowledge.html">📚 语法速查</a>
+      <button data-menu="stats">📊 我的统计</button>
+      <button data-menu="password">🔑 修改密码</button>
+      <button data-menu="settings">⚙️ 设置</button>
+      <button data-menu="logout">🚪 退出</button>
+    </div>
+  </div>
 
   <div id="app">
     <aside id="panel-list">
       <div class="panel-header">
+        <button id="btn-back-list" title="返回编辑">←</button>
         <h2>📋 日记</h2>
         <button id="btn-new" title="新建日记">+</button>
       </div>
@@ -41,6 +53,7 @@
 
       <div id="user-area">
         <span id="user-name">未登录</span>
+        <a id="wordbook-link" href="wordbook.html">单词本</a>
         <button id="btn-settings" title="翻译设置">⚙️ 设置</button>
         <a id="admin-link" href="admin.html" style="display:none">用户管理</a>
         <button id="btn-change-password" style="display:none" title="修改密码">🔑 修改密码</button>