Mox AI

基于节点画布的 AI 分镜工作台，一站式完成图片生成、编辑与分镜流程

技术栈

• React 18
• TypeScript
• Zustand
• @xyflow/react
• TailwindCSS
• react-i18next

环境要求

• Node.js 20+
• pnpm 10+

快速开始

pnpm install
pnpm dev

默认开发地址通常为：

http://localhost:5173

常用命令

# 启动前端开发环境
pnpm dev

# TypeScript 类型检查
pnpm exec tsc --noEmit

# 前端构建
pnpm build

# 本地预览构建产物
pnpm preview

项目结构

src/
  features/canvas/          # 画布主流程（节点、工具、模型、UI）
  stores/                   # 全局状态与自动持久化策略
  commands/                 # 前端命令与浏览器能力封装
  i18n/                     # 国际化入口与语言包
docs/                       # 项目文档与图片资源

当前能力边界

• 项目数据持久化使用浏览器 IndexedDB
• 图片裁剪、切分、合并等处理走前端 Canvas 链路
• AI 图片生成由前端直接请求供应商接口
• 导出/保存行为依赖浏览器下载能力，而不是桌面文件系统

扩展开发

新增模型

1. 在 src/features/canvas/models/image/<provider>/ 新增模型文件
2. 声明 displayName、providerId、分辨率/比例、默认参数
3. 实现请求映射函数 resolveRequest

新增工具

1. 在 src/features/canvas/tools/types.ts 声明能力
2. 在 src/features/canvas/tools/builtInTools.ts 注册
3. 在 src/features/canvas/ui/tool-editors/ 新增编辑器
4. 在 src/features/canvas/application/toolProcessor.ts 接入执行

新增节点

1. 在 src/features/canvas/domain/canvasNodes.ts 增加类型与数据结构
2. 在 src/features/canvas/domain/nodeRegistry.ts 注册默认数据与连线能力
3. 在 src/features/canvas/nodes/index.ts 注册渲染组件

持久化说明

• 自动持久化由 projectStore 驱动，不需要手动保存
• 项目列表与项目内容保存在浏览器 IndexedDB
• 核心字段仍包含 nodes_json、edges_json、viewport_json、history_json、node_count
• 图片字段通过 imagePool + __img_ref__ 去重编码

i18n 约定

• 入口：src/i18n/index.ts
• 语言包：src/i18n/locales/zh.json、src/i18n/locales/en.json
• 代码中统一使用 useTranslation() + t('key.path')