290 lines
7.8 KiB
Vue
290 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import {
|
|
AiAssistantResult,
|
|
deleteAiAssistant,
|
|
getAllAiAssistant,
|
|
saveAiAssistant
|
|
} from "@/api/assistant";
|
|
import { message } from "@/utils/message";
|
|
|
|
defineOptions({
|
|
name: "Assistant"
|
|
});
|
|
|
|
// 页面是否加载中
|
|
const dataLoading = ref(false);
|
|
// 是否在新增
|
|
const showCreateDialog = ref(false);
|
|
// 定义可使用的 AI 模型
|
|
const modelList = ref([
|
|
{ name: "ChatGPT 3.5", value: "gpt-3.5-turbo-0613" },
|
|
{ name: "ChatGPT 4", value: "gpt-4-0613" },
|
|
{ name: "讯飞星火 V3", value: "SparkDesk3" },
|
|
{ name: "讯飞星火随机", value: "SparkDesk" },
|
|
{ name: "月之暗面 8k", value: "moonshot-v1-8k" },
|
|
{ name: "月之暗面 32k", value: "moonshot-v1-32k" },
|
|
{ name: "月之暗面 128k", value: "moonshot-v1-128k" }
|
|
]);
|
|
|
|
// 新增 AI 助手参数
|
|
const createAssistantParam = ref({
|
|
name: "",
|
|
model: "gpt-3.5-turbo-0613",
|
|
personality: "",
|
|
enable: true
|
|
});
|
|
|
|
// 列表数据
|
|
const assistantList = ref([] as AiAssistantResult[]);
|
|
|
|
// 获取机器人列表
|
|
const getAllAiAssistantHandle = async () => {
|
|
// 打开加载动画
|
|
dataLoading.value = true;
|
|
// 调用接口
|
|
getAllAiAssistant({})
|
|
.then(assistantData => {
|
|
// 赋值
|
|
assistantList.value = assistantData.data;
|
|
})
|
|
.catch(() => {
|
|
message("获取机器人列表失败", { type: "error" });
|
|
})
|
|
.finally(() => {
|
|
// 关闭加载动画
|
|
dataLoading.value = false;
|
|
});
|
|
};
|
|
|
|
// 保存机器人信息
|
|
const saveAssistantHandle = async (item: any, isCreate?: boolean) => {
|
|
// 设置为加载中
|
|
item.saveLoading = true;
|
|
// 调用接口，保存数据
|
|
saveAiAssistant(item)
|
|
.then(() => {
|
|
message("保存成功", { type: "success" });
|
|
if (isCreate) {
|
|
showCreateDialog.value = false;
|
|
}
|
|
// 保存成功，重新加载数据
|
|
getAllAiAssistantHandle();
|
|
})
|
|
.catch(() => {
|
|
message("保存失败", { type: "error" });
|
|
})
|
|
.finally(() => {
|
|
// 关闭加载动画
|
|
item.saveLoading = false;
|
|
});
|
|
};
|
|
|
|
const deleteAssistantHandle = (id: string) => {
|
|
deleteAiAssistant(id)
|
|
.then(() => {
|
|
message("删除成功", { type: "success" });
|
|
getAllAiAssistantHandle();
|
|
})
|
|
.catch(e => {
|
|
message("删除失败" + e, { type: "error" });
|
|
});
|
|
};
|
|
|
|
// 重置新增参数
|
|
const clearCreateParam = (done: () => void) => {
|
|
createAssistantParam.value = {
|
|
name: "",
|
|
model: "gpt-3.5-turbo-0613",
|
|
personality: "",
|
|
enable: true
|
|
};
|
|
done();
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 获取机器人信息
|
|
getAllAiAssistantHandle();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="margin: 20px">
|
|
<el-button type="primary" @click="showCreateDialog = true"
|
|
>新增 AI 助手</el-button
|
|
>
|
|
</div>
|
|
<div class="flex h-[640px]" v-loading="dataLoading">
|
|
<div class="card-container">
|
|
<el-card
|
|
class="assistant-card"
|
|
shadow="hover"
|
|
v-for="item in assistantList"
|
|
:key="item.id"
|
|
v-loading="item.saveLoading"
|
|
>
|
|
<template #header>
|
|
<div class="assistant-header">
|
|
<span v-if="!item.edit">
|
|
{{ item.name }}
|
|
</span>
|
|
<el-input v-else v-model="item.name" style="width: 80%" />
|
|
<el-button-group>
|
|
<el-button
|
|
link
|
|
:type="item.edit ? 'primary' : 'warning'"
|
|
@click="item.edit = !item.edit"
|
|
>
|
|
{{ item.edit ? "取消" : "编辑" }}
|
|
</el-button>
|
|
<el-popconfirm
|
|
v-if="!item.edit"
|
|
title="是否删除当前 AI 助手？"
|
|
confirm-button-text="是"
|
|
cancel-button-text="否"
|
|
@confirm="deleteAssistantHandle(item.id)"
|
|
>
|
|
<template #reference>
|
|
<el-button link type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
<el-button
|
|
v-else
|
|
link
|
|
type="success"
|
|
@click="saveAssistantHandle(item)"
|
|
>保存</el-button
|
|
>
|
|
</el-button-group>
|
|
</div>
|
|
</template>
|
|
|
|
<div>
|
|
<el-descriptions :column="1" size="default" border>
|
|
<el-descriptions-item label="模型">
|
|
<el-text v-if="!item.edit">{{ item.model }}</el-text>
|
|
<el-select
|
|
v-else
|
|
v-model="item.model"
|
|
placeholder="请选择模型"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="model in modelList"
|
|
:key="model.value"
|
|
:label="model.name"
|
|
:value="model.value"
|
|
/>
|
|
</el-select>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="人设">
|
|
<el-input
|
|
v-model="item.personality"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
resize="none"
|
|
type="textarea"
|
|
placeholder="请输入人设"
|
|
:disabled="!item.edit"
|
|
clahh="data-input"
|
|
/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="启用">
|
|
<el-tag v-if="!item.edit">{{
|
|
item.enable ? "已启用" : "已禁用"
|
|
}}</el-tag>
|
|
<el-switch
|
|
v-else
|
|
v-model="item.enable"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
/>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
v-model="showCreateDialog"
|
|
title="新增 AI 助手"
|
|
width="40%"
|
|
:close-on-click-modal="false"
|
|
:before-close="clearCreateParam"
|
|
>
|
|
<el-form :model="createAssistantParam" label-width="120px">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="createAssistantParam.name" />
|
|
</el-form-item>
|
|
<el-form-item label="模型">
|
|
<el-select
|
|
v-model="createAssistantParam.model"
|
|
placeholder="请选择模型"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="model in modelList"
|
|
:key="model.value"
|
|
:label="model.name"
|
|
:value="model.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="人设">
|
|
<el-input
|
|
v-model="createAssistantParam.personality"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
resize="none"
|
|
type="textarea"
|
|
placeholder="请输入人设"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="启用">
|
|
<el-switch
|
|
v-model="createAssistantParam.enable"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button
|
|
type="primary"
|
|
@click="saveAssistantHandle(createAssistantParam, true)"
|
|
>
|
|
保存
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-container {
|
|
margin: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: flex-start; /* 改为 flex-start 以优先横向排列 */
|
|
}
|
|
|
|
.assistant-card {
|
|
width: 32%;
|
|
min-width: 330px;
|
|
height: 330px;
|
|
}
|
|
|
|
.assistant-header {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|