feat: 重构图像模型管理架构并优化用户界面

## 核心改进

### 🏗️ 架构重构
- 实现ImageModelManager组件分离设计,关注点明确分离
- 重构ModelManager.vue为统一模型管理入口,支持文本/图像双模式
- 采用组件复用和扩展性设计,易于添加新模型类型

### 🎨 界面优化
- 摒弃5步导航式编辑,改为一体化界面设计
- 优化ImageModelEditModal为单页滚动布局,提升操作效率
- 统一文本和图像模型管理的交互体验和视觉风格

### 🔌 适配器扩展
- 新增OpenRouter和SiliconFlow图像适配器支持
- 完善AbstractImageProviderAdapter抽象基类设计
- 优化适配器注册表和动态模型发现机制

### 💻 类型系统
- 完善ImageModelConfig和相关类型定义
- 增强TypeScript类型安全和智能提示
- 优化服务层接口设计和依赖注入架构

### 🧪 测试覆盖
- 新增图像适配器单元测试和集成测试
- 添加E2E验收测试保证功能完整性
- 增强连接测试和参数验证测试覆盖

### 📚 文档完善
- 新增图像模型管理架构设计文档
- 添加一体化界面改进方案文档
- 更新项目结构和开发指南

## 技术特点

- **SOLID原则**:清晰的单一职责和开闭扩展设计
- **组合模式**:ImageModelManager + ModelManager.vue 组合架构
- **响应式设计**:基于Vue 3 Composition API的状态管理
- **依赖注入**:松耦合的服务架构和组件通信

这次重构显著提升了图像模型管理的用户体验和代码可维护性,
为后续音频、视频等多模态功能扩展奠定了坚实基础。
This commit is contained in:
linshen
2025-09-21 20:17:03 +08:00
parent 2ffb7556ee
commit ba63eff9ad
76 changed files with 11349 additions and 2944 deletions

View File

@@ -54,10 +54,25 @@ src/
│ │ ├── service.ts # LLM服务实现
│ │ ├── types.ts # 类型定义
│ │ └── errors.ts # 错误定义
│ ├── model/ # 模型管理
│ ├── model/ # 文本模型管理
│ │ ├── manager.ts # 模型管理器
│ │ ├── types.ts # 类型定义
│ │ └── defaults.ts# 默认配置
│ ├── image/ # 图像服务(新增)
│ │ ├── service.ts # 图像生成服务
│ │ ├── types.ts # 图像服务类型定义
│ │ ├── electron-proxy.ts # Electron代理
│ │ └── adapters/ # 图像提供商适配器
│ │ ├── abstract-adapter.ts # 抽象适配器基类
│ │ ├── registry.ts # 适配器注册表
│ │ ├── openai.ts # OpenAI DALL-E适配器
│ │ ├── gemini.ts # Google Gemini适配器
│ │ ├── siliconflow-adapter.ts # SiliconFlow适配器
│ │ └── seedream.ts # SeeDream适配器
│ ├── image-model/ # 图像模型管理(新增)
│ │ ├── manager.ts # 图像模型管理器
│ │ ├── types.ts # 类型定义
│ │ └── defaults.ts# 默认配置
│ ├── prompt/ # 提示词服务
│ │ ├── service.ts # 提示词服务实现
│ │ ├── types.ts # 类型定义
@@ -65,6 +80,13 @@ src/
│ ├── template/ # 模板服务
│ │ ├── manager.ts # 模板管理器
│ │ ├── types.ts # 类型定义
│ │ └── default-templates/ # 默认模板
│ │ ├── image-optimize/ # 图像模板(新增)
│ │ │ ├── text2image/ # 文生图模板
│ │ │ ├── image2image/ # 图生图模板
│ │ │ └── iterate/ # 图像迭代模板
│ │ ├── basic/ # 基础模板
│ │ └── context/ # 上下文模板
│ └── history/ # 历史记录服务
│ ├── manager.ts # 历史管理器
│ └── types.ts # 类型定义
@@ -102,12 +124,19 @@ tests/
```
src/
├── components/ # Vue组件
│ ├── PromptPanel.vue # 提示词面板
│ ├── ModelManager.vue # 模型管理器
│ ├── TemplateManager.vue# 模板管理器
│ ├── InputPanel.vue # 输入面板
── OutputPanel.vue # 输出面板
│ ├── PromptPanel.vue # 提示词面板
│ ├── ModelManager.vue # 统一模型管理器(支持文本/图像模型切换)
│ ├── ImageModelManager.vue# 图像模型专用管理组件
│ ├── ImageModelEditModal.vue # 图像模型编辑弹窗
── TemplateManager.vue # 模板管理器
│ ├── InputPanel.vue # 输入面板
│ ├── OutputPanel.vue # 输出面板
│ └── image-mode/ # 图像模式专用组件
│ └── ImageWorkspace.vue # 图像工作区
├── composables/ # Vue组合式函数
│ ├── useImageModelManager.ts # 图像模型管理composable
│ ├── useImageGeneration.ts # 图像生成composable
│ └── useImageWorkspace.ts # 图像工作区composable
├── services/ # 业务逻辑
│ ├── llm/ # LLM服务
│ ├── model/ # 模型配置
@@ -123,13 +152,36 @@ src/
```
### 3.2 组件目录详情 (packages/web/src/components/)
#### 核心组件
- `PromptPanel.vue` - 提示词输入和优化面板
- `InputPanel.vue` - 输入面板组件
- `OutputPanel.vue` - 输出面板组件
- `ModelConfig.vue` - 模型配置组件
- `TemplateManager.vue` - 模板管理器
- `ThemeToggle.vue` - 主题切换组件
- `LoadingSpinner.vue` - 加载动画组件
#### 模型管理架构
- `ModelManager.vue` - **统一模型管理器**
- 支持文本模型和图像模型的标签页切换
- 文本模型:直接在该组件内管理
- 图像模型:委托给 `ImageModelManager.vue` 组件处理
- 替代了原有的单一模型管理方案(`ModelManager.vue.bak`
- `ImageModelManager.vue` - **图像模型专用管理组件**
- 专门负责图像模型的列表展示、连接测试、启用/禁用等操作
-`useImageModelManager` composable 配合使用
- 支持图像提供商OpenAI DALL-E、Gemini、SiliconFlow等的模型管理
- `ImageModelEditModal.vue` - **图像模型编辑弹窗**
- 用于添加/编辑图像模型配置
- 提供商选择、模型选择、连接配置等表单功能
#### 图像模式组件
- `image-mode/ImageWorkspace.vue` - **图像工作区**
- 图像模式的主要工作界面
- 整合文生图、图生图、图像迭代等功能
### 3.3 测试目录 (packages/web/tests/)
```
tests/