diff --git a/README.md b/README.md
index c31d1ef..2e60fbd 100644
--- a/README.md
+++ b/README.md
@@ -14,19 +14,70 @@
直接打开 `index.html` 即可使用（推荐 Edge / Chrome）。
+## 阶段2：Python 后端
+
+安装依赖：
+
+```powershell
+cd spanish-diary
+python -m pip install -r server/requirements.txt
+```
+
+启动服务：
+
+```powershell
+python server/app.py
+```
+
+浏览器访问：
+
+```text
+http://localhost:5000
+```
+
+默认管理员账号：
+
+```text
+用户名：admin
+密码：admin123
+```
+
+> 生产环境请先修改管理员密码，并通过环境变量设置 `SECRET_KEY`。
+
## 文件结构
```
index.html — 主页面
style.css — 主页面样式
app.js — 应用逻辑
+api.js — 后端 API 客户端
db.js — IndexedDB 数据存储
translate.js — 翻译模块
speech.js — 发音模块
+login.html — 登录/注册
+admin.html — 用户管理
knowledge.html — 知识库首页
knowledge/ — 6 个分类知识页面
+server/ — Python Flask 后端
```
## 数据存储
-阶段 1 使用浏览器 IndexedDB 本地存储，无需后端。后续计划迁移到 Python + SQLite。
+阶段 1 使用浏览器 IndexedDB 本地存储，无需后端。
+
+阶段 2 使用 SQLite 数据库：
+
+```text
+server/data/spanish_diary.db
+```
+
+## 阶段2 功能
+
+- 用户注册、登录、登出
+- 管理员添加、禁用、删除用户
+- 用户日记数据隔离
+- 共享知识库
+- 每用户翻译配置（本地 / MyMemory / 自定义接口）
+- 每用户日记统计
+- 每用户单词收藏
+- 手机、平板、桌面响应式适配
diff --git a/admin.html b/admin.html
new file mode 100644
index 0000000..c410cf3
--- /dev/null
+++ b/admin.html
@@ -0,0 +1,149 @@
+
+
+
+
+
+ 用户管理 — Mi Diario
+
+
+
+
+ ← 返回日记
+ 用户管理
+
+
+
+
+
+
+
+
+
+
diff --git a/api.js b/api.js
new file mode 100644
index 0000000..163c5e3
--- /dev/null
+++ b/api.js
@@ -0,0 +1,101 @@
+async function apiFetch(path, options) {
+ const opts = options || {};
+ const headers = Object.assign({}, opts.headers || {});
+ if (opts.body && !headers['Content-Type']) {
+ headers['Content-Type'] = 'application/json';
+ }
+ const response = await fetch(path, {
+ method: opts.method || 'GET',
+ headers: headers,
+ body: opts.body ? JSON.stringify(opts.body) : undefined,
+ credentials: 'same-origin'
+ });
+ let data = null;
+ try {
+ data = await response.json();
+ } catch (e) {
+ data = {};
+ }
+ if (!response.ok) {
+ const error = new Error((data && data.error) || '请求失败: ' + response.status);
+ error.status = response.status;
+ throw error;
+ }
+ return data;
+}
+
+function apiGetMe() {
+ return apiFetch('/api/me');
+}
+
+function apiLogin(username, password) {
+ return apiFetch('/api/login', { method: 'POST', body: { username: username, password: password } });
+}
+
+function apiRegister(username, password, displayName) {
+ return apiFetch('/api/register', { method: 'POST', body: { username: username, password: password, displayName: displayName } });
+}
+
+function apiLogout() {
+ return apiFetch('/api/logout', { method: 'POST' });
+}
+
+function apiGetEntries() {
+ return apiFetch('/api/entries');
+}
+
+function apiAddEntry(data) {
+ return apiFetch('/api/entries', { method: 'POST', body: data });
+}
+
+function apiUpdateEntry(id, data) {
+ return apiFetch('/api/entries/' + id, { method: 'PUT', body: data });
+}
+
+function apiDeleteEntry(id) {
+ return apiFetch('/api/entries/' + id, { method: 'DELETE' });
+}
+
+function apiGetStats() {
+ return apiFetch('/api/entries/stats');
+}
+
+function apiGetVocabulary() {
+ return apiFetch('/api/vocabulary');
+}
+
+function apiAddVocabulary(data) {
+ return apiFetch('/api/vocabulary', { method: 'POST', body: data });
+}
+
+function apiDeleteVocabulary(id) {
+ return apiFetch('/api/vocabulary/' + id, { method: 'DELETE' });
+}
+
+function apiGetTranslationSettings() {
+ return apiFetch('/api/settings/translation');
+}
+
+function apiSaveTranslationSettings(data) {
+ return apiFetch('/api/settings/translation', { method: 'PUT', body: data });
+}
+
+function apiTranslate(data) {
+ return apiFetch('/api/translate', { method: 'POST', body: data });
+}
+
+function apiAdminUsers() {
+ return apiFetch('/api/admin/users');
+}
+
+function apiAdminCreateUser(data) {
+ return apiFetch('/api/admin/users', { method: 'POST', body: data });
+}
+
+function apiAdminSetStatus(id, isActive) {
+ return apiFetch('/api/admin/users/' + id + '/status', { method: 'PUT', body: { isActive: isActive } });
+}
+
+function apiAdminDeleteUser(id) {
+ return apiFetch('/api/admin/users/' + id, { method: 'DELETE' });
+}
diff --git a/app.js b/app.js
index 5facaeb..fef4f86 100644
--- a/app.js
+++ b/app.js
@@ -5,6 +5,34 @@ const dbAddEntry = addEntry;
const dbUpdateEntry = updateEntry;
const dbDeleteEntry = deleteEntry;
+var BACKEND_MODE = false;
+var currentUser = null;
+var favoriteWords = {};
+
+function safeGetAllEntries() {
+ if (BACKEND_MODE) return apiGetEntries();
+ return dbGetAllEntries();
+}
+
+function safeAddEntry(entry) {
+ if (BACKEND_MODE) return apiAddEntry(entry);
+ return dbAddEntry(entry);
+}
+
+function safeUpdateEntry(id, entry) {
+ if (BACKEND_MODE) return apiUpdateEntry(id, entry);
+ return dbGetEntry(id).then(function(existing) {
+ Object.assign(existing, entry);
+ existing.updatedAt = new Date().toISOString();
+ return dbUpdateEntry(existing);
+ });
+}
+
+function safeDeleteEntry(id) {
+ if (BACKEND_MODE) return apiDeleteEntry(id);
+ return dbDeleteEntry(id);
+}
+
var savedSelStart = 0;
var savedSelEnd = 0;
@@ -100,6 +128,10 @@ function updateVocabulary(text) {
return;
}
container.innerHTML = vocab.map(function(v) {
+ var isFavorite = favoriteWords[v.word.toLowerCase()] ? 'active' : '';
+ var favBtn = BACKEND_MODE
+ ? ''
+ : '';
return '' +
'' + escHtml(v.word) + '' +
'' +
@@ -107,6 +139,7 @@ function updateVocabulary(text) {
'' +
'' + escHtml(v.chinese) + '' +
'' +
+ favBtn +
'
';
}).join('');
}
@@ -138,12 +171,13 @@ function handleSelection() {
function selectEntry(id) {
state.currentId = id;
- dbGetEntry(id).then(function(entry) {
- if (entry) {
- setEditor(entry);
- renderTranslate(entry);
- renderList();
- }
+ var entry = state.entries.find(function(e) { return e.id == id; });
+ var p = entry ? Promise.resolve(entry) : dbGetEntry(id);
+ p.then(function(found) {
+ if (!found) return;
+ setEditor(found);
+ renderTranslate(found);
+ renderList();
});
}
@@ -153,16 +187,18 @@ function saveCurrentEntry() {
if (!spanish) { alert('请输入西语内容'); return; }
var translation = translateText(spanish);
-
+ var data = {
+ date: date,
+ spanish: spanish,
+ english: translation.english,
+ chinese: translation.chinese
+ };
var savePromise;
if (state.currentId) {
- savePromise = dbGetEntry(state.currentId).then(function(existing) {
- existing.date = date;
- existing.spanish = spanish;
- existing.english = translation.english;
- existing.chinese = translation.chinese;
- existing.updatedAt = new Date().toISOString();
- return dbUpdateEntry(existing);
+ savePromise = safeUpdateEntry(state.currentId, data);
+ } else if (BACKEND_MODE) {
+ savePromise = apiAddEntry(data).then(function(entry) {
+ state.currentId = entry.id;
});
} else {
var entry = {
@@ -180,7 +216,7 @@ function saveCurrentEntry() {
}
savePromise.then(function() {
- return dbGetAllEntries();
+ return safeGetAllEntries();
}).then(function(entries) {
state.entries = entries;
renderList();
@@ -213,9 +249,9 @@ function hideDeleteModal() {
}
function confirmDelete(id) {
- dbDeleteEntry(id).then(function() {
+ safeDeleteEntry(id).then(function() {
if (state.currentId === id) clearEditor();
- return dbGetAllEntries();
+ return safeGetAllEntries();
}).then(function(entries) {
state.entries = entries;
renderList();
@@ -338,16 +374,142 @@ function handleSpeech(lang) {
if (text && text !== '-') speakText(text, lang);
}
-// ----- Initialization -----
+// ----- Backend features -----
-function init() {
- dbGetAllEntries().then(function(entries) {
+function renderUserArea() {
+ if (!currentUser) return;
+ document.getElementById('user-name').textContent = currentUser.displayName || currentUser.username;
+ document.getElementById('btn-logout').style.display = '';
+ if (currentUser.isAdmin) {
+ document.getElementById('admin-link').style.display = '';
+ }
+}
+
+function loadBackendData() {
+ safeGetAllEntries().then(function(entries) {
state.entries = entries;
renderList();
setEditor(null);
renderTranslate(null);
});
+ loadStats();
+ loadFavoriteWords();
+ loadSettingsForm();
+}
+function loadLocalData() {
+ safeGetAllEntries().then(function(entries) {
+ state.entries = entries;
+ renderList();
+ setEditor(null);
+ renderTranslate(null);
+ });
+}
+
+function loadStats() {
+ if (!BACKEND_MODE) {
+ document.getElementById('stats-content').textContent = '登录后显示统计';
+ return;
+ }
+ apiGetStats().then(function(stats) {
+ var dailyHtml = (stats.daily || []).map(function(d) {
+ return d.date + ': ' + d.count + ' 篇';
+ }).join(' · ');
+ document.getElementById('stats-content').innerHTML =
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
最近 7 天：' + escHtml(dailyHtml) + '
' +
+ '累计西语字符：' + stats.totalChars + '
';
+ }).catch(function() {});
+}
+
+function loadFavoriteWords() {
+ if (!BACKEND_MODE) return;
+ apiGetVocabulary().then(function(items) {
+ favoriteWords = {};
+ items.forEach(function(item) {
+ favoriteWords[item.word.toLowerCase()] = item;
+ });
+ updateLiveTranslation();
+ }).catch(function() {});
+}
+
+function toggleFavorite(btn) {
+ var word = btn.dataset.word;
+ var key = word.toLowerCase();
+ if (favoriteWords[key]) {
+ apiDeleteVocabulary(favoriteWords[key].id).then(function() {
+ delete favoriteWords[key];
+ btn.classList.remove('active');
+ }).catch(function(err) { alert(err.message); });
+ } else {
+ apiAddVocabulary({
+ word: word,
+ english: btn.dataset.en || '',
+ chinese: btn.dataset.zh || '',
+ category: ''
+ }).then(function(item) {
+ favoriteWords[key] = item;
+ btn.classList.add('active');
+ }).catch(function(err) { alert(err.message); });
+ }
+}
+
+function loadSettingsForm() {
+ if (!BACKEND_MODE) return;
+ apiGetTranslationSettings().then(function(settings) {
+ document.getElementById('translator-type').value = settings.translator || 'local';
+ document.getElementById('api-url').value = settings.api_url || '';
+ document.getElementById('api-key').value = settings.api_key || '';
+ document.getElementById('extra-config').value = JSON.stringify(settings.extra_config || {}, null, 2);
+ }).catch(function() {});
+}
+
+function openSettingsModal() {
+ document.getElementById('settings-modal-overlay').classList.add('show');
+}
+
+function closeSettingsModal() {
+ document.getElementById('settings-modal-overlay').classList.remove('show');
+}
+
+function saveSettingsModal() {
+ var extra = {};
+ var rawExtra = document.getElementById('extra-config').value.trim();
+ if (rawExtra) {
+ try {
+ extra = JSON.parse(rawExtra);
+ } catch (e) {
+ alert('扩展配置必须是合法 JSON');
+ return;
+ }
+ }
+ apiSaveTranslationSettings({
+ translator: document.getElementById('translator-type').value,
+ api_url: document.getElementById('api-url').value.trim(),
+ api_key: document.getElementById('api-key').value.trim(),
+ extra_config: extra
+ }).then(function() {
+ closeSettingsModal();
+ alert('翻译设置已保存');
+ }).catch(function(err) { alert(err.message); });
+}
+
+function handleLogout() {
+ apiLogout().then(function() {
+ location.href = 'login.html';
+ }).catch(function() {
+ location.href = 'login.html';
+ });
+}
+
+// ----- Initialization -----
+
+function bindAppEvents() {
document.getElementById('entry-list').addEventListener('click', function(e) {
var li = e.target.closest('li[data-id]');
if (!li) return;
@@ -358,31 +520,42 @@ function init() {
selectEntry(li.dataset.id);
});
- document.getElementById('btn-new').addEventListener('click', newEntry);
- document.getElementById('btn-save').addEventListener('click', saveCurrentEntry);
- document.getElementById('btn-helper').addEventListener('click', openHelperModal);
- document.getElementById('helper-cancel').addEventListener('click', closeHelperModal);
- document.getElementById('helper-confirm').addEventListener('click', confirmHelperInsert);
- document.getElementById('helper-input').addEventListener('input', updateHelperPreview);
+ document.getElementById('btn-new').addEventListener('click', newEntry);
+ document.getElementById('btn-save').addEventListener('click', saveCurrentEntry);
+ document.getElementById('btn-helper').addEventListener('click', openHelperModal);
+ document.getElementById('helper-cancel').addEventListener('click', closeHelperModal);
+ document.getElementById('helper-confirm').addEventListener('click', confirmHelperInsert);
+ document.getElementById('helper-input').addEventListener('input', updateHelperPreview);
- document.querySelectorAll('.btn-speech').forEach(function(btn) {
- btn.addEventListener('click', function() { handleSpeech(btn.dataset.lang); });
- });
+ document.getElementById('btn-settings').addEventListener('click', openSettingsModal);
+ document.getElementById('settings-cancel').addEventListener('click', closeSettingsModal);
+ document.getElementById('settings-save').addEventListener('click', saveSettingsModal);
+ document.getElementById('btn-logout').addEventListener('click', handleLogout);
+
+ document.querySelectorAll('#mobile-nav button').forEach(function(btn) {
+ btn.addEventListener('click', function() {
+ document.body.dataset.view = btn.dataset.view;
+ document.querySelectorAll('#mobile-nav button').forEach(function(b) {
+ b.classList.toggle('active', b === btn);
+ });
+ });
+ });
+
+ document.querySelectorAll('.btn-speech').forEach(function(btn) {
+ btn.addEventListener('click', function() { handleSpeech(btn.dataset.lang); });
+ });
- // Live translation on input
document.getElementById('entry-text').addEventListener('input', updateLiveTranslation);
-
- // Selection translation
document.getElementById('entry-text').addEventListener('mouseup', function(e) { handleSelection(); saveTextareaSelection(); });
document.getElementById('entry-text').addEventListener('keyup', function(e) { handleSelection(); saveTextareaSelection(); });
- // Vocabulary speech delegation
document.getElementById('editor-vocab').addEventListener('click', function(e) {
+ var fav = e.target.closest('.favorite-btn');
+ if (fav) { toggleFavorite(fav); return; }
var btn = e.target.closest('.vocab-speech');
if (btn) handleVocabSpeech(btn.dataset.word, btn.dataset.lang);
});
- // Vocabulary double-click to auto-read
document.getElementById('editor-vocab').addEventListener('dblclick', function(e) {
var item = e.target.closest('.vocab-item');
if (!item) return;
@@ -397,7 +570,6 @@ function init() {
}
});
- // Textarea double-click auto-read
document.getElementById('entry-text').addEventListener('dblclick', function() {
var ta = document.getElementById('entry-text');
setTimeout(function() {
@@ -406,7 +578,6 @@ function init() {
}, 50);
});
- // Speak selected button - reads selection aloud
document.getElementById('btn-speak-selected').addEventListener('click', function() {
var ta = document.getElementById('entry-text');
var start = savedSelStart || ta.selectionStart;
@@ -430,4 +601,30 @@ function init() {
});
}
+function startApp() {
+ if (location.protocol === 'file:') {
+ BACKEND_MODE = false;
+ loadLocalData();
+ return;
+ }
+ apiGetMe().then(function(me) {
+ BACKEND_MODE = true;
+ currentUser = me;
+ renderUserArea();
+ loadBackendData();
+ }).catch(function(err) {
+ if (err && err.status === 401) {
+ location.href = 'login.html';
+ return;
+ }
+ BACKEND_MODE = false;
+ loadLocalData();
+ });
+}
+
+function init() {
+ bindAppEvents();
+ startApp();
+}
+
document.addEventListener('DOMContentLoaded', init);
diff --git a/docs/2026-07-31-spanish-diary-design.md b/docs/2026-07-31-spanish-diary-design.md
new file mode 100644
index 0000000..5ec894a
--- /dev/null
+++ b/docs/2026-07-31-spanish-diary-design.md
@@ -0,0 +1,347 @@
+# 西班牙语日记本 — 设计文档
+
+## 概述
+
+一个日常使用的西班牙语学习工具。用户每天用西语写日记，系统自动显示英语和中文翻译，支持发音朗读。数据持久化存储，分两阶段交付。
+
+## 项目阶段
+
+| 阶段 | 存储 | 翻译 | 部署 |
+|------|------|------|------|
+| 阶段1 (纯前端) | IndexedDB | Mock 数据 | 浏览器直接打开 |
+| 阶段2 (Python 后端) | SQLite | 翻译 API | Flask/FastAPI + 静态文件 |
+
+## 布局方案
+
+选择 **方案B — 左右对照布局**
+
+### 三栏结构
+
+```
++-------------------+---------------------+----------------------+
+| 左侧面板 | 主编辑区 | 右侧面板 |
+| 日记列表 | 西语输入 | 翻译区 |
+| | | |
+| 📅 2026-07-31 | 📝 Mi Diario | English |
+| Hoy fui al... | (text area) | Today I went to... |
+| 📅 2026-07-30 | | |
+| Ayer aprendí... | [🔊 保存] | 中文 |
+| 📅 2026-07-29 | | 今天我去了... |
+| Estoy cansado... | | |
+| | | [🔊 发音] |
+| [+ 新建] | | |
++-------------------+---------------------+----------------------+
+```
+
+### 左侧面板 — 日记列表
+
+- 按日期倒序显示所有记录
+- 每条显示：日期 + 西语内容前 20 字预览
+- 当前选中的记录高亮
+- 顶部 "+" 按钮新建当日记录
+- 每条记录悬停时显示编辑/删除图标
+- 删除需要二次确认
+
+### 主编辑区 — 西语输入
+
+- 标题自动设为当天日期（格式：2026-07-31），可手动修改
+- 可编辑文本区用于输入西语日记
+- 底部保存按钮
+- 保存后自动更新左侧列表和右侧翻译
+
+### 右侧面板 — 翻译区
+
+- 只读展示，不可编辑
+- 上半部分：英文翻译
+- 下半部分：中文翻译
+- 每条翻译下方有 🔊 发音按钮（点击朗读对应语言的翻译文本）
+
+## 功能需求
+
+### 阶段1 (纯前端)
+
+1. **CRUD 操作**
+ - 新建日记：自动填入当天日期，西语内容为空
+ - 编辑：点击已有记录，在主编辑区修改后保存
+ - 删除：悬停时出现删除按钮，点击后弹窗确认
+
+2. **翻译功能**
+ - 阶段1 使用内置 mock 翻译数据（有限的预设短语库）
+ - 保存后立即在右侧显示英/中文对照翻译
+ - 纯前端无法调用翻译 API，预设覆盖日常日记常用句式
+ 如 "Hoy fui a..."、"Estoy..."、"Ayer..."、"Me gusta..." 等
+ - 不在预设库中的内容显示原文 + 占位提示
+
+3. **发音功能**
+ - 使用浏览器 Web Speech API (SpeechSynthesis)
+ - 支持西班牙语、英语、中文三种语言的文本朗读
+
+4. **数据存储**
+ - 使用 IndexedDB
+ - 数据模型：
+ ```json
+ {
+ "id": "uuid",
+ "date": "2026-07-31",
+ "spanish": "Hoy fui al parque con mi amigo.",
+ "english": "Today I went to the park with my friend.",
+ "chinese": "今天我和朋友去了公园。",
+ "createdAt": "2026-07-31T10:00:00Z",
+ "updatedAt": "2026-07-31T10:00:00Z"
+ }
+ ```
+
+### 阶段2 (Python 后端)
+
+#### 2.1 后端与存储
+
+- 使用 Python + Flask 提供 REST API，并直接托管前端静态文件
+- 使用 SQLite 数据库，表结构见下方“数据库设计”
+- 密码使用 Werkzeug 哈希存储，禁止明文
+- 使用服务端 Session 管理登录状态，Cookie 存储 session id
+
+#### 2.2 用户管理
+
+- 注册：用户名、密码、显示名
+- 登录 / 登出
+- 管理员用户可：
+ - 查看全部用户
+ - 添加用户
+ - 禁用 / 启用用户
+ - 删除用户（同时删除该用户日记、收藏单词等数据）
+- 普通用户不能访问管理员接口
+- 被禁用用户无法登录，已登录会话立即失效
+
+#### 2.3 数据隔离
+
+- 日记、统计、收藏单词、翻译配置全部按 `user_id` 隔离
+- 所有查询必须带当前登录用户的 `user_id`
+- 服务端校验资源归属，禁止通过修改 URL/ID 访问他人数据
+
+#### 2.4 知识库共享
+
+- 知识库为公共静态页面，所有用户共享
+- 不要求登录即可浏览知识库
+
+#### 2.5 翻译配置
+
+- 每个用户可以配置自己的翻译方式：
+ - 本地词典
+ - MyMemory 免费接口
+ - 自定义 HTTP 翻译接口（可配置 URL、请求头、字段映射）
+- 配置项保存在用户自己的 `settings` 表中
+- 后端执行在线翻译，避免浏览器跨域限制，也便于统一记录配置
+
+#### 2.6 日记统计
+
+- 每个用户可查看自己的统计：
+ - 总日记数
+ - 本月日记数
+ - 本周日记数
+ - 连续写作天数（streak）
+ - 最近 7 天每日条数
+ - 总西语字符数 / 平均每天字数
+
+#### 2.7 单词本
+
+- 每个用户可收藏单词
+- 单词来自 B1 词库或日记中出现的词
+- 收藏内容包括：西语单词、英语释义、中文释义、主题分类
+- 支持添加、删除、列表查询
+
+#### 2.8 前端适配
+
+- 桌面：三栏布局
+- 平板（768px - 1024px）：两栏或紧凑三栏
+- 手机（< 768px）：单栏，列表、编辑、翻译通过页面区域切换
+- 按钮触控区域不小于 40px，滚动区域适配触摸
+- 保留 Web Speech API 发音
+
+#### 2.9 安全
+
+- 密码哈希存储
+- Session Cookie 使用 `HttpOnly`、`SameSite=Lax`
+- API 输入校验，防止 SQL 注入和 XSS
+- 删除用户为级联删除
+- 生产部署建议使用反向代理 + HTTPS
+
+## 技术方案
+
+### 阶段1 技术栈
+
+- 纯 HTML + CSS + JavaScript
+- IndexedDB 使用原生 API
+- Web Speech API 用于发音
+- 无构建工具，无依赖
+
+### 阶段2 技术栈
+
+- Python 3 + Flask
+- SQLite（Python 内置 sqlite3）
+- Werkzeug（Flask 自带密码哈希）
+- Vanilla JS 前端，保持无构建工具
+
+### 项目文件结构 (阶段2)
+
+```
+spanish-diary/
+ server/
+ app.py — Flask 应用入口与路由
+ db.py — SQLite 初始化与连接
+ auth.py — 登录/会话/管理员权限
+ entries_api.py — 日记 CRUD 与统计
+ vocab_api.py — 单词本接口
+ settings_api.py — 翻译配置接口
+ translate_service.py — 本地/MyMemory/自定义翻译
+ index.html — 主页面
+ style.css — 样式
+ app.js — 应用逻辑
+ api.js — 后端 API 客户端
+ db.js — IndexedDB 操作封装（阶段1兼容）
+ translate.js — 翻译模块
+ speech.js — 发音模块
+ knowledge.html — 知识库首页
+ knowledge/ — 知识库分类页
+ b1-vocab.js — B1 词库
+```
+
+### 数据库设计
+
+```sql
+CREATE TABLE users (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ username TEXT UNIQUE NOT NULL,
+ password_hash TEXT NOT NULL,
+ display_name TEXT NOT NULL,
+ is_admin INTEGER NOT NULL DEFAULT 0,
+ is_active INTEGER NOT NULL DEFAULT 1,
+ created_at TEXT NOT NULL
+);
+
+CREATE TABLE entries (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+ date TEXT NOT NULL,
+ spanish TEXT NOT NULL,
+ english TEXT NOT NULL DEFAULT '',
+ chinese TEXT NOT NULL DEFAULT '',
+ created_at TEXT NOT NULL,
+ updated_at TEXT NOT NULL
+);
+
+CREATE INDEX idx_entries_user_date ON entries(user_id, date);
+
+CREATE TABLE vocabulary (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+ word TEXT NOT NULL,
+ english TEXT NOT NULL DEFAULT '',
+ chinese TEXT NOT NULL DEFAULT '',
+ category TEXT NOT NULL DEFAULT '',
+ created_at TEXT NOT NULL,
+ UNIQUE(user_id, word)
+);
+
+CREATE TABLE settings (
+ user_id INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+ translator TEXT NOT NULL DEFAULT 'local',
+ api_url TEXT NOT NULL DEFAULT '',
+ api_key TEXT NOT NULL DEFAULT '',
+ extra_config TEXT NOT NULL DEFAULT '{}',
+ updated_at TEXT NOT NULL
+);
+```
+
+### API 设计
+
+#### 用户与认证
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| POST | /api/register | 注册 |
+| POST | /api/login | 登录 |
+| POST | /api/logout | 登出 |
+| GET | /api/me | 当前用户信息 |
+| GET | /api/admin/users | 管理员查看用户 |
+| POST | /api/admin/users | 管理员添加用户 |
+| PUT | /api/admin/users//status | 启用/禁用 |
+| DELETE | /api/admin/users/ | 删除用户 |
+
+#### 日记与统计
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| GET | /api/entries | 当前用户日记列表 |
+| POST | /api/entries | 新建日记 |
+| PUT | /api/entries/ | 编辑日记 |
+| DELETE | /api/entries/ | 删除日记 |
+| GET | /api/entries/stats | 当前用户统计 |
+
+#### 单词本
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| GET | /api/vocabulary | 收藏列表 |
+| POST | /api/vocabulary | 收藏单词 |
+| DELETE | /api/vocabulary/ | 删除收藏 |
+
+#### 翻译配置
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| GET | /api/settings/translation | 获取翻译配置 |
+| PUT | /api/settings/translation | 更新翻译配置 |
+| POST | /api/translate | 翻译接口 |
+
+### 前端兼容性
+
+- 桌面：三栏
+- 平板 768-1024px：两栏，编辑区优先
+- 手机 <768px：单栏，通过标签或底部导航切换“日记 / 编辑 / 翻译 / 我的”
+- 使用 CSS Grid + Media Query
+- 输入框和按钮适配触摸操作
+- 所有页面在 Chrome、Edge、Safari 手机端可用
+
+## 交互细节
+
+- 点击左侧列表中的记录 → 主编辑区加载该记录内容，右侧显示翻译
+- 阶段1：修改主编辑区内容后点击保存 → 更新 IndexedDB，刷新左侧列表和右侧翻译
+- 阶段2：通过后端 API 保存，同一账号在不同设备可同步
+- 点击 🔊 → 使用 Web Speech API 朗读文本（自动选择对应语言语音）
+- 选择日期与已有记录相同 → 打开该记录而非新建
+
+## 成功标准
+
+### 阶段1
+
+- 打开 HTML 文件即可使用，无需任何安装
+- 新建、编辑、删除操作流畅无刷新
+- 翻译在保存后即时显示
+- 发音功能在主流浏览器（Chrome/Edge）正常工作
+- 页面关闭后重新打开，数据完整保留
+
+### 阶段2
+
+- 用户可注册、登录、登出
+- 管理员可添加、禁用、删除用户
+- 不同用户日记数据完全隔离
+- 知识库对所有用户共享
+- 每个用户可配置翻译方式和在线翻译
+- 每个用户可查看日记统计
+- 每个用户可收藏和管理自己的单词
+- 前端在手机、平板、桌面均可用
+- 后端 API 启动后前端通过 API 读写数据
+- 未登录时不能访问个人数据接口
+- 被禁用用户无法登录且已有会话失效
+- 密码不以明文保存
+
+## 后续阶段
+
+- 阶段3 可增加：
+ - 忘记密码与邮箱验证
+ - 用户头像与个人资料
+ - 分享日记
+ - 导出/导入数据
+ - Docker 部署
+ - HTTPS 部署
+
diff --git a/index.html b/index.html
index 30dc04e..ead9e9f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,13 @@
+
+
@@ -111,6 +132,30 @@
+
+
+
+
翻译设置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
登录
+
Mi Diario 西班牙语日记
+
+
+
+
返回首页
+