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

<!-- 功能概述 -->
<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>

<!-- 一体化界面设计 -->
<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>

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
  }
}

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适配器

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

// 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>
}

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

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

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