新增用户技能管理功能
- 在技能 API 中新增 `getUserSkillDetail` 和 `updateUserSkill` 函数,支持获取用户技能详情和更新用户技能。 - 更新技能列表页面,优化搜索栏和技能表格展示,提升用户体验。 - 修改文件上传提示,明确支持的文件格式和要求。
This commit is contained in:
@@ -126,3 +126,27 @@ export function deleteUserSkill(id: number, config?: any) {
|
|||||||
...config,
|
...config,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取 Skill 用户技能详情
|
||||||
|
*/
|
||||||
|
export function getUserSkillDetail(id: number, config?: any) {
|
||||||
|
return request<SkillItem>({
|
||||||
|
url: '/ai-agent/skill/user/get',
|
||||||
|
method: 'get',
|
||||||
|
params: { id },
|
||||||
|
...config,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新 Skill 用户技能
|
||||||
|
*/
|
||||||
|
export function updateUserSkill(data: CreateSkillParams & { id: number }, config?: any) {
|
||||||
|
return request({
|
||||||
|
url: '/ai-agent/skill/user/update',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
...config,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 新建模型弹窗 -->
|
<!-- 新建模型弹窗 -->
|
||||||
<EditModule ref="editModuleRef" @refresh="handleRefresh" />
|
<EditModule ref="editModuleRef" :model-types="modelTypes" :is-super-admin="isSuperAdmin" @refresh="handleRefresh" />
|
||||||
|
|
||||||
<!-- 内置模型 API Key 输入弹窗 -->
|
<!-- 内置模型 API Key 输入弹窗 -->
|
||||||
<el-dialog v-model="apiKeyDialogVisible" title="配置内置模型" width="500px" :close-on-click-modal="false" append-to-body>
|
<el-dialog v-model="apiKeyDialogVisible" title="配置内置模型" width="500px" :close-on-click-modal="false" append-to-body>
|
||||||
@@ -92,7 +92,7 @@
|
|||||||
import { ref, reactive, watch, onMounted } from 'vue';
|
import { ref, reactive, watch, onMounted } from 'vue';
|
||||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||||
import { Search, CircleCheck } from '@element-plus/icons-vue';
|
import { Search, CircleCheck } from '@element-plus/icons-vue';
|
||||||
import { getModelModuleList, addModelModule } from '/@/api/digitalHuman/modelConfig/modelModule';
|
import { getModelModuleList, addModelModule, getModelTypeList, normalizeModelTypeOptions } from '/@/api/digitalHuman/modelConfig/modelModule';
|
||||||
import { checkIsSuperAdmin } from '/@/api/system/user/index';
|
import { checkIsSuperAdmin } from '/@/api/system/user/index';
|
||||||
import { getApiErrorMessage } from '/@/utils/request';
|
import { getApiErrorMessage } from '/@/utils/request';
|
||||||
import EditModule from '/@/views/digitalHuman/modelConfig/modelModule/component/editModule.vue';
|
import EditModule from '/@/views/digitalHuman/modelConfig/modelModule/component/editModule.vue';
|
||||||
@@ -150,7 +150,8 @@ const modelList = ref<ModelItem[]>([]);
|
|||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const selectedModel = ref<ModelItem | null>(null);
|
const selectedModel = ref<ModelItem | null>(null);
|
||||||
const editModuleRef = ref();
|
const editModuleRef = ref();
|
||||||
const isSuperAdmin = ref(false); // 是否为管理员
|
const isSuperAdmin = ref(false); // 鏄惁涓虹鐞嗗憳
|
||||||
|
const modelTypes = ref<Array<{ id: number | string; label: string }>>([]); // 妯″瀷绫诲瀷鍒楄〃
|
||||||
|
|
||||||
// 内置模型 API Key 配置
|
// 内置模型 API Key 配置
|
||||||
const apiKeyDialogVisible = ref(false);
|
const apiKeyDialogVisible = ref(false);
|
||||||
@@ -275,6 +276,7 @@ const handleCreatePrivateModel = async () => {
|
|||||||
form: systemModel.form || {},
|
form: systemModel.form || {},
|
||||||
requestMapping: systemModel.requestMapping || {},
|
requestMapping: systemModel.requestMapping || {},
|
||||||
responseMapping: systemModel.responseMapping || {},
|
responseMapping: systemModel.responseMapping || {},
|
||||||
|
responseBody: systemModel.responseBody || {}, // 杩斿洖涓讳綋瀛楁
|
||||||
maxConcurrency: systemModel.maxConcurrency || 10,
|
maxConcurrency: systemModel.maxConcurrency || 10,
|
||||||
queueLimit: systemModel.queueLimit || 100,
|
queueLimit: systemModel.queueLimit || 100,
|
||||||
timeoutSeconds: systemModel.timeoutSeconds || 30,
|
timeoutSeconds: systemModel.timeoutSeconds || 30,
|
||||||
@@ -283,6 +285,7 @@ const handleCreatePrivateModel = async () => {
|
|||||||
retryQueueMaxSeconds: systemModel.retryQueueMaxSeconds || 60,
|
retryQueueMaxSeconds: systemModel.retryQueueMaxSeconds || 60,
|
||||||
autoCleanSeconds: systemModel.autoCleanSeconds || 300,
|
autoCleanSeconds: systemModel.autoCleanSeconds || 300,
|
||||||
remark: systemModel.remark || '',
|
remark: systemModel.remark || '',
|
||||||
|
tokenMapping: systemModel.tokenMapping || '', // Token鏄犲皠瀛楁
|
||||||
};
|
};
|
||||||
|
|
||||||
const res: any = await addModelModule(createParams);
|
const res: any = await addModelModule(createParams);
|
||||||
@@ -334,8 +337,20 @@ const handleClose = () => {
|
|||||||
systemModelToClone.value = null;
|
systemModelToClone.value = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 鍔犺浇妯″瀷绫诲瀷鍒楄〃
|
||||||
|
const loadModelTypes = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await getModelTypeList();
|
||||||
|
if (res.code === 0) {
|
||||||
|
modelTypes.value = normalizeModelTypeOptions(res);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// 鎺ュ彛閿欒鐢?request 鍏ㄥ眬鎻愮ず鍚庣 message
|
||||||
|
}
|
||||||
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkAdminStatus();
|
checkAdminStatus();
|
||||||
|
loadModelTypes();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -14,48 +14,45 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 搜索栏 -->
|
<!-- 搜索栏 -->
|
||||||
|
<el-card shadow="hover" class="search-card">
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<el-input v-model="searchParams.keyword" placeholder="搜索技能名称或描述" clearable class="search-input" @clear="handleSearch">
|
<el-input v-model="searchParams.keyword" placeholder="搜索技能名称或描述" clearable class="search-input" @clear="handleSearch">
|
||||||
<template #prefix
|
<template #prefix>
|
||||||
><el-icon><Search /></el-icon
|
<el-icon><Search /></el-icon>
|
||||||
></template>
|
|
||||||
</el-input>
|
|
||||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 技能列表 -->
|
|
||||||
<div class="skill-list" v-loading="loading">
|
|
||||||
<el-empty v-if="!loading && skillList.length === 0" description="暂无技能数据" :image-size="120" />
|
|
||||||
<div v-else class="skill-grid">
|
|
||||||
<div v-for="skill in skillList" :key="skill.id" class="skill-card">
|
|
||||||
<div class="skill-card-header">
|
|
||||||
<div class="skill-category">{{ skill.category }}</div>
|
|
||||||
<el-dropdown trigger="click" @command="(cmd: string) => handleCommand(cmd, skill)">
|
|
||||||
<el-icon class="more-icon"><MoreFilled /></el-icon>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="delete">
|
|
||||||
<el-icon><Delete /></el-icon>
|
|
||||||
删除
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-input>
|
||||||
</div>
|
<el-button type="primary" @click="handleSearch">
|
||||||
<div class="skill-card-body">
|
<el-icon><Search /></el-icon>
|
||||||
<h3 class="skill-name">{{ skill.name }}</h3>
|
搜索
|
||||||
<p class="skill-desc">{{ skill.description || '暂无描述' }}</p>
|
</el-button>
|
||||||
<div class="skill-file" v-if="skill.fileName">
|
|
||||||
<el-icon><Document /></el-icon>
|
|
||||||
<span>{{ skill.fileName }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="skill-card-footer">
|
|
||||||
<span class="skill-time">{{ formatTime(skill.createdAt) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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">
|
<div v-if="pagination.total > 0" class="pagination-wrap">
|
||||||
@@ -69,8 +66,9 @@
|
|||||||
@current-change="handlePageChange"
|
@current-change="handlePageChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
<!-- 创建对话框 -->
|
<!-- 创建/编辑对话框 -->
|
||||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" :close-on-click-modal="false">
|
<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 :model="formData" :rules="formRules" ref="formRef" label-position="top">
|
||||||
<el-form-item label="技能名称" prop="name">
|
<el-form-item label="技能名称" prop="name">
|
||||||
@@ -79,9 +77,6 @@
|
|||||||
<el-form-item label="技能描述" prop="description">
|
<el-form-item label="技能描述" prop="description">
|
||||||
<el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入技能描述" maxlength="200" show-word-limit />
|
<el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入技能描述" maxlength="200" show-word-limit />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="分类" prop="category">
|
|
||||||
<el-input v-model="formData.category" placeholder="请输入分类(如:文本生成、图像生成等)" maxlength="50" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="上传文件" prop="file">
|
<el-form-item label="上传文件" prop="file">
|
||||||
<el-upload
|
<el-upload
|
||||||
ref="uploadRef"
|
ref="uploadRef"
|
||||||
@@ -92,11 +87,12 @@
|
|||||||
:on-change="handleFileChange"
|
:on-change="handleFileChange"
|
||||||
:on-exceed="handleExceed"
|
:on-exceed="handleExceed"
|
||||||
:file-list="fileList"
|
:file-list="fileList"
|
||||||
|
accept=".zip"
|
||||||
>
|
>
|
||||||
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
||||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
<div class="el-upload__text">将 zip 文件拖到此处,或<em>点击上传</em></div>
|
||||||
<template #tip>
|
<template #tip>
|
||||||
<div class="el-upload__tip">支持各种文件格式,文件大小不超过 100MB</div>
|
<div class="el-upload__tip">只支持 .zip 格式,且压缩包内必须包含 .md 文件,文件大小不超过 100MB</div>
|
||||||
</template>
|
</template>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -105,7 +101,7 @@
|
|||||||
<div v-if="formData.fileName" class="file-preview">
|
<div v-if="formData.fileName" class="file-preview">
|
||||||
<div class="file-preview-header">
|
<div class="file-preview-header">
|
||||||
<span class="file-preview-title">已上传文件</span>
|
<span class="file-preview-title">已上传文件</span>
|
||||||
<el-tag type="success" size="small">上传成功</el-tag>
|
<el-tag type="success" size="small">{{ isEdit ? '当前文件' : '上传成功' }}</el-tag>
|
||||||
</div>
|
</div>
|
||||||
<div class="file-preview-info">
|
<div class="file-preview-info">
|
||||||
<div class="file-info-item">
|
<div class="file-info-item">
|
||||||
@@ -130,8 +126,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadInstance, type UploadProps, type UploadUserFile } from 'element-plus';
|
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadInstance, type UploadProps, type UploadUserFile } from 'element-plus';
|
||||||
import { Plus, Search, MoreFilled, Delete, Document, UploadFilled } from '@element-plus/icons-vue';
|
import { Plus, Search, UploadFilled } from '@element-plus/icons-vue';
|
||||||
import { getUserSkillList, createUserSkill, deleteUserSkill, type SkillItem, type CreateSkillParams } from '/@/api/digitalHuman/skill';
|
import {
|
||||||
|
getUserSkillList,
|
||||||
|
createUserSkill,
|
||||||
|
updateUserSkill,
|
||||||
|
deleteUserSkill,
|
||||||
|
getUserSkillDetail,
|
||||||
|
type SkillItem,
|
||||||
|
type CreateSkillParams,
|
||||||
|
} from '/@/api/digitalHuman/skill';
|
||||||
import { uploadFile as uploadFileToOss } from '/@/api/common/upload';
|
import { uploadFile as uploadFileToOss } from '/@/api/common/upload';
|
||||||
|
|
||||||
const searchParams = reactive({ keyword: '' });
|
const searchParams = reactive({ keyword: '' });
|
||||||
@@ -140,26 +144,72 @@ const skillList = ref<SkillItem[]>([]);
|
|||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const dialogVisible = ref(false);
|
const dialogVisible = ref(false);
|
||||||
const dialogTitle = ref('创建技能');
|
const dialogTitle = ref('创建技能');
|
||||||
|
const isEdit = ref(false);
|
||||||
|
const currentEditId = ref<number | null>(null);
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
const uploadRef = ref<UploadInstance>();
|
const uploadRef = ref<UploadInstance>();
|
||||||
const submitting = ref(false);
|
const submitting = ref(false);
|
||||||
const fileList = ref<UploadUserFile[]>([]);
|
const fileList = ref<UploadUserFile[]>([]);
|
||||||
const formData = reactive<CreateSkillParams>({ name: '', description: '', category: '', fileName: '', fileUrl: '' });
|
const formData = reactive<CreateSkillParams>({ name: '', description: '', fileName: '', fileUrl: '' });
|
||||||
const formRules: FormRules = {
|
const formRules: FormRules = {
|
||||||
name: [{ required: true, message: '请输入技能名称', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入技能名称', trigger: 'blur' }],
|
||||||
category: [{ required: true, message: '请输入分类', trigger: 'blur' }],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatTime = (time: string) => (time ? time.replace('T', ' ').split('.')[0] : '');
|
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) => {
|
const handleFileChange: UploadProps['onChange'] = async (uploadFile) => {
|
||||||
if (!uploadFile.raw) return;
|
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;
|
const maxSize = 100 * 1024 * 1024;
|
||||||
if (uploadFile.raw.size > maxSize) {
|
if (uploadFile.raw.size > maxSize) {
|
||||||
ElMessage.warning('文件大小不能超过 100MB');
|
ElMessage.warning('文件大小不能超过 100MB');
|
||||||
fileList.value = [];
|
fileList.value = [];
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 3. 验证 zip 包内必须包含 .md 文件
|
||||||
|
ElMessage.info('正在验证文件...');
|
||||||
|
const hasMdFile = await validateZipContainsMd(uploadFile.raw);
|
||||||
|
if (!hasMdFile) {
|
||||||
|
ElMessage.warning('zip 压缩包内必须包含 .md 文件');
|
||||||
|
fileList.value = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 上传文件
|
||||||
try {
|
try {
|
||||||
ElMessage.info('正在上传文件到 OSS...');
|
ElMessage.info('正在上传文件到 OSS...');
|
||||||
const uploadRes = await uploadFileToOss(uploadFile.raw);
|
const uploadRes = await uploadFileToOss(uploadFile.raw);
|
||||||
@@ -195,10 +245,12 @@ const handleSearch = () => {
|
|||||||
pagination.pageNum = 1;
|
pagination.pageNum = 1;
|
||||||
fetchSkillList();
|
fetchSkillList();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
const handlePageChange = (page: number) => {
|
||||||
pagination.pageNum = page;
|
pagination.pageNum = page;
|
||||||
fetchSkillList();
|
fetchSkillList();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSizeChange = (size: number) => {
|
const handleSizeChange = (size: number) => {
|
||||||
pagination.pageSize = size;
|
pagination.pageSize = size;
|
||||||
pagination.pageNum = 1;
|
pagination.pageNum = 1;
|
||||||
@@ -206,12 +258,49 @@ const handleSizeChange = (size: number) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleCreate = () => {
|
const handleCreate = () => {
|
||||||
|
isEdit.value = false;
|
||||||
|
currentEditId.value = null;
|
||||||
dialogTitle.value = '创建技能';
|
dialogTitle.value = '创建技能';
|
||||||
Object.assign(formData, { name: '', description: '', category: '', fileName: '', fileUrl: '' });
|
Object.assign(formData, { name: '', description: '', fileName: '', fileUrl: '' });
|
||||||
fileList.value = [];
|
fileList.value = [];
|
||||||
dialogVisible.value = true;
|
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 () => {
|
const handleSubmit = async () => {
|
||||||
if (!formRef.value) return;
|
if (!formRef.value) return;
|
||||||
await formRef.value.validate(async (valid) => {
|
await formRef.value.validate(async (valid) => {
|
||||||
@@ -222,14 +311,23 @@ const handleSubmit = async () => {
|
|||||||
}
|
}
|
||||||
submitting.value = true;
|
submitting.value = true;
|
||||||
try {
|
try {
|
||||||
await createUserSkill({
|
const submitData = {
|
||||||
name: formData.name,
|
name: formData.name,
|
||||||
description: formData.description,
|
description: formData.description,
|
||||||
category: formData.category,
|
|
||||||
fileName: formData.fileName,
|
fileName: formData.fileName,
|
||||||
fileUrl: formData.fileUrl,
|
fileUrl: formData.fileUrl,
|
||||||
});
|
};
|
||||||
|
|
||||||
|
if (isEdit.value && currentEditId.value) {
|
||||||
|
// 编辑
|
||||||
|
await updateUserSkill({ ...submitData, id: currentEditId.value });
|
||||||
|
ElMessage.success('更新成功');
|
||||||
|
} else {
|
||||||
|
// 创建
|
||||||
|
await createUserSkill(submitData);
|
||||||
ElMessage.success('创建成功');
|
ElMessage.success('创建成功');
|
||||||
|
}
|
||||||
|
|
||||||
dialogVisible.value = false;
|
dialogVisible.value = false;
|
||||||
fetchSkillList();
|
fetchSkillList();
|
||||||
} catch {
|
} catch {
|
||||||
@@ -240,15 +338,14 @@ const handleSubmit = async () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCommand = async (command: string, skill: SkillItem) => {
|
const handleDelete = async (row: SkillItem) => {
|
||||||
if (command === 'delete') {
|
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm(`确定要删除技能"${skill.name}"吗?此操作不可恢复。`, '删除确认', {
|
await ElMessageBox.confirm(`确定要删除技能"${row.name}"吗?此操作不可恢复。`, '删除确认', {
|
||||||
confirmButtonText: '确定删除',
|
confirmButtonText: '确定删除',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
});
|
});
|
||||||
await deleteUserSkill(skill.id);
|
await deleteUserSkill(row.id);
|
||||||
ElMessage.success('删除成功');
|
ElMessage.success('删除成功');
|
||||||
fetchSkillList();
|
fetchSkillList();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -256,7 +353,6 @@ const handleCommand = async (command: string, skill: SkillItem) => {
|
|||||||
// 接口错误由 request 全局提示后端 message
|
// 接口错误由 request 全局提示后端 message
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => fetchSkillList());
|
onMounted(() => fetchSkillList());
|
||||||
@@ -268,152 +364,70 @@ onMounted(() => fetchSkillList());
|
|||||||
background: #f6f8fb;
|
background: #f6f8fb;
|
||||||
min-height: calc(100vh - 100px);
|
min-height: calc(100vh - 100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-left {
|
.header-left {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #1f2937;
|
color: #1f2937;
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-desc {
|
.page-desc {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right {
|
.header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 20px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
.skill-list {
|
|
||||||
min-height: 400px;
|
.table-card {
|
||||||
}
|
:deep(.el-card__body) {
|
||||||
.skill-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.skill-card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
.skill-card:hover {
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.skill-card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.skill-category {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 12px;
|
|
||||||
background: #eff6ff;
|
|
||||||
color: #3b82f6;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.more-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #94a3b8;
|
|
||||||
font-size: 20px;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.more-icon:hover {
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
.skill-card-body {
|
|
||||||
flex: 1;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.skill-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f2937;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.skill-desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #64748b;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin: 0 0 12px 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
.skill-file {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #475569;
|
|
||||||
}
|
|
||||||
.skill-file .el-icon {
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
.skill-card-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid #e5e7eb;
|
|
||||||
}
|
|
||||||
.skill-time {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-wrap {
|
.pagination-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
margin-top: 32px;
|
margin-top: 20px;
|
||||||
padding: 20px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-area {
|
.upload-area {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
.upload-area :deep(.el-upload-dragger) {
|
:deep(.el-upload-dragger) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.file-preview {
|
.file-preview {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
@@ -421,48 +435,42 @@ onMounted(() => fetchSkillList());
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #86efac;
|
border: 1px solid #86efac;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-preview-header {
|
.file-preview-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-preview-title {
|
.file-preview-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #166534;
|
color: #166534;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-preview-info {
|
.file-preview-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-info-item {
|
.file-info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-info-label {
|
.file-info-label {
|
||||||
color: #15803d;
|
color: #15803d;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-info-value {
|
.file-info-value {
|
||||||
color: #166534;
|
color: #166534;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
|
||||||
.skill-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.search-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.search-input {
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user