图像模型管理架构设计

概述

本文档描述了 Prompt Optimizer 中图像模型管理的新架构设计，该架构采用了组件分离和职责明确的设计原则，通过 ImageModelManager + ModelManager.vue 的组合方式来替代原有的单一模型管理方案。

架构设计原则

1. 关注点分离 (Separation of Concerns)

• 统一入口：ModelManager.vue 作为模型管理的统一入口
• 专业分工：ImageModelManager.vue 专门处理图像模型的管理逻辑
• 类型隔离：文本模型和图像模型采用不同的管理策略

2. 组件复用与扩展性

• 可复用组件：ImageModelManager.vue 可以在其他场景中独立使用
• 易于扩展：未来增加新的模型类型时，只需添加新的专用管理组件
• 标准化接口：所有模型管理组件遵循统一的接口规范

核心组件架构

1. ModelManager.vue（统一模型管理器）

<!-- 功能概述 -->
<template>
  <NModal>
    <NTabs v-model:value="activeTab">
      <NTabPane name="text" tab="文本模型">
        <!-- 直接管理文本模型 -->
      </NTabPane>
      <NTabPane name="image" tab="图像模型">
        <ImageModelManager />
      </NTabPane>
    </NTabs>
  </NModal>
</template>

职责

• 提供模型管理的统一入口界面
• 通过标签页切换文本模型和图像模型
• 文本模型：直接在该组件内管理
• 图像模型：委托给 ImageModelManager.vue 处理
• 管理弹窗的显示/隐藏状态

特点

• 双重模式：支持文本和图像两种模型类型
• 委托模式：将图像模型管理委托给专用组件
• 统一界面：为用户提供一致的操作体验

2. ImageModelManager.vue（图像模型专用管理组件）

<!-- 功能概述 -->
<template>
  <div class="image-model-list">
    <NEmpty v-if="!configs?.length">
      <NButton @click="openAddModal">添加第一个图像模型</NButton>
    </NEmpty>

    <NSpace v-else vertical>
      <NCard v-for="config in configs" :key="config.id">
        <!-- 模型信息展示 -->
        <!-- 连接测试按钮 -->
        <!-- 编辑/删除操作 -->
      </NCard>
    </NSpace>
  </div>
</template>

职责

• 模型列表展示：显示已配置的图像模型列表
• 连接测试：测试各个图像模型的连接状态
• 状态管理：管理模型的启用/禁用状态
• 操作界面：提供编辑、删除等操作入口

与 useImageModelManager 的协作

• 使用 useImageModelManager composable 处理业务逻辑
• 通过依赖注入获取 imageRegistry 和 imageModelManager
• 响应式状态管理和用户操作处理

3. ImageModelEditModal.vue（图像模型编辑弹窗）

<!-- 一体化界面设计 -->
<template>
  <NModal>
    <NScrollbar>
      <!-- 基本信息区域 -->
      <NSpace vertical>
        <NFormItem label="模型名称" required>
          <NInput v-model:value="formData.name" />
        </NFormItem>
      </NSpace>

      <!-- 提供商配置区域 -->
      <NDivider />
      <NH4>提供商配置</NH4>
      <NSpace vertical>
        <!-- 提供商选择 -->
        <!-- 动态连接配置 -->
        <!-- 连接测试 -->
      </NSpace>

      <!-- 模型选择区域 -->
      <NDivider />
      <NH4>模型配置</NH4>
      <!-- 模型选择和能力展示 -->

      <!-- 参数配置区域（可折叠） -->
      <NDivider />
      <NCollapse>
        <NCollapseItem title="高级参数配置">
          <!-- 参数配置界面 -->
        </NCollapseItem>
      </NCollapse>
    </NScrollbar>
  </NModal>
</template>

设计理念：一体化界面

• 摒弃导航式设计：不再使用多步骤向导，所有配置在一个界面完成
• 逻辑分组展示：使用分割线和标题将相关配置分组，而非分步
• 智能交互设计：根据用户选择动态显示相关配置项
• 与文本模型一致：保持与文本模型管理界面相同的设计风格

主要功能区域

1. 基本信息：模型名称、启用状态等基础配置
2. 提供商配置：提供商选择、连接参数、连接测试
3. 模型配置：模型选择、能力展示、动态模型发现
4. 高级参数：可折叠的参数覆盖配置区域

用户体验优势

• 操作效率高：所有配置项在一个界面中，无需步骤切换
• 信息整体性：用户可以整体把握所有配置信息
• 编辑便利性：修改时可以直接定位到需要调整的配置项
• 一致性好：与文本模型管理保持相同的操作体验

Composable 层架构

useImageModelManager.ts

export function useImageModelManager() {
  // 依赖注入
  const registry = inject<IImageAdapterRegistry>('imageRegistry')!
  const imageModelManager = inject<IImageModelManager>('imageModelManager')!

  // 状态管理
  const providers = ref<ImageProvider[]>([])
  const configs = ref<ImageModelConfig[]>([])

  // 业务逻辑
  const loadProviders = async () => { /* ... */ }
  const testConnection = async (configId: string) => { /* ... */ }
  const saveConfig = async (config: ImageModelConfig) => { /* ... */ }

  return {
    providers,
    configs,
    loadProviders,
    testConnection,
    saveConfig
  }
}

设计特点

• 依赖注入：通过 Vue 的 provide/inject 获取核心服务
• 响应式状态：使用 Vue 3 的响应式系统管理状态
• 业务逻辑封装：将复杂的业务逻辑从组件中抽离

核心服务层架构

1. 图像适配器系统

packages/core/src/services/image/adapters/
├── abstract-adapter.ts     # 抽象适配器基类
├── registry.ts            # 适配器注册表
├── openai.ts             # OpenAI DALL-E适配器
├── gemini.ts             # Google Gemini适配器
├── siliconflow-adapter.ts # SiliconFlow适配器
└── seedream.ts           # SeeDream适配器

AbstractImageProviderAdapter

export abstract class AbstractImageProviderAdapter {
  abstract getProvider(): ImageProvider
  abstract getSupportedModels(): Promise<ImageModel[]>
  abstract generateImage(request: ImageRequest): Promise<ImageResult>
  abstract testConnection(config: ImageModelConfig): Promise<boolean>
}

设计优势

• 统一接口：所有图像提供商都实现相同的接口
• 易于扩展：添加新的提供商只需实现抽象适配器
• 类型安全：完整的 TypeScript 类型定义

2. 图像模型管理器

// packages/core/src/services/image-model/manager.ts
export class ImageModelManager implements IImageModelManager {
  async listConfigs(): Promise<ImageModelConfig[]>
  async addConfig(config: ImageModelConfig): Promise<void>
  async updateConfig(config: ImageModelConfig): Promise<void>
  async deleteConfig(id: string): Promise<void>
  async testConnection(id: string): Promise<boolean>
}

数据流与交互模式

1. 组件交互流程

用户操作 → ModelManager.vue → ImageModelManager.vue → useImageModelManager → 核心服务层
                                ↓
                        ImageModelEditModal.vue (编辑弹窗)

2. 状态管理流程

初始化：
1. ImageModelManager 挂载
2. useImageModelManager 初始化
3. 通过依赖注入获取核心服务
4. 加载提供商和配置列表

用户操作：
1. 用户点击"添加模型"
2. 打开 ImageModelEditModal
3. 用户填写配置并保存
4. 调用核心服务保存配置
5. 更新响应式状态
6. UI 自动更新

与原方案的对比

原方案问题分析

1. ModelManager.vue.bak（单一组件混合管理）

• 单一职责混合：文本模型和图像模型混在一个组件中
• 代码复杂：组件代码量大，维护困难
• 扩展性差：添加新模型类型需要修改核心组件

2. 导航式编辑界面（5步向导）

• 操作繁琐：需要在基本信息→提供商→连接→模型→参数 5个步骤间切换
• 信息割裂：相关信息分散在不同步骤中，难以整体把握
• 效率低下：每次编辑都要逐步导航，特别是修改时很不方便
• 一致性差：与文本模型的一体化设计不一致

新方案优势

1. 架构优势（ImageModelManager + ModelManager.vue）

• 职责清晰：文本模型和图像模型分离管理
• 组件复用：ImageModelManager 可独立使用
• 易于维护：每个组件专注于特定功能
• 扩展友好：新增模型类型只需添加新组件

2. 界面优势（一体化编辑界面）

• 操作高效：所有配置项在一个界面中，无需步骤切换
• 信息完整：用户可以整体把握所有配置信息
• 编辑便利：修改时可以直接定位到需要调整的配置项
• 体验一致：与文本模型管理保持相同的操作体验
• 学习成本低：用户无需学习不同的操作模式

优势与收益

1. 技术优势

• 模块化设计：清晰的组件分离和职责划分
• 类型安全：完整的 TypeScript 类型支持
• 响应式设计：基于 Vue 3 Composition API
• 依赖注入：松耦合的服务架构

2. 开发收益

• 开发效率：组件专一化，开发和调试更简单
• 代码复用：图像模型管理组件可在多处使用
• 团队协作：不同开发者可并行开发不同模型类型
• 质量保证：单一职责降低了 bug 出现概率

3. 用户体验

• 统一界面：用户从单一入口管理所有模型
• 专业功能：针对图像模型的专业化管理功能
• 操作流畅：响应式设计带来的流畅体验

未来扩展计划

1. 短期扩展

• 音频模型管理：添加 AudioModelManager 组件
• 视频模型管理：支持视频生成模型的管理
• 模型分组：支持模型的分类和标签管理

2. 长期规划

• 云端同步：模型配置的云端同步功能
• 模型市场：集成第三方模型市场
• 自动发现：自动发现和配置新的模型提供商

总结

ImageModelManager + ModelManager.vue 架构通过关注点分离和组件专业化的设计，为 Prompt Optimizer 提供了一个可扩展、易维护的模型管理解决方案。该架构不仅解决了当前图像模型管理的需求，也为未来的功能扩展奠定了坚实的基础。

Source: docs/architecture/image-model-management-architecture.md