---
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 反向代理配置（运维处理）
- [ ] 后续可加用户登录/权限系统