105 lines
4.3 KiB
Markdown
105 lines
4.3 KiB
Markdown
---
|
||
name: session-20260623-1
|
||
description: 2026-06-23 第1次会话 — MoKeeText 项目从零搭建到 Docker 部署
|
||
metadata:
|
||
type: session
|
||
date: 2026-06-23
|
||
sessionNumber: 1
|
||
startTime: 2026-06-23T14:00:00+08:00
|
||
---
|
||
|
||
# 2026-06-23 第1次会话
|
||
|
||
## 会话摘要
|
||
从零搭建 Web 记事本 MoKeeText，包含笔记编辑器（Tiptap 增强型）、网站账号密码管理、智能导入。技术栈：FastAPI + Vue 3 + Vite + MySQL。已部署到生产服务器 Docker。
|
||
|
||
## 关键决策
|
||
|
||
### 技术选型
|
||
- **做了什么**: 选择 FastAPI + Vue3 + MySQL，放弃纯 Jinja2 模板方案
|
||
- **原因**: Vue 组件化更适合复杂交互，FastAPI 轻量够用
|
||
- **结果**: 前后端分离，前端 Vite 构建静态文件，后端纯 API
|
||
|
||
### 编辑器选型
|
||
- **做了什么**: 使用 Tiptap 增强型编辑器
|
||
- **原因**: 支持文字颜色、图片粘贴上传、表格、表情，飞书级别体验
|
||
- **结果**: Tiptap 通过 esbuild 打包成本地文件（~460KB），无需 CDN
|
||
|
||
### 图片存储
|
||
- **做了什么**: 图片存入 MySQL `uploads` 表的 LONGBLOB 字段，不存文件系统
|
||
- **原因**: 部署简单，备份只要导出数据库
|
||
- **结果**: 上传 API 返回 `/api/file/{id}`，支持 20MB 以内的图片
|
||
|
||
### 部署架构
|
||
- **做了什么**: Docker Compose 部署，前端 Nginx :3006，后端 FastAPI :4006
|
||
- **原因**: 生产环境标准化
|
||
- **结果**: 前端不代理 API，Vue 直接跨域请求后端 `https://mokeetext.server.zgitm.com`
|
||
|
||
## 代码结构
|
||
```
|
||
mokeeText/
|
||
├── app.py # FastAPI 入口 + CORS
|
||
├── models.py # 6个模型：Folder/Note/Tag/Website/Account/Upload
|
||
├── routes/
|
||
│ ├── notes.py # 笔记 CRUD + 分享 + 移动
|
||
│ ├── websites.py # 网站/账号/文件夹 CRUD + 排序
|
||
│ ├── import_api.py # 智能导入解析
|
||
│ ├── upload.py # 图片上传/读取（存DB）
|
||
│ └── share.py # 分享公开查看页
|
||
├── src/ # Vue 3 源码
|
||
│ ├── App.vue # 左导航 + 顶栏 + 底栏
|
||
│ ├── views/
|
||
│ │ ├── NotesView.vue # 笔记文档列表 + 编辑器
|
||
│ │ ├── WebsitesView.vue # 网站管理 + 弹窗
|
||
│ │ └── SharesView.vue # 分享管理
|
||
│ └── components/
|
||
│ ├── NoteEditor.vue # Tiptap 编辑器（图片粘贴/拖拽/预览）
|
||
│ ├── Modal.vue # 通用弹窗
|
||
│ ├── ConfirmModal.vue # 确认弹窗
|
||
│ └── PromptModal.vue # 输入弹窗
|
||
├── static/dist/ # Vue 构建产物
|
||
├── nginx.conf # 前端 Nginx 配置（纯静态，无代理）
|
||
├── Dockerfile # 后端镜像
|
||
├── Dockerfile.frontend # 前端镜像
|
||
└── docker-compose.yml # 编排
|
||
```
|
||
|
||
## 数据库（MySQL 10.20.1.122:3306/mokeetext）
|
||
- 用户：mokeetext / mokee.
|
||
- 所有表均有 `created_by` / `updated_by` 字段（默认 admin）
|
||
- `notes.share_token` + `share_expires_at` 支持分享链接有效期
|
||
- `accounts.sort_order` 支持账号排序
|
||
|
||
## 生产环境
|
||
- 服务器：101.132.183.138 root/mokee2016.
|
||
- 项目目录：/data/mokee/mokeetext
|
||
- 前端：https://mokeetext.zgitm.com (:3006)
|
||
- 后端：https://mokeetext.server.zgitm.com (:4006)
|
||
- 日志：/data/mokee/mokeetext/logs（按天轮转，保留30天）
|
||
- ICP备案：湘ICP备19021539号
|
||
|
||
## UI 特性
|
||
- 左侧可收起导航（展开"mokee编辑器"，收起"M"）
|
||
- 笔记页文件夹侧边栏可收起
|
||
- 分享链接支持 7天/30天/1年/永久 四种有效期
|
||
- 图片点击全屏预览（带关闭按钮）
|
||
- Ctrl+S 保存，toast 提示
|
||
- 弹窗全部 Vue 组件（非浏览器 alert/confirm）
|
||
- 移动端响应式适配（768px 断点）
|
||
|
||
## 最新改动（UI 优化）
|
||
- 文件夹用圆点替代 emoji，胶囊数量标签
|
||
- 左侧导航选中项蓝色左边框指示器
|
||
- "mokee编辑器"品牌名（收起显示 M）
|
||
- 文件夹侧边栏可收起
|
||
- 分享页卡片宽度 1100px，超宽滚动
|
||
- 图片上传存 DB + 粘贴/拖拽自动上传 + 点击预览带关闭按钮
|
||
- 前端不代理，直接跨域调后端
|
||
- 后端 CORS 已开
|
||
- 全站响应式（768px 断点）
|
||
|
||
## 待处理
|
||
- [ ] favicon.ico 前端图标
|
||
- [ ] mokeetext.server.zgitm.com 反向代理配置（运维处理）
|
||
- [ ] 后续可加用户登录/权限系统
|