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

style.css

@@ -42,6 +42,40 @@ body {
   padding: 1rem;
 }
 
+#mobile-nav { display: none; }
+
+/* User area and stats */
+#user-area {
+  display: flex; align-items: center; gap: 0.4rem;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  flex-shrink: 0;
+}
+#user-area #user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#user-area button, #user-area a {
+  background: none; border: 1px solid var(--border); border-radius: 4px;
+  padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer;
+  color: var(--text-muted); text-decoration: none; white-space: nowrap;
+}
+#user-area button:hover, #user-area a:hover { border-color: var(--accent); color: var(--accent); }
+
+#stats-panel { border-top: 1px solid var(--border); flex-shrink: 0; max-height: 260px; overflow-y: auto; }
+#stats-content { padding: 0.6rem 1rem; font-size: 0.8rem; }
+.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin-top: 0.4rem; }
+.stat-item { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; }
+.stat-item .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
+.stat-item .stat-label { font-size: 0.7rem; color: var(--text-muted); }
+.daily-stats { margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
+
+.favorite-btn {
+  background: none; border: 1px solid var(--border); border-radius: 4px;
+  padding: 0.15rem 0.4rem; font-size: 0.75rem; cursor: pointer;
+  color: var(--text-muted); line-height: 1;
+}
+.favorite-btn.active { border-color: #f59f00; color: #f59f00; }
+.favorite-btn:hover { border-color: #f59f00; }
+
 #app {
   display: grid;
   grid-template-columns: 240px 1fr 280px;
@@ -272,10 +306,61 @@ body {
   opacity: 0.45; cursor: not-allowed;
 }
 
+/* Translation settings modal */
+#settings-modal-overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.4);
+  align-items: center; justify-content: center;
+  z-index: 120;
+}
+#settings-modal-overlay.show { display: flex; }
+#settings-modal-box {
+  background: var(--panel-bg); border-radius: var(--radius);
+  padding: 1.5rem; max-width: 480px; width: 90%;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  max-height: 90vh; overflow-y: auto;
+}
+#settings-modal-box h3 { font-size: 1rem; margin-bottom: 0.75rem; }
+#settings-modal-box label { display: block; font-size: 0.8rem; color: var(--text-muted); margin: 0.6rem 0 0.25rem; }
+#settings-modal-box select, #settings-modal-box input, #settings-modal-box textarea {
+  width: 100%; border: 1px solid var(--border); border-radius: 6px;
+  padding: 0.45rem 0.6rem; font-size: 0.85rem;
+  background: var(--bg); color: var(--text); outline: none;
+}
+#settings-modal-box select:focus, #settings-modal-box input:focus, #settings-modal-box textarea:focus {
+  border-color: var(--accent);
+}
+#settings-modal-box .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
+#settings-modal-box .modal-actions button {
+  padding: 0.4rem 1rem; border-radius: 6px; border: 1px solid var(--border);
+  cursor: pointer; font-size: 0.85rem;
+}
+#settings-modal-box .btn-confirm { background: var(--accent); color: #fff; border-color: var(--accent); }
+
 @media (max-width: 768px) {
-  body { padding: 0.5rem; }
-  #app { grid-template-columns: 1fr; }
-  #panel-list { max-height: 30vh; }
-  #panel-editor { min-height: 40vh; }
-  #panel-translate { max-height: 30vh; }
+  body { padding: 0; }
+  #mobile-nav {
+    display: flex; position: sticky; top: 0; z-index: 80;
+    background: var(--panel-bg); border-bottom: 1px solid var(--border);
+    padding: 0.4rem;
+  }
+  #mobile-nav button {
+    flex: 1; min-height: 40px; background: none; border: 1px solid var(--border);
+    border-radius: 6px; font-size: 0.85rem; cursor: pointer; color: var(--text-muted);
+  }
+  #mobile-nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+  #app { grid-template-columns: 1fr; gap: 0; padding: 0.5rem; }
+  #panel-list { max-height: calc(100vh - 60px); }
+  #panel-editor { min-height: calc(100vh - 60px); }
+  #panel-translate { max-height: calc(100vh - 60px); }
+
+  #panel-editor, #panel-translate, #stats-panel { display: none; }
+  body[data-view="editor"] #panel-editor { display: flex; }
+  body[data-view="editor"] #panel-list, body[data-view="editor"] #panel-translate, body[data-view="editor"] #stats-panel { display: none; }
+  body[data-view="translate"] #panel-translate { display: flex; }
+  body[data-view="translate"] #panel-list, body[data-view="translate"] #panel-editor, body[data-view="translate"] #stats-panel { display: none; }
+  body[data-view="mine"] #stats-panel { display: flex; }
+  body[data-view="mine"] #panel-list { display: flex; }
+  body[data-view="mine"] #entry-list, body[data-view="mine"] #grammar-quick { display: none; }
 }