完成AI助手相关功能
This commit is contained in:
parent
f60b004d34
commit
79e075a5e7
@ -17,6 +17,8 @@ export type AiAssistantResult = {
|
||||
enable: boolean;
|
||||
/** 是否编辑 */
|
||||
edit: boolean;
|
||||
/** 是否保存中 */
|
||||
saveLoading: boolean;
|
||||
};
|
||||
|
||||
/** 查询所有AI助手 */
|
||||
@ -27,3 +29,20 @@ export const getAllAiAssistant = (data: any) => {
|
||||
{ data }
|
||||
);
|
||||
};
|
||||
|
||||
/* 保存 AI 助手信息 */
|
||||
export const saveAiAssistant = (data: any) => {
|
||||
return http.request<BaseResponse<AiAssistantResult>>(
|
||||
"post",
|
||||
"/admin/v1/ai-assistant",
|
||||
{ data }
|
||||
);
|
||||
};
|
||||
|
||||
/* 删除 AI 助手信息 */
|
||||
export const deleteAiAssistant = (id: string) => {
|
||||
return http.request<BaseResponse<AiAssistantResult>>(
|
||||
"delete",
|
||||
`/admin/v1/ai-assistant/${id}`
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,23 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { AiAssistantResult, getAllAiAssistant } from "@/api/assistant";
|
||||
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 () => {
|
||||
const assistantData = await getAllAiAssistant({});
|
||||
assistantList.value = assistantData.data;
|
||||
// 打开加载动画
|
||||
dataLoading.value = true;
|
||||
// 调用接口
|
||||
getAllAiAssistant({})
|
||||
.then(assistantData => {
|
||||
// 赋值
|
||||
assistantList.value = assistantData.data;
|
||||
})
|
||||
.catch(() => {
|
||||
message("获取机器人列表失败", { type: "error" });
|
||||
})
|
||||
.finally(() => {
|
||||
// 关闭加载动画
|
||||
dataLoading.value = false;
|
||||
});
|
||||
};
|
||||
const changeAssistantEditStatusHandle = index => {
|
||||
console.log("正在修改： ", index);
|
||||
// 修改数据中的某个项的值
|
||||
console.log(assistantList.value[index]);
|
||||
|
||||
// 保存机器人信息
|
||||
const saveAssistantHandle = async (item: AiAssistantResult) => {
|
||||
// 设置为加载中
|
||||
item.saveLoading = true;
|
||||
// 调用接口，保存数据
|
||||
saveAiAssistant(item)
|
||||
.then(() => {
|
||||
message("保存成功", { type: "success" });
|
||||
// 保存成功，重新加载数据
|
||||
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(() => {
|
||||
@ -27,48 +105,84 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-[640px]">
|
||||
<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">
|
||||
<el-input v-model="item.name" :disabled="!item.edit" />
|
||||
<el-button
|
||||
link
|
||||
:type="item.edit ? 'danger' : 'warning'"
|
||||
@click="item.edit = !item.edit"
|
||||
>
|
||||
{{ item.edit ? "取消" : "编辑" }}
|
||||
</el-button>
|
||||
<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-button v-if="!item.edit" link type="danger" @click="deleteAssistantHandle(item.id)">删除</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
link
|
||||
type="success"
|
||||
@click="saveAssistantHandle(item)"
|
||||
>保存</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<el-descriptions :column="1" size="default">
|
||||
<el-descriptions :column="1" size="default" border>
|
||||
<el-descriptions-item label="模型">
|
||||
<el-input v-model="item.model" :readonly="!item.edit" />
|
||||
<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="人设" class-name="personality">
|
||||
<el-descriptions-item label="人设">
|
||||
<el-input
|
||||
v-model="item.personality"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
placeholder="请输入人设"
|
||||
:readonly="!item.edit"
|
||||
: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="否"
|
||||
:disabled="!item.edit"
|
||||
/>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@ -76,10 +190,56 @@ onMounted(() => {
|
||||
</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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-container {
|
||||
margin: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
@ -87,7 +247,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.assistant-card {
|
||||
width: 300px;
|
||||
width: 32%;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
@ -98,29 +258,4 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.personality {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-textarea__inner::-webkit-scrollbar {
|
||||
width: 8px; /*滚动条宽度*/
|
||||
height: 8px; /*滚动条高度*/
|
||||
}
|
||||
.el-textarea__inner::-webkit-scrollbar-thumb {
|
||||
background-color: red; /*滚动条默认显示的颜色*/
|
||||
}
|
||||
|
||||
.el-textarea__inner::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: white; /*滚动条背景色显示的颜色*/
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user