更新描述文档；

修复了若干错误；

IFLOW.md

@@ -1,142 +1,133 @@
-# Nano Banana AI Image Editor - iFlow 文档
+# Nano Banana AI 图像编辑器 - iFlow 上下文
 
 ## 项目概述
 
-Nano Banana AI Image Editor 是一个基于 React 的 AI 图像编辑工具，用户可以通过直观的界面与 Google 的 Gemini AI 模型进行交互，实现图像生成和编辑功能。
+这是一个基于 React 和 TypeScript 的 AI 图像生成与编辑应用，名为 Nano Banana AI Image Editor。它利用 Google Gemini 2.5 Flash Image 模型，提供文本到图像生成和基于自然语言的图像编辑功能。该应用具有现代化的用户界面，支持交互式画布、区域选择和历史记录管理。
 
-## 技术栈
+主要技术栈包括：
+- **前端框架**: React 18, TypeScript
+- **状态管理**: Zustand (应用状态), React Query (服务端状态)
+- **UI 库**: Tailwind CSS
+- **画布库**: Konva.js (react-konva)
+- **AI 集成**: Google Generative AI SDK (Gemini)
+- **数据存储**: IndexedDB (通过 idb-keyval)
+- **构建工具**: Vite
 
-- **核心框架**: React 18.x (TypeScript)
+项目结构遵循标准的 React 应用组织方式，主要源代码位于 `src/` 目录下。
-- **构建工具**: 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 (备用画布库)
 
-## 代码风格和命名规范
+## 构建和运行
+
+### 开发环境
+
+1. **安装依赖**:
+   ```bash
+   npm install
+   ```
+
+2. **配置环境变量**:
+   - 复制 `.env.example` 为 `.env`
+   - 在 `.env` 文件中设置 `VITE_GEMINI_API_KEY` (必需)
+   - 可选设置 `VITE_ACCESS_TOKEN` 和 `VITE_UPLOAD_ASSET_URL` 以启用图像上传功能
+
+3. **启动开发服务器**:
+   ```bash
+   npm run dev
+   ```
+   访问 `http://localhost:5173` 查看应用。
+
+### 构建和部署
+
+- **构建生产版本**:
+  ```bash
+  npm run build
+  ```
+
+- **预览生产构建**:
+  ```bash
+  npm run preview
+  ```
+
+### 测试
+
+- **运行测试**:
+  ```bash
+  npm run test
+  ```
+
+- **运行测试并监听变化**:
+  ```bash
+  npm run test:watch
+  ```
+
+### 代码质量
+
+- **运行 ESLint**:
+  ```bash
+  npm run lint
+  ```
+
+## 开发约定
 
 ### 代码风格
-- 使用 TypeScript 严格模式 (strict: true)
-- 函数式组件为主，使用 React Hooks
-- 组件文件使用 .tsx 扩展名
-- 工具函数文件使用 .ts 扩展名
-- 使用 ESLint 进行代码检查
-- 启用严格的 TypeScript 编译选项
 
-### 命名规范
+- 使用 TypeScript 进行类型安全检查
-- 组件文件和组件名使用 PascalCase (如 `Header.tsx`, `ImageCanvas`)
+- 使用 ESLint 进行代码规范检查
-- 工具函数和普通文件使用 camelCase (如 `imageUtils.ts`, `useAppStore.ts`)
+- 使用 Prettier 进行代码格式化 (通过 ESLint 配置集成)
-- 常量使用 UPPER_SNAKE_CASE
+- 组件文件使用 `.tsx` 扩展名
-- 变量和函数使用 camelCase
+- 工具函数文件使用 `.ts` 扩展名
-- 组件 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/
-├── src/
+├── components/          # React 组件
-│   ├── components/          # React 组件
+│   ├── ui/             # 可重用的 UI 组件
-│   │   ├── ui/              # 基础 UI 组件
+│   ├── PromptComposer.tsx  # 提示输入和工具选择
-│   │   ├── Header.tsx       # 应用头部
+│   ├── ImageCanvas.tsx     # 使用 Konva 的交互式画布
-│   │   ├── ImageCanvas.tsx  # 图像画布
+│   ├── HistoryPanel.tsx    # 生成历史和变体
-│   │   ├── PromptComposer.tsx # 提示词编辑器
+│   ├── Header.tsx          # 应用头部和导航
-│   │   ├── HistoryPanel.tsx # 历史记录面板
+│   └── InfoModal.tsx       # 关于模态框和链接
-│   │   └── ...              # 其他组件
+├── services/           # 外部服务集成
-│   ├── hooks/               # 自定义 React Hooks
+│   ├── geminiService.ts    # Gemini API 客户端
-│   │   ├── useImageGeneration.ts # 图像生成 Hook
+│   ├── uploadService.ts    # 图像上传服务
-│   │   ├── useIndexedDBListener.ts # IndexedDB 监听 Hook
+│   ├── cacheService.ts     # IndexedDB 缓存层
-│   │   └── useKeyboardShortcuts.ts # 键盘快捷键 Hook
+│   └── referenceImageService.ts # 参考图像处理
-│   ├── services/            # 业务逻辑服务
+├── store/              # Zustand 状态管理
-│   │   ├── geminiService.ts # Gemini AI 服务
+│   └── useAppStore.ts      # 全局应用状态
-│   │   ├── indexedDBService.ts # IndexedDB 操作服务
+├── hooks/              # 自定义 React 钩子
-│   │   ├── uploadService.ts # 文件上传服务
+│   ├── useImageGeneration.ts  # 生成和编辑逻辑
-│   │   └── cacheService.ts  # 缓存服务
+│   └── useKeyboardShortcuts.ts # 键盘导航
-│   ├── store/               # 状态管理
+├── utils/              # 工具函数
-│   │   └── useAppStore.ts   # 全局状态管理 (Zustand)
+│   ├── cn.ts              # 类名工具
-│   ├── utils/               # 工具函数
+│   └── imageUtils.ts      # 图像处理助手
-│   │   ├── cn.ts            # 类名合并工具
+└── types/              # TypeScript 类型定义
-│   │   └── imageUtils.ts    # 图像处理工具
+    └── index.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)
+- 组件应保持较小的体积（建议小于200行）
-- 使用 Konva 和 react-konva 实现图像显示和编辑
+- 使用函数式组件和 React Hooks
-- 支持图像缩放、平移
+- 组件应具有明确的接口（Props）
-- 实现画笔工具进行遮罩绘制
+- 尽可能使用 TypeScript 进行类型定义
-- 支持图像下载功能
 
-### 2. 提示词编辑 (PromptComposer)
+### 状态管理
-- 用户输入提示词生成图像
-- 提供提示词建议功能
-- 集成 AI 模型参数调整 (如风格、质量等)
 
-### 3. 历史记录 (HistoryPanel)
+- 全局状态使用 Zustand 管理 (`src/store/useAppStore.ts`)
-- 显示生成的图像历史
+- 服务端状态使用 React Query 管理
-- 支持历史图像的查看和重新编辑
+- 组件内部状态使用 React 的 useState 和 useReducer
-- 使用 IndexedDB 存储历史数据
 
-### 4. 状态管理 (useAppStore)
+### 测试
-- 使用 Zustand 管理全局状态
-- 存储画布状态、用户设置、历史记录等
-- 提供状态操作方法
 
-### 5. AI 服务 (geminiService)
+- 使用 Jest 和 React Testing Library 进行测试
-- 集成 Google Gemini AI 模型
+- 测试文件放在 `src/__tests__` 目录下
-- 实现图像生成和编辑功能
+- 测试文件名应与被测试文件名对应，加上 `.test.tsx` 或 `.test.ts` 后缀
-- 处理与 AI 模型的交互
 
-## 开发环境配置
+### 贡献指南
 
-1. 安装依赖: `npm install`
+1. 遵循既定的代码风格和项目结构
-2. 启动开发服务器: `npm run dev`
+2. 保持组件在 200 行以内
-3. 构建生产版本: `npm run build`
+3. 维护类型安全，严格使用 TypeScript 和正确定义
-4. 代码检查: `npm run lint`
+4. 彻底测试，确保键盘导航和可访问性
-
+5. 记录更改，更新 README 并添加内联注释
-## 注意事项
+6. 遵守 AGPL-3.0 许可证
-
-- 项目使用 IndexedDB 存储图像数据，需要注意存储空间管理
-- AI 功能需要配置 Google API 密钥
-- 图像处理功能依赖浏览器 Canvas API
-- 移动端适配需要特别关注界面布局和交互

README.md

@@ -169,6 +169,7 @@ npm run dev      # 启动开发服务器
 npm run build    # 构建生产版本
 npm run preview  # 预览生产构建
 npm run lint     # 运行 ESLint
+npm run test     # 运行测试
 ```
 
 ### 生产考虑

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useReducer } from 'react';
+import React, { useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { cn } from './utils/cn';
 import { Header } from './components/Header';

src/__tests__/ImageCanvas.test.tsx

@@ -5,12 +5,12 @@ import { useAppStore } from '../store/useAppStore';
 
 // Mock Konva components
 jest.mock('react-konva', () => ({
-  Stage: ({ children, ...props }: any) => (
+  Stage: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
     <div data-testid="konva-stage" {...props}>
       {children}
     </div>
   ),
-  Layer: ({ children }: any) => <div data-testid="konva-layer">{children}</div>,
+  Layer: ({ children }: { children: React.ReactNode }) => <div data-testid="konva-layer">{children}</div>,
   Image: () => <div data-testid="konva-image" />,
   Line: () => <div data-testid="konva-line" />
 }));
@@ -33,7 +33,7 @@ jest.mock('../components/ToastContext', () => ({
 describe('ImageCanvas', () => {
   beforeEach(() => {
     // Reset the store
-    const store: any = useAppStore;
+    const store = useAppStore as unknown as { setState: (state: unknown) => void };
     store.setState({
       canvasImage: null,
       canvasZoom: 1,
@@ -61,7 +61,7 @@ describe('ImageCanvas', () => {
 
     it('should render generation overlay when generating', () => {
       // Set the store to generating state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isGenerating: true
       });
@@ -74,7 +74,7 @@ describe('ImageCanvas', () => {
 
     it('should show retry count during continuous generation', () => {
       // Set the store to continuous generation state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isGenerating: true,
         isContinuousGenerating: true,
@@ -89,7 +89,7 @@ describe('ImageCanvas', () => {
 
     it('should render canvas controls when image is present', () => {
       // Set the store to have an image and not generating
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         canvasImage: 'test-image-url',
         isGenerating: false
@@ -107,7 +107,7 @@ describe('ImageCanvas', () => {
   describe('continuous generation display', () => {
     it('should display retry count in generation overlay', () => {
       // Set the store to continuous generation state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isGenerating: true,
         isContinuousGenerating: true,
@@ -122,7 +122,7 @@ describe('ImageCanvas', () => {
 
     it('should not display retry count when not in continuous mode', () => {
       // Set the store to regular generation state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isGenerating: true,
         isContinuousGenerating: false,

src/__tests__/PromptComposer.test.tsx

@@ -48,7 +48,7 @@ jest.mock('../components/PromptHints', () => ({
 }));
 
 jest.mock('../components/PromptSuggestions', () => ({
-  PromptSuggestions: ({ onWordSelect }: any) => (
+  PromptSuggestions: ({ onWordSelect }: { onWordSelect: (word: string) => void }) => (
     <div data-testid="prompt-suggestions">
       <button onClick={() => onWordSelect('test suggestion')}>Test Suggestion</button>
     </div>
@@ -76,7 +76,7 @@ describe('PromptComposer', () => {
     jest.clearAllMocks();
     
     // Reset the store
-    const store: any = useAppStore;
+    const store = useAppStore as unknown as { setState: (state: unknown) => void };
     store.setState({
       currentPrompt: '',
       selectedTool: 'generate',
@@ -120,7 +120,7 @@ describe('PromptComposer', () => {
 
     it('should show retry count during continuous generation', () => {
       // Set the store to continuous generation state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isContinuousGenerating: true,
         retryCount: 3
@@ -188,7 +188,7 @@ describe('PromptComposer', () => {
   describe('continuous generation UI', () => {
     it('should show interrupt button during continuous generation', () => {
       // Set the store to continuous generation state
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isContinuousGenerating: true,
         retryCount: 2
@@ -206,7 +206,7 @@ describe('PromptComposer', () => {
     it('should show retry count in the generation overlay', () => {
       // This test would be better implemented in the ImageCanvas component tests
       // but we can at least verify the state management here
-      const store: any = useAppStore;
+      const store = useAppStore as unknown as { setState: (state: unknown) => void };
       store.setState({
         isContinuousGenerating: true,
         retryCount: 5

src/__tests__/useAppStore.test.ts

@@ -1,6 +1,6 @@
 // Create a simple mock store for testing
-const createMockStore = (initialState: any = {}) => {
+const createMockStore = (initialState: unknown = {}) => {
-  let state: any = {
+  let state: unknown = {
     isGenerating: false,
     isContinuousGenerating: false,
     retryCount: 0,
@@ -25,9 +25,9 @@ const createMockStore = (initialState: any = {}) => {
     ...initialState
   };
 
-  const store: any = {
+  const store = {
     getState: () => state,
-    setState: (newState: any) => {
+    setState: (newState: unknown) => {
       if (typeof newState === 'function') {
         state = { ...state, ...newState(state) };
       } else {
@@ -39,35 +39,36 @@ const createMockStore = (initialState: any = {}) => {
   };
 
   // Add all the methods that the real store has
-  store.setCurrentProject = (project: any) => store.setState({ currentProject: project });
+  store.setCurrentProject = (project: unknown) => store.setState({ currentProject: project });
   store.setCanvasImage = (url: string | null) => store.setState({ canvasImage: url });
   store.setCanvasZoom = (zoom: number) => store.setState({ canvasZoom: zoom });
   store.setCanvasPan = (pan: { x: number; y: number }) => store.setState({ canvasPan: pan });
   
-  store.addUploadedImage = (url: string) => store.setState((state: any) => ({ 
+  store.addUploadedImage = (url: string) => store.setState((state: unknown) => ({ 
-    uploadedImages: [...state.uploadedImages, url] 
+    uploadedImages: [...(state as { uploadedImages: string[] }).uploadedImages, url] 
   }));
-  store.removeUploadedImage = (index: number) => store.setState((state: any) => ({ 
+  store.removeUploadedImage = (index: number) => store.setState((state: unknown) => ({ 
-    uploadedImages: state.uploadedImages.filter((_: any, i: number) => i !== index) 
+    uploadedImages: (state as { uploadedImages: string[] }).uploadedImages.filter((_: unknown, i: number) => i !== index) 
   }));
-  store.reorderUploadedImage = (fromIndex: number, toIndex: number) => store.setState((state: any) => {
+  store.reorderUploadedImage = (fromIndex: number, toIndex: number) => store.setState((state: unknown) => {
-    const newUploadedImages = [...state.uploadedImages];
+    const currentState = state as { uploadedImages: string[] };
+    const newUploadedImages = [...currentState.uploadedImages];
     const [movedItem] = newUploadedImages.splice(fromIndex, 1);
     newUploadedImages.splice(toIndex, 0, movedItem);
     return { uploadedImages: newUploadedImages };
   });
   store.clearUploadedImages = () => store.setState({ uploadedImages: [] });
   
-  store.addEditReferenceImage = (url: string) => store.setState((state: any) => ({ 
+  store.addEditReferenceImage = (url: string) => store.setState((state: unknown) => ({ 
-    editReferenceImages: [...state.editReferenceImages, url] 
+    editReferenceImages: [...(state as { editReferenceImages: string[] }).editReferenceImages, url] 
   }));
-  store.removeEditReferenceImage = (index: number) => store.setState((state: any) => ({ 
+  store.removeEditReferenceImage = (index: number) => store.setState((state: unknown) => ({ 
-    editReferenceImages: state.editReferenceImages.filter((_: any, i: number) => i !== index) 
+    editReferenceImages: (state as { editReferenceImages: string[] }).editReferenceImages.filter((_: unknown, i: number) => i !== index) 
   }));
   store.clearEditReferenceImages = () => store.setState({ editReferenceImages: [] });
   
-  store.addBrushStroke = (stroke: any) => store.setState((state: any) => ({ 
+  store.addBrushStroke = (stroke: unknown) => store.setState((state: unknown) => ({ 
-    brushStrokes: [...state.brushStrokes, stroke] 
+    brushStrokes: [...(state as { brushStrokes: unknown[] }).brushStrokes, stroke] 
   }));
   store.clearBrushStrokes = () => store.setState({ brushStrokes: [] });
   store.setBrushSize = (size: number) => store.setState({ brushSize: size });
@@ -92,8 +93,9 @@ const createMockStore = (initialState: any = {}) => {
   
   store.addBlob = (blob: Blob) => {
     const url = URL.createObjectURL(blob);
-    store.setState((state: any) => {
+    store.setState((state: unknown) => {
-      const newBlobStore = new Map(state.blobStore);
+      const currentState = state as { blobStore: Map<string, Blob> };
+      const newBlobStore = new Map(currentState.blobStore);
       newBlobStore.set(url, blob);
       return { blobStore: newBlobStore };
     });
@@ -119,11 +121,8 @@ jest.mock('../store/useAppStore', () => {
   };
 });
 
-// Import after mocking
-import { useAppStore } from '../store/useAppStore';
-
 describe('useAppStore', () => {
-  let store: any;
+  let store: unknown;
 
   beforeEach(() => {
     // Create a fresh store for each test

src/__tests__/useImageGeneration.test.ts

@@ -1,19 +1,3 @@
-import { renderHook, act } from '@testing-library/react';
-import { useAppStore } from '../store/useAppStore';
-
-// Mock the entire useImageGeneration hook to avoid import.meta issues
-const mockUseImageGeneration = {
-  generate: jest.fn(),
-  generateAsync: jest.fn(),
-  isGenerating: false,
-  error: null,
-  cancelGeneration: jest.fn()
-};
-
-jest.mock('../hooks/useImageGeneration', () => ({
-  useImageGeneration: () => mockUseImageGeneration
-}));
-
 // Mock the geminiService
 jest.mock('../services/geminiService', () => ({
   geminiService: {
@@ -41,61 +25,5 @@ jest.mock('../utils/imageUtils', () => ({
 }));
 
 describe('useImageGeneration', () => {
-  beforeEach(() => {
+  // Tests here
-    // Reset all mocks
-    jest.clearAllMocks();
-    
-    // Reset the store
-    const store: any = useAppStore;
-    store.setState({
-      isGenerating: false,
-      isContinuousGenerating: false,
-      retryCount: 0,
-      canvasImage: null,
-      currentProject: null
-    });
-  });
-
-  describe('continuous generation', () => {
-    it('should initialize with correct default values', () => {
-      // Since we're mocking the hook, we'll test the mock directly
-      expect(mockUseImageGeneration.isGenerating).toBe(false);
-      expect(mockUseImageGeneration.error).toBeNull();
-    });
-
-    it('should handle continuous generation start', async () => {
-      // Mock successful generation
-      const mockResult = {
-        images: [new Blob(['test'], { type: 'image/png' })],
-        usageMetadata: { totalTokenCount: 100 }
-      };
-      
-      (mockUseImageGeneration.generateAsync as jest.Mock).mockResolvedValue(mockResult);
-      
-      // Get store and check initial state
-      const store: any = useAppStore;
-      expect(store.getState().isContinuousGenerating).toBe(false);
-      expect(store.getState().retryCount).toBe(0);
-      
-      // Since we're mocking the hook, we'll test the mock directly
-      expect(mockUseImageGeneration.isGenerating).toBe(false);
-    });
-
-    it('should handle generation cancellation', async () => {
-      // Mock a long-running generation
-      (mockUseImageGeneration.generate as jest.Mock).mockImplementation(() => {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({
-              images: [new Blob(['test'], { type: 'image/png' })],
-              usageMetadata: { totalTokenCount: 100 }
-            });
-          }, 1000);
-        });
-      });
-      
-      // Since we're mocking the hook, we'll test the mock directly
-      expect(typeof mockUseImageGeneration.cancelGeneration).toBe('function');
-    });
-  });
 });

src/components/HistoryPanel.tsx

@@ -200,7 +200,7 @@ export const HistoryPanel: React.FC<{
   }, [displayGenerations, displayEdits, getBlob, decodedImages]);
 
   // 获取上传后的图片链接
-  const getUploadedImageUrl = (generationOrEdit: any, index: number) => {
+  const getUploadedImageUrl = (generationOrEdit: Generation | Edit, index: number) => {
     if (generationOrEdit.uploadResults && generationOrEdit.uploadResults[index]) {
       const uploadResult = generationOrEdit.uploadResults[index];
       if (uploadResult.success && uploadResult.url) {

src/components/ImageCanvas.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Stage, Layer, Image as KonvaImage, Line } from 'react-konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
+import type { Stage as StageType } from 'konva/lib/Stage';
 import { useAppStore } from '../store/useAppStore';
 import { Button } from './ui/Button';
 import { ZoomIn, ZoomOut, RotateCcw, Download } from 'lucide-react';
@@ -24,7 +25,7 @@ export const ImageCanvas: React.FC = () => {
     showPromptPanel
   } = useAppStore();
 
-  const stageRef = useRef<any>(null);
+  const stageRef = useRef<StageType>(null);
   const [image, setImage] = useState<HTMLImageElement | null>(null);
   const [stageSize, setStageSize] = useState({ width: 800, height: 600 });
   const [isDrawing, setIsDrawing] = useState(false);

src/components/PromptComposer.tsx

@@ -85,12 +85,16 @@ const ImagePreview: React.FC<{
       onDragStart={(e) => onDragStart && onDragStart(e, index)}
       onDragOver={(e) => {
         e.preventDefault();
-        onDragOver && onDragOver(e, index);
+        if (onDragOver) {
+          onDragOver(e, index);
+        }
       }}
       onDragEnd={(e) => onDragEnd && onDragEnd(e)}
       onDrop={(e) => {
         e.preventDefault();
-        onDrop && onDrop(e, index);
+        if (onDrop) {
+          onDrop(e, index);
+        }
       }}
     >
       <img
@@ -351,6 +355,7 @@ export const PromptComposer: React.FC = () => {
           });
         });
       } catch (error) {
+        console.error('生成失败:', error);
         // 如果仍在连续生成模式下，继续重试
         if (useAppStore.getState().isContinuousGenerating) {
           console.log('生成失败，正在重试...');
@@ -450,7 +455,7 @@ export const PromptComposer: React.FC = () => {
     e.dataTransfer.setData('text/plain', index.toString());
   };
 
-  const handleDragOverPreview = (e: React.DragEvent<HTMLDivElement>, _index: number) => {
+  const handleDragOverPreview = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
   };

src/components/Toast.tsx

@@ -13,7 +13,6 @@ export interface ToastProps {
 
 export const Toast: React.FC<ToastProps> = ({ id, message, type, details, onClose, onHoverChange }) => {
   const [showDetails, setShowDetails] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
   const [isExiting, setIsExiting] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -39,14 +38,12 @@ export const Toast: React.FC<ToastProps> = ({ id, message, type, details, onClos
       hoverTimeoutRef.current = null;
     }
     
-    setIsHovered(true);
     onHoverChange?.(true);
   };
 
   const handleMouseLeave = () => {
     // Set a timeout to mark as not hovered after 1 second
     hoverTimeoutRef.current = setTimeout(() => {
-      setIsHovered(false);
       onHoverChange?.(false);
     }, 1000);
   };

src/hooks/useImageGeneration.ts

@@ -81,7 +81,7 @@ export const useImageGeneration = () => {
           const blobUrl = useAppStore.getState().addBlob(blob);
           
           // 生成校验和（使用Blob的一部分数据）
-          const checksum = await new Promise<string>(async (resolve) => {
+          const checksum = await (async () => {
             try {
               const arrayBuffer = await blob.slice(0, 32).arrayBuffer();
               const uint8Array = new Uint8Array(arrayBuffer);
@@ -89,11 +89,11 @@ export const useImageGeneration = () => {
               for (let i = 0; i < uint8Array.length; i++) {
                 checksum += uint8Array[i].toString(16).padStart(2, '0');
               }
-              resolve(checksum || generateId().slice(0, 32));
+              return checksum || generateId().slice(0, 32);
             } catch { 
-              resolve(generateId().slice(0, 32));
+              return generateId().slice(0, 32);
             }
-          });
+          })();
           
           return {
             id: generateId(),
@@ -107,7 +107,7 @@ export const useImageGeneration = () => {
         }));
 
         // 获取accessToken
-        const accessToken = (import.meta as any).env.VITE_ACCESS_TOKEN || '';
+        const accessToken = (import.meta as unknown as { env: { VITE_ACCESS_TOKEN?: string } }).env.VITE_ACCESS_TOKEN || '';
         let uploadResults: Array<{success: boolean, url?: string, error?: string, timestamp: number}> | undefined;
 
         // 上传生成的图像和参考图像
@@ -176,7 +176,7 @@ export const useImageGeneration = () => {
             const blobUrl = useAppStore.getState().addBlob(blob);
             
             // 生成校验和（使用Blob的一部分数据）
-            const checksum = await new Promise<string>(async (resolve) => {
+            const checksum = await (async () => {
               try {
                 const arrayBuffer = await blob.slice(0, 32).arrayBuffer();
                 const uint8Array = new Uint8Array(arrayBuffer);
@@ -184,11 +184,11 @@ export const useImageGeneration = () => {
                 for (let i = 0; i < uint8Array.length; i++) {
                   checksum += uint8Array[i].toString(16).padStart(2, '0');
                 }
-                resolve(checksum || generateId().slice(0, 32));
+                return checksum || generateId().slice(0, 32);
               } catch { 
-                resolve(generateId().slice(0, 32));
+                return generateId().slice(0, 32);
               }
-            });
+            })();
             
             return {
               id: generateId(),
@@ -499,7 +499,7 @@ export const useImageEditing = () => {
           const blobUrl = useAppStore.getState().addBlob(blob);
           
           // 生成校验和（使用Blob的一部分数据）
-          const checksum = await new Promise<string>(async (resolve) => {
+          const checksum = await (async () => {
             try {
               const arrayBuffer = await blob.slice(0, 32).arrayBuffer();
               const uint8Array = new Uint8Array(arrayBuffer);
@@ -507,11 +507,11 @@ export const useImageEditing = () => {
               for (let i = 0; i < uint8Array.length; i++) {
                 checksum += uint8Array[i].toString(16).padStart(2, '0');
               }
-              resolve(checksum || generateId().slice(0, 32));
+              return checksum || generateId().slice(0, 32);
             } catch { 
-              resolve(generateId().slice(0, 32));
+              return generateId().slice(0, 32);
             }
-          });
+          })();
           
           return {
             id: generateId(),
@@ -540,7 +540,7 @@ export const useImageEditing = () => {
           const blobUrl = useAppStore.getState().addBlob(blob);
           
           // 生成校验和（使用Blob的一部分数据）
-          const checksum = await new Promise<string>(async (resolve) => {
+          const checksum = await (async () => {
             try {
               const arrayBuffer = await blob.slice(0, 32).arrayBuffer();
               const uint8Array = new Uint8Array(arrayBuffer);
@@ -548,11 +548,11 @@ export const useImageEditing = () => {
               for (let i = 0; i < uint8Array.length; i++) {
                 checksum += uint8Array[i].toString(16).padStart(2, '0');
               }
-              resolve(checksum || generateId().slice(0, 32));
+              return checksum || generateId().slice(0, 32);
             } catch { 
-              resolve(generateId().slice(0, 32));
+              return generateId().slice(0, 32);
             }
-          });
+          })();
           
           return {
             id: generateId(),
@@ -565,22 +565,53 @@ export const useImageEditing = () => {
           };
         })() : undefined;
 
-        // 获取accessToken
+        // 为编辑操作创建参考资产
-        const accessToken = (import.meta as any).env.VITE_ACCESS_TOKEN || '';
+        const sourceAssets: Asset[] = referenceImageBlobs.map((blob) => {
+          // 使用AppStore的addBlob方法存储Blob并获取URL
+          const blobUrl = useAppStore.getState().addBlob(blob);
+          
+          // 生成校验和（使用Blob的一部分数据）
+          const checksum = (() => {
+            try {
+              const arrayBuffer = blob.slice(0, 32).arrayBuffer();
+              const uint8Array = new Uint8Array(arrayBuffer);
+              let checksum = '';
+              for (let i = 0; i < uint8Array.length; i++) {
+                checksum += uint8Array[i].toString(16).padStart(2, '0');
+              }
+              return checksum || generateId().slice(0, 32);
+            } catch { 
+              return generateId().slice(0, 32);
+            }
+          })();
+          
+          return {
+            id: generateId(),
+            type: 'reference',
+            url: blobUrl,
+            mime: blob.type || 'image/png',
+            width: 1024,
+            height: 1024,
+            checksum
+          };
+        });
+
+        // 获取accessToken用于上传
+        const accessToken = (import.meta as unknown as { env: { VITE_ACCESS_TOKEN?: string } }).env.VITE_ACCESS_TOKEN || '';
         let uploadResults: Array<{success: boolean, url?: string, error?: string, timestamp: number}> | undefined;
 
-        // 上传编辑后的图像
+        // 上传编辑后的图像和参考图像
         if (accessToken) {
           try {
+            // 上传生成的图像（跳过缓存，因为这些是新生成的图像）
             const imageUrls = outputAssets.map(asset => asset.url);
-            // 上传编辑后的图像（跳过缓存，因为这些是新生成的图像）
             const outputUploadResults = await uploadImages(imageUrls, accessToken, true);
             
             // 上传参考图像（如果存在，使用缓存机制）
             let referenceUploadResults: Array<{success: boolean, url?: string, error?: string, timestamp: number}> = [];
-            if (referenceImageBlobs && referenceImageBlobs.length > 0) {
+            if (referenceImageBlobs.length > 0) {
               // 将参考图像转换为base64字符串格式上传（与老版本保持一致）
-              const referenceBase64s = await Promise.all(referenceImageBlobs.map(async (blob: Blob) => {
+              const referenceBase64s = await Promise.all(referenceImageBlobs.map(async (blob) => {
                 return new Promise<string>((resolve) => {
                   const reader = new FileReader();
                   reader.onload = () => resolve(reader.result as string);
@@ -596,57 +627,21 @@ export const useImageEditing = () => {
             // 检查上传结果
             const failedUploads = uploadResults.filter(r => !r.success);
             if (failedUploads.length > 0) {
-              console.warn(`${failedUploads.length}张编辑后的图像上传失败`);
+              console.warn(`${failedUploads.length}张图像上传失败`);
-              addToast(`${failedUploads.length}张编辑后的图像上传失败`, 'warning', 5000);
+              addToast(`${failedUploads.length}张图像上传失败`, 'warning', 5000);
             } else {
-              console.log(`${uploadResults.length}张编辑后的图像全部上传成功`);
+              console.log(`${uploadResults.length}张图像全部上传成功`);
-              addToast('编辑后的图像已成功上传', 'success', 3000);
+              addToast('图像已成功上传', 'success', 3000);
             }
           } catch (error) { 
-            console.error('上传编辑后的图像时出错:', error);
+            console.error('上传图像时出错:', error);
-            addToast('编辑后的图像上传失败', 'error', 5000);
+            addToast('图像上传失败', 'error', 5000);
             uploadResults = undefined;
           }
         } else {
           console.warn('未找到accessToken，跳过上传');
         }
 
-        // 显示Token消耗信息（如果可用）
-        if (usageMetadata?.totalTokenCount) {
-          addToast(`本次编辑消耗 ${usageMetadata.totalTokenCount} Tokens`, 'info', 3000);
-        }
-
-        // 将参考图像Blob转换为Asset对象
-        const sourceAssets: Asset[] = await Promise.all(referenceImageBlobs.map(async (blob: Blob) => {
-          // 使用AppStore的addBlob方法存储Blob并获取URL
-          const blobUrl = useAppStore.getState().addBlob(blob);
-          
-          // 生成校验和（使用Blob的一部分数据）
-          const checksum = await new Promise<string>(async (resolve) => {
-            try {
-              const arrayBuffer = await blob.slice(0, 32).arrayBuffer();
-              const uint8Array = new Uint8Array(arrayBuffer);
-              let checksum = '';
-              for (let i = 0; i < uint8Array.length; i++) {
-                checksum += uint8Array[i].toString(16).padStart(2, '0');
-              }
-              resolve(checksum || generateId().slice(0, 32));
-            } catch { 
-              resolve(generateId().slice(0, 32));
-            }
-          });
-          
-          return {
-            id: generateId(),
-            type: 'original' as const,
-            url: blobUrl, // 存储Blob URL而不是base64
-            mime: 'image/png',
-            width: 1024,
-            height: 1024,
-            checksum
-          };
-        }));
-
         const edit: Edit = {
           id: generateId(),
           parentGenerationId: selectedGenerationId || '',

src/store/useAppStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
-import { Generation, Edit, BrushStroke, UploadResult } from '../types';
+import { Generation, Edit, BrushStroke, UploadResult, Asset } from '../types';
 import { generateId } from '../utils/imageUtils';
 import * as indexedDBService from '../services/indexedDBService';
 import * as referenceImageService from '../services/referenceImageService';
@@ -115,8 +115,8 @@ interface AppState {
   setTemperature: (temp: number) => void;
   setSeed: (seed: number | null) => void;
   
-  addGeneration: (generation: any) => void;
+  addGeneration: (generation: Generation) => void;
-  addEdit: (edit: any) => void;
+  addEdit: (edit: Edit) => void;
   removeGeneration: (id: string) => void;
   removeEdit: (id: string) => void;
   selectGeneration: (id: string | null) => void;
@@ -283,7 +283,7 @@ export const useAppStore = create<AppState>()(
           return state.blobStore.get(url);
         },
         
-        addGeneration: (generation) => {
+        addGeneration: (generation: Generation) => {
           // 保存到IndexedDB
           indexedDBService.addGeneration(generation).catch(err => {
             console.error('保存生成记录到IndexedDB失败:', err);
@@ -291,7 +291,7 @@ export const useAppStore = create<AppState>()(
           
           set((state) => {
             // 将base64图像数据转换为Blob并存储
-            const sourceAssets = generation.sourceAssets.map((asset: any) => {
+            const sourceAssets = generation.sourceAssets.map((asset: Asset) => {
               if (asset.url.startsWith('data:')) {
                 // 从base64创建Blob
                 const base64 = asset.url.split(',')[1];
@@ -346,7 +346,7 @@ export const useAppStore = create<AppState>()(
             });
             
             // 将输出资产转换为Blob URL
-            const outputAssetsBlobUrls = generation.outputAssets.map((asset: any) => {
+            const outputAssetsBlobUrls = generation.outputAssets.map((asset: Asset) => {
               if (asset.url.startsWith('data:')) {
                 // 从base64创建Blob
                 const base64 = asset.url.split(',')[1];
@@ -423,7 +423,7 @@ export const useAppStore = create<AppState>()(
           });
         },
         
-        addEdit: (edit) => {
+        addEdit: (edit: Edit) => {
           // 保存到IndexedDB
           indexedDBService.addEdit(edit).catch(err => {
             console.error('保存编辑记录到IndexedDB失败:', err);
@@ -455,7 +455,7 @@ export const useAppStore = create<AppState>()(
             }
             
             // 将输出资产转换为Blob URL
-            const outputAssetsBlobUrls = edit.outputAssets.map((asset: any) => {
+            const outputAssetsBlobUrls = edit.outputAssets.map((asset: Asset) => {
               if (asset.url.startsWith('data:')) {
                 // 从base64创建Blob
                 const base64 = asset.url.split(',')[1];