删除不再使用的数字人创作和模型配置相关文件，优化项目结构，提升代码可维护性。
This commit is contained in:
3648
src/views/settings/creation/index.vue
Normal file
3648
src/views/settings/creation/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,779 @@
|
||||
<template>
|
||||
<div class="system-edit-module-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
|
||||
<el-form
|
||||
ref="editModuleFormRef"
|
||||
v-loading="state.dialog.detailLoading"
|
||||
:model="state.ruleForm"
|
||||
:rules="state.rules"
|
||||
size="default"
|
||||
label-width="140px"
|
||||
>
|
||||
<!-- 基础配置 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input v-model="state.ruleForm.modelName" placeholder="请输入模型名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="模型类型" prop="modelType" required>
|
||||
<el-select v-model="state.ruleForm.modelType" placeholder="请选择模型类型" clearable style="width: 100%">
|
||||
<el-option v-for="t in modelTypeOptions" :key="String(t.id)" :label="t.label" :value="typeOptionValue(t.id)"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="模型服务地址" prop="baseUrl">
|
||||
<el-input v-model="state.ruleForm.baseUrl" placeholder="请输入模型服务地址" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="请求方式" prop="httpMethod">
|
||||
<el-select v-model="state.ruleForm.httpMethod" placeholder="请选择请求方式" clearable style="width: 100%">
|
||||
<el-option label="GET" value="GET"></el-option>
|
||||
<el-option label="POST" value="POST"></el-option>
|
||||
<el-option label="PUT" value="PUT"></el-option>
|
||||
<el-option label="DELETE" value="DELETE"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="!props.isSuperAdmin" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="访问类型" prop="isPrivate">
|
||||
<el-radio-group v-model="state.ruleForm.isPrivate" @change="onIsPrivateChange">
|
||||
<el-radio :label="0">本地模型</el-radio>
|
||||
<el-radio :label="1">服务商模型</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="!props.isSuperAdmin && state.ruleForm.isPrivate === 1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="API 密钥" prop="apiKey" required>
|
||||
<el-input v-model="state.ruleForm.apiKey" type="password" show-password placeholder="请输入 API 密钥字符串" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="!props.isSuperAdmin" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否对话模型" prop="isChatModel">
|
||||
<el-radio-group v-model="state.ruleForm.isChatModel">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="请求头绑定" prop="headMsg">
|
||||
<el-button @click="showHeaderDialog = true" style="width: 100%"> 配置请求头 ({{ state.headers.length }}) </el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="自定义字段" prop="form">
|
||||
<el-button @click="showFormDialog = true" style="width: 100%"> 配置表单字段 ({{ state.formFields.length }}) </el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否启用" prop="enabled">
|
||||
<el-radio-group v-model="state.ruleForm.enabled">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="备注说明" prop="remark">
|
||||
<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注说明" :rows="3" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 高级配置折叠区域 -->
|
||||
<el-divider content-position="left">
|
||||
<el-button link type="primary" @click="state.showAdvanced = !state.showAdvanced">
|
||||
{{ state.showAdvanced ? '收起高级配置' : '展开高级配置' }}
|
||||
<el-icon class="ml5">
|
||||
<component :is="state.showAdvanced ? 'ArrowUp' : 'ArrowDown'" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-divider>
|
||||
|
||||
<el-collapse-transition>
|
||||
<el-row v-show="state.showAdvanced" :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="最大并发数" prop="maxConcurrency">
|
||||
<el-input-number v-model="state.ruleForm.maxConcurrency" :min="1" :max="1000" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="排队队列上限" prop="queueLimit">
|
||||
<el-input-number v-model="state.ruleForm.queueLimit" :min="1" :max="10000" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="请求超时时间(秒)" prop="timeoutSeconds">
|
||||
<el-input-number v-model="state.ruleForm.timeoutSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="预计执行时间(秒)" prop="expectedSeconds">
|
||||
<el-input-number v-model="state.ruleForm.expectedSeconds" :min="1" :max="3600" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="失败重试次数" prop="retryTimes">
|
||||
<el-input-number v-model="state.ruleForm.retryTimes" :min="0" :max="10" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="重试最大排队时间" prop="retryQueueMaxSeconds">
|
||||
<el-input-number v-model="state.ruleForm.retryQueueMaxSeconds" :min="0" :max="3600" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="自动清理间隔(秒)" prop="autoCleanSeconds">
|
||||
<el-input-number v-model="state.ruleForm.autoCleanSeconds" :min="0" :max="86400" style="width: 100%"> </el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="请求映射" prop="requestMapping">
|
||||
<el-button @click="showRequestMappingDialog = true" style="width: 100%">
|
||||
配置请求映射 ({{ state.requestMappingFields.length }})
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="响应映射" prop="responseMapping">
|
||||
<el-button @click="showResponseMappingDialog = true" style="width: 100%">
|
||||
配置响应映射 ({{ state.responseMappingFields.length }})
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="Token映射" prop="tokenMapping">
|
||||
<el-input v-model="state.ruleForm.tokenMapping" placeholder="请输入Token映射" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-transition>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="state.dialog.loading" :disabled="state.dialog.detailLoading">
|
||||
{{ state.dialog.submitTxt }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 请求头配置弹窗 -->
|
||||
<el-dialog v-model="showHeaderDialog" title="配置请求头" width="600px" :close-on-click-modal="false">
|
||||
<div class="header-config-container">
|
||||
<div v-for="(header, index) in state.headers" :key="index" class="header-item">
|
||||
<el-input v-model="header.key" placeholder="请输入 Key" style="width: 40%" clearable></el-input>
|
||||
<span class="separator">:</span>
|
||||
<el-input v-model="header.value" placeholder="请输入 Value" style="width: 40%" clearable></el-input>
|
||||
<el-button type="danger" link @click="removeHeader(index)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="primary" link @click="addHeader" style="margin-top: 10px">+ 添加请求头</el-button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showHeaderDialog = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmHeaders" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 自定义字段配置弹窗 -->
|
||||
<el-dialog v-model="showFormDialog" title="配置表单字段" width="600px" :close-on-click-modal="false">
|
||||
<div class="form-config-container">
|
||||
<div v-for="(field, index) in state.formFields" :key="index" class="form-field-item">
|
||||
<el-input v-model="field.key" placeholder="请输入字段名 (Key)" style="width: 40%" clearable></el-input>
|
||||
<span class="separator">=</span>
|
||||
<el-input v-model="field.value" placeholder="请输入字段值 (Value)" style="width: 40%" clearable></el-input>
|
||||
<el-button type="danger" link @click="removeFormField(index)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="primary" link @click="addFormField" style="margin-top: 10px">+ 添加字段</el-button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showFormDialog = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmFormFields" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 请求映射配置弹窗 -->
|
||||
<el-dialog v-model="showRequestMappingDialog" title="配置请求映射" width="600px" :close-on-click-modal="false">
|
||||
<div class="mapping-config-container">
|
||||
<div v-for="(field, index) in state.requestMappingFields" :key="index" class="mapping-field-item">
|
||||
<el-input v-model="field.key" placeholder="请输入字段名 (Key)" style="width: 40%" clearable></el-input>
|
||||
<span class="separator">=</span>
|
||||
<el-input v-model="field.value" placeholder="请输入字段值 (Value)" style="width: 40%" clearable></el-input>
|
||||
<el-button type="danger" link @click="removeRequestMappingField(index)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="primary" link @click="addRequestMappingField" style="margin-top: 10px">+ 添加字段</el-button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showRequestMappingDialog = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmRequestMappingFields" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 响应映射配置弹窗 -->
|
||||
<el-dialog v-model="showResponseMappingDialog" title="配置响应映射" width="700px" :close-on-click-modal="false">
|
||||
<div class="mapping-config-container">
|
||||
<div v-for="(field, index) in state.responseMappingFields" :key="index" class="mapping-field-item">
|
||||
<el-input v-model="field.key" placeholder="请输入字段名 (Key)" style="width: 30%" clearable></el-input>
|
||||
<span class="separator">=</span>
|
||||
<el-input v-model="field.value" placeholder="请输入字段值 (Value)" style="width: 30%" clearable></el-input>
|
||||
<el-button :type="field.isMainBody ? 'success' : 'primary'" :plain="!field.isMainBody" @click="setMainBody(index)" size="small">
|
||||
{{ field.isMainBody ? '✓ 返回主体' : '设置返回主体' }}
|
||||
</el-button>
|
||||
<el-button type="danger" link @click="removeResponseMappingField(index)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="primary" link @click="addResponseMappingField" style="margin-top: 10px">+ 添加字段</el-button>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showResponseMappingDialog = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmResponseMappingFields" size="default">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemEditModule">
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
|
||||
import { addModelModule, updateModelModule, getModelModuleDetail, type ModelFormEntry } from '/@/api/settings/modelConfig/modelModule/index';
|
||||
|
||||
export type ModelTypeOption = { id: number | string; label: string };
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelTypes?: ModelTypeOption[];
|
||||
isSuperAdmin?: boolean;
|
||||
}>(),
|
||||
{
|
||||
modelTypes: () => [] as ModelTypeOption[],
|
||||
isSuperAdmin: false,
|
||||
}
|
||||
);
|
||||
|
||||
const modelTypeOptions = computed(() => props.modelTypes);
|
||||
|
||||
const typeOptionValue = (id: number | string): number | string => {
|
||||
const n = Number(id);
|
||||
return Number.isNaN(n) ? id : n;
|
||||
};
|
||||
|
||||
const editModuleFormRef = ref();
|
||||
const emit = defineEmits(['refresh']);
|
||||
const showHeaderDialog = ref(false);
|
||||
const showFormDialog = ref(false);
|
||||
const showRequestMappingDialog = ref(false);
|
||||
const showResponseMappingDialog = ref(false);
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
id: '',
|
||||
modelName: '',
|
||||
modelType: null as number | string | null,
|
||||
baseUrl: '',
|
||||
httpMethod: 'POST',
|
||||
headMsg: '',
|
||||
isPrivate: 0,
|
||||
apiKey: '',
|
||||
enabled: 1,
|
||||
isChatModel: 0,
|
||||
maxConcurrency: 10,
|
||||
queueLimit: 100,
|
||||
timeoutSeconds: 30,
|
||||
expectedSeconds: 15,
|
||||
retryTimes: 3,
|
||||
retryQueueMaxSeconds: 60,
|
||||
autoCleanSeconds: 300,
|
||||
remark: '',
|
||||
tokenMapping: '',
|
||||
},
|
||||
rules: {
|
||||
modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
|
||||
modelType: [
|
||||
{
|
||||
validator: (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
callback(new Error('请选择模型类型'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
baseUrl: [{ required: true, message: '请输入模型服务地址', trigger: 'blur' }],
|
||||
httpMethod: [{ required: true, message: '请选择请求方式', trigger: 'change' }],
|
||||
apiKey: [
|
||||
{
|
||||
validator: (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
|
||||
// 管理员不需要验证 apiKey
|
||||
if (props.isSuperAdmin) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
// 普通用户：如果是服务商模型（isPrivate = 1），apiKey 必填
|
||||
if (state.ruleForm.isPrivate === 1) {
|
||||
if (!value || String(value).trim() === '') {
|
||||
callback(new Error('服务商模型必须输入 API 密钥'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
maxConcurrency: [{ required: true, message: '请输入最大并发数', trigger: 'blur' }],
|
||||
queueLimit: [{ required: true, message: '请输入排队队列上限', trigger: 'blur' }],
|
||||
timeoutSeconds: [{ required: true, message: '请输入请求超时时间', trigger: 'blur' }],
|
||||
expectedSeconds: [{ required: true, message: '请输入预计执行时间', trigger: 'blur' }],
|
||||
},
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
loading: false,
|
||||
detailLoading: false,
|
||||
},
|
||||
showAdvanced: false,
|
||||
headers: [] as Array<{ key: string; value: string }>,
|
||||
formFields: [] as Array<{ key: string; value: string }>,
|
||||
requestMappingFields: [] as Array<{ key: string; value: string }>,
|
||||
responseMappingFields: [] as Array<{ key: string; value: string; isMainBody?: boolean }>,
|
||||
mainBodyIndex: -1, // 记录哪一行被设置为返回主体
|
||||
});
|
||||
|
||||
// 将数组转换为对象
|
||||
const fieldsToObject = (fields: Array<{ key: string; value: string }>) => {
|
||||
const obj: Record<string, string> = {};
|
||||
fields.forEach((f) => {
|
||||
if (f.key && f.key.trim()) {
|
||||
obj[f.key.trim()] = f.value || '';
|
||||
}
|
||||
});
|
||||
return obj;
|
||||
};
|
||||
|
||||
const parseHeaders = (headMsg: string) => parseKeyValueString(headMsg);
|
||||
// 解析 form：支持数组 [{ key, value }] 或历史对象 { k: { value } }
|
||||
const parseFormFields = (form: unknown) => {
|
||||
if (!form) return [];
|
||||
if (Array.isArray(form)) {
|
||||
return (form as ModelFormEntry[])
|
||||
.filter((item) => item && (item.key !== undefined || item.value !== undefined))
|
||||
.map((item) => ({
|
||||
key: String(item.key ?? '').trim(),
|
||||
value: String(item.value ?? '').trim(),
|
||||
}));
|
||||
}
|
||||
if (typeof form === 'object') {
|
||||
const fields: Array<{ key: string; value: string }> = [];
|
||||
Object.keys(form as Record<string, unknown>).forEach((key) => {
|
||||
const v = (form as Record<string, unknown>)[key];
|
||||
const value = String(v || '');
|
||||
fields.push({ key, value });
|
||||
});
|
||||
return fields;
|
||||
}
|
||||
return [];
|
||||
};
|
||||
// 解析 requestMapping 对象为数组
|
||||
const parseRequestMappingFields = (mapping: unknown) => {
|
||||
if (!mapping || typeof mapping !== 'object' || Array.isArray(mapping)) return [];
|
||||
return Object.entries(mapping).map(([key, value]) => ({ key, value: String(value) }));
|
||||
};
|
||||
|
||||
// 解析 responseMapping 对象为数组
|
||||
const parseResponseMappingFields = (mapping: unknown) => {
|
||||
if (!mapping || typeof mapping !== 'object' || Array.isArray(mapping)) return [];
|
||||
return Object.entries(mapping).map(([key, value]) => ({ key, value: String(value) }));
|
||||
};
|
||||
|
||||
const buildFormArray = (): ModelFormEntry[] => {
|
||||
return state.formFields
|
||||
.filter((field) => field.key?.trim() && field.value?.trim())
|
||||
.map((field) => ({ key: field.key.trim(), value: field.value.trim() }));
|
||||
};
|
||||
|
||||
const parseKeyValueString = (raw: string) => {
|
||||
if (!raw) return [];
|
||||
const headers: Array<{ key: string; value: string }> = [];
|
||||
const pairs = raw.split(',');
|
||||
pairs.forEach((pair) => {
|
||||
const idx = pair.indexOf(':');
|
||||
if (idx === -1) return;
|
||||
const key = pair.slice(0, idx).trim();
|
||||
const value = pair.slice(idx + 1).trim();
|
||||
if (key) {
|
||||
headers.push({ key, value });
|
||||
}
|
||||
});
|
||||
return headers;
|
||||
};
|
||||
|
||||
const stringifyHeaders = () => {
|
||||
return state.headers
|
||||
.filter((h) => h.key?.trim() && h.value?.trim())
|
||||
.map((h) => `${h.key.trim()}:${h.value.trim()}`)
|
||||
.join(',');
|
||||
};
|
||||
|
||||
const onIsPrivateChange = (val: string | number | boolean | undefined) => {
|
||||
if (val === 0 || val === '0') {
|
||||
state.ruleForm.apiKey = '';
|
||||
}
|
||||
};
|
||||
|
||||
const parseJsonObjectField = (raw: string, fallback: Record<string, unknown>) => {
|
||||
try {
|
||||
const o = JSON.parse(raw || '{}');
|
||||
if (o && typeof o === 'object' && !Array.isArray(o)) {
|
||||
return o as Record<string, unknown>;
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return fallback;
|
||||
};
|
||||
|
||||
// 添加请求头
|
||||
const addHeader = () => {
|
||||
state.headers.push({ key: '', value: '' });
|
||||
};
|
||||
|
||||
// 删除请求头
|
||||
const removeHeader = (index: number) => {
|
||||
state.headers.splice(index, 1);
|
||||
};
|
||||
|
||||
// 确认请求头配置
|
||||
const confirmHeaders = () => {
|
||||
state.ruleForm.headMsg = stringifyHeaders();
|
||||
showHeaderDialog.value = false;
|
||||
};
|
||||
// 添加表单字段
|
||||
const addFormField = () => {
|
||||
state.formFields.push({ key: '', value: '' });
|
||||
};
|
||||
|
||||
// 删除表单字段
|
||||
const removeFormField = (index: number) => {
|
||||
state.formFields.splice(index, 1);
|
||||
};
|
||||
|
||||
// 确认表单字段配置
|
||||
const confirmFormFields = () => {
|
||||
showFormDialog.value = false;
|
||||
};
|
||||
// 请求映射字段操作
|
||||
const addRequestMappingField = () => {
|
||||
state.requestMappingFields.push({ key: '', value: '' });
|
||||
};
|
||||
|
||||
const removeRequestMappingField = (index: number) => {
|
||||
state.requestMappingFields.splice(index, 1);
|
||||
};
|
||||
|
||||
const confirmRequestMappingFields = () => {
|
||||
showRequestMappingDialog.value = false;
|
||||
};
|
||||
|
||||
// 响应映射字段操作
|
||||
const addResponseMappingField = () => {
|
||||
state.responseMappingFields.push({ key: '', value: '', isMainBody: false });
|
||||
};
|
||||
|
||||
const removeResponseMappingField = (index: number) => {
|
||||
state.responseMappingFields.splice(index, 1);
|
||||
};
|
||||
|
||||
// 设置返回主体（单选）
|
||||
const setMainBody = (index: number) => {
|
||||
// 清除所有字段的返回主体标记
|
||||
state.responseMappingFields.forEach((field, i) => {
|
||||
field.isMainBody = i === index;
|
||||
});
|
||||
state.mainBodyIndex = index;
|
||||
};
|
||||
|
||||
const confirmResponseMappingFields = () => {
|
||||
showResponseMappingDialog.value = false;
|
||||
};
|
||||
|
||||
const ensureKeyValueRows = (rows: Array<{ key: string; value: string }>) => (rows.length ? rows : [{ key: '', value: '' }]);
|
||||
|
||||
const ensureResponseMappingRows = (rows: Array<{ key: string; value: string; isMainBody?: boolean }>) => {
|
||||
if (!rows.length) return [{ key: '', value: '', isMainBody: false }];
|
||||
return rows.map((row) => ({ ...row, isMainBody: row.isMainBody || false }));
|
||||
};
|
||||
|
||||
/** 从 getModel 返回的 data 中取出单条模型对象 */
|
||||
const unwrapModelDetailPayload = (data: unknown): Record<string, unknown> | null => {
|
||||
if (data == null) return null;
|
||||
if (Array.isArray(data)) return null;
|
||||
if (typeof data !== 'object') return null;
|
||||
const o = data as Record<string, unknown>;
|
||||
if (typeof o.modelName === 'string') return o;
|
||||
if (o.model && typeof o.model === 'object' && !Array.isArray(o.model)) {
|
||||
return o.model as Record<string, unknown>;
|
||||
}
|
||||
if (o.detail && typeof o.detail === 'object' && !Array.isArray(o.detail)) {
|
||||
return o.detail as Record<string, unknown>;
|
||||
}
|
||||
if (o.info && typeof o.info === 'object' && !Array.isArray(o.info)) {
|
||||
return o.info as Record<string, unknown>;
|
||||
}
|
||||
return o;
|
||||
};
|
||||
|
||||
const fillFormFromDetailRow = (row: Record<string, unknown>) => {
|
||||
const timeoutSeconds =
|
||||
row.timeoutSeconds != null && row.timeoutSeconds !== ''
|
||||
? Number(row.timeoutSeconds)
|
||||
: row.timeoutMs != null
|
||||
? Math.floor(Number(row.timeoutMs) / 1000)
|
||||
: 30;
|
||||
const isPrivate = row.isPrivate !== undefined && row.isPrivate !== null ? Number(row.isPrivate) : 0;
|
||||
state.ruleForm = {
|
||||
id: row.id as string,
|
||||
modelName: String(row.modelName ?? ''),
|
||||
modelType: row.modelType !== undefined && row.modelType !== null ? typeOptionValue(row.modelType as number | string) : null,
|
||||
baseUrl: String(row.baseUrl ?? ''),
|
||||
httpMethod: String(row.httpMethod || 'POST'),
|
||||
headMsg: String(row.headMsg || ''),
|
||||
isPrivate,
|
||||
apiKey: isPrivate === 1 ? String(row.apiKey ?? '') : '',
|
||||
enabled: Number(row.enabled ?? 1),
|
||||
isChatModel: row.isChatModel !== undefined && row.isChatModel !== null ? Number(row.isChatModel) : 0,
|
||||
maxConcurrency: Number(row.maxConcurrency ?? 10),
|
||||
queueLimit: Number(row.queueLimit ?? 100),
|
||||
timeoutSeconds,
|
||||
expectedSeconds: Number(row.expectedSeconds ?? 15),
|
||||
retryTimes: Number(row.retryTimes ?? 3),
|
||||
retryQueueMaxSeconds: Number(row.retryQueueMaxSeconds ?? 60),
|
||||
autoCleanSeconds: Number(row.autoCleanSeconds ?? 300),
|
||||
remark: String(row.remark || ''),
|
||||
tokenMapping: String(row.tokenMapping || ''),
|
||||
};
|
||||
state.headers = ensureKeyValueRows(parseHeaders(String(row.headMsg || '')));
|
||||
state.formFields = ensureKeyValueRows(parseFormFields(row.form));
|
||||
// 解析请求映射和响应映射
|
||||
state.requestMappingFields = ensureKeyValueRows(parseRequestMappingFields(row.requestMapping));
|
||||
state.responseMappingFields = ensureResponseMappingRows(parseResponseMappingFields(row.responseMapping));
|
||||
|
||||
// 根据 responseBody 字段设置返回主体标记 (responseBody 是对象 {key: value})
|
||||
if (row.responseBody && typeof row.responseBody === 'object') {
|
||||
const responseBodyKey = Object.keys(row.responseBody)[0];
|
||||
if (responseBodyKey) {
|
||||
const mainBodyIndex = state.responseMappingFields.findIndex((f) => f.key === responseBodyKey);
|
||||
if (mainBodyIndex !== -1) {
|
||||
state.responseMappingFields[mainBodyIndex].isMainBody = true;
|
||||
state.mainBodyIndex = mainBodyIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// 打开弹窗（编辑时会请求 /model/getModel 详情）
|
||||
const openDialog = async (type: string, row?: Record<string, unknown>) => {
|
||||
state.dialog.type = type;
|
||||
state.dialog.isShowDialog = true;
|
||||
state.showAdvanced = false;
|
||||
state.dialog.detailLoading = false;
|
||||
|
||||
if (type === 'edit') {
|
||||
const listRowId = row?.id;
|
||||
if (listRowId === undefined || listRowId === null || listRowId === '') {
|
||||
ElMessage.error('缺少模型 ID');
|
||||
state.dialog.isShowDialog = false;
|
||||
return;
|
||||
}
|
||||
state.dialog.title = '修改模型配置';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
state.dialog.detailLoading = true;
|
||||
try {
|
||||
const res: any = await getModelModuleDetail(listRowId as string | number);
|
||||
if (res.code !== 0) {
|
||||
ElMessage.error(res.message || '获取模型详情失败');
|
||||
state.dialog.isShowDialog = false;
|
||||
return;
|
||||
}
|
||||
const detail = unwrapModelDetailPayload(res.data) ?? row ?? null;
|
||||
if (!detail || typeof detail !== 'object') {
|
||||
ElMessage.error('获取模型详情失败');
|
||||
state.dialog.isShowDialog = false;
|
||||
return;
|
||||
}
|
||||
fillFormFromDetailRow(detail as Record<string, unknown>);
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
state.dialog.isShowDialog = false;
|
||||
} finally {
|
||||
state.dialog.detailLoading = false;
|
||||
}
|
||||
} else {
|
||||
state.ruleForm = {
|
||||
id: '',
|
||||
modelName: '',
|
||||
modelType: null,
|
||||
baseUrl: '',
|
||||
httpMethod: 'POST',
|
||||
headMsg: '',
|
||||
isPrivate: props.isSuperAdmin ? 1 : 0,
|
||||
apiKey: '',
|
||||
enabled: 1,
|
||||
isChatModel: 0,
|
||||
maxConcurrency: 10,
|
||||
queueLimit: 100,
|
||||
timeoutSeconds: 30,
|
||||
expectedSeconds: 15,
|
||||
retryTimes: 3,
|
||||
retryQueueMaxSeconds: 60,
|
||||
autoCleanSeconds: 300,
|
||||
remark: '',
|
||||
tokenMapping: '',
|
||||
};
|
||||
state.headers = [{ key: '', value: '' }];
|
||||
state.formFields = [{ key: '', value: '' }];
|
||||
state.requestMappingFields = [{ key: '', value: '' }];
|
||||
state.responseMappingFields = [{ key: '', value: '', isMainBody: false }];
|
||||
state.dialog.title = '新增模型配置';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
state.dialog.detailLoading = false;
|
||||
editModuleFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
editModuleFormRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return;
|
||||
|
||||
state.dialog.loading = true;
|
||||
try {
|
||||
state.ruleForm.headMsg = stringifyHeaders();
|
||||
const requestMapping = fieldsToObject(state.requestMappingFields);
|
||||
const responseMapping = fieldsToObject(state.responseMappingFields);
|
||||
// 获取被设置为返回主体的字段 {key: value}
|
||||
const responseBodyField = state.responseMappingFields.find((f) => f.isMainBody);
|
||||
const responseBody = responseBodyField ? { [responseBodyField.key.trim()]: responseBodyField.value } : {};
|
||||
const submitData = {
|
||||
modelName: state.ruleForm.modelName,
|
||||
modelType: state.ruleForm.modelType as number | string,
|
||||
baseUrl: state.ruleForm.baseUrl,
|
||||
httpMethod: state.ruleForm.httpMethod || 'POST',
|
||||
headMsg: state.ruleForm.headMsg,
|
||||
isPrivate: state.ruleForm.isPrivate,
|
||||
enabled: state.ruleForm.enabled,
|
||||
isChatModel: state.ruleForm.isChatModel,
|
||||
apiKey: state.ruleForm.isPrivate === 1 ? String(state.ruleForm.apiKey ?? '').trim() : '',
|
||||
form: fieldsToObject(state.formFields),
|
||||
requestMapping,
|
||||
responseMapping,
|
||||
responseBody,
|
||||
maxConcurrency: state.ruleForm.maxConcurrency,
|
||||
queueLimit: state.ruleForm.queueLimit,
|
||||
timeoutSeconds: state.ruleForm.timeoutSeconds,
|
||||
expectedSeconds: state.ruleForm.expectedSeconds,
|
||||
retryTimes: state.ruleForm.retryTimes,
|
||||
retryQueueMaxSeconds: state.ruleForm.retryQueueMaxSeconds,
|
||||
autoCleanSeconds: state.ruleForm.autoCleanSeconds,
|
||||
remark: state.ruleForm.remark || '',
|
||||
tokenMapping: state.ruleForm.tokenMapping || '',
|
||||
};
|
||||
|
||||
if (state.dialog.type === 'edit') {
|
||||
await updateModelModule({ ...submitData, id: state.ruleForm.id });
|
||||
ElMessage.success('修改成功');
|
||||
} else {
|
||||
await addModelModule(submitData);
|
||||
ElMessage.success('新增成功');
|
||||
}
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
} finally {
|
||||
state.dialog.loading = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mapping-config-container {
|
||||
.mapping-field-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.separator {
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-config-container {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-field-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.header-config-container {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
379
src/views/settings/modelConfig/modelModule/index.vue
Normal file
379
src/views/settings/modelConfig/modelModule/index.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input v-model="state.tableData.param.modelName" size="default" placeholder="请输入模型名称" style="max-width: 180px" clearable>
|
||||
</el-input>
|
||||
<el-select
|
||||
v-model="state.tableData.param.modelType"
|
||||
size="default"
|
||||
placeholder="请选择模型类型"
|
||||
style="max-width: 180px"
|
||||
clearable
|
||||
class="ml10"
|
||||
>
|
||||
<el-option v-for="type in state.modelTypes" :key="type.id" :label="type.label" :value="type.id" />
|
||||
</el-select>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddModule('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增模型配置
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="modelName" label="模型名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="模型类型" width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ resolveModelTypeLabel(row.modelType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="baseUrl" label="模型服务地址" show-overflow-tooltip width="200"></el-table-column> -->
|
||||
<el-table-column prop="isPrivate" label="访问类型" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.isPrivate === 1 ? 'primary' : 'info'">{{ scope.row.isPrivate === 1 ? '本地模型' : '服务商模型' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="httpMethod" label="请求方式" width="100"></el-table-column>
|
||||
<el-table-column prop="enabled" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.enabled === 1 ? 'success' : 'danger'">{{ scope.row.enabled === 1 ? '启用' : '禁用' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxConcurrency" label="最大并发" width="100"></el-table-column>
|
||||
<el-table-column prop="queueLimit" label="队列上限" width="100"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip width="160"></el-table-column>
|
||||
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip width="160"></el-table-column>
|
||||
<el-table-column label="操作" :width="isSuperAdmin ? 150 : 300" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-buttons">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditModule('edit', scope.row)">修改</el-button>
|
||||
<!-- 非管理员才显示会话模型按钮 -->
|
||||
<template v-if="!isSuperAdmin">
|
||||
<el-button
|
||||
v-if="isInferenceModel(scope.row.modelType) && Number(scope.row.isChatModel) !== 1"
|
||||
size="small"
|
||||
text
|
||||
type="warning"
|
||||
@click="onSetChatModel(scope.row)"
|
||||
>
|
||||
设为会话模型
|
||||
</el-button>
|
||||
<el-tag
|
||||
v-if="isInferenceModel(scope.row.modelType) && Number(scope.row.isChatModel) === 1"
|
||||
type="success"
|
||||
effect="dark"
|
||||
size="default"
|
||||
>
|
||||
✓ 当前会话模型
|
||||
</el-tag>
|
||||
</template>
|
||||
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<EditModule ref="editModuleRef" :model-types="state.modelTypes" :is-super-admin="isSuperAdmin" @refresh="getTableData()" />
|
||||
|
||||
<!-- 系统模型 API Key 输入弹窗 -->
|
||||
<el-dialog v-model="apiKeyDialogVisible" title="配置系统模型" width="500px" :close-on-click-modal="false">
|
||||
<el-alert type="info" :closable="false" style="margin-bottom: 16px">
|
||||
<template #title>
|
||||
<div style="line-height: 1.6">
|
||||
您选择的是系统模型，需要配置您自己的 API Key。<br />
|
||||
系统将为您创建一个模型副本并设置为会话模型。
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-form :model="apiKeyForm" :rules="apiKeyRules" ref="apiKeyFormRef" label-width="100px">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input v-model="apiKeyForm.modelName" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="API Key" prop="apiKey">
|
||||
<el-input v-model="apiKeyForm.apiKey" type="password" show-password placeholder="请输入您的 API Key" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="apiKeyDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleCreatePrivateModelAndSetChat" :loading="creatingModel">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="digitalHumanModelModule">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import {
|
||||
getModelModuleList,
|
||||
getModelTypeList,
|
||||
deleteModelModule,
|
||||
normalizeModelTypeOptions,
|
||||
updateChatModel,
|
||||
addModelModule,
|
||||
} from '/@/api/settings/modelConfig/modelModule/index';
|
||||
import { checkIsSuperAdmin } from '/@/api/system/user/index';
|
||||
import { getApiErrorMessage } from '/@/utils/request';
|
||||
|
||||
const EditModule = defineAsyncComponent(() => import('/@/views/settings/modelConfig/modelModule/component/editModule.vue'));
|
||||
|
||||
const editModuleRef = ref();
|
||||
const isSuperAdmin = ref(false); // 是否为管理员
|
||||
const state = reactive({
|
||||
modelTypes: [] as Array<{ id: number | string; label: string }>,
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
modelName: '',
|
||||
modelType: undefined as number | string | undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 系统模型 API Key 配置
|
||||
const apiKeyDialogVisible = ref(false);
|
||||
const apiKeyFormRef = ref<FormInstance>();
|
||||
const apiKeyForm = reactive({
|
||||
modelName: '',
|
||||
apiKey: '',
|
||||
});
|
||||
const apiKeyRules: FormRules = {
|
||||
modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
|
||||
apiKey: [{ required: true, message: '请输入 API Key', trigger: 'blur' }],
|
||||
};
|
||||
const creatingModel = ref(false);
|
||||
const systemModelToClone = ref<any>(null);
|
||||
|
||||
// 检查是否为管理员
|
||||
const checkAdminStatus = async () => {
|
||||
try {
|
||||
const res: any = await checkIsSuperAdmin();
|
||||
isSuperAdmin.value = res.data?.isSuperAdmin || false;
|
||||
} catch {
|
||||
isSuperAdmin.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 判断是否为推理模型（只有推理模型才能设置为会话模型）
|
||||
const isInferenceModel = (modelType: number | string | undefined | null) => {
|
||||
if (modelType === undefined || modelType === null || modelType === '') {
|
||||
return false;
|
||||
}
|
||||
// 查找模型类型标签，判断是否为"推理模型"
|
||||
const typeInfo = state.modelTypes.find((t) => String(t.id) === String(modelType));
|
||||
return typeInfo?.label === '推理模型' || String(modelType) === '1';
|
||||
};
|
||||
|
||||
// 设置为会话模型
|
||||
const onSetChatModel = async (row: any) => {
|
||||
// 判断是否是系统模型（tenantId === 1）
|
||||
if (row.tenantId === 1) {
|
||||
// 系统模型，需要用户配置 API Key
|
||||
systemModelToClone.value = row;
|
||||
apiKeyForm.modelName = row.modelName;
|
||||
apiKeyForm.apiKey = '';
|
||||
apiKeyDialogVisible.value = true;
|
||||
} else {
|
||||
// 非系统模型，直接设置为会话模型
|
||||
try {
|
||||
await updateChatModel({
|
||||
id: row.id!,
|
||||
isChatModel: 1,
|
||||
});
|
||||
ElMessage.success('已设置为会话模型');
|
||||
await getTableData();
|
||||
} catch {
|
||||
// 错误已由全局拦截器处理
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 创建私有模型并设置为会话模型
|
||||
const handleCreatePrivateModelAndSetChat = async () => {
|
||||
if (!apiKeyFormRef.value || !systemModelToClone.value) return;
|
||||
|
||||
try {
|
||||
await apiKeyFormRef.value.validate();
|
||||
|
||||
creatingModel.value = true;
|
||||
|
||||
// 基于系统模型创建新模型（继承原模型的所有配置，只替换 apiKey）
|
||||
const systemModel = systemModelToClone.value;
|
||||
const createParams = {
|
||||
modelName: apiKeyForm.modelName,
|
||||
modelType: systemModel.modelType,
|
||||
baseUrl: systemModel.baseUrl,
|
||||
httpMethod: systemModel.httpMethod || 'POST',
|
||||
headMsg: systemModel.headMsg || '',
|
||||
isPrivate: systemModel.isPrivate ?? 1,
|
||||
enabled: systemModel.enabled ?? 1,
|
||||
isChatModel: 1, // 设置为会话模型
|
||||
apiKey: apiKeyForm.apiKey,
|
||||
form: systemModel.form || [],
|
||||
requestMapping: systemModel.requestMapping || {},
|
||||
responseMapping: systemModel.responseMapping || {},
|
||||
maxConcurrency: systemModel.maxConcurrency || 10,
|
||||
queueLimit: systemModel.queueLimit || 100,
|
||||
timeoutSeconds: systemModel.timeoutSeconds || 30,
|
||||
expectedSeconds: systemModel.expectedSeconds || 15,
|
||||
retryTimes: systemModel.retryTimes || 3,
|
||||
retryQueueMaxSeconds: systemModel.retryQueueMaxSeconds || 60,
|
||||
autoCleanSeconds: systemModel.autoCleanSeconds || 300,
|
||||
remark: systemModel.remark || '',
|
||||
};
|
||||
|
||||
await addModelModule(createParams);
|
||||
|
||||
ElMessage.success('模型创建成功并已设置为会话模型');
|
||||
|
||||
// 关闭对话框
|
||||
apiKeyDialogVisible.value = false;
|
||||
|
||||
// 刷新列表
|
||||
await getTableData();
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(getApiErrorMessage(error, '创建模型失败'));
|
||||
}
|
||||
} finally {
|
||||
creatingModel.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resolveModelTypeLabel = (modelType: number | string | undefined | null) => {
|
||||
if (modelType === undefined || modelType === null || modelType === '') {
|
||||
return '—';
|
||||
}
|
||||
const hit = state.modelTypes.find((t) => String(t.id) === String(modelType));
|
||||
return hit?.label ?? String(modelType);
|
||||
};
|
||||
|
||||
const loadModelTypes = async () => {
|
||||
try {
|
||||
const res: any = await getModelTypeList();
|
||||
if (res.code === 0) {
|
||||
state.modelTypes = normalizeModelTypeOptions(res);
|
||||
}
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = async () => {
|
||||
state.tableData.loading = true;
|
||||
try {
|
||||
const res: any = await getModelModuleList(state.tableData.param);
|
||||
if (res.code === 0) {
|
||||
state.tableData.data = res.data.list || [];
|
||||
state.tableData.total = res.data.total || 0;
|
||||
}
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
} finally {
|
||||
state.tableData.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 打开新增模型模块弹窗
|
||||
const onOpenAddModule = (type: string) => {
|
||||
editModuleRef.value.openDialog(type);
|
||||
};
|
||||
|
||||
// 打开修改模型模块弹窗
|
||||
const onOpenEditModule = (type: string, row: any) => {
|
||||
editModuleRef.value.openDialog(type, row);
|
||||
};
|
||||
|
||||
// 删除模型模块
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`确定要删除模型配置：${row.modelName}？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await deleteModelModule(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
getTableData();
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(async () => {
|
||||
await checkAdminStatus(); // 检查管理员状态
|
||||
await loadModelTypes();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.text-muted {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.system-user-container {
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/views/settings/modelConfig/modelType/index.vue
Normal file
127
src/views/settings/modelConfig/modelType/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="system-model-type-container layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-model-type-search mb15">
|
||||
<el-input v-model="state.tableData.param.keyword" size="default" placeholder="请输入模型类型名称" style="max-width: 180px" clearable> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddType('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增模型类型
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="typeName" label="类型名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="typeCode" label="类型编码" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditType('edit', scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="digitalHumanModelType">
|
||||
import { reactive, onMounted } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keyword: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
// TODO: 调用API获取数据
|
||||
setTimeout(() => {
|
||||
state.tableData.data = [];
|
||||
state.tableData.total = 0;
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 打开新增模型类型弹窗
|
||||
const onOpenAddType = (type: string) => {
|
||||
ElMessage.info('功能开发中...');
|
||||
};
|
||||
|
||||
// 打开修改模型类型弹窗
|
||||
const onOpenEditType = (type: string, row: any) => {
|
||||
ElMessage.info('功能开发中...');
|
||||
};
|
||||
|
||||
// 删除模型类型
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessage.info('功能开发中...');
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-model-type-container {
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
476
src/views/settings/skill/index.vue
Normal file
476
src/views/settings/skill/index.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<div class="skill-page">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<h2 class="page-title">Skill 技能管理</h2>
|
||||
<p class="page-desc">管理和配置 AI 技能模板</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-button type="primary" @click="handleCreate">
|
||||
<el-icon><Plus /></el-icon>
|
||||
创建技能
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<el-card shadow="hover" class="search-card">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchParams.keyword" placeholder="搜索技能名称或描述" clearable class="search-input" @clear="handleSearch">
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 技能表格 -->
|
||||
<el-card shadow="hover" class="table-card">
|
||||
<el-table :data="skillList" v-loading="loading" stripe style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="name" label="技能名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="description" label="技能描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="fileName" label="文件名" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="fileUrl" label="文件地址" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-link :href="row.fileUrl" target="_blank" type="primary" :underline="false">{{ row.fileUrl }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" width="160" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" width="160" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="pagination.total > 0" class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 创建/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" :close-on-click-modal="false">
|
||||
<el-form :model="formData" :rules="formRules" ref="formRef" label-position="top">
|
||||
<el-form-item label="技能名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入技能名称" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="技能描述" prop="description">
|
||||
<el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入技能描述" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="上传文件" prop="file">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="upload-area"
|
||||
drag
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
accept=".zip"
|
||||
>
|
||||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||||
<div class="el-upload__text">将 zip 文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">只支持 .zip 格式，且压缩包内必须包含 .md 文件，文件大小不超过 100MB</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文件信息预览 -->
|
||||
<div v-if="formData.fileName" class="file-preview">
|
||||
<div class="file-preview-header">
|
||||
<span class="file-preview-title">已上传文件</span>
|
||||
<el-tag type="success" size="small">{{ isEdit ? '当前文件' : '上传成功' }}</el-tag>
|
||||
</div>
|
||||
<div class="file-preview-info">
|
||||
<div class="file-info-item">
|
||||
<span class="file-info-label">文件名：</span>
|
||||
<span class="file-info-value">{{ formData.fileName }}</span>
|
||||
</div>
|
||||
<div class="file-info-item">
|
||||
<span class="file-info-label">文件地址：</span>
|
||||
<span class="file-info-value">{{ formData.fileUrl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadInstance, type UploadProps, type UploadUserFile } from 'element-plus';
|
||||
import { Plus, Search, UploadFilled } from '@element-plus/icons-vue';
|
||||
import {
|
||||
getUserSkillList,
|
||||
createUserSkill,
|
||||
updateUserSkill,
|
||||
deleteUserSkill,
|
||||
getUserSkillDetail,
|
||||
type SkillItem,
|
||||
type CreateSkillParams,
|
||||
} from '/@/api/settings/skill';
|
||||
import { uploadFile as uploadFileToOss } from '/@/api/common/upload';
|
||||
|
||||
const searchParams = reactive({ keyword: '' });
|
||||
const pagination = reactive({ pageNum: 1, pageSize: 10, total: 0 });
|
||||
const skillList = ref<SkillItem[]>([]);
|
||||
const loading = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('创建技能');
|
||||
const isEdit = ref(false);
|
||||
const currentEditId = ref<number | null>(null);
|
||||
const formRef = ref<FormInstance>();
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
const submitting = ref(false);
|
||||
const fileList = ref<UploadUserFile[]>([]);
|
||||
const formData = reactive<CreateSkillParams>({ name: '', description: '', fileName: '', fileUrl: '' });
|
||||
const formRules: FormRules = {
|
||||
name: [{ required: true, message: '请输入技能名称', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
const formatTime = (time: string) => (time ? time.replace('T', ' ').split('.')[0] : '');
|
||||
|
||||
// 验证 zip 文件中是否包含 .md 文件
|
||||
const validateZipContainsMd = async (file: File): Promise<boolean> => {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (e) => {
|
||||
try {
|
||||
const arrayBuffer = e.target?.result as ArrayBuffer;
|
||||
// 使用 JSZip 库解析 zip 文件
|
||||
const JSZip = (await import('jszip')).default;
|
||||
const zip = await JSZip.loadAsync(arrayBuffer);
|
||||
|
||||
// 检查是否有 .md 文件
|
||||
const hasMdFile = Object.keys(zip.files).some(filename => filename.toLowerCase().endsWith('.md'));
|
||||
resolve(hasMdFile);
|
||||
} catch (error) {
|
||||
console.error('解析 zip 文件失败:', error);
|
||||
resolve(false);
|
||||
}
|
||||
};
|
||||
reader.onerror = () => resolve(false);
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileChange: UploadProps['onChange'] = async (uploadFile) => {
|
||||
if (!uploadFile.raw) return;
|
||||
|
||||
// 1. 验证文件格式必须是 zip
|
||||
const fileName = uploadFile.name.toLowerCase();
|
||||
if (!fileName.endsWith('.zip')) {
|
||||
ElMessage.warning('只支持上传 .zip 格式的文件');
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 验证文件大小
|
||||
const maxSize = 100 * 1024 * 1024;
|
||||
if (uploadFile.raw.size > maxSize) {
|
||||
ElMessage.warning('文件大小不能超过 100MB');
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. 验证 zip 包内必须包含 .md 文件
|
||||
ElMessage.info('正在验证文件...');
|
||||
const hasMdFile = await validateZipContainsMd(uploadFile.raw);
|
||||
if (!hasMdFile) {
|
||||
ElMessage.warning('zip 压缩包内必须包含 .md 文件');
|
||||
fileList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 上传文件
|
||||
try {
|
||||
ElMessage.info('正在上传文件到 OSS...');
|
||||
const uploadRes = await uploadFileToOss(uploadFile.raw);
|
||||
formData.fileName = uploadRes.data.fileName;
|
||||
formData.fileUrl = uploadRes.data.fileURL;
|
||||
fileList.value = [uploadFile];
|
||||
ElMessage.success('文件上传成功');
|
||||
} catch (error) {
|
||||
fileList.value = [];
|
||||
formData.fileName = '';
|
||||
formData.fileUrl = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleExceed: UploadProps['onExceed'] = () => ElMessage.warning('只能上传一个文件');
|
||||
|
||||
const fetchSkillList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = { pageNum: pagination.pageNum, pageSize: pagination.pageSize, keyword: searchParams.keyword || undefined };
|
||||
const res = await getUserSkillList(params);
|
||||
skillList.value = res.data?.list || [];
|
||||
pagination.total = res.data?.total || 0;
|
||||
} catch (error) {
|
||||
skillList.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1;
|
||||
fetchSkillList();
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
pagination.pageNum = page;
|
||||
fetchSkillList();
|
||||
};
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size;
|
||||
pagination.pageNum = 1;
|
||||
fetchSkillList();
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
isEdit.value = false;
|
||||
currentEditId.value = null;
|
||||
dialogTitle.value = '创建技能';
|
||||
Object.assign(formData, { name: '', description: '', fileName: '', fileUrl: '' });
|
||||
fileList.value = [];
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEdit = async (row: SkillItem) => {
|
||||
isEdit.value = true;
|
||||
currentEditId.value = row.id;
|
||||
dialogTitle.value = '编辑技能';
|
||||
|
||||
try {
|
||||
// 获取详情
|
||||
const res = await getUserSkillDetail(row.id);
|
||||
const detail = res.data || row;
|
||||
|
||||
Object.assign(formData, {
|
||||
name: detail.name,
|
||||
description: detail.description,
|
||||
fileName: detail.fileName,
|
||||
fileUrl: detail.fileUrl,
|
||||
});
|
||||
|
||||
// 如果有文件，设置文件列表用于显示
|
||||
if (detail.fileName) {
|
||||
fileList.value = [
|
||||
{
|
||||
name: detail.fileName,
|
||||
url: detail.fileUrl,
|
||||
} as UploadUserFile,
|
||||
];
|
||||
} else {
|
||||
fileList.value = [];
|
||||
}
|
||||
|
||||
dialogVisible.value = true;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取技能详情失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (!formData.fileName || !formData.fileUrl) {
|
||||
ElMessage.warning('请先上传文件');
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
try {
|
||||
const submitData = {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
fileName: formData.fileName,
|
||||
fileUrl: formData.fileUrl,
|
||||
};
|
||||
|
||||
if (isEdit.value && currentEditId.value) {
|
||||
// 编辑
|
||||
await updateUserSkill({ ...submitData, id: currentEditId.value });
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
// 创建
|
||||
await createUserSkill(submitData);
|
||||
ElMessage.success('创建成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
fetchSkillList();
|
||||
} catch {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (row: SkillItem) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除技能"${row.name}"吗？此操作不可恢复。`, '删除确认', {
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
await deleteUserSkill(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
fetchSkillList();
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
// 接口错误由 request 全局提示后端 message
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => fetchSkillList());
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.skill-page {
|
||||
padding: 20px;
|
||||
background: #f6f8fb;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-upload-dragger) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: #f0fdf4;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #86efac;
|
||||
}
|
||||
|
||||
.file-preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.file-preview-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.file-preview-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.file-info-label {
|
||||
color: #15803d;
|
||||
margin-right: 8px;
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-info-value {
|
||||
color: #166534;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user