mirror of
https://github.com/linshenkx/prompt-optimizer.git
synced 2026-05-06 21:50:27 +08:00
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:
@@ -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/
|
||||
|
||||
Reference in New Issue
Block a user