添加了IFLOW描述文件；

优化调整了历史记录悬浮窗的显示位置；
2025-09-19 16:31:09 +08:00
parent c5ee5dd2a3
commit 9a5e4d8041
4 changed files with 297 additions and 387 deletions
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -0,0 +1,142 @@
+# Nano Banana AI Image Editor - iFlow 文档
+
+## 项目概述
+
+Nano Banana AI Image Editor 是一个基于 React 的 AI 图像编辑工具，用户可以通过直观的界面与 Google 的 Gemini AI 模型进行交互，实现图像生成和编辑功能。
+
+## 技术栈
+
+- **核心框架**: React 18.x (TypeScript)
+- **构建工具**: Vite 5.x
+- **语言**: TypeScript (ES2020)
+- **状态管理**: Zustand
+- **数据获取**: TanStack Query (React Query)
+- **UI 框架**: 
+  - Tailwind CSS 3.x (样式框架)
+  - Radix UI (无样式的可访问 UI 组件)
+  - Lucide React (图标库)
+- **图像处理**:
+  - Konva (2D 画布库)
+  - react-konva (Konva 的 React 封装)
+- **本地存储**: IndexedDB (通过 idb-keyval 库操作)
+- **AI 集成**: Google Generative AI SDK (@google/genai)
+- **工具库**:
+  - class-variance-authority (组件变体管理)
+  - clsx + tailwind-merge (CSS 类名合并)
+  - fabric.js (备用画布库)
+
+## 代码风格和命名规范
+
+### 代码风格
+- 使用 TypeScript 严格模式 (strict: true)
+- 函数式组件为主，使用 React Hooks
+- 组件文件使用 .tsx 扩展名
+- 工具函数文件使用 .ts 扩展名
+- 使用 ESLint 进行代码检查
+- 启用严格的 TypeScript 编译选项
+
+### 命名规范
+- 组件文件和组件名使用 PascalCase (如 `Header.tsx`, `ImageCanvas`)
+- 工具函数和普通文件使用 camelCase (如 `imageUtils.ts`, `useAppStore.ts`)
+- 常量使用 UPPER_SNAKE_CASE
+- 变量和函数使用 camelCase
+- 组件 Props 接口命名为组件名 + Props (如 `ButtonProps`)
+- Hook 函数以 use 开头 (如 `useAppStore`, `useImageGeneration`)
+
+## 样式和 UI 框架
+
+### Tailwind CSS
+- 使用自定义颜色方案，以香蕉黄 (banana) 为主题色
+- 定义了 light 主题颜色 (背景、面板、边框、文字等)
+- 使用自定义间距、阴影和动画
+- 使用 tailwind-merge 和 clsx 进行类名合并
+
+### 组件设计
+- 使用 Radix UI 构建无样式的可访问组件
+- 自定义 UI 组件位于 `src/components/ui` 目录
+- 组件变体使用 class-variance-authority 管理
+- 图标使用 Lucide React
+
+## 项目结构
+
+```
+Nano-Banana-AI-Image-Editor/
+├── src/
+│   ├── components/          # React 组件
+│   │   ├── ui/              # 基础 UI 组件
+│   │   ├── Header.tsx       # 应用头部
+│   │   ├── ImageCanvas.tsx  # 图像画布
+│   │   ├── PromptComposer.tsx # 提示词编辑器
+│   │   ├── HistoryPanel.tsx # 历史记录面板
+│   │   └── ...              # 其他组件
+│   ├── hooks/               # 自定义 React Hooks
+│   │   ├── useImageGeneration.ts # 图像生成 Hook
+│   │   ├── useIndexedDBListener.ts # IndexedDB 监听 Hook
+│   │   └── useKeyboardShortcuts.ts # 键盘快捷键 Hook
+│   ├── services/            # 业务逻辑服务
+│   │   ├── geminiService.ts # Gemini AI 服务
+│   │   ├── indexedDBService.ts # IndexedDB 操作服务
+│   │   ├── uploadService.ts # 文件上传服务
+│   │   └── cacheService.ts  # 缓存服务
+│   ├── store/               # 状态管理
+│   │   └── useAppStore.ts   # 全局状态管理 (Zustand)
+│   ├── utils/               # 工具函数
+│   │   ├── cn.ts            # 类名合并工具
+│   │   └── imageUtils.ts    # 图像处理工具
+│   ├── types/               # TypeScript 类型定义
+│   ├── App.tsx              # 根组件
+│   ├── main.tsx             # 应用入口
+│   └── vite-env.d.ts        # Vite 类型声明
+├── public/                  # 静态资源
+├── node_modules/            # 依赖包
+├── index.html               # HTML 模板
+├── package.json             # 项目配置
+├── tsconfig.json            # TypeScript 配置
+├── vite.config.ts           # Vite 配置
+├── tailwind.config.js       # Tailwind 配置
+├── postcss.config.js        # PostCSS 配置
+├── eslint.config.js         # ESLint 配置
+└── README.md                # 项目说明
+```
+
+## 核心功能模块
+
+### 1. 图像画布 (ImageCanvas)
+- 使用 Konva 和 react-konva 实现图像显示和编辑
+- 支持图像缩放、平移
+- 实现画笔工具进行遮罩绘制
+- 支持图像下载功能
+
+### 2. 提示词编辑 (PromptComposer)
+- 用户输入提示词生成图像
+- 提供提示词建议功能
+- 集成 AI 模型参数调整 (如风格、质量等)
+
+### 3. 历史记录 (HistoryPanel)
+- 显示生成的图像历史
+- 支持历史图像的查看和重新编辑
+- 使用 IndexedDB 存储历史数据
+
+### 4. 状态管理 (useAppStore)
+- 使用 Zustand 管理全局状态
+- 存储画布状态、用户设置、历史记录等
+- 提供状态操作方法
+
+### 5. AI 服务 (geminiService)
+- 集成 Google Gemini AI 模型
+- 实现图像生成和编辑功能
+- 处理与 AI 模型的交互
+
+## 开发环境配置
+
+1. 安装依赖: `npm install`
+2. 启动开发服务器: `npm run dev`
+3. 构建生产版本: `npm run build`
+4. 代码检查: `npm run lint`
+
+## 注意事项
+
+- 项目使用 IndexedDB 存储图像数据，需要注意存储空间管理
+- AI 功能需要配置 Google API 密钥
+- 图像处理功能依赖浏览器 Canvas API
+- 移动端适配需要特别关注界面布局和交互