From bf1e9fa89a20e2e18a0ee759a15c3ec05bbf0a4f Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Fri, 17 Jul 2026 14:45:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Token=E6=98=A0=E5=B0=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=A2=9E=E5=BC=BA=20+=20=E6=A8=A1=E5=9E=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85API=20+=20=E7=BC=96=E8=BE=91=E5=99=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Token 映射下拉:
   - 新增 flattenWrappedFields 函数递归提取 { type, attrs } 结构中的叶子字段
   - 下拉选项显示 路径 — 标签 格式，选中值存完整路径
   - 同步/流式从响应映射取，异步从回调响应映射取

2. 模型详情 API:
   - 新增 getModelManage 详情接口 (/model/manage/getModelManage)
   - openDialog 改为 async，编辑时调详情接口获取完整数据
   - 修复 res.data.modelManage 取值路径

3. JSON 编辑器布局:
   - 弹窗宽度 1000px → 1200px
   - 配置侧栏 320px → 380px
   - config-summary 改用 flex:1 防止滚动条截断文本

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .env.development                              |   4 +-
 src/api/settings/modelConfigV2/index.ts       |  18 +++
 .../json-schema-editor/JsonNode.vue           |   2 +-
 src/components/json-schema-editor/index.vue   |   2 +-
 .../modelConfigV2/component/editModule.vue    | 104 +++++++++++++-----
 src/views/settings/modelConfigV2/index.vue    |   4 +-
 6 files changed, 99 insertions(+), 35 deletions(-)

diff --git a/.env.development b/.env.development
index 07483ec..524387b 100644
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,6 @@ ENV = 'development'
 
 # 统一后端服务地址前缀（网关服务名：admin-go）
 # 开发环境走本地代理，避免 CORS
-# VITE_API_URL = 'http://116.204.74.41:8000'
-VITE_API_URL = 'http://192.168.3.30:8000'
+VITE_API_URL = 'http://116.204.74.41:8000'
+# VITE_API_URL = 'http://192.168.3.30:8000'
 # VITE_API_URL = 'http://192.168.3.135:8000'
\ No newline at end of file
diff --git a/src/api/settings/modelConfigV2/index.ts b/src/api/settings/modelConfigV2/index.ts
index 237894a..602bb31 100644
--- a/src/api/settings/modelConfigV2/index.ts
+++ b/src/api/settings/modelConfigV2/index.ts
@@ -174,6 +174,24 @@ export interface UpdateModelManageParams extends Partial<CreateModelManageParams
 	id: string;
 }
 
+/** 详情响应 */
+export interface ModelManageDetailResponse {
+	code: number;
+	message: string;
+	data: ModelManageItem;
+}
+
+/**
+ * 获取模型配置详情
+ */
+export function getModelManage(id: string) {
+	return request({
+		url: '/model-gateway/model/manage/getModelManage',
+		method: 'get',
+		params: { id },
+	});
+}
+
 /**
  * 创建模型配置
  */
diff --git a/src/components/json-schema-editor/JsonNode.vue b/src/components/json-schema-editor/JsonNode.vue
index 2fa5ffa..6760825 100644
--- a/src/components/json-schema-editor/JsonNode.vue
+++ b/src/components/json-schema-editor/JsonNode.vue
@@ -241,7 +241,7 @@ function emitChange() { emit('change'); }
 		}
 		.node-count { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
 		.config-summary {
-			font-size: 11px; color: #64748b; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+			font-size: 11px; color: #64748b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 		}
 		.field-btn-configured {
 			color: #2563eb !important;
diff --git a/src/components/json-schema-editor/index.vue b/src/components/json-schema-editor/index.vue
index 32e23a3..42c8b79 100644
--- a/src/components/json-schema-editor/index.vue
+++ b/src/components/json-schema-editor/index.vue
@@ -614,7 +614,7 @@ defineExpose({
 		}
 	}
 	.config-sidebar {
-		width: 320px;
+		width: 380px;
 		flex-shrink: 0;
 		border-left: 1px solid #e2e8f0;
 		overflow: hidden;
diff --git a/src/views/settings/modelConfigV2/component/editModule.vue b/src/views/settings/modelConfigV2/component/editModule.vue
index 554d895..1a55ac3 100644
--- a/src/views/settings/modelConfigV2/component/editModule.vue
+++ b/src/views/settings/modelConfigV2/component/editModule.vue
@@ -129,21 +129,21 @@
 					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
 						<el-form-item label="输入 Token 路径">
 							<el-select v-model="formData.tokenMapping.promptTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
-								<el-option v-for="key in tokenMappingOptions" :key="key" :label="key" :value="key" />
+								<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
 							</el-select>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
 						<el-form-item label="输出 Token 路径">
 							<el-select v-model="formData.tokenMapping.completionTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
-								<el-option v-for="key in tokenMappingOptions" :key="key" :label="key" :value="key" />
+								<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
 							</el-select>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
 						<el-form-item label="总 Token 路径">
 							<el-select v-model="formData.tokenMapping.totalTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
-								<el-option v-for="key in tokenMappingOptions" :key="key" :label="key" :value="key" />
+								<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -236,7 +236,7 @@
 		</el-form>
 
 		<!-- JSON 编辑器弹窗 -->
-		<el-dialog v-model="jsonEditorVisible" :title="jsonEditorTitle" width="1000px" top="5vh" :close-on-click-modal="false" destroy-on-close append-to-body>
+		<el-dialog v-model="jsonEditorVisible" :title="jsonEditorTitle" width="1200px" top="5vh" :close-on-click-modal="false" destroy-on-close append-to-body>
 			<template #header>
 				<span>{{ jsonEditorTitle }}</span>
 				<div class="json-editor-toolbar">
@@ -276,7 +276,8 @@ import { JsonEditor } from '/@/components/json-schema-editor';
 import {
 	createModelManage,
 	updateModelManage,
-	getModelSupplierList,
+	getModelManage,
+		getModelSupplierList,
 	type ModelManageItem,
 	type ModelTypeTreeNode,
 	type ModelSupplierItem,
@@ -385,12 +386,48 @@ watch(isReasoningModel, (val) => {
 	if (!val) formData.chatModel = false;
 });
 
-/** 根据返回类型获取 Token 映射下拉选项（响应映射的 key 列表） */
+
+/** 递归提取 { type, attrs/value } 包裹结构中的所有叶子字段 */
+function flattenWrappedFields(obj: any, basePath: string = ''): { path: string; label: string }[] {
+	const results: { path: string; label: string }[] = [];
+	if (!obj || typeof obj !== 'object') return results;
+
+	// 检测 { type, attrs/value } 包裹格式
+	if (typeof obj.type === 'string' && ['string','number','boolean','null','object','array'].includes(obj.type)) {
+		const jtype = obj.type;
+		const dataKey = (jtype === 'object' || jtype === 'array') ? 'attrs' : 'value';
+
+		if (jtype === 'object' && dataKey in obj && obj[dataKey] && typeof obj[dataKey] === 'object' && !Array.isArray(obj[dataKey])) {
+			for (const [key, val] of Object.entries(obj[dataKey])) {
+				const childPath = basePath ? basePath + '.attrs.' + key : key;
+				results.push(...flattenWrappedFields(val, childPath));
+			}
+		} else if (jtype === 'array' && dataKey in obj && Array.isArray(obj[dataKey])) {
+			obj[dataKey].forEach((item: any, idx: number) => {
+				results.push(...flattenWrappedFields(item, basePath + '.attrs[' + idx + ']'));
+			});
+		} else if (['string', 'number', 'boolean', 'null'].includes(jtype)) {
+			results.push({ path: basePath, label: obj.label || '' });
+		}
+		return results;
+	}
+
+	// 普通对象（非包裹格式）
+	if (!Array.isArray(obj)) {
+		for (const [key, val] of Object.entries(obj)) {
+			const childPath = basePath ? basePath + '.' + key : key;
+			results.push(...flattenWrappedFields(val, childPath));
+		}
+	}
+	return results;
+}
+
+/** 根据返回类型获取 Token 映射下拉选项（响应映射的 key — 路径） */
 const tokenMappingOptions = computed(() => {
 	const source = formData.responseType === 2
 		? formData.asyncTaskMapping.responseMapping
 		: formData.responseMapping;
-	return source ? Object.keys(source) : [];
+	return source ? flattenWrappedFields(source) : [];
 });
 
 /** 是否有可用的映射配置 */
@@ -514,32 +551,41 @@ const resetForm = () => {
 	formData.lastFrame = '';
 };
 
-const openDialog = (type: 'add' | 'edit', row?: ModelManageItem) => {
+const openDialog = async (type: 'add' | 'edit', id?: string) => {
 	resetForm();
 	isEdit.value = type === 'edit';
-	detailLoading.value = false;
+	detailLoading.value = type === 'edit';
 	loadSupplierList();
 
-	if (type === 'edit' && row) {
-		editId.value = row.id;
-		formData.modelName = row.modelName;
-		formData.modelType = [row.modelType];
-		formData.modelSupplier = Number(row.modelSupplier) || undefined;
-		formData.baseUrl = row.baseUrl;
-		formData.apiKey = row.apiKey || '';
-		// 兼容新旧字段名
-		formData.responseType = row.responseType ?? row.invokeType;
-		formData.enabled = row.enabled ?? true;
-		formData.chatModel = row.ChatModel ?? false;
-		formData.maxConcurrency = row.maxConcurrency || 10;
-		formData.maxTokens = row.maxTokens || 4096;
-		formData.tokenPredictPrice = row.tokenPredictPrice ?? 0;
-		formData.requestHeadMapping = row.requestHeadMapping || row.requestMapping || {};
-		formData.requestBodyMapping = row.requestBodyMapping || {};
-		formData.responseMapping = row.responseMapping || {};
-		formData.tokenMapping = row.tokenMapping ? { ...defaultTokenMapping, ...row.tokenMapping } : { ...defaultTokenMapping };
-		formData.asyncTaskMapping = row.asyncTaskMapping ? { ...defaultAsyncTaskMapping, ...row.asyncTaskMapping } : { ...defaultAsyncTaskMapping };
-		formData.lastFrame = row.lastFrame || '';
+	if (type === 'edit' && id) {
+		editId.value = id;
+		try {
+			const res = await getModelManage(id);
+			const row = res.data.modelManage;
+			formData.modelName = row.modelName;
+			formData.modelType = [row.modelType];
+			formData.modelSupplier = Number(row.modelSupplier) || undefined;
+			formData.baseUrl = row.baseUrl;
+			formData.apiKey = row.apiKey || '';
+			formData.responseType = row.responseType ?? row.invokeType;
+			formData.enabled = row.enabled ?? true;
+			formData.chatModel = row.ChatModel ?? false;
+			formData.maxConcurrency = row.maxConcurrency || 10;
+			formData.maxTokens = row.maxTokens || 4096;
+			formData.tokenPredictPrice = row.tokenPredictPrice ?? 0;
+			formData.requestHeadMapping = row.requestHeadMapping || row.requestMapping || {};
+			formData.requestBodyMapping = row.requestBodyMapping || {};
+			formData.responseMapping = row.responseMapping || {};
+			formData.tokenMapping = row.tokenMapping ? { ...defaultTokenMapping, ...row.tokenMapping } : { ...defaultTokenMapping };
+			formData.asyncTaskMapping = row.asyncTaskMapping ? { ...defaultAsyncTaskMapping, ...row.asyncTaskMapping } : { ...defaultAsyncTaskMapping };
+			formData.lastFrame = row.lastFrame || '';
+		} catch {
+			// 关闭弹窗，错误由全局处理
+			dialogVisible.value = false;
+			return;
+		} finally {
+			detailLoading.value = false;
+		}
 	}
 
 	dialogVisible.value = true;
diff --git a/src/views/settings/modelConfigV2/index.vue b/src/views/settings/modelConfigV2/index.vue
index 26ecda7..64fad75 100644
--- a/src/views/settings/modelConfigV2/index.vue
+++ b/src/views/settings/modelConfigV2/index.vue
@@ -180,8 +180,8 @@ const handleSizeChange = (size: number) => {
 	fetchModelList();
 };
 
-const handleEdit = (_row: ModelManageItem) => {
-	ElMessage.info('修改功能待接入');
+const handleEdit = (row: ModelManageItem) => {
+	editModuleRef.value?.openDialog('edit', row.id)
 };
 
 const handleDelete = (row: ModelManageItem) => {