完成AI助手相关功能

src/api/assistant.ts

@@ -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}`
+  );
+};

src/views/infra/assistant/index.vue

@@ -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({});
+  // 打开加载动画
+  dataLoading.value = true;
+  // 调用接口
+  getAllAiAssistant({})
+    .then(assistantData => {
+      // 赋值
       assistantList.value = assistantData.data;
+    })
+    .catch(() => {
+      message("获取机器人列表失败", { type: "error" });
+    })
+    .finally(() => {
+      // 关闭加载动画
+      dataLoading.value = false;
+    });
 };
-const changeAssistantEditStatusHandle = index => {
+
-  console.log("正在修改： ", index);
+// 保存机器人信息
-  // 修改数据中的某个项的值
+const saveAssistantHandle = async (item: AiAssistantResult) => {
-  console.log(assistantList.value[index]);
+  // 设置为加载中
+  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" />
+            <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 ? 'danger' : 'warning'"
+                :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>