fragmemo/docs/架构方案.md

name, overview, todos

name	overview	todos
fragmemo-plan	在 fragmemo 总目录下分三个独立仓库 + docs 构建笔记应用	content status priority Phase 1 - 脚手架：memo_server 后端骨架 + memo.fragford.cn 前端骨架 pending high content status priority Phase 2 - 用户认证系统：JWT 注册/登录 + 前端登录注册页 pending high content status priority Phase 3 - 笔记核心 CRUD：创建/列表/详情/编辑/删除 + Markdown pending high content status priority Phase 4 - 标签系统：标签 CRUD + 笔记打标 + 筛选 pending high content status priority Phase 5 - 搜索功能：关键词搜索笔记 pending medium content status priority Phase 6 - 图片/文件上传：支持笔记中插入图片 pending medium content status priority Phase 7 - 个人主页：用户信息 + 统计 pending low content status priority Phase 8 - 部署配套：deploy.sh + 服务器操作清单 pending high

fragmemo 笔记应用 · 实现计划

Goal

构建 fragmemo 笔记 Web 应用：Markdown 快速记录、标签分类、搜索、图片上传、私密/公开模式。后期扩展鸿蒙 ArkTS App。

目录结构

/Users/a58/Documents/fragfordspace/
│
└── fragmemo/                            # 总项目目录
    │
    ├── docs/                            # 📚 物料文档
    │   ├── memos-main/                  # 原版 memos 参考源码
    │   └── 方案文档/                     # 架构方案、API 设计等
    │
    ├── memo.fragford.cn/                # 🌐 前端 React 项目（独立 Git 仓库）
    │   ├── public/
    │   ├── src/
    │   │   ├── api/                     # API 调用
    │   │   ├── hooks/                   # React Query
    │   │   ├── contexts/                # 状态管理
    │   │   ├── components/              # 通用组件
    │   │   ├── pages/                   # 页面
    │   │   └── styles/                  # 样式
    │   ├── deploy.sh
    │   ├── package.json
    │   ├── vite.config.ts
    │   └── tsconfig.json
    │
    ├── memo_server/                     # ⚙️ 后端 Python 项目（独立 Git 仓库）
    │   ├── app/
    │   │   ├── main.py                  # FastAPI 入口
    │   │   ├── config.py                # 配置
    │   │   ├── database.py              # 数据库
    │   │   ├── exceptions.py            # 异常处理
    │   │   ├── models/                  # ORM 模型
    │   │   ├── schemas/                 # 数据校验
    │   │   ├── routers/                 # API 路由
    │   │   ├── services/                # 业务逻辑
    │   │   └── auth/                    # JWT 认证
    │   ├── uploads/
    │   ├── deploy.sh
    │   ├── requirements.txt
    │   └── .env
    │
    └── frag_memo_app/                   # 📱 预留鸿蒙 App（独立 Git 仓库）
        └── README.md

技术栈

层	技术
后端	Python 3.11+ / FastAPI / SQLAlchemy async / PyJWT / bcrypt
前端	React 18+ / TypeScript / Vite / Tailwind CSS / React Query
数据库	MySQL 8.0（服务器已有，Phase 8 时你操作）

分工

我负责（本地代码）	你负责（Phase 8 时在服务器操作）
全部 Python 后端代码	宝塔 Python 项目管理器添加项目
全部 React 前端代码	创建 MySQL 数据库和用户
部署脚本（deploy.sh）	配置 Nginx 反向代理
项目文档（README）	设置环境变量

设计概要

• 数据库：5 张表（users, memos, tags, memo_tags, files）
• API：RESTful，/api/v1/ 前缀，JWT Bearer 认证
• 前端：8 个页面（首页、登录、注册、笔记列表、新建/编辑、详情、标签管理、个人主页）
• 部署：后端用宝塔 Python 项目管理器 + 前端 rsync 静态文件 + Nginx 反代

执行顺序

1. Phase 1：脚手架搭建（server/ 骨架 + web/ 骨架）
2. Phase 2：用户认证（JWT + 登录注册）
3. Phase 3：笔记 CRUD（核心功能）
4. Phase 4：标签系统
5. Phase 5：搜索功能
6. Phase 6：图片上传
7. Phase 7：个人主页
8. Phase 8：部署配套（deploy.sh + 服务器操作指南）

Verification

每个 Phase 完成后：后端 Swagger UI 测试 + 前端功能走通

Rollback

• Git revert 回退代码
• Alembic downgrade 回退数据库