manga_studio 架构图解

先看四个区域

用户的浏览器
  └─ canvas-v2：React + TypeScript 页面
       ├─ components / features：按钮、画布、弹窗
       ├─ stores：项目和界面状态
       └─ api.ts：统一发 HTTP 请求
                    ↓
服务器
  └─ app.py：Flask 路由、登录、权限、业务逻辑
       ├─ 数据文件 / Postgres
       ├─ R2 / TOS：图片和视频文件
       └─ 图片、视频、文字模型 API

浏览器负责画页面和收集操作；Flask 负责身份、权限和安全访问外部服务。不要因为它们在同一个仓库里，就认为所有代码都在同一个地方运行。

仓库目录怎么读

manga_studio/
├── app.py                  # Flask 后端主文件
├── static/                 # 经典版前端静态页面
├── canvas-v2/
│   ├── package.json        # 新前端依赖和命令
│   └── src/
│       ├── App.tsx         # React 顶层入口
│       ├── api.ts          # 请求封装
│       ├── components/     # 通用组件
│       ├── features/       # 按功能组织的代码
│       └── stores/         # Zustand 状态
├── Dockerfile              # 服务器打包说明
└── .env.example            # 需要哪些环境变量，不含真实值

技术证据在哪里

canvas-v2/package.json 真实列出了 React、TypeScript、Vite、Zustand、React Flow 和 Konva。看到陌生库时，不用先读它全部文档；先在项目里搜索它被导入到哪些文件。

第一次阅读任务

1. 打开你电脑里的 manga_studio 项目文件夹。
2. 点开 canvas-v2/package.json，找到 scripts。
3. 找到 dev、build 和 test，分别说出开发、构建和测试使用什么工具。
4. 再点开 app.py，搜索 @app.route('/')，找到网站首页入口。

用户点击 React 按钮时，Flask 一定会立刻运行吗？

答案：不一定。只有按钮逻辑发出请求到 Flask 路由时，后端才会运行；有些 UI 状态或本地存储操作完全在浏览器内完成。