feat: 阶段2 Python后端、用户管理、统计、单词收藏与响应式适配

index.html

@@ -7,6 +7,13 @@
   <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>
+
   <div id="app">
     <aside id="panel-list">
       <div class="panel-header">
@@ -31,6 +38,20 @@
           <li><a href="knowledge/comparacion-fonetica.html">三语语音对照</a></li>
         </ul>
       </div>
+
+      <div id="stats-panel" class="mobile-view-panel" data-view-panel="mine">
+        <div class="panel-header">
+          <h2>📊 我的统计</h2>
+        </div>
+        <div id="stats-content">登录后显示</div>
+      </div>
+
+      <div id="user-area">
+        <span id="user-name">未登录</span>
+        <button id="btn-settings" title="翻译设置">⚙️ 设置</button>
+        <a id="admin-link" href="admin.html" style="display:none">用户管理</a>
+        <button id="btn-logout" style="display:none">退出</button>
+      </div>
     </aside>
 
     <main id="panel-editor">
@@ -111,6 +132,30 @@
     </div>
   </div>
 
+  <!-- Translation settings modal -->
+  <div id="settings-modal-overlay">
+    <div id="settings-modal-box">
+      <h3>翻译设置</h3>
+      <label for="translator-type">翻译方式</label>
+      <select id="translator-type">
+        <option value="local">本地词典</option>
+        <option value="mymemory">MyMemory 免费接口</option>
+        <option value="custom">自定义接口</option>
+      </select>
+      <label for="api-url">自定义接口地址</label>
+      <input type="text" id="api-url" placeholder="https://example.com/translate">
+      <label for="api-key">接口密钥（可选）</label>
+      <input type="password" id="api-key" placeholder="API Key">
+      <label for="extra-config">扩展配置 JSON（可选）</label>
+      <textarea id="extra-config" rows="3" placeholder='{"result_key":"translatedText","headers":{}}'></textarea>
+      <div class="modal-actions">
+        <button class="btn-cancel" id="settings-cancel">取消</button>
+        <button class="btn-confirm" id="settings-save">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="api.js"></script>
   <script src="db.js"></script>
   <script src="b1-vocab.js"></script>
   <script src="translate.js"></script>