页面完善

src/api/assistant.ts

@@ -0,0 +1,29 @@
+import { http } from "@/utils/http";
+import { BaseResponse } from "@/api/base";
+
+/** AI助手信息 */
+export type AiAssistantResult = {
+  /** Id */
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+  /** 名称 */
+  name: string;
+  /** 人设 */
+  personality: string;
+  /** 模型 */
+  model: string;
+  /** 是否启用 */
+  enable: boolean;
+  /** 是否编辑 */
+  edit: boolean;
+};
+
+/** 查询所有AI助手 */
+export const getAllAiAssistant = (data: any) => {
+  return http.request<BaseResponse<Array<AiAssistantResult>>>(
+    "get",
+    "/admin/v1/ai-assistant",
+    { data }
+  );
+};

src/style/reset.scss

@@ -256,3 +256,20 @@ div:focus {
     content: " ";
   }
 }
+
+/* 调整滚动条 */
+/* 选择滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 调整滚动条的宽度 */
+}
+
+/* 设置滚动条的轨道 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+/* 设置滚动条的滑块 */
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 4px; /* 可以根据需要调整滑块的圆角 */
+}

src/views/infra/assistant/index.vue

@@ -1,12 +1,126 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { AiAssistantResult, getAllAiAssistant } from "@/api/assistant";
+
 defineOptions({
   name: "Assistant"
 });
 
+// 列表数据
+const assistantList = ref([] as AiAssistantResult[]);
+
+// 获取机器人列表
+const getAllAiAssistantHandle = async () => {
+  const assistantData = await getAllAiAssistant({});
+  assistantList.value = assistantData.data;
+};
+const changeAssistantEditStatusHandle = index => {
+  console.log("正在修改： ", index);
+  // 修改数据中的某个项的值
+  console.log(assistantList.value[index]);
+};
+
+onMounted(() => {
+  // 获取机器人信息
+  getAllAiAssistantHandle();
+});
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-[640px]">
-    <h1>AI助手</h1>
+  <div class="flex h-[640px]">
+    <div class="card-container">
+      <el-card
+        class="assistant-card"
+        shadow="hover"
+        v-for="item in assistantList"
+        :key="item.id"
+      >
+        <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>
+          </div>
+        </template>
+
+        <div>
+          <el-descriptions :column="1" size="default">
+            <el-descriptions-item label="模型">
+              <el-input v-model="item.model" :readonly="!item.edit" />
+            </el-descriptions-item>
+            <el-descriptions-item label="人设" class-name="personality">
+              <el-input
+                v-model="item.personality"
+                :autosize="{ minRows: 2, maxRows: 4 }"
+                resize="none"
+                type="textarea"
+                placeholder="请输入人设"
+                :readonly="!item.edit"
+              />
+            </el-descriptions-item>
+            <el-descriptions-item label="启用">
+              <el-switch
+                v-model="item.enable"
+                active-text="是"
+                inactive-text="否"
+                :disabled="!item.edit"
+              />
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: flex-start; /* 改为 flex-start 以优先横向排列 */
+}
+
+.assistant-card {
+  width: 300px;
+  height: 330px;
+}
+
+.assistant-header {
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  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>