1057 lines
30 KiB
Markdown
1057 lines
30 KiB
Markdown
# 模型渠道管理 实施计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 为 Neta-monorepo 新增集中式 LLM 模型渠道管理，改造 Agent/Skill 编辑页为渠道级联选择器，桥接运行时 provider:model 机制。
|
||
|
||
**Architecture:** 后端新增 `netaclaw_model_channel` 表 + Entity/Service/Controller（参照 AI_flow 实现），前端新增模型渠道管理页 + 级联选择器组件，改造现有 Agent 编辑页和 Skill 模型配置组件。运行时在执行前查询渠道表透明获取凭证。
|
||
|
||
**Tech Stack:** Midway.js 3.20 + TypeORM + Vue 3 + Element Plus + TypeScript
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
### 新增文件
|
||
|
||
| 文件 | 职责 |
|
||
|------|------|
|
||
| `packages/backend/src/modules/netaclaw/entity/model_channel.ts` | TypeORM Entity，映射 `netaclaw_model_channel` 表 |
|
||
| `packages/backend/src/modules/netaclaw/service/model_channel.ts` | 业务逻辑：allModels、testConnection、resolveForAgent |
|
||
| `packages/backend/src/modules/netaclaw/controller/admin/model_channel.ts` | Admin API：CRUD + allModels + testConnection |
|
||
| `packages/frontend/src/modules/agent/views/model-channel.vue` | 模型渠道管理页面 |
|
||
| `packages/frontend/src/modules/agent/components/model-channel-selector.vue` | 渠道级联选择器组件 |
|
||
|
||
### 修改文件
|
||
|
||
| 文件 | 改动 |
|
||
|------|------|
|
||
| `packages/backend/src/entities.ts` | 新增 model_channel Entity 导入 |
|
||
| `packages/backend/src/modules/netaclaw/runtime/agent.ts` | 接入渠道解析逻辑 |
|
||
| `packages/frontend/src/modules/agent/config.ts` | 新增 model-channel 路由 |
|
||
| `packages/frontend/src/modules/agent/views/agent-edit.vue` | 模型配置 Tab 改为级联选择器 |
|
||
| `packages/frontend/src/modules/agent/components/skill-model.vue` | 改为级联选择器 |
|
||
|
||
---
|
||
|
||
## Task 1: 后端 Entity
|
||
|
||
**Files:**
|
||
- Create: `packages/backend/src/modules/netaclaw/entity/model_channel.ts`
|
||
- Modify: `packages/backend/src/entities.ts`
|
||
|
||
- [ ] **Step 1: 创建 model_channel Entity 文件**
|
||
|
||
```typescript
|
||
// packages/backend/src/modules/netaclaw/entity/model_channel.ts
|
||
import { BaseEntity } from '../../base/entity/base.js';
|
||
import { Column, Entity, Index } from 'typeorm';
|
||
|
||
/**
|
||
* 模型渠道配置表 - 集中管理 LLM 供应商渠道
|
||
* 一个渠道对应一组 baseUrl + apiKey，可包含多个模型
|
||
*/
|
||
@Entity('netaclaw_model_channel')
|
||
export class NetaClawModelChannelEntity extends BaseEntity {
|
||
@Index({ unique: true })
|
||
@Column({ comment: '渠道名称', length: 100 })
|
||
name: string;
|
||
|
||
@Index()
|
||
@Column({ comment: '供应商类型', length: 50 })
|
||
supplier: string;
|
||
|
||
@Column({ comment: 'API基础地址', length: 500 })
|
||
baseUrl: string;
|
||
|
||
@Column({ comment: 'API密钥', length: 500, nullable: true })
|
||
apiKey: string;
|
||
|
||
@Column({
|
||
comment: '可用模型列表 [{name,capability}]',
|
||
type: 'json',
|
||
nullable: true,
|
||
})
|
||
models: { name: string; capability: string }[];
|
||
|
||
@Column({ comment: '描述', type: 'text', nullable: true })
|
||
description: string;
|
||
|
||
@Index()
|
||
@Column({ comment: '状态 0=禁用 1=启用', default: 1 })
|
||
status: number;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 注册 Entity 到 entities.ts**
|
||
|
||
在 `packages/backend/src/entities.ts` 文件末尾的 import 区域和数组中添加：
|
||
|
||
在最后一行 import（`import * as entity34 from './modules/netaclaw/entity/skill';`）之后添加：
|
||
```typescript
|
||
import * as entity35 from './modules/netaclaw/entity/model_channel';
|
||
```
|
||
|
||
在 `entities` 数组末尾（`...Object.values(entity34),` 之后）添加：
|
||
```typescript
|
||
...Object.values(entity35),
|
||
```
|
||
|
||
- [ ] **Step 3: 启动后端验证表自动创建**
|
||
|
||
Run: `cd packages/backend && npx midway-bin dev`
|
||
|
||
Expected: 服务启动成功，MySQL 中自动创建 `netaclaw_model_channel` 表（因为 config.local.ts 中 `synchronize: true`）
|
||
|
||
- [ ] **Step 4: 提交**
|
||
|
||
```bash
|
||
git add packages/backend/src/modules/netaclaw/entity/model_channel.ts packages/backend/src/entities.ts
|
||
git commit -m "feat(backend): 新增 netaclaw_model_channel Entity"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 2: 后端 Service
|
||
|
||
**Files:**
|
||
- Create: `packages/backend/src/modules/netaclaw/service/model_channel.ts`
|
||
|
||
- [ ] **Step 1: 创建 model_channel Service**
|
||
|
||
```typescript
|
||
// packages/backend/src/modules/netaclaw/service/model_channel.ts
|
||
import { Provide, Scope, ScopeEnum } from '@midwayjs/core';
|
||
import { InjectEntityModel } from '@midwayjs/typeorm';
|
||
import { Repository, Equal, Like } from 'typeorm';
|
||
import { NetaClawModelChannelEntity } from '../entity/model_channel.js';
|
||
|
||
/**
|
||
* 模型渠道管理服务
|
||
*/
|
||
@Provide()
|
||
@Scope(ScopeEnum.Singleton)
|
||
export class NetaClawModelChannelService {
|
||
@InjectEntityModel(NetaClawModelChannelEntity)
|
||
channelRepo: Repository<NetaClawModelChannelEntity>;
|
||
|
||
/**
|
||
* 标准化 models 字段（兼容旧的字符串数组格式）
|
||
*/
|
||
private normalizeModels(
|
||
models: any[]
|
||
): { name: string; capability: string }[] {
|
||
if (!Array.isArray(models)) return [];
|
||
return models.map(m => {
|
||
if (typeof m === 'string') return { name: m, capability: 'text' };
|
||
return { name: m.name || '', capability: m.capability || 'text' };
|
||
});
|
||
}
|
||
|
||
/** 分页查询 */
|
||
async page(params: {
|
||
page?: number;
|
||
size?: number;
|
||
keyWord?: string;
|
||
supplier?: string;
|
||
}) {
|
||
const { page = 1, size = 20, keyWord, supplier } = params;
|
||
const where: any = {};
|
||
if (keyWord) where.name = Like(`%${keyWord}%`);
|
||
if (supplier) where.supplier = Equal(supplier);
|
||
const [list, total] = await this.channelRepo.findAndCount({
|
||
where,
|
||
order: { id: 'DESC' },
|
||
skip: (page - 1) * size,
|
||
take: size,
|
||
});
|
||
return { list, pagination: { page, size, total } };
|
||
}
|
||
|
||
/** 新增 */
|
||
async add(data: Partial<NetaClawModelChannelEntity>) {
|
||
const entity = this.channelRepo.create(data);
|
||
return this.channelRepo.save(entity);
|
||
}
|
||
|
||
/** 更新 */
|
||
async update(data: Partial<NetaClawModelChannelEntity>) {
|
||
await this.channelRepo.save(data);
|
||
}
|
||
|
||
/** 删除 */
|
||
async delete(ids: number[]) {
|
||
await this.channelRepo.delete(ids);
|
||
}
|
||
|
||
/** 详情 */
|
||
async info(id: number) {
|
||
return this.channelRepo.findOneBy({ id });
|
||
}
|
||
|
||
/**
|
||
* 获取所有启用渠道的模型列表（供 Agent/Skill 选择用）
|
||
*/
|
||
async allModels() {
|
||
const channels = await this.channelRepo.find({
|
||
where: { status: Equal(1) },
|
||
order: { createTime: 'DESC' },
|
||
});
|
||
return channels.map(ch => ({
|
||
channelId: ch.id,
|
||
channelName: ch.name,
|
||
supplier: ch.supplier,
|
||
baseUrl: ch.baseUrl,
|
||
apiKey: ch.apiKey,
|
||
models: this.normalizeModels(ch.models),
|
||
}));
|
||
}
|
||
|
||
/**
|
||
* 测试渠道连通性
|
||
*/
|
||
async testConnection(id: number) {
|
||
const channel = await this.channelRepo.findOneBy({ id: Equal(id) });
|
||
if (!channel) throw new Error('渠道不存在');
|
||
|
||
const models = this.normalizeModels(channel.models);
|
||
if (models.length === 0) throw new Error('渠道未配置模型');
|
||
|
||
// 使用 Neta 的 Provider 机制测试
|
||
const { parseModelRef, getProvider, initDefaultProviders } = await import(
|
||
'../runtime/model_selection.js'
|
||
);
|
||
initDefaultProviders();
|
||
|
||
const supplierToProvider: Record<string, string> = {
|
||
openai: 'openai',
|
||
anthropic: 'anthropic',
|
||
deepseek: 'deepseek',
|
||
zhipu: 'openai',
|
||
tongyi: 'openai',
|
||
minimax: 'openai',
|
||
volcengine: 'openai',
|
||
ollama: 'openai',
|
||
azure: 'openai',
|
||
};
|
||
|
||
const providerName = supplierToProvider[channel.supplier] || 'openai';
|
||
const startTime = Date.now();
|
||
try {
|
||
const provider = getProvider(providerName);
|
||
await provider.chat({
|
||
model: models[0].name,
|
||
apiKey: channel.apiKey,
|
||
baseUrl: channel.baseUrl,
|
||
messages: [{ role: 'user', content: 'hi' }],
|
||
maxTokens: 5,
|
||
});
|
||
const elapsed = Date.now() - startTime;
|
||
return { success: true, elapsed, message: `连接成功，耗时 ${elapsed}ms` };
|
||
} catch (e: any) {
|
||
const elapsed = Date.now() - startTime;
|
||
return {
|
||
success: false,
|
||
elapsed,
|
||
message: `连接失败: ${e.message || e}`,
|
||
};
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 为 Agent 运行时解析渠道凭证
|
||
* 将 channelId + modelId 转换为 provider:model + apiKey + baseUrl
|
||
*/
|
||
async resolveForAgent(
|
||
channelId: number,
|
||
modelId: string
|
||
): Promise<{
|
||
provider: string;
|
||
model: string;
|
||
apiKey: string;
|
||
baseUrl?: string;
|
||
}> {
|
||
const channel = await this.channelRepo.findOneBy({ id: Equal(channelId) });
|
||
if (!channel) throw new Error(`渠道 ${channelId} 不存在`);
|
||
if (channel.status !== 1) throw new Error(`渠道 ${channel.name} 已禁用`);
|
||
|
||
const supplierToProvider: Record<string, string> = {
|
||
openai: 'openai',
|
||
anthropic: 'anthropic',
|
||
deepseek: 'deepseek',
|
||
zhipu: 'openai',
|
||
tongyi: 'openai',
|
||
minimax: 'openai',
|
||
volcengine: 'openai',
|
||
ollama: 'openai',
|
||
azure: 'openai',
|
||
};
|
||
|
||
return {
|
||
provider: supplierToProvider[channel.supplier] || 'openai',
|
||
model: modelId,
|
||
apiKey: channel.apiKey,
|
||
baseUrl: channel.baseUrl,
|
||
};
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 提交**
|
||
|
||
```bash
|
||
git add packages/backend/src/modules/netaclaw/service/model_channel.ts
|
||
git commit -m "feat(backend): 新增 NetaClawModelChannelService"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 3: 后端 Controller
|
||
|
||
**Files:**
|
||
- Create: `packages/backend/src/modules/netaclaw/controller/admin/model_channel.ts`
|
||
|
||
- [ ] **Step 1: 创建 Admin Controller**
|
||
|
||
```typescript
|
||
// packages/backend/src/modules/netaclaw/controller/admin/model_channel.ts
|
||
import { Provide, Inject, Post, Get, Body, Query, Controller } from '@midwayjs/core';
|
||
import { Context } from '@midwayjs/koa';
|
||
import { NetaClawModelChannelService } from '../../service/model_channel.js';
|
||
|
||
@Provide()
|
||
@Controller('/admin/netaclaw/model_channel')
|
||
export class NetaClawModelChannelAdminController {
|
||
@Inject()
|
||
ctx: Context;
|
||
|
||
@Inject()
|
||
channelService: NetaClawModelChannelService;
|
||
|
||
@Post('/page')
|
||
async page(
|
||
@Body()
|
||
body: { page?: number; size?: number; keyWord?: string; supplier?: string }
|
||
) {
|
||
return { code: 1000, data: await this.channelService.page(body) };
|
||
}
|
||
|
||
@Post('/add')
|
||
async add(@Body() body: any) {
|
||
const result = await this.channelService.add(body);
|
||
return { code: 1000, data: result };
|
||
}
|
||
|
||
@Post('/update')
|
||
async update(@Body() body: any) {
|
||
await this.channelService.update(body);
|
||
return { code: 1000, message: 'success' };
|
||
}
|
||
|
||
@Post('/delete')
|
||
async delete(@Body() body: { ids: number[] }) {
|
||
await this.channelService.delete(body.ids);
|
||
return { code: 1000, message: 'success' };
|
||
}
|
||
|
||
@Get('/info')
|
||
async info(@Query('id') id: number) {
|
||
return { code: 1000, data: await this.channelService.info(id) };
|
||
}
|
||
|
||
@Get('/allModels')
|
||
async allModels() {
|
||
return { code: 1000, data: await this.channelService.allModels() };
|
||
}
|
||
|
||
@Post('/testConnection')
|
||
async testConnection(@Body('id') id: number) {
|
||
return { code: 1000, data: await this.channelService.testConnection(id) };
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 启动后端验证 API 可达**
|
||
|
||
Run: `cd packages/backend && npx midway-bin dev`
|
||
|
||
验证: `curl -X POST http://localhost:8003/admin/netaclaw/model_channel/page -H 'Content-Type: application/json' -d '{"page":1,"size":20}'`
|
||
|
||
Expected: 返回 `{"code":1000,"data":{"list":[],"pagination":{"page":1,"size":20,"total":0}}}`
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add packages/backend/src/modules/netaclaw/controller/admin/model_channel.ts
|
||
git commit -m "feat(backend): 新增模型渠道管理 Admin Controller"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 4: 插入系统参数
|
||
|
||
**Files:**
|
||
- 数据操作: `base_sys_param` 表
|
||
|
||
- [ ] **Step 1: 通过 MCP 工具插入 model_suppliers 参数**
|
||
|
||
在 `base_sys_param` 表中插入：
|
||
|
||
```sql
|
||
INSERT INTO base_sys_param (keyName, name, data, dataType, remark, createTime, updateTime)
|
||
VALUES (
|
||
'model_suppliers',
|
||
'AI模型供应商',
|
||
'[{"value":"openai","label":"OpenAI","tagType":""},{"value":"anthropic","label":"Anthropic","tagType":"purple"},{"value":"deepseek","label":"DeepSeek","tagType":"success"},{"value":"zhipu","label":"智谱AI","tagType":"success"},{"value":"tongyi","label":"通义千问","tagType":"warning"},{"value":"minimax","label":"MiniMax","tagType":"danger"},{"value":"volcengine","label":"火山引擎","tagType":"warning"},{"value":"ollama","label":"Ollama","tagType":"info"},{"value":"azure","label":"Azure OpenAI","tagType":""}]',
|
||
0,
|
||
'AI模型渠道管理用，tagType控制前端标签颜色',
|
||
NOW(),
|
||
NOW()
|
||
);
|
||
```
|
||
|
||
- [ ] **Step 2: 插入 model_capabilities 参数**
|
||
|
||
```sql
|
||
INSERT INTO base_sys_param (keyName, name, data, dataType, remark, createTime, updateTime)
|
||
VALUES (
|
||
'model_capabilities',
|
||
'模型能力类型',
|
||
'[{"value":"text","label":"纯文本"},{"value":"multimodal","label":"多模态"},{"value":"vision","label":"视觉"},{"value":"image_gen","label":"文生图"},{"value":"tts","label":"语音合成"},{"value":"stt","label":"语音识别"}]',
|
||
0,
|
||
'AI模型能力分类，可在参数列表页面自由扩展',
|
||
NOW(),
|
||
NOW()
|
||
);
|
||
```
|
||
|
||
- [ ] **Step 3: 验证参数可读取**
|
||
|
||
通过后端 API 验证：`curl http://localhost:8003/admin/base/sys/param/dataByKey?key=model_suppliers`
|
||
|
||
Expected: 返回 JSON 数组
|
||
|
||
---
|
||
|
||
## Task 5: 前端路由配置
|
||
|
||
**Files:**
|
||
- Modify: `packages/frontend/src/modules/agent/config.ts`
|
||
|
||
- [ ] **Step 1: 添加 model-channel 路由**
|
||
|
||
在 `packages/frontend/src/modules/agent/config.ts` 的 `views` 数组中，在 `detection-result` 条目之前添加：
|
||
|
||
```typescript
|
||
{
|
||
path: '/agent/model-channel',
|
||
meta: { label: '模型管理' },
|
||
component: () => import('./views/model-channel.vue')
|
||
},
|
||
```
|
||
|
||
修改后的完整 views 数组：
|
||
```typescript
|
||
views: [
|
||
{
|
||
path: '/agent/chat',
|
||
meta: { label: 'Agent 对话' },
|
||
component: () => import('./views/chat.vue')
|
||
},
|
||
{
|
||
path: '/agent/agents',
|
||
meta: { label: 'Agent 管理' },
|
||
component: () => import('./views/agent-list.vue')
|
||
},
|
||
{
|
||
path: '/agent/skills',
|
||
meta: { label: 'Skill 管理' },
|
||
component: () => import('./views/skills.vue')
|
||
},
|
||
{
|
||
path: '/agent/model-channel',
|
||
meta: { label: '模型管理' },
|
||
component: () => import('./views/model-channel.vue')
|
||
},
|
||
{
|
||
path: '/agent/detection-result',
|
||
meta: { label: '检测结果' },
|
||
component: () => import('./views/detection-result.vue')
|
||
}
|
||
]
|
||
```
|
||
|
||
- [ ] **Step 2: 提交**
|
||
|
||
```bash
|
||
git add packages/frontend/src/modules/agent/config.ts
|
||
git commit -m "feat(frontend): 添加模型管理路由"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 6: 前端模型渠道管理页面
|
||
|
||
**Files:**
|
||
- Create: `packages/frontend/src/modules/agent/views/model-channel.vue`
|
||
|
||
- [ ] **Step 1: 创建模型渠道管理页面**
|
||
|
||
从 AI_flow 的 `model-channel.vue` 适配（端口 8003，API 路径 `/admin/netaclaw/model_channel/`）。
|
||
|
||
创建文件 `packages/frontend/src/modules/agent/views/model-channel.vue`，内容参照 AI_flow 的 `AI_flow_FronEnd/src/modules/agent/views/model-channel.vue`，做以下适配：
|
||
|
||
1. API 路径从 `/admin/agent/model_channel/` 改为 `/admin/netaclaw/model_channel/`
|
||
2. 供应商参数加载端点不变（`/admin/base/sys/param/dataByKey?key=model_suppliers`）
|
||
3. 能力类型参数加载端点不变（`/admin/base/sys/param/dataByKey?key=model_capabilities`）
|
||
4. `supplierTagType()` 函数改为从 `supplierOptions` 中读取 `tagType` 字段，而非硬编码映射
|
||
|
||
关键改动点——`supplierTagType` 函数：
|
||
```typescript
|
||
// 旧（AI_flow 硬编码）:
|
||
function supplierTagType(val: string): '' | 'success' | 'warning' | 'danger' | 'info' {
|
||
const map: Record<string, any> = {
|
||
openai: '', zhipu: 'success', tongyi: 'warning',
|
||
minimax: 'danger', ollama: 'info', deepseek: 'success', azure: '', volcengine: 'warning'
|
||
};
|
||
return map[val] || 'info';
|
||
}
|
||
|
||
// 新（从参数读取）:
|
||
function supplierTagType(val: string): '' | 'success' | 'warning' | 'danger' | 'info' {
|
||
const found = supplierOptions.value.find(s => s.value === val);
|
||
return (found as any)?.tagType || 'info';
|
||
}
|
||
```
|
||
|
||
其余代码（模板、筛选、表格、抽屉、批量导入、分页、样式）与 AI_flow 基本一致，只改 API 路径前缀。
|
||
|
||
- [ ] **Step 2: 启动前端验证页面渲染**
|
||
|
||
Run: `cd packages/frontend && pnpm dev`
|
||
|
||
在浏览器访问 `http://localhost:9001`，登录后导航到「Agent管理 > 模型管理」，验证：
|
||
- 页面正常渲染
|
||
- 新增渠道抽屉可打开
|
||
- 供应商下拉选项从参数表加载
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add packages/frontend/src/modules/agent/views/model-channel.vue
|
||
git commit -m "feat(frontend): 新增模型渠道管理页面"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 7: 前端渠道选择器组件
|
||
|
||
**Files:**
|
||
- Create: `packages/frontend/src/modules/agent/components/model-channel-selector.vue`
|
||
|
||
- [ ] **Step 1: 创建渠道级联选择器**
|
||
|
||
从 AI_flow 的 `model-channel-selector.vue` 适配，API 路径改为 `/admin/netaclaw/model_channel/allModels`。
|
||
|
||
创建文件 `packages/frontend/src/modules/agent/components/model-channel-selector.vue`，内容参照 AI_flow 的 `AI_flow_FronEnd/src/modules/agent/components/model-channel-selector.vue`，做以下适配：
|
||
|
||
1. `loadChannels()` 中 API 路径从 `/admin/agent/model_channel/allModels` 改为 `/admin/netaclaw/model_channel/allModels`
|
||
2. 其余逻辑（v-model 双向绑定、capabilityFilter、渠道筛选、模型选择）保持一致
|
||
3. 新增「自定义配置」模式：当用户选择 `channelId=0` 时，展示 apiUrl/apiKey/modelId 手动输入表单
|
||
|
||
在 `<el-form-item v-if="selectedChannelId && selectedChannelId !== 0" label="选择模型">` 之后，添加自定义配置表单：
|
||
|
||
```html
|
||
<!-- 自定义配置（channelId=0） -->
|
||
<template v-if="selectedChannelId === 0">
|
||
<el-form-item label="API 地址">
|
||
<el-input v-model="customConfig.apiUrl" placeholder="https://api.openai.com/v1" />
|
||
</el-form-item>
|
||
<el-form-item label="API Key">
|
||
<el-input v-model="customConfig.apiKey" placeholder="输入 API Key" show-password />
|
||
</el-form-item>
|
||
<el-form-item label="模型 ID">
|
||
<el-input v-model="customConfig.modelId" placeholder="如: gpt-4o" @change="onCustomChange" />
|
||
</el-form-item>
|
||
</template>
|
||
```
|
||
|
||
Script 中添加 customConfig 响应式数据和 onCustomChange 方法：
|
||
|
||
```typescript
|
||
const customConfig = ref({ apiUrl: '', apiKey: '', modelId: '' });
|
||
|
||
function onCustomChange() {
|
||
const val: ModelValue = {
|
||
channelId: 0,
|
||
modelId: customConfig.value.modelId,
|
||
apiUrl: customConfig.value.apiUrl,
|
||
apiKey: customConfig.value.apiKey,
|
||
};
|
||
emit('update:modelValue', val);
|
||
emit('change', val);
|
||
}
|
||
|
||
// 在 onChannelChange 中，channelId===0 时触发 custom 模式
|
||
function onChannelChange(channelId: number) {
|
||
selectedModelId.value = '';
|
||
if (channelId === 0) {
|
||
// 回填已有自定义配置
|
||
if (props.modelValue?.channelId === 0) {
|
||
customConfig.value = {
|
||
apiUrl: props.modelValue.apiUrl || '',
|
||
apiKey: props.modelValue.apiKey || '',
|
||
modelId: props.modelValue.modelId || '',
|
||
};
|
||
}
|
||
emit('update:modelValue', { channelId: 0, ...customConfig.value });
|
||
emit('change', { channelId: 0, ...customConfig.value });
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 提交**
|
||
|
||
```bash
|
||
git add packages/frontend/src/modules/agent/components/model-channel-selector.vue
|
||
git commit -m "feat(frontend): 新增模型渠道级联选择器组件"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 8: 改造 Agent 编辑页
|
||
|
||
**Files:**
|
||
- Modify: `packages/frontend/src/modules/agent/views/agent-edit.vue:76-115`
|
||
|
||
- [ ] **Step 1: 导入选择器组件**
|
||
|
||
在 `agent-edit.vue` 的 `<script lang="ts" setup>` 中，在 `import type { SkillMeta } ...` 之后添加：
|
||
|
||
```typescript
|
||
import ModelChannelSelector from '../components/model-channel-selector.vue';
|
||
```
|
||
|
||
- [ ] **Step 2: 替换模型配置 Tab 模板**
|
||
|
||
将 `agent-edit.vue` 第 76-115 行（Tab 4: 模型配置）替换为：
|
||
|
||
```html
|
||
<!-- Tab 4: 模型配置 -->
|
||
<el-tab-pane label="模型配置" name="model">
|
||
<p class="tab-desc">不配置则使用系统默认LLM：</p>
|
||
<model-channel-selector v-model="modelConfig" />
|
||
<el-form label-width="100px" style="margin-top: 12px">
|
||
<el-form-item label="上下文窗口">
|
||
<el-input-number
|
||
v-model="modelConfig.contextWindow"
|
||
:min="1"
|
||
:max="2048"
|
||
controls-position="right"
|
||
/>
|
||
<span class="form-tip">单位: k tokens，如 256 表示 256k</span>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button size="small" @click="clearModelConfig">清空（使用默认）</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
```
|
||
|
||
- [ ] **Step 3: 更新 modelConfig 数据结构**
|
||
|
||
将 `modelConfig` ref 改为支持 channelId：
|
||
|
||
```typescript
|
||
const modelConfig = ref({
|
||
channelId: null as number | null,
|
||
modelId: '',
|
||
apiKey: '',
|
||
apiUrl: '',
|
||
contextWindow: null as number | null
|
||
});
|
||
```
|
||
|
||
更新 `clearModelConfig` 函数：
|
||
```typescript
|
||
function clearModelConfig() {
|
||
modelConfig.value = { channelId: null, modelId: '', apiKey: '', apiUrl: '', contextWindow: null };
|
||
}
|
||
```
|
||
|
||
移除 `fillDefaultLLM` 函数和 `defaultLLM` 常量（不再需要）。
|
||
|
||
- [ ] **Step 4: 更新 loadAgent 中的 modelConfig 回填**
|
||
|
||
在 `loadAgent()` 函数中，更新 modelConfig 回填逻辑：
|
||
|
||
```typescript
|
||
const mc = parseJson(agent.modelConfig, {});
|
||
modelConfig.value = {
|
||
channelId: mc.channelId || null,
|
||
modelId: mc.modelId || '',
|
||
apiKey: mc.apiKey || '',
|
||
apiUrl: mc.apiUrl || '',
|
||
contextWindow: mc.contextWindow || null
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 5: 更新 handleSave 中的 modelConfig 序列化**
|
||
|
||
在 `handleSave()` 函数中，更新 mc 判断逻辑：
|
||
|
||
```typescript
|
||
const mc =
|
||
modelConfig.value.channelId || modelConfig.value.modelId || modelConfig.value.contextWindow
|
||
? modelConfig.value
|
||
: null;
|
||
```
|
||
|
||
- [ ] **Step 6: 更新 resetForm 中的 modelConfig**
|
||
|
||
```typescript
|
||
modelConfig.value = { channelId: null, modelId: '', apiKey: '', apiUrl: '', contextWindow: null };
|
||
```
|
||
|
||
- [ ] **Step 7: 浏览器验证**
|
||
|
||
访问 Agent 管理 → 编辑任一 Agent → 模型配置 Tab
|
||
|
||
验证：
|
||
- 渠道选择器正常展示
|
||
- 选择渠道后模型下拉出现
|
||
- 选择「自定义配置」后手动输入框出现
|
||
- 保存后重新打开，选择状态正确回填
|
||
|
||
- [ ] **Step 8: 提交**
|
||
|
||
```bash
|
||
git add packages/frontend/src/modules/agent/views/agent-edit.vue
|
||
git commit -m "feat(frontend): Agent编辑页模型配置改为渠道级联选择器"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 9: 改造 Skill 模型配置组件
|
||
|
||
**Files:**
|
||
- Modify: `packages/frontend/src/modules/agent/components/skill-model.vue`
|
||
|
||
- [ ] **Step 1: 导入选择器组件**
|
||
|
||
在 `skill-model.vue` 的 `<script lang="ts" setup>` 中添加：
|
||
|
||
```typescript
|
||
import ModelChannelSelector from './model-channel-selector.vue';
|
||
```
|
||
|
||
- [ ] **Step 2: 替换「可配置模型」模板**
|
||
|
||
将 `skill-model.vue` 第 30-104 行（`<template v-else>` 可配置模型部分）替换为：
|
||
|
||
```html
|
||
<!-- 可配置模型 -->
|
||
<template v-else>
|
||
<model-channel-selector
|
||
v-model="channelModelValue"
|
||
:capability-filter="skillCapabilityFilter"
|
||
@change="onChannelModelChange"
|
||
/>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="model-footer">
|
||
<el-button
|
||
type="primary"
|
||
@click="handleSave"
|
||
:loading="saving"
|
||
>
|
||
保存模型配置
|
||
</el-button>
|
||
<el-button @click="handleReset">恢复默认</el-button>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
- [ ] **Step 3: 添加渠道模型相关逻辑**
|
||
|
||
在 script 中添加：
|
||
|
||
```typescript
|
||
import { computed } from 'vue';
|
||
|
||
// 渠道选择器的 v-model 值
|
||
const channelModelValue = ref<any>({});
|
||
|
||
// 根据 Skill 类型推断能力过滤
|
||
const skillCapabilityFilter = computed(() => {
|
||
const t = props.skill?.skillType;
|
||
if (t === 'multimodal') return 'multimodal';
|
||
if (t === 'llm') return 'text';
|
||
return undefined;
|
||
});
|
||
|
||
function onChannelModelChange(val: any) {
|
||
channelModelValue.value = val;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 更新 loadModelConfig**
|
||
|
||
改写 `loadModelConfig` 函数，加载已保存的渠道配置：
|
||
|
||
```typescript
|
||
async function loadModelConfig() {
|
||
const name = props.skill?.name;
|
||
if (!name || !needsModel.value || fixedModel.value) return;
|
||
|
||
channelModelValue.value = {};
|
||
|
||
try {
|
||
const resp = await fetch(
|
||
`${config.baseUrl}/admin/netaclaw/skill/modelConfig?name=${name}`,
|
||
{ headers: { Authorization: user.token || '' } }
|
||
);
|
||
const data = await resp.json();
|
||
if (data.code === 1000 && data.data) {
|
||
const saved = data.data;
|
||
channelModelValue.value = {
|
||
channelId: saved.channelId || null,
|
||
modelId: saved.modelId || '',
|
||
apiUrl: saved.apiUrl || '',
|
||
apiKey: saved.apiKey || '',
|
||
};
|
||
}
|
||
} catch {
|
||
// 加载失败用空值
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: 更新 handleSave**
|
||
|
||
```typescript
|
||
async function handleSave() {
|
||
const val = channelModelValue.value;
|
||
if (!val.channelId && !val.modelId) {
|
||
ElMessage.warning('请选择渠道和模型，或使用自定义配置');
|
||
return;
|
||
}
|
||
saving.value = true;
|
||
try {
|
||
const resp = await fetch(`${config.baseUrl}/admin/netaclaw/skill/updateModelConfig`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: user.token || ''
|
||
},
|
||
body: JSON.stringify({
|
||
name: props.skill.name,
|
||
model: {
|
||
channelId: val.channelId,
|
||
modelId: val.modelId,
|
||
apiUrl: val.apiUrl,
|
||
apiKey: val.apiKey,
|
||
}
|
||
})
|
||
});
|
||
const data = await resp.json();
|
||
if (data.code === 1000) {
|
||
ElMessage.success('模型配置已保存');
|
||
} else {
|
||
ElMessage.error(data.message || '保存失败');
|
||
}
|
||
} catch {
|
||
ElMessage.error('保存失败');
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 6: 更新 handleReset**
|
||
|
||
```typescript
|
||
async function handleReset() {
|
||
channelModelValue.value = {};
|
||
saving.value = true;
|
||
try {
|
||
const resp = await fetch(`${config.baseUrl}/admin/netaclaw/skill/updateModelConfig`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: user.token || ''
|
||
},
|
||
body: JSON.stringify({
|
||
name: props.skill.name,
|
||
model: null
|
||
})
|
||
});
|
||
const data = await resp.json();
|
||
if (data.code === 1000) {
|
||
ElMessage.success('已清除模型配置');
|
||
}
|
||
} catch {
|
||
// 静默
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 7: 移除不再需要的代码**
|
||
|
||
移除以下不再需要的代码：
|
||
- `presets` ref 和 `PresetModel` interface
|
||
- `loadPresets()` 函数
|
||
- `applyPreset()` 函数
|
||
- `modelForm` ref
|
||
- `DEFAULT_MODEL` 常量
|
||
- `selectedPresetId` ref
|
||
- preset-section 相关的 CSS 样式
|
||
|
||
- [ ] **Step 8: 浏览器验证**
|
||
|
||
访问 Skill 管理 → 点击任一 Skill 的「配置」按钮 → 模型配置 Tab
|
||
|
||
验证：
|
||
- 渠道选择器正常展示
|
||
- multimodal 类型 Skill 只展示 multimodal 能力的模型
|
||
- 保存后重新打开，选择状态正确回填
|
||
|
||
- [ ] **Step 9: 提交**
|
||
|
||
```bash
|
||
git add packages/frontend/src/modules/agent/components/skill-model.vue
|
||
git commit -m "feat(frontend): Skill模型配置改为渠道级联选择器"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 10: 后端运行时桥接
|
||
|
||
**Files:**
|
||
- Modify: `packages/backend/src/modules/netaclaw/runtime/agent.ts:29-44`
|
||
|
||
- [ ] **Step 1: 改造 runAgent 函数**
|
||
|
||
在 `packages/backend/src/modules/netaclaw/runtime/agent.ts` 中，修改 `AgentConfig` 接口（第 7-17 行）添加 channelId 支持：
|
||
|
||
```typescript
|
||
export interface AgentConfig {
|
||
name: string;
|
||
systemPrompt: string;
|
||
model: string; // "provider:model" 或 "model"
|
||
apiKey: string;
|
||
baseUrl?: string;
|
||
channelId?: number; // 新增：渠道ID（有值时覆盖 model/apiKey/baseUrl）
|
||
modelId?: string; // 新增：渠道中的模型ID
|
||
temperature?: number;
|
||
maxTokens?: number;
|
||
maxToolRounds?: number;
|
||
skills?: string[];
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 在 runAgent 函数开头添加渠道解析逻辑**
|
||
|
||
在 `runAgent` 函数中（第 29 行 `export async function runAgent` 之后），在 `const modelRef = parseModelRef(agentConfig.model);` 之前，添加渠道解析：
|
||
|
||
```typescript
|
||
// 渠道解析：如果指定了 channelId，从数据库查询凭证覆盖配置
|
||
if (agentConfig.channelId && agentConfig.channelId > 0) {
|
||
try {
|
||
// 动态导入以避免循环依赖
|
||
const { MidwayContainer } = await import('@midwayjs/core');
|
||
const { getCurrentApplicationContext } = await import('@midwayjs/core');
|
||
const ctx = getCurrentApplicationContext();
|
||
const { NetaClawModelChannelService } = await import(
|
||
'../service/model_channel.js'
|
||
);
|
||
const channelService = await ctx.getAsync(NetaClawModelChannelService);
|
||
const resolved = await channelService.resolveForAgent(
|
||
agentConfig.channelId,
|
||
agentConfig.modelId || agentConfig.model
|
||
);
|
||
agentConfig.model = `${resolved.provider}:${resolved.model}`;
|
||
agentConfig.apiKey = resolved.apiKey;
|
||
if (resolved.baseUrl) agentConfig.baseUrl = resolved.baseUrl;
|
||
} catch (e: any) {
|
||
console.warn(`渠道解析失败，使用原始配置: ${e.message}`);
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: 提交**
|
||
|
||
```bash
|
||
git add packages/backend/src/modules/netaclaw/runtime/agent.ts
|
||
git commit -m "feat(backend): Agent运行时接入渠道解析"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 11: 数据库菜单配置
|
||
|
||
**Files:**
|
||
- 数据操作: `base_sys_menu` 表
|
||
|
||
- [ ] **Step 1: 插入模型管理菜单**
|
||
|
||
通过 MCP 工具执行 SQL，在 Agent 管理目录下新增菜单项：
|
||
|
||
```sql
|
||
INSERT INTO base_sys_menu (parentId, name, router, icon, orderNum, type, isShow, keepAlive, createTime, updateTime)
|
||
VALUES (
|
||
112,
|
||
'模型管理',
|
||
'/agent/model-channel',
|
||
'icon-model',
|
||
4,
|
||
1,
|
||
1,
|
||
1,
|
||
NOW(),
|
||
NOW()
|
||
);
|
||
```
|
||
|
||
注意：`parentId=112` 是 Agent 管理目录的 ID（需确认，可先查询 `SELECT id, name FROM base_sys_menu WHERE name='Agent管理' AND type=0`）。
|
||
|
||
- [ ] **Step 2: 浏览器验证**
|
||
|
||
刷新页面，确认左侧菜单中「Agent管理」目录下出现「模型管理」菜单项，点击可跳转到模型渠道管理页面。
|
||
|
||
---
|
||
|
||
## Task 12: 端到端验证
|
||
|
||
- [ ] **Step 1: 新增渠道测试**
|
||
|
||
在模型管理页面新增一个渠道：
|
||
- 名称: "测试-Anthropic"
|
||
- 供应商: Anthropic
|
||
- Base URL: `https://api.anthropic.com`
|
||
- API Key: （填入测试用 Key）
|
||
- 模型: claude-sonnet-4-20250514 (text)
|
||
|
||
保存后确认列表中显示。
|
||
|
||
- [ ] **Step 2: Agent 引用渠道测试**
|
||
|
||
编辑一个 Agent → 模型配置 Tab → 选择刚建的渠道 → 选择模型 → 保存。
|
||
|
||
验证：保存成功，重新打开后选择器正确回填。
|
||
|
||
- [ ] **Step 3: Skill 引用渠道测试**
|
||
|
||
打开一个 Skill 的详情 → 模型配置 Tab → 选择渠道和模型 → 保存。
|
||
|
||
验证：保存成功，重新打开后选择器正确回填。
|
||
|
||
- [ ] **Step 4: 最终提交**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "feat: 模型渠道管理完整实现 - Entity/Service/Controller/前端页面/选择器/Agent与Skill改造"
|
||
```
|