多语言“我爱你”展示功能开发计划

1. 数据结构与样例设计

• 设计 languages 表结构（D1 数据库）

  • id（主键，自增）
  • country（国家名）
  • flag_url（国旗图片链接）
  • male_text（男方说法）
  • female_text（女方说法）
  • male_audio（男方音频URL）
  • female_audio（女方音频URL）

• 准备一份初始数据样例（Excel/CSV 或 JSON）

2. 后端 API 设计（Cloudflare Worker）

• GET /api/languages // 列表所有语言，前端页面用
• POST /api/languages // 新增一条语言（后台用）
• PUT /api/languages/{id} // 修改一条语言（后台用）
• DELETE /api/languages/{id} // 删除一条语言（后台用）
• 可选：GET /api/languages/{id} // 获取单条详细（后台用）

3. 数据库初始化与管理

• 用 Wrangler CLI 建表（可生成 SQL 脚本）
• 导入初始数据（如通过后台、脚本或 SQL）

4. 前端展示页面开发

• 页面设计：卡片式/表格式，每条信息含：
  • 国家名、国旗
  • 男/女音频播放按钮
  • 男/女对应文字
• 支持自适应（PC/移动端）
• 音频播放用 <audio> 或自定义 React 组件
• 美化样式（TailwindCSS 推荐）

5. 管理后台开发

• 登录认证（利用已有方案）
• 数据增删改查界面（表格+表单）
• 支持音频文件上传/粘贴URL
• 支持批量导入（如Excel/CSV，后期可加）

6. 测试与优化

• 各端兼容性测试
• API 权限校验（只允许登录管理员增删改）
• 音频加载体验优化
• 错误提示/用户交互细节

7. 上线部署

• Cloudflare Pages 部署前端
• Worker+ D1 保证 API 可用
• 新增内容随时可管控

任务拆分建议（每日目标）

1. 设计数据库表与API接口（可先写接口文档/表结构）
2. 完成 Worker 层 API（本地+Cloudflare环境测试）
3. 做好前端展示页面（假数据先行，接口联调）
4. 做好后台管理基本功能（增删改查）
5. 完善样式与体验，测试上线

附：数据库建表 SQL 示例

CREATE TABLE languages (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  country TEXT NOT NULL,
  flag_url TEXT,
  male_text TEXT NOT NULL,
  female_text TEXT,
  male_audio TEXT,
  female_audio TEXT
);