Skip to content
BranchesTags

Repository files navigation

Everyday Writing · 每日英语写作

面向英语写作练习的前端 Web 应用。覆盖从注册登录、日常写作与 AI 反馈、记录与词库、能力测评与个人计划、打卡成长，到系统设置与完整管理后台的主链路。布局适配手机、平板与桌面。

面向最终用户的操作说明：docs/使用手册.md

系统完成度总览（2026-07）

结论：用户端主链路与管理端运营能力已闭环，可作为正式使用版本。
以下完成度基于本前端仓库 + 已对接的 ASP.NET Core /api/v1 后端能力。

维度 完成度 说明
鉴权与账号 ✅ 完成 注册 / 登录 / 找回密码 / JWT 刷新 / 图形验证码 / 强制改密 / 协议 / 退出当前与全部设备
写作主流程 ✅ 完成 随机选题、富文本编辑、草稿、正式提交、计时、专注锁页
AI 批改与辅助 ✅ 完成 自有 Key + 免费通道、提交后批改、写作中实时辅助（可选流式）、建议追问、用量统计
写作记录 / 词库 ✅ 完成 草稿与提交分页、搜索与详情、词库 CRUD
写作统计 ✅ 完成 「个人测评」页周期图表（与能力测评不同）
能力测评 + 个人计划 ✅ 完成 三段测评、续测、放弃重开、完成后整份重测、计划展示
打卡成长 ✅ 完成 正式提交自动打卡、年/月/周日历、连续天数、段位
用户中心 ✅ 完成 五标签：概览 / 个人计划 / 打卡 / 用量 / 设置
系统设置 ✅ 完成 10 语种、浅色/深色/跟随系统、写作偏好、登录后云端同步
使用指南 ✅ 完成 站内说明、未完成测评红点与入口
管理后台 ✅ 完成 16 个运营模块（用户、题库、Prompt、AI、公告、审计、访问记录等）
多端适配 ✅ 基本完成 桌面侧栏 + 手机底栏；写作辅助可拖动；页面切换 keep-alive
工程与文档 ✅ 可用 Vite 多环境、使用手册、API 文档副本、开发约定

产品闭环（已跑通）

  1. 账号 — 注册、协议、登录验证码 → Token 刷新 → 退出当前 / 全部设备
  2. 练习 — 选题写作 → 草稿 / 正式提交 → 记录回看 → 词库 → 统计复盘
  3. AI — 自备 Key 或免费通道 → 边写辅助 / 提交批改 → Token 用量可见
  4. 测评 — 自评 → 客观题 → 双写作 → 等级诊断 → 个人计划；可续测与整份重测
  5. 坚持 — 正式提交打卡 → 日历与段位
  6. 运营 — 管理端维护用户、题库、Prompt、供应商、公告协议、用量与日志

已知边界（非阻塞；可后续增强）

类别 现状 可增强方向
测评进度 按阶段提交落库；阶段内未提交答案刷新后不保留 阶段内自动草稿
个人计划 展示阶段与重点；重测后旧计划停用 进度打卡、复测提醒、与推荐题联动
实时辅助 停笔后对当前正文请求；前端跨批去重 增量段落请求
移动端 核心流程可用 长文与辅助面板再打磨
题库运营 CRUD、导入、AI 出题预览入库 质量审核工作流、难度校准

技术栈

类别 技术
前端框架 React 19 + TypeScript
构建工具 Vite 8
样式 Tailwind CSS 4
路由 React Router 7
富文本编辑器 Tiptap（Notion 风格）
图表 Recharts / ECharts（管理端等）
后端 API ASP.NET Core /api/v1（JWT 鉴权）
代码检查 Oxlint

功能清单

1. 用户系统与鉴权

  • 邮箱注册 / 登录 / 忘记密码（验证码）
  • JWT Access Token + Refresh Token（localStorage）
  • 登录图形验证码（失败次数过多时触发）
  • 强制改密引导；隐私协议勾选与接受记录
  • 退出当前设备 / 退出全部设备
  • 登录后按角色落地：普通用户进写作页，纯管理员进后台

2. 开始写作

  • 随机题目（可按题型），换题、长题目全文弹窗、自定义标题
  • Notion 风格富文本编辑器
  • 草稿自动 / 手动保存；登录后恢复最近草稿
  • 正式提交（对接 drafts / submits）
  • 写作辅助面板（桌面右侧 / 手机浮动可拖）
    • 写作计时：预设 / 自定义 / 正计时 / 倒计时
    • AI 辅助开关：提交后批改项 + 实时辅助写作（可选流式与展示效果）
  • 专注写作时可锁定页面切换

3. 写作记录

  • 「草稿」「提交记录」双 Tab，分页加载
  • 提交记录关键字搜索
  • 提交详情：正文、AI 评分与批改、建议追问对话
  • 草稿「继续编辑」跳转写作页

4. 个人词库

  • 词条列表、搜索、新增 / 编辑 / 删除
  • 对接 /api/v1/vocabulary

5. 个人测评（写作统计）

  • 周期：全部 / 7 天 / 30 天 / 90 天
  • 篇数、字数、均分、词库数等图表
  • 注意：与「英语能力测评」不是同一功能

6. 英语能力测评 + 个人计划

  • 路径：/proficiency-test（独立全屏）
  • 首次可引导进入，也可「稍后再做」；未完成时「使用指南」显示红点
  • 三段：自评问卷 → 递进客观题 → 一易一难双写作 → AI 等级与维度诊断
  • 续测 / 放弃进度重开 / 已完成后整份重测（旧计划停用，完成后生成新计划）
  • 用户中心「个人计划」展示阶段性训练建议

7. 用户中心（五标签）

标签 内容
概览 资料卡、写作摘要、系统公告、未完成测评提示
个人计划 能力测评生成的写作提升计划
打卡 年 / 月 / 周日历、连续与累计天数、段位
用量 Token 统计与月度预算
设置 AI 连接、隐私、管理后台入口（有权限时）
  • 修改昵称、上传头像；退出当前 / 全部设备

8. 系统设置与偏好

路径：侧栏 系统设置（/settings）

类别 可配置项
界面 语言（见下表）、主题（浅色 / 深色 / 跟随系统）、默认首页、周起始日、日期格式、侧栏默认折叠、减弱动效
写作 打字动效、编辑器字号、自动保存间隔、默认题型、默认全屏、提交前确认、计时音等

登录后偏好尽量与账号同步；换设备登录可恢复。AI Key 仍保存在本机浏览器。

已支持界面语言（10）： 简体中文、繁體中文、English、日本語、한국어、Français、Deutsch、Español、Português、Русский。

9. 使用指南

  • 站内说明：API Token、AI 学习理念、口语工具、词汇量目标等
  • 未完成能力测评时顶部入口 + 侧栏 / 底栏红点

10. AI 能力（用户端）

  • 自有 API Key 加密保存在本地，或走管理员开启的免费通道
  • 提交后：语法检查、结构评分、提升建议、建议追问
  • 写作中：实时短建议（停笔触发；可选 SSE 流式展示）
  • 测评：能力评估与计划生成
  • Token 用量在用户中心「用量」查看

11. 管理后台（/admin）

需管理员角色 + 对应权限码。共 16 个模块：

分组 模块
概览 数据中心、系统监控、Token 用量
用户与权限 用户管理、角色权限
内容运营 公告、协议、励志语录、签到段位
题库与写作 题目类型、写作题库、测评题库、Prompt 模板
系统与安全 模型供应商、系统配置（含免费 AI 通道）、访问记录、审计日志

路由说明

用户端

路径 页面
/writing 开始写作（默认首页，可在设置中改默认落地页）
/user-center 用户中心
/records 写作记录
/vocabulary 个人词库
/assessment 个人测评（写作统计）
/guide 使用指南
/settings 系统设置
/proficiency-test 英语能力测评
/login / /register / /forgot-password 认证
/change-password 强制改密

管理端

路径 页面
/admin 数据中心
/admin/users 用户管理
/admin/questions 测评题库
/admin/writing-topics 写作题库
/admin/prompts Prompt 模板
/admin/access-logs 访问记录
/admin/... 其余见 src/config/adminRoutes.tsx

项目结构

everydayWriting/
├── docs/
│   ├── 使用手册.md                 # 面向用户的操作手册
│   └── ...
├── public/docs/API.md              # 后端 API 文档（前端仓库副本）
├── src/
│   ├── api/                        # 接口封装
│   ├── components/
│   │   ├── admin/                  # 管理后台
│   │   ├── auth/                   # 登录注册、协议
│   │   ├── common/                 # 通用组件
│   │   ├── editor/                 # Tiptap 编辑器
│   │   ├── layout/                 # 布局、侧栏、底栏
│   │   ├── user/                   # 用户中心子面板
│   │   ├── views/                  # 用户端页面
│   │   ├── vocabulary/             # 词库
│   │   └── writing/                # 写作辅助
│   ├── config/                     # 用户端 / 管理端路由
│   ├── context/                    # Auth、偏好等
│   ├── hooks/
│   ├── i18n/                       # 多语言文案
│   ├── storage/                    # localStorage / 偏好同步
│   ├── types/
│   └── utils/
├── package.json
└── vite.config.ts

环境配置

cp .env.example .env
场景 配置要点
本地后端 不设 VITE_API_BASE_URL，Vite 代理 /api/v1 → DEV_API_PROXY_TARGET（默认 localhost:5000）
远程联调 npm run dev:remote，.env.remote 中配置 DEV_API_PROXY_TARGET
生产构建 CI / .env.production 设置真实 VITE_API_BASE_URL

环境要求

  • Node.js 18+
  • npm 9+

常用命令

npm install

npm run dev          # 远程代理模式 + 本地 Express 中间层（见 package.json）
npm run dev:remote
npm run dev:local

npm run build
npm run build:remote
npm run preview
npm run lint
服务 默认地址
前端 Vite http://localhost:5173
后端 API /api/v1（代理或直连）

数据与持久化

数据 存储
草稿 / 提交 / 词库 / 打卡 / 测评 / 计划 后端数据库
Access / Refresh Token localStorage
AI Key（加密）与辅助开关 浏览器本地
界面语言、主题、写作偏好等 本地 + 登录后账号同步
侧栏折叠、辅助面板状态等 localStorage / sessionStorage

相关文档

后续可延续方向

  • 能力测评与写作推荐题目更深联动
  • 个人计划进度打卡与复测提醒
  • 测评阶段内答案草稿自动保存
  • 实时辅助改为增量段落请求
  • 管理端题库质量审核工作流
  • 移动端长文写作体验继续打磨

About

A Project that appeal and push u to practice English composition everyday!

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages