From f62e8d4ceab2038d71d396e5863094a5b5543eae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 18 Feb 2025 11:32:36 +0800
Subject: [PATCH 01/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

会话模型、向量模型、文生图模型、向量数据库
---
 .../ai/model/chatModel/composables/columns.ts |  85 +++++
 .../ai/model/chatModel/composables/consts.ts  | 198 ++++++++++++
 .../model/chatModel/composables/provider.ts   |  37 +++
 src/views/ai/model/chatModel/edit.vue         |  11 +
 src/views/ai/model/chatModel/index.vue        | 298 +++++++-----------
 .../ai/model/embedStore/composables/index.ts  | 116 +++++++
 src/views/ai/model/embedStore/index.vue       |  26 ++
 .../ai/model/embedding/composables/index.ts   | 102 ++++++
 src/views/ai/model/embedding/index.vue        |  26 ++
 src/views/ai/model/image/composables/index.ts | 110 +++++++
 src/views/ai/model/image/index.vue            |  26 ++
 11 files changed, 856 insertions(+), 179 deletions(-)
 create mode 100644 src/views/ai/model/chatModel/composables/columns.ts
 create mode 100644 src/views/ai/model/chatModel/composables/consts.ts
 create mode 100644 src/views/ai/model/chatModel/composables/provider.ts
 create mode 100644 src/views/ai/model/chatModel/edit.vue
 create mode 100644 src/views/ai/model/embedStore/composables/index.ts
 create mode 100644 src/views/ai/model/embedStore/index.vue
 create mode 100644 src/views/ai/model/embedding/composables/index.ts
 create mode 100644 src/views/ai/model/embedding/index.vue
 create mode 100644 src/views/ai/model/image/composables/index.ts
 create mode 100644 src/views/ai/model/image/index.vue

diff --git a/src/views/ai/model/chatModel/composables/columns.ts b/src/views/ai/model/chatModel/composables/columns.ts
new file mode 100644
index 0000000..5a8f68f
--- /dev/null
+++ b/src/views/ai/model/chatModel/composables/columns.ts
@@ -0,0 +1,85 @@
+import {ProviderEnum} from './provider';
+
+export const baseColumns = [
+  {
+    label: '模型别名',
+    field: 'name',
+  },
+  {
+    label: '模型版本',
+    field: 'model',
+    width: '140',
+  },
+  {
+    label: '回复上限',
+    field: 'responseLimit',
+    width: '100',
+  },
+  {
+    label: '生成随机性',
+    field: 'temperature',
+    width: '100',
+  },
+  {
+    label: 'Top P',
+    field: 'topP',
+    width: '100',
+  },
+];
+
+export const openaiColumns = [
+  ...baseColumns,
+  {
+    label: 'Api Key',
+    field: 'apiKey',
+  },
+];
+
+export const ollamaColumns = [
+  ...baseColumns,
+  {
+    label: 'Base Url',
+    field: 'baseUrl',
+  },
+];
+
+export const qfanColumns = [
+  ...baseColumns,
+  {
+    label: 'Api Key',
+    field: 'apiKey',
+  },
+];
+
+export const qwenColumns = [
+  ...baseColumns,
+  {
+    label: 'Api Key',
+    field: 'apiKey',
+  },
+];
+export const zhipuColumns = [
+  ...baseColumns,
+  {
+    label: 'Api Key',
+    field: 'apiKey',
+  },
+];
+
+export function getColumns(provider: string) {
+  switch (provider) {
+    case ProviderEnum.OLLAMA: {
+      return ollamaColumns;
+    }
+    case ProviderEnum.Q_FAN: {
+      return qfanColumns;
+    }
+    case ProviderEnum.Q_WEN: {
+      return qwenColumns;
+    }
+    case ProviderEnum.ZHIPU: {
+      return zhipuColumns;
+    }
+  }
+  return openaiColumns;
+}
diff --git a/src/views/ai/model/chatModel/composables/consts.ts b/src/views/ai/model/chatModel/composables/consts.ts
new file mode 100644
index 0000000..0b003f5
--- /dev/null
+++ b/src/views/ai/model/chatModel/composables/consts.ts
@@ -0,0 +1,198 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ProviderEnum } from './provider';
+
+export const LLMProviders: any[] = [
+  {
+    model: ProviderEnum.OPENAI,
+    name: 'OpenAI',
+    models: ['gpt-3.5-turbo', 'gpt-4', 'gpt-4-32k', 'gpt-4-turbo', 'gpt-4o'],
+  },
+  {
+    model: ProviderEnum.Q_FAN,
+    name: '百度千帆',
+    models: [
+      'ERNIE-Bot',
+      'ERNIE-Bot 4.0',
+      'ERNIE-Bot-8K',
+      'ERNIE-Bot-turbo',
+      'ERNIE-Speed-128K',
+      'EB-turbo-AppBuilder',
+      'Yi-34B-Chat',
+      'BLOOMZ-7B',
+      'Qianfan-BLOOMZ-7B-compressed',
+      'Mixtral-8x7B-Instruct',
+      'Llama-2-7b-chat',
+      'Llama-2-13b-chat',
+      'Llama-2-70b-chat',
+      'Qianfan-Chinese-Llama-2-7B',
+      'ChatGLM2-6B-32K',
+      'AquilaChat-7B',
+    ],
+  },
+  {
+    model: ProviderEnum.Q_WEN,
+    name: '阿里百炼',
+    models: [
+      'qwen-turbo',
+      'qwen-plus',
+      'qwen-max',
+      'qwen-max-longcontext',
+      'qwen-7b-chat',
+      'qwen-14b-chat',
+      'qwen-72b-chat',
+    ],
+  },
+  {
+    model: ProviderEnum.ZHIPU,
+    name: '智谱清言',
+    models: [
+      'glm-4',
+      'glm-4v',
+      'glm-4-air',
+      'glm-4-airx',
+      'glm-4-flash',
+      'glm-3-turbo',
+      'chatglm_turbo',
+    ],
+  },
+  {
+    model: ProviderEnum.GITEEAI,
+    name: 'Gitee AI',
+    models: [
+      'Qwen2-72B-Instruct',
+      'Qwen2-7B-Instruct',
+      'Qwen2.5-72B-Instruct',
+      'glm-4-9b-chat',
+      'deepseek-coder-33B-instruct',
+      'codegeex4-all-9b',
+      'Yi-34B-Chat',
+      'code-raccoon-v1',
+      'Qwen2.5-Coder-32B-Instruct',
+    ],
+  },
+  {
+    model: ProviderEnum.DEEPSEEK,
+    name: 'DeepSeek',
+    models: ['deepseek-chat', 'deepseek-coder'],
+  },
+  {
+    model: ProviderEnum.DOUYIN,
+    name: '抖音豆包',
+    models: [],
+  },
+  {
+    model: ProviderEnum.SILICON,
+    name: '硅基流动',
+    models: [
+      'deepseek-ai/DeepSeek-V2-Chat',
+      'deepseek-ai/DeepSeek-Coder-V2-Instruct',
+      'deepseek-ai/DeepSeek-V2.5',
+      'Qwen/Qwen2.5-72B-Instruct-128K',
+      'Qwen/Qwen2.5-72B-Instruct',
+      'Qwen/Qwen2-VL-72B-Instruct',
+      'Qwen/Qwen2.5-32B-Instruct',
+      'Qwen/Qwen2.5-14B-Instruct',
+      'Qwen/Qwen2.5-7B-Instruct',
+      'Qwen/Qwen2.5-Math-72B-Instruct',
+      'Qwen/Qwen2.5-Coder-7B-Instruct',
+      'Qwen/Qwen2-72B-Instruct',
+      'Qwen/Qwen2-7B-Instruct',
+      'Qwen/Qwen2-1.5B-Instruct',
+      'Qwen/Qwen2-57B-A14B-Instruct',
+      'TeleAI/TeleChat2',
+      '01-ai/Yi-1.5-34B-Chat-16K',
+      '01-ai/Yi-1.5-9B-Chat-16K',
+      '01-ai/Yi-1.5-6B-Chat',
+      'THUDM/chatglm3-6b',
+      'THUDM/glm-4-9b-chat',
+      'Vendor-A/Qwen/Qwen2-72B-Instruct',
+      'Vendor-A/Qwen/Qwen2.5-72B-Instruct',
+      'internlm/internlm2_5-7b-chat',
+      'internlm/internlm2_5-20b-chat',
+      'OpenGVLab/InternVL2-Llama3-76B',
+      'OpenGVLab/InternVL2-26B',
+      'nvidia/Llama-3.1-Nemotron-70B-Instruct',
+      'meta-llama/Meta-Llama-3.1-405B-Instruct',
+      'meta-llama/Meta-Llama-3.1-70B-Instruct',
+      'meta-llama/Meta-Llama-3.1-8B-Instruct',
+      'meta-llama/Meta-Llama-3-8B-Instruct',
+      'meta-llama/Meta-Llama-3-70B-Instruct',
+      'google/gemma-2-27b-it',
+      'google/gemma-2-9b-it',
+      'Pro/Qwen/Qwen2.5-7B-Instruct',
+      'Pro/Qwen/Qwen2-7B-Instruct',
+      'Pro/Qwen/Qwen2-1.5B-Instruct',
+      'Pro/Qwen/Qwen2-VL-7B-Instruct',
+      'Pro/01-ai/Yi-1.5-9B-Chat-16K',
+      'Pro/01-ai/Yi-1.5-6B-Chat',
+      'Pro/THUDM/chatglm3-6b',
+      'Pro/THUDM/glm-4-9b-chat',
+      'Pro/internlm/internlm2_5-7b-chat',
+      'Pro/OpenGVLab/InternVL2-8B',
+      'Pro/meta-llama/Meta-Llama-3-8B-Instruct',
+      'Pro/meta-llama/Meta-Llama-3.1-8B-Instruct',
+      'Pro/google/gemma-2-9b-it',
+    ],
+  },
+  {
+    model: ProviderEnum.YI,
+    name: '零一万物',
+    models: [
+      'yi-lightning',
+      'yi-large',
+      'yi-medium',
+      'yi-medium-200k',
+      'yi-spark',
+      'yi-large-rag',
+      'yi-large-turbo',
+    ],
+  },
+  {
+    model: ProviderEnum.SPARK,
+    name: '讯飞星火',
+    // models: ['lite', 'generalv3', 'pro-128k', 'generalv3.5', 'max-32k', '4.0Ultra'],
+    models: [
+      { label: 'Spark Lite', value: 'lite' },
+      { label: 'Spark Pro', value: 'generalv3' },
+      { label: 'Spark Pro-128K', value: 'pro-128k' },
+      { label: 'Spark Max', value: 'generalv3.5' },
+      { label: 'Spark Max-32K', value: 'max-32k' },
+      { label: 'Spark4.0 Ultra', value: '4.0Ultra' },
+    ],
+  },
+  {
+    model: ProviderEnum.OLLAMA,
+    name: 'Ollama',
+    models: [],
+  },
+  {
+    model: ProviderEnum.AZURE_OPENAI,
+    name: 'Azure OpenAI',
+    models: ['gpt-3.5-turbo', 'gpt-4', 'gpt-4-32k', 'gpt-4-turbo', 'gpt-4o'],
+  },
+  {
+    model: ProviderEnum.GEMINI,
+    name: 'Gemini',
+    models: ['gemini-1.5-pro'],
+  },
+  {
+    model: ProviderEnum.CLAUDE,
+    name: 'Claude',
+    models: ['claude-3-opus', 'claude-3-opus-20240229', 'claude-3-sonnet', 'claude-3-haiku'],
+  },
+];
diff --git a/src/views/ai/model/chatModel/composables/provider.ts b/src/views/ai/model/chatModel/composables/provider.ts
new file mode 100644
index 0000000..b956cdf
--- /dev/null
+++ b/src/views/ai/model/chatModel/composables/provider.ts
@@ -0,0 +1,37 @@
+export enum ProviderEnum {
+  OPENAI = 'OPENAI',
+  AZURE_OPENAI = 'AZURE_OPENAI',
+  GEMINI = 'GEMINI',
+  OLLAMA = 'OLLAMA',
+  CLAUDE = 'CLAUDE',
+  Q_FAN = 'Q_FAN',
+  Q_WEN = 'Q_WEN',
+  ZHIPU = 'ZHIPU',
+  GITEEAI = 'GITEEAI',
+  DEEPSEEK = 'DEEPSEEK',
+  DOUYIN = 'DOUYIN',
+  SILICON = 'SILICON',
+  YI = 'YI',
+  SPARK = 'SPARK',
+}
+
+export function getModels(provider: string, providers: Array<any>) {
+  const arr = providers.filter((i) => i.model === provider);
+  if (arr.length === 0) {
+    return [];
+  }
+  if (typeof arr[0].models[0] === 'string') {
+    return arr[0].models.map((i) => {
+      return {
+        label: i,
+        value: i,
+      };
+    });
+  } else {
+    return arr[0].models;
+  }
+}
+
+export function getTitle(provider: string, providers: Array<any>) {
+  return providers.filter((i) => i.model === provider)[0].name;
+}
diff --git a/src/views/ai/model/chatModel/edit.vue b/src/views/ai/model/chatModel/edit.vue
new file mode 100644
index 0000000..eb92e45
--- /dev/null
+++ b/src/views/ai/model/chatModel/edit.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index c550674..541dcf3 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -1,185 +1,125 @@
+
+<script lang="ts" setup>
+import { Table } from '@/components/Table';
+import { Delete, Edit, Plus } from '@element-plus/icons-vue';
+import editCom from './edit.vue';
+import { computed, h, nextTick, reactive, ref } from 'vue';
+import { getColumns } from './composables/columns.ts';
+import { LLMProviders } from './composables/consts.ts';
+// import { del, list as getModels } from '@/api/aigc/model';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import {FormSchema} from "@/types/form";
+// import { ModelTypeEnum } from '@/api/models';
+import { ProviderEnum } from './composables/provider.ts';
+const formData = ref({
+  provider: ProviderEnum.OPENAI
+});
+const message = ElMessage;
+const dialog = ElMessageBox;
+const actionRef = ref();
+const editRef = ref();
+const tableData = ref([
+])
+const shema = ref([
+  {
+    label: '模型名称',
+    field: 'provider',
+    component: 'Select',
+    colProps: {
+      span: 6
+    },
+    componentProps: {
+      style: {
+        width: '150px',
+      },
+      options: LLMProviders.map((item) => ({
+        label: item.name,
+        value: item.model,
+      })),
+    },
+
+  }
+]) as FormSchema[]
+const actionColumn = reactive({
+  width: 100,
+  title: '操作',
+  key: 'action',
+  fixed: 'right',
+  align: 'center',
+  render(record: any) {
+    return h(TableAction as any, {
+      style: 'text',
+      actions: [
+        {
+          type: 'info',
+          icon: Edit,
+          onClick: handleEdit.bind(null, record),
+        },
+        {
+          type: 'error',
+          icon: Delete,
+          onClick: handleDel.bind(null, record),
+        },
+      ],
+    });
+  },
+});
+
+const columns = computed(() => {
+  console.log(formData.value.provider);
+  nextTick();
+  return getColumns(formData.value.provider);
+});
+const loadDataTable = async (params: any) => {
+  if (formData.value.provider === '') {
+    formData.value.provider = LLMProviders[0].model;
+  }
+  return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
+};
+async function handleAdd() {
+  editRef.value.show({ provider: formData.value.provider });
+}
+
+function handleEdit(record: any) {
+  editRef.value.show(record);
+}
+
+function reloadTable() {
+  actionRef.value.reload();
+}
+
+function handleDel(record: any) {
+  dialog.warning({
+    title: '警告',
+    message: `你确定删除 [${record.name}] 模型吗？删除之后不可再用该模型对话`,
+    confirmButtonText: '确定',
+    cancelButtonText: '不确定',
+    type: 'warning',
+  }).then(async () => {
+    await del(record.id);
+    reloadTable();
+    message.success('模型删除成功');
+  }).catch(() => {
+    // 取消删除
+  });
+}
+</script>
+
 <template>
+  <content-wrap>
+    <Search :schema="shema" :model="formData" @search="({ provider}) => formData.provider = provider"/>
+  </content-wrap>
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="模型名字" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入模型名字"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+        <el-alert
+          class="w-full mb-10px min-alert"
+          title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
+          type="info"
+          show-icon
         />
-      </el-form-item>
-      <el-form-item label="模型标识" prop="model">
-        <el-input
-          v-model="queryParams.model"
-          placeholder="请输入模型标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="模型平台" prop="platform">
-        <el-input
-          v-model="queryParams.platform"
-          placeholder="请输入模型平台"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['ai:chat-model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-      </el-form-item>
-    </el-form>
+        <el-button class="my-10px" type="primary" :icon="Plus">新增模型</el-button>
+        <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+        <editCom ref="editRef" :provider="provider" @reload="reloadTable" />
   </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="所属平台" align="center" prop="platform">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
-        </template>
-      </el-table-column>
-      <el-table-column label="模型名字" align="center" prop="name" />
-      <el-table-column label="模型标识" align="center" prop="model" />
-      <el-table-column label="API 秘钥" align="center" prop="keyId" min-width="140">
-        <template #default="scope">
-          <span>{{ apiKeyList.find((item) => item.id === scope.row.keyId)?.name }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="温度参数" align="center" prop="temperature" />
-      <el-table-column label="回复数 Token 数" align="center" prop="maxTokens" min-width="140" />
-      <el-table-column label="上下文数量" align="center" prop="maxContexts" />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['ai:chat-model:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['ai:chat-model:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <ChatModelForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
-import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
-import ChatModelForm from './ChatModelForm.vue'
-import { DICT_TYPE } from '@/utils/dict'
-import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
-
-/** API 聊天模型 列表 */
-defineOptions({ name: 'AiChatModel' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const list = ref<ChatModelVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  name: undefined,
-  model: undefined,
-  platform: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ChatModelApi.getChatModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ChatModelApi.deleteChatModel(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  getList()
-  // 获得下拉数据
-  apiKeyList.value = await ApiKeyApi.getApiKeySimpleList()
-})
-</script>
+<style lang="less" scoped></style>
diff --git a/src/views/ai/model/embedStore/composables/index.ts b/src/views/ai/model/embedStore/composables/index.ts
new file mode 100644
index 0000000..1d5a2eb
--- /dev/null
+++ b/src/views/ai/model/embedStore/composables/index.ts
@@ -0,0 +1,116 @@
+import {ref} from "vue";
+import {FormSchema} from "@/types/form";
+import {ElTag} from "element-plus";
+
+export enum ProviderEnum {
+  Redis = 'REDIS',
+  PgVector = 'PGVECTOR',
+  Milvus = 'MILVUS',
+}
+
+
+export default function () {
+  const ProviderConst = [
+    { label: 'Redis', value: ProviderEnum.Redis },
+    { label: 'PgVector', value: ProviderEnum.PgVector },
+    { label: 'Milvus', value: ProviderEnum.Milvus },
+  ];
+  function getProviderLabel(value: any) {
+    const arr = ProviderConst.filter((i) => i.value === value);
+    if (arr === undefined || arr.length === 0) {
+      return value;
+    }
+    return arr[0].label;
+  }
+  const shema = ref<FormSchema[]>([
+    {
+      label: '模型名称',
+      field: 'name',
+      component: 'Input',
+      colProps: {
+        span: 6
+      },
+    }
+  ])
+  const columns = ref<object[]>([
+    {
+      label: '数据库别名',
+      field: 'name',
+      align: 'center',
+    },
+    {
+      label: '供应商',
+      field: 'provider',
+      align: 'center',
+      width: '120',
+      render(row) {
+        return h(
+          ElTag,
+          {
+            type: 'success',
+          },
+          {
+            default: () => getProviderLabel(row.provider),
+          }
+        );
+      },
+    },
+    {
+      label: '向量纬度',
+      field: 'dimension',
+      align: 'center',
+      width: '80',
+      render(row) {
+        return h(
+          ElTag,
+          {
+            size: 'small',
+          },
+          {
+            default: () => row.dimension,
+          }
+        );
+      },
+    },
+    {
+      label: '数据库地址',
+      field: 'host',
+      align: 'center',
+      width: '110',
+    },
+    {
+      label: '数据库端口',
+      field: 'port',
+      align: 'center',
+      width: '100',
+    },
+    {
+      label: '数据库用户名',
+      field: 'username',
+      align: 'center',
+    },
+    {
+      label: '数据库密码',
+      field: 'password',
+      align: 'center',
+    },
+    {
+      label: '数据库名',
+      field: 'databaseName',
+      align: 'center',
+    },
+    {
+      label: '表名称',
+      field: 'tableName',
+      align: 'center',
+    },
+  ])
+  const tableData = ref([])
+  return {
+    ProviderConst,
+    getProviderLabel,
+    shema,
+    columns,
+    tableData
+  }
+}
diff --git a/src/views/ai/model/embedStore/index.vue b/src/views/ai/model/embedStore/index.vue
new file mode 100644
index 0000000..aedef94
--- /dev/null
+++ b/src/views/ai/model/embedStore/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {Plus} from "@element-plus/icons-vue";
+import {Table} from "@/components/Table";
+import useEmbedStore from './composables'
+const { shema, columns, tableData } = useEmbedStore()
+</script>
+
+<template>
+  <content-wrap>
+    <Search :schema="shema"/>
+  </content-wrap>
+  <ContentWrap>
+    <el-alert
+      class="w-full mb-10px min-alert"
+      title="注意：请慎重修改模型的向量纬度参数（Dimension），此参数需要和向量库匹配（错误修改可能将影响已有的向量数据）"
+      type="info"
+      show-icon
+    />
+    <el-button class="my-10px" type="primary" :icon="Plus">新增向量数据库</el-button>
+    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+  </ContentWrap>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/model/embedding/composables/index.ts b/src/views/ai/model/embedding/composables/index.ts
new file mode 100644
index 0000000..e7c73f5
--- /dev/null
+++ b/src/views/ai/model/embedding/composables/index.ts
@@ -0,0 +1,102 @@
+import {ElTag} from "element-plus";
+import {ref} from "vue";
+import {ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
+import {FormSchema} from "@/types/form";
+
+export default function () {
+  const LLMProviders: any[] = [
+    {
+      model: ProviderEnum.OPENAI,
+      name: 'OpenAI',
+      models: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002'],
+    },
+    {
+      model: ProviderEnum.Q_FAN,
+      name: '百度千帆',
+      models: ['bge-large-zh', 'bge-large-en', 'tao-8k'],
+    },
+    {
+      model: ProviderEnum.Q_WEN,
+      name: '阿里百炼',
+      models: ['text-embedding-v3'],
+    },
+    {
+      model: ProviderEnum.ZHIPU,
+      name: '智谱清言',
+      models: ['embedding-2', 'embedding-3'],
+    },
+    {
+      model: ProviderEnum.DOUYIN,
+      name: '抖音豆包',
+      models: ['text-240715', 'text-240515'],
+    },
+    {
+      model: ProviderEnum.OLLAMA,
+      name: 'Ollama',
+      models: ['text2vec-bge-large-chinese:latest'],
+    },
+  ];
+  const baseColumns = [
+    {
+      label: '模型别名',
+     field: 'name',
+    },
+    {
+      label: '模型版本',
+     field: 'model',
+      width: '160',
+    },
+    {
+      label: '向量纬度',
+     field: 'dimension',
+      align: 'center',
+      width: '100',
+      render(row) {
+        return h(
+          ElTag,
+          {
+            size: 'small',
+          },
+          {
+            default: () => row.dimension,
+          }
+        );
+      },
+    },
+    {
+      label: 'Api Key',
+     field: 'apiKey',
+    },
+    {
+      label: 'Base Url',
+     field: 'baseUrl',
+    },
+  ];
+  const tableData = ref([
+  ])
+  const shema = ref<FormSchema[]>([
+    {
+      label: '模型名称',
+      field: 'name',
+      component: 'Select',
+      colProps: {
+        span: 6
+      },
+      componentProps: {
+        style: {
+          width: '150px',
+        },
+        options: LLMProviders.map((item) => ({
+          label: item.name,
+          value: item.model,
+        })),
+      },
+
+    }
+  ])
+  return {
+    baseColumns,
+    shema,
+    tableData
+  }
+}
diff --git a/src/views/ai/model/embedding/index.vue b/src/views/ai/model/embedding/index.vue
new file mode 100644
index 0000000..8f7ae8f
--- /dev/null
+++ b/src/views/ai/model/embedding/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import {Plus} from "@element-plus/icons-vue";
+import usePage from './composables/index'
+const {shema, baseColumns: columns, tableData} = usePage()
+</script>
+
+<template>
+  <content-wrap>
+    <Search :schema="shema"/>
+  </content-wrap>
+  <ContentWrap>
+    <el-alert
+      class="w-full mb-10px min-alert"
+      title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
+      type="info"
+      show-icon
+    />
+    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
+    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+  </ContentWrap>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/model/image/composables/index.ts b/src/views/ai/model/image/composables/index.ts
new file mode 100644
index 0000000..063e97d
--- /dev/null
+++ b/src/views/ai/model/image/composables/index.ts
@@ -0,0 +1,110 @@
+export default function () {
+  enum ProviderEnum {
+    OPENAI = 'OPENAI',
+    AZURE_OPENAI = 'AZURE_OPENAI',
+    ZHIPU = 'ZHIPU',
+  }
+
+  const LLMProviders: any[] = [
+    {
+      model: ProviderEnum.OPENAI,
+      name: 'OpenAI',
+      models: ['dall-e-2', 'dall-e-3'],
+    },
+    {
+      model: ProviderEnum.AZURE_OPENAI,
+      name: 'Azure OpenAI',
+      models: ['dall-e-2', 'dall-e-3'],
+    },
+    {
+      model: ProviderEnum.ZHIPU,
+      name: '智谱清言',
+      models: ['cogview-3'],
+    },
+  ]
+  const formData = ref({
+    provider: ProviderEnum.OPENAI,
+  });
+  const tableData = ref([])
+  const shema = ref([
+    {
+      field: 'provider',
+      label: '模型别名',
+      component: 'Select',
+      required: true,
+      componentProps: {
+        placeholder: '请输入模型别名',
+        style: {
+          width: '180px',
+        },
+        options: LLMProviders.map((item) => ({
+          label: item.name,
+          value: item.model,
+        })),
+      },
+    },
+  ])
+
+   const baseColumns = [
+    {
+     label: '模型别名',
+     field: 'name',
+    },
+    {
+     label: '模型版本',
+     field: 'model',
+    },
+  ];
+
+   const openaiColumns = [
+    ...baseColumns,
+    {
+     label: 'Api Key',
+     field: 'apiKey',
+    },
+  ];
+
+   const azureOpenaiColumns = [
+    ...baseColumns,
+    {
+     label: 'Api Key',
+     field: 'apiKey',
+    },
+    {
+     label: 'Endpoint',
+     field: 'endpoint',
+    },
+    {
+     label: 'Deployment Name',
+     field: 'azureDeploymentName',
+    },
+  ];
+
+   const zhipuColumns = [...baseColumns];
+  function getColumns(provider: string) {
+    console.log(provider);
+    switch (provider) {
+      case ProviderEnum.OPENAI: {
+        return openaiColumns;
+      }
+      case ProviderEnum.AZURE_OPENAI: {
+        return azureOpenaiColumns;
+      }
+      case ProviderEnum.ZHIPU: {
+        return zhipuColumns;
+      }
+    }
+    return [];
+  }
+  const columns = computed(() => {
+    nextTick();
+    return getColumns(formData.value.provider)
+  });
+  return {
+    LLMProviders,
+    columns,
+    tableData,
+    shema,
+    formData
+  }
+}
diff --git a/src/views/ai/model/image/index.vue b/src/views/ai/model/image/index.vue
new file mode 100644
index 0000000..2ee54bc
--- /dev/null
+++ b/src/views/ai/model/image/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import {Plus} from "@element-plus/icons-vue";
+import usePage from './composables/index'
+const {shema, columns, tableData, formData} = usePage()
+</script>
+
+<template>
+  <content-wrap>
+    <Search :schema="shema" :model="formData" @search="(model) => formData.provider = model.provider"/>
+  </content-wrap>
+  <ContentWrap>
+    <el-alert
+      class="w-full mb-10px min-alert"
+      title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
+      type="info"
+      show-icon
+    />
+    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
+    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+  </ContentWrap>
+</template>
+
+<style scoped lang="scss">
+
+</style>

From eb5af0eec6f9dd1a6ad3688fabaec6aea7bf375f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 18 Feb 2025 16:51:11 +0800
Subject: [PATCH 02/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

会话模型、向量模型、文生图模型、向量数据库
---
 src/components/Form/src/Form.vue              |   8 +-
 src/utils/is.ts                               |   6 +
 .../ai/model/chatModel/composables/schemas.ts | 204 ++++++++++++
 src/views/ai/model/chatModel/edit.vue         |  32 +-
 src/views/ai/model/chatModel/index.vue        | 198 +++++++-----
 .../ai/model/embedding/composables/consts.ts  |  34 ++
 .../ai/model/embedding/composables/index.ts   |  77 +----
 .../ai/model/embedding/composables/schemas.ts | 138 ++++++++
 src/views/ai/model/embedding/edit.vue         |  41 +++
 src/views/ai/model/embedding/index.vue        |  67 +++-
 .../ai/model/image/composables/consts.ts      |  22 ++
 src/views/ai/model/image/composables/index.ts |  54 +---
 .../ai/model/image/composables/schemas.ts     | 294 ++++++++++++++++++
 src/views/ai/model/image/edit.vue             |  41 +++
 src/views/ai/model/image/index.vue            |  69 +++-
 15 files changed, 1081 insertions(+), 204 deletions(-)
 create mode 100644 src/views/ai/model/chatModel/composables/schemas.ts
 create mode 100644 src/views/ai/model/embedding/composables/consts.ts
 create mode 100644 src/views/ai/model/embedding/composables/schemas.ts
 create mode 100644 src/views/ai/model/embedding/edit.vue
 create mode 100644 src/views/ai/model/image/composables/consts.ts
 create mode 100644 src/views/ai/model/image/composables/schemas.ts
 create mode 100644 src/views/ai/model/image/edit.vue

diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index 3acc10a..c7d22dc 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -117,7 +117,10 @@ export default defineComponent({
     const getElFormRef = (): ComponentRef<typeof ElForm> => {
       return unref(elFormRef) as ComponentRef<typeof ElForm>
     }
-
+    const clearForm = () => {
+      formModel.value = {}
+      getElFormRef().resetFields()
+    }
     expose({
       setValues,
       formModel,
@@ -125,7 +128,8 @@ export default defineComponent({
       delSchema,
       addSchema,
       setSchema,
-      getElFormRef
+      getElFormRef,
+      clearForm
     })
 
     // 监听表单结构化数组，重新生成formModel
diff --git a/src/utils/is.ts b/src/utils/is.ts
index 24d7191..b825013 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -116,3 +116,9 @@ export const isImgPath = (path: string): boolean => {
 export const isEmptyVal = (val: any): boolean => {
   return val === '' || val === null || val === undefined
 }
+export function isWhitespace(val: unknown) {
+  return val === '';
+}
+export function isNullOrWhitespace(val: unknown) {
+  return isNullOrUnDef(val) || isWhitespace(val);
+}
diff --git a/src/views/ai/model/chatModel/composables/schemas.ts b/src/views/ai/model/chatModel/composables/schemas.ts
new file mode 100644
index 0000000..c0aab8d
--- /dev/null
+++ b/src/views/ai/model/chatModel/composables/schemas.ts
@@ -0,0 +1,204 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// import { FormSchema } from '@/components/Form';
+import { LLMProviders } from './consts';
+import { getModels, ProviderEnum } from './provider';
+// import { ModelTypeEnum } from '@/api/models';
+import {FormSchema} from "@/types/form";
+import { isNullOrWhitespace } from '@/utils/is';
+
+const baseSchemas: FormSchema[] = [
+  // {
+  //   field: 'id',
+  //   label: 'ID',
+  //   component: 'Input',
+  // },
+  // {
+  //   field: 'type',
+  //   label: 'type',
+  //   component: 'Input',
+  //   // value: ModelTypeEnum.CHAT,
+  // },
+  {
+    field: 'provider',
+    label: 'LLM供应商',
+    component: 'Select',
+    // isHidden: true,
+    componentProps: {
+      placeholder: 'LLM供应商',
+      options: LLMProviders,
+      labelField: 'name',
+      valueField: 'model',
+    },
+    // rules: [{ required: true, message: '请选择LLM供应商', trigger: ['blur'] }],
+  },
+  {
+    field: 'name',
+    label: '模型别名',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请输入模型别名', trigger: ['blur'] }]
+    },
+    componentProps: {
+      placeholder: '请输入模型别名',
+    },
+  },
+  {
+    field: 'apiKey',
+    label: 'Api Key',
+    labelMessage: '模型的ApiKey',
+    component: 'Input',
+    // rules: [{ required: true, message: '请输入API Key', trigger: ['blur'] }],
+    componentProps: {
+      placeholder: '请输入Api Key',
+    },
+  },
+  {
+    field: 'responseLimit',
+    label: '回复上限',
+    labelMessage: '控制模型输出的Tokens长度上限。通常 100 Tokens 约等于150个中文汉字',
+    component: 'Slider',
+   formItemProps:{
+     rules: [{ type: 'number', required: true, message: '请输入回复上限', trigger: ['blur'] }]
+   },
+    componentProps: {
+      showTooltip: true,
+      value: 2000,
+      step: 1,
+      min: 1,
+      max: 8192,
+    },
+  },
+  {
+    field: 'temperature',
+    label: '生成随机性',
+    labelMessage: '调高参数会使得模型的输出更多样性和创新性，反之降低参数将会减少多样性',
+    component: 'Slider',
+    formItemProps: {
+      rules: [{ type: 'number', required: true, message: '请输入生成随机性', trigger: ['blur'] }]
+    },
+    value:0.2,
+    componentProps: {
+      showTooltip: true,
+      step: 0.05,
+      min: 0,
+      max: 2,
+    },
+  },
+  {
+    field: 'topP',
+    label: 'Top P',
+    labelMessage:
+      '模型在生成输出时会从概率最高的词汇开始选择，直到这些词汇的总概率累积达到Top p值。这样可以限制模型只选择这些高概率的词汇，从而控制输出内容的多样性。建议不要与“生成随机性“同时调整',
+    component: 'Slider',
+    formItemProps: {
+      rules: [{ type: 'number', required: true, message: '请输入', trigger: ['blur'] }]
+    },
+    componentProps: {
+      showTooltip: true,
+      value: 0.8,
+      step: 0.1,
+      min: 0,
+      max: 1,
+    },
+  },
+];
+
+export function getSchemas(provider: string) {
+  const list = JSON.parse(JSON.stringify(baseSchemas));
+  console.log(provider);
+  const modelSchema: any = {
+    field: 'model',
+    label: '模型版本',
+    labelMessage: '该LLM供应商对应的模型版本号',
+    component: 'Select',
+    rules: [{ required: true, message: '请选择模型', trigger: ['blur'] }],
+    componentProps: {
+      placeholder: '请选择模型版本（可以手动输入）',
+      filterable: true,
+      tag: true,
+      options: getModels(provider, LLMProviders),
+    },
+  };
+  list.splice(1, 0, modelSchema);
+
+  let value: any = undefined;
+  let labelMessage: any = '模型的基础请求URL地址（或中转地址）';
+  let disabled = false;
+  switch (provider) {
+    case ProviderEnum.GITEEAI:
+      disabled = true;
+      value = 'https://ai.gitee.com/v1';
+      labelMessage = '对于Gitee AI，此Url固定不可修改';
+      break;
+    case ProviderEnum.DEEPSEEK:
+      disabled = true;
+      value = 'https://api.deepseek.com/v1';
+      labelMessage = '对于DeepSeek模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.SILICON:
+      disabled = true;
+      value = 'https://api.siliconflow.cn/v1';
+      labelMessage = '对于硅基流动模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.DOUYIN:
+      disabled = true;
+      value = 'https://ark.cn-beijing.volces.com/api/v3';
+      labelMessage = '对于抖音豆包模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.YI:
+      disabled = true;
+      value = 'https://api.lingyiwanwu.com/v1';
+      labelMessage = '对于零一模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.SPARK:
+      disabled = true;
+      value = 'https://spark-api-open.xf-yun.com/v1';
+      labelMessage = '对于讯飞星火大模型，此Url固定不可修改';
+      break;
+  }
+  const baseUlrSchema: any = {
+    field: 'baseUrl',
+    label: 'Base Url',
+    labelMessage,
+    component: 'Input',
+    value,
+    componentProps: {
+      disabled,
+      placeholder: '请输入BaseUrl',
+    },
+    rules: [
+      {
+        required: false,
+        trigger: ['blur'],
+        validator: (_, value: string) => {
+          if (!value) {
+            return;
+          }
+          const urlRegex =
+            /^(https?:\/\/)?((([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|localhost|(\d{1,3}\.){3}\d{1,3})(:\d{1,5})?(\/.*)?)$/;
+          if (isNullOrWhitespace(value) || urlRegex.test(value)) {
+            return true;
+          }
+          return new Error('URL格式错误');
+        },
+      },
+    ],
+  };
+  list.splice(3, 0, baseUlrSchema);
+  return list;
+}
diff --git a/src/views/ai/model/chatModel/edit.vue b/src/views/ai/model/chatModel/edit.vue
index eb92e45..603c534 100644
--- a/src/views/ai/model/chatModel/edit.vue
+++ b/src/views/ai/model/chatModel/edit.vue
@@ -1,9 +1,39 @@
 <script setup lang="ts">
+import {Form} from '@/components/Form'
+import {ref} from 'vue'
+import {FormSchema} from "@/types/form";
+import {getSchemas} from "@/views/ai/model/chatModel/composables/schemas";
 
+const visible = ref(false)
+const formData = ref({})
+const formRef = ref()
+const schemas = ref([])
+const close = () => {
+  visible.value = false
+  formRef.value.clearForm()
+}
+const show = async (data: object) => {
+  visible.value = true
+  await nextTick()
+  formRef.value.setValues(data)
+  schemas.value =  (getSchemas(data.provider) as FormSchema[]).splice(1);
+  formRef.value.setSchema(schemas.value)
+  // models.value = getModels(data.provider, LLMProviders)
+}
+defineExpose({
+  show,
+  close
+})
 </script>
 
 <template>
-  <div></div>
+  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas" />
+    <template #footer>
+      <el-button type="primary">确认</el-button>
+      <el-button @click="close">取消</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index 541dcf3..9ef6a32 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -1,16 +1,17 @@
 
 <script lang="ts" setup>
-import { Table } from '@/components/Table';
-import { Delete, Edit, Plus } from '@element-plus/icons-vue';
+import {Table} from '@/components/Table';
+import {Delete, Edit, Plus} from '@element-plus/icons-vue';
 import editCom from './edit.vue';
-import { computed, h, nextTick, reactive, ref } from 'vue';
-import { getColumns } from './composables/columns.ts';
-import { LLMProviders } from './composables/consts.ts';
+import {computed, h, nextTick, reactive, ref} from 'vue';
+import {getColumns} from './composables/columns.ts';
+import {LLMProviders} from './composables/consts.ts';
 // import { del, list as getModels } from '@/api/aigc/model';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import {ElMessage, ElMessageBox} from 'element-plus';
 import {FormSchema} from "@/types/form";
 // import { ModelTypeEnum } from '@/api/models';
-import { ProviderEnum } from './composables/provider.ts';
+import {getModels, ProviderEnum} from './composables/provider.ts';
+
 const formData = ref({
   provider: ProviderEnum.OPENAI
 });
@@ -19,65 +20,75 @@ const dialog = ElMessageBox;
 const actionRef = ref();
 const editRef = ref();
 const tableData = ref([
-])
-const shema = ref([
   {
-    label: '模型名称',
-    field: 'provider',
-    component: 'Select',
-    colProps: {
-      span: 6
-    },
-    componentProps: {
-      style: {
-        width: '150px',
-      },
-      options: LLMProviders.map((item) => ({
-        label: item.name,
-        value: item.model,
-      })),
-    },
-
-  }
-]) as FormSchema[]
-const actionColumn = reactive({
-  width: 100,
-  title: '操作',
-  key: 'action',
-  fixed: 'right',
-  align: 'center',
-  render(record: any) {
-    return h(TableAction as any, {
-      style: 'text',
-      actions: [
-        {
-          type: 'info',
-          icon: Edit,
-          onClick: handleEdit.bind(null, record),
-        },
-        {
-          type: 'error',
-          icon: Delete,
-          onClick: handleDel.bind(null, record),
-        },
-      ],
-    });
+    name: '1111'
   },
-});
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  }, {
+    name: '1111'
+  },
+  {
+    name: '1111'
+  }
+])
+// const actionColumn = reactive({
+//   width: 100,
+//   title: '操作',
+//   key: 'action',
+//   fixed: 'right',
+//   align: 'center',
+//   render(record: any) {
+//     return h(TableAction as any, {
+//       style: 'text',
+//       actions: [
+//         {
+//           type: 'info',
+//           icon: Edit,
+//           onClick: handleEdit.bind(null, record),
+//         },
+//         {
+//           type: 'error',
+//           icon: Delete,
+//           onClick: handleDel.bind(null, record),
+//         },
+//       ],
+//     });
+//   },
+// });
 
 const columns = computed(() => {
-  console.log(formData.value.provider);
   nextTick();
   return getColumns(formData.value.provider);
 });
-const loadDataTable = async (params: any) => {
-  if (formData.value.provider === '') {
-    formData.value.provider = LLMProviders[0].model;
-  }
-  return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
-};
-async function handleAdd() {
-  editRef.value.show({ provider: formData.value.provider });
+// const loadDataTable = async (params: any) => {
+//   if (formData.value.provider === '') {
+//     formData.value.provider = LLMProviders[0].model;
+//   }
+//   return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
+// };
+
+async function addModel() {
+  console.log(formData.value.provider);
+  editRef.value.show({provider: formData.value.provider});
 }
 
 function handleEdit(record: any) {
@@ -106,20 +117,63 @@ function handleDel(record: any) {
 </script>
 
 <template>
-  <content-wrap>
-    <Search :schema="shema" :model="formData" @search="({ provider}) => formData.provider = provider"/>
-  </content-wrap>
+<!--  <content-wrap>-->
+<!--    <el-button v-for="(item,index) in LLMProviders" :key="index" @click="formData.provider = item.model">{{ item.name }}</el-button>-->
+<!--  </content-wrap>-->
   <ContentWrap>
-        <el-alert
-          class="w-full mb-10px min-alert"
-          title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
-          type="info"
-          show-icon
-        />
-        <el-button class="my-10px" type="primary" :icon="Plus">新增模型</el-button>
-        <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-        <editCom ref="editRef" :provider="provider" @reload="reloadTable" />
+   <div class="flex children">
+     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+       <div
+         v-for="(item,index) in LLMProviders" :key="index"
+         :class="{active: formData.provider === item.model}" class="menu"
+         @click="formData.provider = item.model">
+         <span>{{ item.name }}</span>
+       </div>
+     </el-scrollbar>
+     <div class="h-full flex-1 px-20px">
+       <el-alert
+         class="w-full mb-10px min-alert"
+         title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
+         type="warning"
+         show-icon
+       />
+       <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
+       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+       <editCom ref="editRef" @reload="reloadTable"/>
+     </div>
+   </div>
   </ContentWrap>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped>
+.children {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+  box-sizing: border-box;
+
+  & > div:nth-child(2) {
+    width: calc(100% - 300px);
+  }
+}
+
+.table-wrapper {
+  height: calc(100% - 100px);
+}
+
+.menu {
+  transition: all .15s;
+  cursor: pointer;
+  padding: 12px 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  &.active {
+    color: #ffffff;
+    background-color: var(--el-color-primary-light-3);
+  }
+
+  &:hover {
+    &:not(&.active) {
+      background-color: var(--el-color-info-light-7);
+    }
+  }
+}
+</style>
diff --git a/src/views/ai/model/embedding/composables/consts.ts b/src/views/ai/model/embedding/composables/consts.ts
new file mode 100644
index 0000000..a5fc69f
--- /dev/null
+++ b/src/views/ai/model/embedding/composables/consts.ts
@@ -0,0 +1,34 @@
+import {ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
+
+export const LLMProviders: any[] = [
+  {
+    model: ProviderEnum.OPENAI,
+    name: 'OpenAI',
+    models: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002'],
+  },
+  {
+    model: ProviderEnum.Q_FAN,
+    name: '百度千帆',
+    models: ['bge-large-zh', 'bge-large-en', 'tao-8k'],
+  },
+  {
+    model: ProviderEnum.Q_WEN,
+    name: '阿里百炼',
+    models: ['text-embedding-v3'],
+  },
+  {
+    model: ProviderEnum.ZHIPU,
+    name: '智谱清言',
+    models: ['embedding-2', 'embedding-3'],
+  },
+  {
+    model: ProviderEnum.DOUYIN,
+    name: '抖音豆包',
+    models: ['text-240715', 'text-240515'],
+  },
+  {
+    model: ProviderEnum.OLLAMA,
+    name: 'Ollama',
+    models: ['text2vec-bge-large-chinese:latest'],
+  },
+];
diff --git a/src/views/ai/model/embedding/composables/index.ts b/src/views/ai/model/embedding/composables/index.ts
index e7c73f5..23a9d75 100644
--- a/src/views/ai/model/embedding/composables/index.ts
+++ b/src/views/ai/model/embedding/composables/index.ts
@@ -1,49 +1,20 @@
 import {ElTag} from "element-plus";
 import {ref} from "vue";
 import {ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
-import {FormSchema} from "@/types/form";
 
 export default function () {
-  const LLMProviders: any[] = [
-    {
-      model: ProviderEnum.OPENAI,
-      name: 'OpenAI',
-      models: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002'],
-    },
-    {
-      model: ProviderEnum.Q_FAN,
-      name: '百度千帆',
-      models: ['bge-large-zh', 'bge-large-en', 'tao-8k'],
-    },
-    {
-      model: ProviderEnum.Q_WEN,
-      name: '阿里百炼',
-      models: ['text-embedding-v3'],
-    },
-    {
-      model: ProviderEnum.ZHIPU,
-      name: '智谱清言',
-      models: ['embedding-2', 'embedding-3'],
-    },
-    {
-      model: ProviderEnum.DOUYIN,
-      name: '抖音豆包',
-      models: ['text-240715', 'text-240515'],
-    },
-    {
-      model: ProviderEnum.OLLAMA,
-      name: 'Ollama',
-      models: ['text2vec-bge-large-chinese:latest'],
-    },
-  ];
+  const formData = ref({
+    provider: ProviderEnum.OPENAI
+  })
+  const editRef = ref()
   const baseColumns = [
     {
       label: '模型别名',
-     field: 'name',
+      field: 'name',
     },
     {
       label: '模型版本',
-     field: 'model',
+      field: 'model',
       width: '160',
     },
     {
@@ -65,38 +36,22 @@ export default function () {
     },
     {
       label: 'Api Key',
-     field: 'apiKey',
+      field: 'apiKey',
     },
     {
       label: 'Base Url',
-     field: 'baseUrl',
+      field: 'baseUrl',
     },
   ];
-  const tableData = ref([
-  ])
-  const shema = ref<FormSchema[]>([
-    {
-      label: '模型名称',
-      field: 'name',
-      component: 'Select',
-      colProps: {
-        span: 6
-      },
-      componentProps: {
-        style: {
-          width: '150px',
-        },
-        options: LLMProviders.map((item) => ({
-          label: item.name,
-          value: item.model,
-        })),
-      },
-
-    }
-  ])
+  const tableData = ref([])
+  const open = () => {
+    editRef.value.show({provider: formData.value.provider});
+  }
   return {
     baseColumns,
-    shema,
-    tableData
+    tableData,
+    formData,
+    editRef,
+    open
   }
 }
diff --git a/src/views/ai/model/embedding/composables/schemas.ts b/src/views/ai/model/embedding/composables/schemas.ts
new file mode 100644
index 0000000..3e186ca
--- /dev/null
+++ b/src/views/ai/model/embedding/composables/schemas.ts
@@ -0,0 +1,138 @@
+
+
+ import {FormSchema} from "@/types/form";
+// import { ModelTypeEnum } from '@/api/models';
+ import {getModels, ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
+ import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
+// import { LLMProviders } from './consts';
+const baseSchemas: FormSchema[] = [
+  // {
+  //   field: 'id',
+  //   label: 'ID',
+  //   component: 'Input',
+  //   isHidden: true,
+  // },
+  // {
+  //   field: 'type',
+  //   label: 'type',
+  //   component: 'Input',
+  //   isHidden: true,
+  //   value: ModelTypeEnum.EMBEDDING,
+  // },
+  {
+    field: 'provider',
+    label: 'LLM供应商',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择LLM供应商',
+      options: LLMProviders,
+    },
+  },
+  {
+    field: 'name',
+    label: '模型别名',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请输入模型别名', trigger: ['blur'] }]
+    },
+    componentProps: {
+      placeholder: '请输入模型别名',
+    },
+  },
+  {
+    field: 'apiKey',
+    label: 'Api Key',
+    labelMessage: '模型的ApiKey',
+    component: 'Input',
+    // rules: [{ required: true, message: '请输入ApiKey', trigger: ['blur'] }],
+    componentProps: {
+      placeholder: '请输入ApiKey',
+    },
+  },
+  {
+    field: 'dimension',
+    label: '向量纬度',
+    component: 'Select',
+    value: 1024,
+    labelMessage: '慎重修改此参数，纬度高会消耗更多的算力，但纬度高并不代表搜索更精确',
+    componentProps: {
+      placeholder: '请输入向量纬度',
+      options: [
+        {
+          label: '512',
+          value: 512,
+        },
+        {
+          label: '768',
+          value: 768,
+        },
+        {
+          label: '1024',
+          value: 1024,
+        },
+        {
+          label: '1536',
+          value: 1536,
+        },
+      ],
+    },
+    formItemProps:{
+      rules: [{ type: 'number', required: true, message: '请输入向量纬度', trigger: ['blur'] }]
+    },
+  },
+];
+
+export function getSchemas(provider: string) {
+  const list = JSON.parse(JSON.stringify(baseSchemas));
+
+  const modelSchema: any = {
+    field: 'model',
+    label: '模型版本',
+    labelMessage: '该LLM供应商对应的模型版本号',
+    component: 'Select',
+    rules: [{ required: true, message: '请选择模型', trigger: ['blur'] }],
+    componentProps: {
+      placeholder: '请选择模型版本',
+      filterable: true,
+      tag: true,
+      options: getModels(provider, LLMProviders),
+    },
+  };
+  list.splice(list.length, 0, modelSchema);
+
+  let value: any = undefined;
+  let labelMessage: any = '模型的基础请求URL地址（或中转地址）';
+  let disabled = false;
+  switch (provider) {
+    case ProviderEnum.DOUYIN:
+      disabled = true;
+      value = 'https://ark.cn-beijing.volces.com/api/v3';
+      labelMessage = '对于抖音豆包模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.Q_FAN:
+      disabled = true;
+      labelMessage = '对于百度千帆模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.Q_WEN:
+      disabled = true;
+      labelMessage = '对于阿里千问模型，此Url固定不可修改';
+      break;
+    case ProviderEnum.ZHIPU:
+      disabled = true;
+      labelMessage = '对于智谱清言模型，此Url固定不可修改';
+      break;
+  }
+  const baseUlrSchema: any = {
+    field: 'baseUrl',
+    label: 'Base Url',
+    labelMessage,
+    component: 'Input',
+    value,
+    componentProps: {
+      disabled,
+      placeholder: '请输入BaseUrl',
+    },
+  };
+  list.splice(list.length, 0, baseUlrSchema);
+  return list;
+}
diff --git a/src/views/ai/model/embedding/edit.vue b/src/views/ai/model/embedding/edit.vue
new file mode 100644
index 0000000..c9c3be4
--- /dev/null
+++ b/src/views/ai/model/embedding/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {Form} from '@/components/Form'
+import {ref} from 'vue'
+import {FormSchema} from "@/types/form";
+import {getSchemas} from "@/views/ai/model/embedding/composables/schemas";
+
+const visible = ref(false)
+const formData = ref({})
+const formRef = ref()
+const schemas = ref([])
+const close = () => {
+  visible.value = false
+  formRef.value.clearForm()
+}
+const show = async (data: object) => {
+  visible.value = true
+  await nextTick()
+  formRef.value.setValues(data)
+  schemas.value =  (getSchemas(data.provider) as FormSchema[]).splice(1);
+  formRef.value.setSchema(schemas.value)
+  // models.value = getModels(data.provider, LLMProviders)
+}
+defineExpose({
+  show,
+  close
+})
+</script>
+
+<template>
+  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas" />
+    <template #footer>
+      <el-button type="primary">确认</el-button>
+      <el-button @click="close">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/model/embedding/index.vue b/src/views/ai/model/embedding/index.vue
index 8f7ae8f..8a0e5f6 100644
--- a/src/views/ai/model/embedding/index.vue
+++ b/src/views/ai/model/embedding/index.vue
@@ -2,25 +2,68 @@
 
 import {Plus} from "@element-plus/icons-vue";
 import usePage from './composables/index'
-const {shema, baseColumns: columns, tableData} = usePage()
+import Edit from "@/views/ai/model/embedding/edit.vue";
+import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
+import {Table} from "@/components/Table";
+const { baseColumns: columns, tableData, formData, editRef, open} = usePage()
 </script>
 
 <template>
-  <content-wrap>
-    <Search :schema="shema"/>
-  </content-wrap>
   <ContentWrap>
-    <el-alert
-      class="w-full mb-10px min-alert"
-      title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
-      type="info"
-      show-icon
-    />
-    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
-    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+   <div class="children flex">
+     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+       <div
+         v-for="(item,index) in LLMProviders" :key="index"
+         :class="{active: formData.provider === item.model}" class="menu"
+         @click="formData.provider = item.model">
+         <span>{{ item.name }}</span>
+       </div>
+     </el-scrollbar>
+     <div class="h-full flex-1 px-20px">
+       <el-alert
+         class="w-full mb-10px min-alert"
+         title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
+         type="info"
+         show-icon
+       />
+       <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
+       <Table class="table-wrapper" height="100%"  border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+     </div>
+   </div>
+    <Edit ref="editRef" />
   </ContentWrap>
 </template>
 
 <style scoped lang="scss">
+.children {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+  box-sizing: border-box;
 
+  & > div:nth-child(2) {
+    width: calc(100% - 300px);
+  }
+}
+
+.table-wrapper {
+  height: calc(100% - 100px);
+}
+
+.menu {
+  transition: all .15s;
+  cursor: pointer;
+  padding: 12px 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+
+  &.active {
+    color: #ffffff;
+    background-color: var(--el-color-primary-light-3);
+  }
+
+  &:hover {
+    &:not(&.active) {
+      background-color: var(--el-color-info-light-7);
+    }
+  }
+}
 </style>
diff --git a/src/views/ai/model/image/composables/consts.ts b/src/views/ai/model/image/composables/consts.ts
new file mode 100644
index 0000000..56a95fa
--- /dev/null
+++ b/src/views/ai/model/image/composables/consts.ts
@@ -0,0 +1,22 @@
+export  enum ProviderEnum {
+  OPENAI = 'OPENAI',
+  AZURE_OPENAI = 'AZURE_OPENAI',
+  ZHIPU = 'ZHIPU',
+}
+export  const LLMProviders: any[] = [
+  {
+    model: ProviderEnum.OPENAI,
+    name: 'OpenAI',
+    models: ['dall-e-2', 'dall-e-3'],
+  },
+  {
+    model: ProviderEnum.AZURE_OPENAI,
+    name: 'Azure OpenAI',
+    models: ['dall-e-2', 'dall-e-3'],
+  },
+  {
+    model: ProviderEnum.ZHIPU,
+    name: '智谱清言',
+    models: ['cogview-3'],
+  },
+]
diff --git a/src/views/ai/model/image/composables/index.ts b/src/views/ai/model/image/composables/index.ts
index 063e97d..4d4689e 100644
--- a/src/views/ai/model/image/composables/index.ts
+++ b/src/views/ai/model/image/composables/index.ts
@@ -1,49 +1,12 @@
-export default function () {
-  enum ProviderEnum {
-    OPENAI = 'OPENAI',
-    AZURE_OPENAI = 'AZURE_OPENAI',
-    ZHIPU = 'ZHIPU',
-  }
+import {ProviderEnum} from "@/views/ai/model/image/composables/consts";
 
-  const LLMProviders: any[] = [
-    {
-      model: ProviderEnum.OPENAI,
-      name: 'OpenAI',
-      models: ['dall-e-2', 'dall-e-3'],
-    },
-    {
-      model: ProviderEnum.AZURE_OPENAI,
-      name: 'Azure OpenAI',
-      models: ['dall-e-2', 'dall-e-3'],
-    },
-    {
-      model: ProviderEnum.ZHIPU,
-      name: '智谱清言',
-      models: ['cogview-3'],
-    },
-  ]
+export default function () {
+
+  const editRef= ref()
   const formData = ref({
     provider: ProviderEnum.OPENAI,
   });
   const tableData = ref([])
-  const shema = ref([
-    {
-      field: 'provider',
-      label: '模型别名',
-      component: 'Select',
-      required: true,
-      componentProps: {
-        placeholder: '请输入模型别名',
-        style: {
-          width: '180px',
-        },
-        options: LLMProviders.map((item) => ({
-          label: item.name,
-          value: item.model,
-        })),
-      },
-    },
-  ])
 
    const baseColumns = [
     {
@@ -100,11 +63,14 @@ export default function () {
     nextTick();
     return getColumns(formData.value.provider)
   });
+  const open = () => {
+    editRef.value.show({provider: formData.value.provider});
+  }
   return {
-    LLMProviders,
     columns,
     tableData,
-    shema,
-    formData
+    formData,
+    editRef,
+    open
   }
 }
diff --git a/src/views/ai/model/image/composables/schemas.ts b/src/views/ai/model/image/composables/schemas.ts
new file mode 100644
index 0000000..7079885
--- /dev/null
+++ b/src/views/ai/model/image/composables/schemas.ts
@@ -0,0 +1,294 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {FormSchema} from '@/types/form';
+// import { LLMProviders, ProviderEnum } from './data';
+// import { ModelTypeEnum } from '@/api/models';
+import {isNullOrWhitespace} from '@/utils/is';
+import {LLMProviders, ProviderEnum} from "@/views/ai/model/image/composables/consts";
+
+const baseHeadSchemas: FormSchema[] = [
+  // {
+  //   field: 'id',
+  //   label: 'ID',
+  //   component: 'Input',
+  //   isHidden: true,
+  // },
+  // {
+  //   field: 'type',
+  //   label: 'type',
+  //   component: 'Input',
+  //   isHidden: true,
+  //   defaultValue: ModelTypeEnum.TEXT_IMAGE,
+  // },
+  {
+    field: 'provider',
+    label: 'LLM供应商',
+    component: 'Select',
+    componentProps: {
+      options: LLMProviders,
+      labelField: 'name',
+      valueField: 'model',
+    },
+    formItemProps: {rules: [{required: true, message: '请选择LLM供应商', trigger: ['blur']}]},
+  },
+  {
+    field: 'name',
+    label: '模型别名',
+    component: 'Input',
+    formItemProps: {rules: [{required: true, message: '请输入模型别名', trigger: ['blur']}]},
+  },
+];
+const keySchemas: FormSchema[] = [
+  {
+    field: 'apiKey',
+    label: 'Api Key',
+    labelMessage: '模型链接的秘钥，注意有些模型例如Gemini是本地认证方式，则不是通过这种方式',
+    component: 'Input',
+    formItemProps: {rules: [{required: true, message: '请输入API Key', trigger: ['blur']}]},
+  },
+  {
+    field: 'baseUrl',
+    label: 'Base Url',
+    labelMessage: '注意对于大多数模型此参数仅代表中转地址，但是对于Ollama这类本地模型则是必填的',
+    component: 'Input',
+    formItemProps: {
+      rules: [
+        {
+          required: false,
+          trigger: ['blur'],
+          validator: (_, value: string) => {
+            const urlRegex = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/.*)?$/;
+            if (isNullOrWhitespace(value) || urlRegex.test(value)) {
+              return true;
+            }
+            return new Error('URL格式错误');
+          },
+        },
+      ]
+    },
+  },
+];
+
+export const openaiSchemas: FormSchema[] = [
+  ...baseHeadSchemas,
+  {
+    field: 'model',
+    label: '模型',
+    labelMessage: '该LLM供应商对应的模型版本号',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择模型', trigger: ['blur']}]
+    },
+    componentProps: {
+      filterable: true,
+      options: getModels(ProviderEnum.OPENAI),
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '图片大小',
+    labelMessage: '生成图片的大小尺寸',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择图片大小', trigger: ['blur']}]
+    },
+    componentProps: {
+      options: [
+        {
+          label: '1024x1024',
+          value: '1024x1024',
+        },
+        {
+          label: '1024x1792',
+          value: '1024x1792',
+        },
+        {
+          label: '1792x1024',
+          value: '1792x1024',
+        },
+      ],
+    },
+  },
+  {
+    field: 'imageQuality',
+    label: '图片质量',
+    labelMessage: '生成图片的质量',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择图片的质量', trigger: ['blur']}]
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'standard',
+          value: 'standard',
+        },
+        {
+          label: 'hd',
+          value: 'hd',
+        },
+      ],
+    },
+  },
+  {
+    field: 'imageStyle',
+    label: '图片风格',
+    labelMessage: '生成图片的风格',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择图片的风格', trigger: ['blur']}]
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'vivid',
+          value: 'vivid',
+        },
+        {
+          label: 'natural',
+          value: 'natural',
+        },
+      ],
+    },
+  },
+  ...keySchemas,
+];
+
+export const azureOpenaiSchemas: FormSchema[] = [
+  ...baseHeadSchemas,
+  {
+    field: 'model',
+    label: '模型',
+    labelMessage: '该LLM供应商对应的模型版本号',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择模型', trigger: ['blur']}]
+    },
+    componentProps: {
+      filterable: true,
+      options: getModels(ProviderEnum.AZURE_OPENAI),
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '图片大小',
+    labelMessage: '生成图片的大小尺寸',
+    component: 'Select',
+    formItemProps: {
+      rules: [{required: true, message: '请选择图片大小', trigger: ['blur']}]
+    },
+    componentProps: {
+      options: [
+        {
+          label: '1024x1024',
+          value: '1024x1024',
+        },
+        {
+          label: '1024x1792',
+          value: '1024x1792',
+        },
+        {
+          label: '1792x1024',
+          value: '1792x1024',
+        },
+      ],
+    },
+  },
+  {
+    field: 'imageQuality',
+    label: '图片质量',
+    labelMessage: '生成图片的质量',
+    component: 'Select',
+    formItemProps: {rules: [{required: true, message: '请选择图片的质量', trigger: ['blur']}]},
+    componentProps: {
+      options: [
+        {
+          label: 'standard',
+          value: 'standard',
+        },
+        {
+          label: 'hd',
+          value: 'hd',
+        },
+      ],
+    },
+  },
+  {
+    field: 'imageStyle',
+    label: '图片风格',
+    labelMessage: '生成图片的风格',
+    component: 'Select',
+    formItemProps: {rules: [{required: true, message: '请选择图片的风格', trigger: ['blur']}]},
+    componentProps: {
+      options: [
+        {
+          label: 'vivid',
+          value: 'vivid',
+        },
+        {
+          label: 'natural',
+          value: 'natural',
+        },
+      ],
+    },
+  },
+  ...keySchemas,
+];
+
+export const zhipuSchemas: FormSchema[] = [
+  ...baseHeadSchemas,
+  {
+    field: 'model',
+    label: '模型',
+    labelMessage: '该LLM供应商对应的模型版本号',
+    component: 'Select',
+    formItemProps: {rules: [{required: true, message: '请选择模型', trigger: ['blur']}]},
+    componentProps: {
+      filterable: true,
+      options: getModels(ProviderEnum.ZHIPU),
+    },
+  },
+  ...keySchemas,
+];
+
+export function getSchemas(provider: string) {
+  switch (provider) {
+    case ProviderEnum.OPENAI: {
+      return openaiSchemas;
+    }
+    case ProviderEnum.AZURE_OPENAI: {
+      return azureOpenaiSchemas;
+    }
+    case ProviderEnum.ZHIPU: {
+      return zhipuSchemas;
+    }
+  }
+  return [];
+}
+
+export function getModels(provider: string) {
+  const arr = LLMProviders.filter((i) => i.model === provider);
+  if (arr.length === 0) {
+    return [];
+  }
+  return arr[0].models.map((i) => {
+    return {
+      label: i,
+      value: i,
+    };
+  });
+}
diff --git a/src/views/ai/model/image/edit.vue b/src/views/ai/model/image/edit.vue
new file mode 100644
index 0000000..d3b9744
--- /dev/null
+++ b/src/views/ai/model/image/edit.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {Form} from '@/components/Form'
+import {ref} from 'vue'
+import {FormSchema} from "@/types/form";
+import {getSchemas} from "@/views/ai/model/image/composables/schemas";
+
+const visible = ref(false)
+const formData = ref({})
+const formRef = ref()
+const schemas = ref([])
+const close = () => {
+  visible.value = false
+  formRef.value.clearForm()
+}
+const show = async (data: object) => {
+  visible.value = true
+  await nextTick()
+  formRef.value.setValues(data)
+  schemas.value = (getSchemas(data.provider) as FormSchema[]);
+  // formRef.value.setSchema(schemas.value)
+  // models.value = getModels(data.provider, LLMProviders)
+}
+defineExpose({
+  show,
+  close
+})
+</script>
+
+<template>
+  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas" />
+    <template #footer>
+      <el-button type="primary">确认</el-button>
+      <el-button @click="close">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/ai/model/image/index.vue b/src/views/ai/model/image/index.vue
index 2ee54bc..0c09ebb 100644
--- a/src/views/ai/model/image/index.vue
+++ b/src/views/ai/model/image/index.vue
@@ -2,25 +2,70 @@
 
 import {Plus} from "@element-plus/icons-vue";
 import usePage from './composables/index'
-const {shema, columns, tableData, formData} = usePage()
+import {LLMProviders} from "@/views/ai/model/image/composables/consts";
+import Edit from './edit.vue'
+
+const {columns, tableData, formData, editRef, open} = usePage()
 </script>
 
 <template>
-  <content-wrap>
-    <Search :schema="shema" :model="formData" @search="(model) => formData.provider = model.provider"/>
-  </content-wrap>
   <ContentWrap>
-    <el-alert
-      class="w-full mb-10px min-alert"
-      title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
-      type="info"
-      show-icon
-    />
-    <el-button class="my-10px" type="primary" :icon="Plus">新增向量模型</el-button>
-    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+    <div class="children flex">
+      <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+        <div
+          v-for="(item,index) in LLMProviders" :key="index"
+          :class="{active: formData.provider === item.model}" class="menu"
+          @click="formData.provider = item.model">
+          <span>{{ item.name }}</span>
+        </div>
+      </el-scrollbar>
+      <div class="h-full  p-20px">
+        <el-alert
+          class="w-full mb-10px min-alert"
+          show-icon
+          title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
+          type="info"
+        />
+        <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增向量模型
+        </el-button>
+        <Table :columns="columns" :data="tableData.concat(tableData)" :pagination="false" border
+               class="table-wrapper" height="100%"/>
+      </div>
+    </div>
+    <Edit ref="editRef"/>
   </ContentWrap>
 </template>
 
 <style scoped lang="scss">
+.children {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+  box-sizing: border-box;
 
+  & > div:nth-child(2) {
+    width: calc(100% - 300px);
+  }
+}
+
+.table-wrapper {
+  height: calc(100% - 100px);
+}
+
+.menu {
+  transition: all .15s;
+  cursor: pointer;
+  padding: 12px 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+
+  &.active {
+    color: #ffffff;
+    background-color: var(--el-color-primary-light-3);
+  }
+
+  &:hover {
+    &:not(&.active) {
+      background-color: var(--el-color-info-light-7);
+    }
+  }
+}
 </style>

From cbc3f3296a99daac4f4bf08cc48e821dbc9aafc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 18 Feb 2025 18:04:21 +0800
Subject: [PATCH 03/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

会话模型、向量模型、文生图模型、向量数据库
---
 src/views/ai/model/chatModel/index.vue | 2 +-
 src/views/ai/model/embedding/index.vue | 2 +-
 src/views/ai/model/image/index.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index 9ef6a32..dacbec3 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -167,7 +167,7 @@ function handleDel(record: any) {
   margin-bottom: 20px;
   &.active {
     color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
+    background-color: var(--el-color-primary);
   }
 
   &:hover {
diff --git a/src/views/ai/model/embedding/index.vue b/src/views/ai/model/embedding/index.vue
index 8a0e5f6..f510bca 100644
--- a/src/views/ai/model/embedding/index.vue
+++ b/src/views/ai/model/embedding/index.vue
@@ -57,7 +57,7 @@ const { baseColumns: columns, tableData, formData, editRef, open} = usePage()
 
   &.active {
     color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
+    background-color: var(--el-color-primary);
   }
 
   &:hover {
diff --git a/src/views/ai/model/image/index.vue b/src/views/ai/model/image/index.vue
index 0c09ebb..f402948 100644
--- a/src/views/ai/model/image/index.vue
+++ b/src/views/ai/model/image/index.vue
@@ -59,7 +59,7 @@ const {columns, tableData, formData, editRef, open} = usePage()
 
   &.active {
     color: #ffffff;
-    background-color: var(--el-color-primary-light-3);
+    background-color: var(--el-color-primary);
   }
 
   &:hover {

From a92e21767b490332e9b2b99df6392e84f426956d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Wed, 19 Feb 2025 15:25:35 +0800
Subject: [PATCH 04/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

知识库列表，知识库数据页面
---
 src/components/UploadFile/src/UploadFile.vue  |   6 +-
 .../dataset-form/components/data-cut.vue      |  78 ++++++++
 .../dataset-form/components/data-document.vue |  84 +++++++++
 .../components/data-embedding.vue             |  48 +++++
 .../dataset-form/components/data-import.vue   |  11 ++
 .../knowledge/dataset-form/form-step1.vue     | 151 ----------------
 .../knowledge/dataset-form/form-step2.vue     | 168 ------------------
 src/views/knowledge/dataset-form/index.vue    | 104 +++++++++++
 src/views/knowledge/dataset.vue               |  16 +-
 9 files changed, 340 insertions(+), 326 deletions(-)
 create mode 100644 src/views/knowledge/dataset-form/components/data-cut.vue
 create mode 100644 src/views/knowledge/dataset-form/components/data-document.vue
 create mode 100644 src/views/knowledge/dataset-form/components/data-embedding.vue
 create mode 100644 src/views/knowledge/dataset-form/components/data-import.vue
 delete mode 100644 src/views/knowledge/dataset-form/form-step1.vue
 delete mode 100644 src/views/knowledge/dataset-form/form-step2.vue
 create mode 100644 src/views/knowledge/dataset-form/index.vue

diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index 9d0a904..10cfda8 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -22,13 +22,13 @@
     >
       <el-button type="primary">
         <Icon icon="ep:upload-filled" />
-        选取文件
+        {{ props.drag ? '拖拽或' : ''}}选取文件
       </el-button>
       <template v-if="isShowTip" #tip>
-        <div style="font-size: 8px">
+        <div >
           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </div>
-        <div style="font-size: 8px">
+        <div >
           格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
         </div>
       </template>
diff --git a/src/views/knowledge/dataset-form/components/data-cut.vue b/src/views/knowledge/dataset-form/components/data-cut.vue
new file mode 100644
index 0000000..6dc7be6
--- /dev/null
+++ b/src/views/knowledge/dataset-form/components/data-cut.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {useTable} from "@/hooks/web/useTable";
+import {FormSchema} from "@/types/form";
+const tableRef = ref()
+const elTableRef = ref()
+const columns = [
+  {
+    label: '文档名称',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '字符数',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '切片内容',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '切片状态',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '切片时间',
+    field: 'text',
+  },
+  {
+    label: '操作',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  }
+]
+const {tableObject, register, tableMethods} = useTable()
+const schema = ref<FormSchema[]>([
+  {
+    label: '所属文档',
+    field: 'text',
+    component: 'Select',
+    componentProps: {
+      style: {
+        width: '150px'
+      }
+    }
+  }
+])
+const pagination = computed(() => {
+  return {
+    pageSize: tableObject.pageSize,
+    currentPage: tableObject.currentPage,
+    total: tableObject.total,
+  }
+})
+onMounted(() => {
+  register(tableRef.value, elTableRef.value)
+})
+</script>
+
+<template>
+<content-wrap>
+  <Search :schema="schema"/>
+</content-wrap>
+  <content-wrap>
+    <Table ref="tableRef" :pagination="pagination" :columns="columns"/>
+  </content-wrap>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/knowledge/dataset-form/components/data-document.vue b/src/views/knowledge/dataset-form/components/data-document.vue
new file mode 100644
index 0000000..2a41c1b
--- /dev/null
+++ b/src/views/knowledge/dataset-form/components/data-document.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {useTable} from "@/hooks/web/useTable";
+import {FormSchema} from "@/types/form";
+const tableRef = ref()
+const elTableRef = ref()
+const columns = [
+  {
+    label: '文档名称',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '文档链接',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '文档来源',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '切片数量',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '切片状态',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  },
+  {
+    label: '文件大小',
+    field: 'text',
+  },
+  {
+    label: '操作',
+    field: 'text',
+    key: 'text',
+    width: 200,
+  }
+]
+const {tableObject, register, tableMethods} = useTable()
+const schema = ref<FormSchema[]>([
+  {
+    label: '文档名称',
+    field: 'text',
+    component: 'Select',
+    componentProps: {
+      style: {
+        width: '150px'
+      }
+    }
+  }
+])
+const pagination = computed(() => {
+  return {
+    pageSize: tableObject.pageSize,
+    currentPage: tableObject.currentPage,
+    total: tableObject.total,
+  }
+})
+onMounted(() => {
+  register(tableRef.value, elTableRef.value)
+})
+</script>
+
+<template>
+  <content-wrap>
+    <Search :schema="schema"/>
+  </content-wrap>
+  <content-wrap>
+    <Table ref="tableRef" :pagination="pagination" :columns="columns"/>
+  </content-wrap>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/knowledge/dataset-form/components/data-embedding.vue b/src/views/knowledge/dataset-form/components/data-embedding.vue
new file mode 100644
index 0000000..9dfc8f8
--- /dev/null
+++ b/src/views/knowledge/dataset-form/components/data-embedding.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Management } from '@element-plus/icons-vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap wrap">
+    <el-card class="mb-20px ">
+      <template #header>
+        <el-button class="w-full">向量搜索</el-button>
+      </template>
+      <el-input rows="10"  type="textarea" />
+    </el-card>
+    <el-card v-for="index in 5" :key="index" class="mb-20px ">
+      <template #header>
+        <div class="flex items-center">
+            <el-icon class="mr-10px ">
+              <Management class="text-18px  color-[var(--el-color-primary)]"/>
+            </el-icon>
+           <span class="">首席信息</span>
+        </div>
+      </template>
+      <div class="inner"></div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrap {
+  &>div {
+    width: calc((100% - 40px) / 3);
+    margin-right: 20px;
+    &:nth-child(3n) {
+      margin-right: 0px;
+    }
+  }
+}
+.inner {
+  height: 220px;
+}
+.el-card:not(:first-child) {
+  background-color: mix(grey, #fff, 10%);
+}
+//div {
+//  display: grid;
+//  grid-template-columns: repeat(3, 1fr);
+//  gap: 20px;
+//}
+</style>
diff --git a/src/views/knowledge/dataset-form/components/data-import.vue b/src/views/knowledge/dataset-form/components/data-import.vue
new file mode 100644
index 0000000..18b9fde
--- /dev/null
+++ b/src/views/knowledge/dataset-form/components/data-import.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import {UploadFile} from '@/components/UploadFile'
+</script>
+
+<template>
+  <UploadFile drag />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/knowledge/dataset-form/form-step1.vue b/src/views/knowledge/dataset-form/form-step1.vue
deleted file mode 100644
index ef3579e..0000000
--- a/src/views/knowledge/dataset-form/form-step1.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <div class="upload-container">
-    <!-- 标题 -->
-    <div class="title">
-      <div>选择数据源</div>
-    </div>
-
-    <!-- 数据源选择 -->
-    <div class="resource-btn" >导入已有文本</div>
-
-    <!-- 上传文件区域 -->
-    <el-form>
-      <div class="upload-section">
-        <div class="upload-label">上传文本文件</div>
-        <el-upload
-          class="upload-area"
-          action="#"
-          :file-list="fileList"
-          :on-remove="handleRemove"
-          :before-upload="beforeUpload"
-          list-type="text"
-          drag
-        >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text">拖拽文件至此，或者 <em>选择文件</em></div>
-          <div class="el-upload__tip">
-            已支持 TXT、MARKDOWN、PDF、HTML、XLSX、XLS、DOCX、CSV、EML、MSG、PPTX、PPT、XML、EPUB，每个文件不超过 15MB。
-          </div>
-        </el-upload>
-      </div>
-
-      <!-- 下一步按钮 -->
-      <div class="next-button">
-        <el-button type="primary" :disabled="!fileList.length">下一步</el-button>
-      </div>
-    </el-form>
-
-    <!-- 知识库创建 -->
-    <div class="create-knowledge">
-      <el-link type="primary" underline>创建一个空知识库</el-link>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const fileList = ref([])
-
-const handleRemove = (file, fileList) => {
-  console.log(file, fileList)
-}
-
-const beforeUpload = (file) => {
-  fileList.value.push(file)
-  return false
-}
-</script>
-
-<style scoped lang="scss">
-.upload-container {
-  width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 1px solid #ebebeb;
-}
-
-.title {
-  font-size: 22px;
-  font-weight: bold;
-}
-
-.resource-btn {
-  margin-top: 20px;
-  border-radius: 10px;
-  cursor: pointer;
-  width: 150px;
-  border: 1.5px solid #528bff;
-  padding: 10px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 30px;
-  color: #101828;
-}
-
-.upload-section {
-  margin: 20px 0;
-  padding-top: 10px;
-}
-
-.upload-label {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: #303133;
-}
-
-.upload-area {
-  margin-top: 10px;
-  border: 1px dashed #d9d9d9;
-  padding: 40px;
-  text-align: center;
-  background-color: #f5f7fa;
-  border-radius: 8px;
-}
-
-.el-upload__text em {
-  color: #409eff;
-  cursor: pointer;
-}
-
-.el-upload__tip {
-  margin-top: 10px;
-  font-size: 12px;
-  color: #909399;
-}
-
-.next-button {
-  text-align: left;
-  margin-top: 20px;
-}
-
-.create-knowledge {
-  text-align: left;
-  margin-top: 20px;
-}
-
-.el-form-item {
-  margin-bottom: 0;
-}
-
-.source-radio-group {
-  display: flex;
-  justify-content: space-between;
-}
-
-.el-radio-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 10px 20px;
-}
-
-.el-radio-button .el-icon {
-  margin-right: 8px;
-}
-</style>
diff --git a/src/views/knowledge/dataset-form/form-step2.vue b/src/views/knowledge/dataset-form/form-step2.vue
deleted file mode 100644
index f8ca571..0000000
--- a/src/views/knowledge/dataset-form/form-step2.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <el-row>
-    <!-- Left Section -->
-    <el-col :span="12">
-      <el-card>
-        <!-- 分段设置 -->
-        <el-form>
-          <el-form-item label="分段设置">
-            <el-radio-group v-model="segmentSetting">
-              <el-radio label="自动分段与清洗">自动分段与清洗</el-radio>
-              <el-radio label="自定义">自定义</el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <!-- 索引方式 -->
-          <el-form-item label="索引方式">
-            <el-radio-group v-model="indexingMethod">
-              <el-radio label="高质量">高质量</el-radio>
-              <el-radio label="经济">经济</el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <!-- Embedding 模型 -->
-          <el-form-item label="Embedding 模型">
-            <el-select v-model="embeddingModel" placeholder="Select Embedding Model">
-              <el-option label="text-embedding-3-large" value="text-embedding-3-large"/>
-            </el-select>
-          </el-form-item>
-
-          <!-- 检索设置 -->
-          <el-form-item label="检索设置">
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>向量检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>全文检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-
-            <el-card style="width: 400px;">
-              <div class="card-header">
-                <span>混合检索</span>
-              </div>
-              <el-slider v-model="topK" :min="1" :max="10" label="Top K"/>
-              <el-slider v-model="scoreThreshold" :min="0" :max="1" step="0.1" label="Score 阈值"/>
-            </el-card>
-          </el-form-item>
-        </el-form>
-      </el-card>
-    </el-col>
-
-    <!-- Right Section: 分段预览 -->
-    <el-col :span="9">
-      <el-card shadow="never">
-        <div class="previews-title">分段预览</div>
-        <template v-for="(segment, index) in segmentPreviews" :key="index">
-          <div class="segment-preview">
-            <div class="title">
-              <div class="left">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25"
-                    stroke="#98A2B3" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                <span class="id">{{ segment.number }}</span>
-              </div>
-
-              <div class="right">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M4 3.5H8M6 3.5V8.5M3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V3.9C10.5 3.05992 10.5 2.63988 10.3365 2.31901C10.1927 2.03677 9.96323 1.8073 9.68099 1.66349C9.36012 1.5 8.94008 1.5 8.1 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5Z"
-                    stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                <span class="char-size">7777 字符</span>
-              </div>
-            </div>
-
-            <div class="content">{{ segment.text }}</div>
-          </div>
-        </template>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-
-// Reactive variables for form control
-const segmentSetting = ref('自动分段与清洗');
-const indexingMethod = ref('高质量');
-const embeddingModel = ref('text-embedding-3-large');
-const directionalSearch = ref(true);
-const topK = ref(3);
-const scoreThreshold = ref(0.5);
-
-// Mock data for segment previews
-const segmentPreviews = ref([
-  {number: '001', text: "同步obs模型...'UAE-large-V1'"},
-  {number: '002', text: "同步obs模型...'plip'"},
-  {number: '003', text: "同步obs模型...'phoBERT-base-v2'"},
-  {number: '004', text: "同步obs模型...'lama3-bb-bnb-4bit'"},
-  {number: '005', text: "同步obs模型...'t5-base-split-and-rephrase'"}
-]);
-</script>
-
-<style scoped lang="scss">
-/* Add any custom styles here */
-
-.previews-title {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.segment-preview {
-  background-color: rgba(228, 228, 228, 0.38);
-  border-radius: 10px;
-  padding: 15px;
-  margin-top: 15px;
-
-  .title {
-    display: flex;
-    justify-content: space-between;
-
-    .left {
-      border-right: 5px;
-      font-size: 13px;
-      font-style: italic;
-      font-weight: 500;
-      color: #676767;
-      box-sizing: border-box;
-      align-items: center;
-
-      .id {
-        margin-left: 5px;
-      }
-    }
-
-    .right {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .char-size {
-        margin-left: 5px;
-        font-size: 13px;
-        color: rgba(57, 57, 57, 0.66);
-      }
-    }
-  }
-
-  .content {
-    margin-top: 10px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-</style>
diff --git a/src/views/knowledge/dataset-form/index.vue b/src/views/knowledge/dataset-form/index.vue
new file mode 100644
index 0000000..73084e0
--- /dev/null
+++ b/src/views/knowledge/dataset-form/index.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import {useRoute, useRouter} from 'vue-router'
+import {CopyDocument, UploadFilled, Files, Document, Search} from '@element-plus/icons-vue'
+import DataCut from "@/views/knowledge/dataset-form/components/data-cut.vue";
+import DataImport from "@/views/knowledge/dataset-form/components/data-import.vue";
+import DataDocument from "@/views/knowledge/dataset-form/components/data-document.vue";
+import DataEmbedding from "@/views/knowledge/dataset-form/components/data-embedding.vue";
+const Route = useRoute()
+const Router = useRouter()
+const active = ref('1')
+const tabs = ref([
+  {
+    label: '数据导入',
+    name: '1',
+    icon: UploadFilled,
+    component: DataImport
+  },
+  {
+    label: '文档管理',
+    name: '2',
+    icon: CopyDocument,
+    component: DataDocument
+  },
+  {
+    label: '切片管理',
+    name: '3',
+    icon: Files,
+    component: DataCut
+  },
+  {
+    label: '向量搜索',
+    name: '4',
+    icon: Search,
+    component: DataEmbedding
+  }
+])
+</script>
+
+<template>
+  <div class="children flex">
+    <div class="flex flex-col mr-30px w-350px">
+      <el-button
+        class="w-full mb-10px" plain type="primary"
+        @click="Router.push({ path: '/ai/console/knowledge' })">知识库列表
+      </el-button>
+      <el-scrollbar class="flex-1">
+        <div class="py-20px flex items-center border-b-solid border-gray border-1 mb-10px">
+          <div
+            class="icon-bg bg-[var(--el-color-primary-light-7)] w-40px lh-40px text-center mr-10px">
+            <el-icon class="font-bold">
+              <Document/>
+            </el-icon>
+          </div>
+          <h3>本地测试</h3>
+        </div>
+        <el-form label-position="top">
+          <el-form-item label="知识库ID">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="关联向量数据库">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="关联向量化模型">
+            <el-input />
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+    </div>
+    <div class="flex-1">
+      <el-tabs v-model="active" class="h-full">
+        <el-tab-pane class="h-full" v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
+          <template #label>
+            <div class="flex items-center">
+              <el-icon class=" mr-5px">
+                <component :is="item.icon" />
+              </el-icon>
+              <span>{{item.label}}</span>
+            </div>
+          </template>
+          <el-scrollbar class="inner h-full overflow-y-auto">
+            <component :is="item.component" />
+          </el-scrollbar>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.children {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+  box-sizing: border-box;
+
+  & > div {
+    height: 100%;
+    background-color: #ffffff;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+}
+:deep(.el-scrollbar__view) {
+  height: 100%;
+}
+</style>
diff --git a/src/views/knowledge/dataset.vue b/src/views/knowledge/dataset.vue
index 4636a91..4614cf3 100644
--- a/src/views/knowledge/dataset.vue
+++ b/src/views/knowledge/dataset.vue
@@ -11,9 +11,12 @@
         </div>
       </el-card>
 
-      <el-card class="document-card" shadow="hover" v-for="index in 4" :key="index">
+      <el-card v-for="index in 4" :key="index" class="document-card" shadow="hover"
+               @click="toDataset(index)">
         <div class="document-header">
-          <el-icon><Folder /></el-icon>
+          <el-icon>
+            <Folder/>
+          </el-icon>
           <span>接口鉴权示例代码.md</span>
         </div>
         <div class="document-info">
@@ -45,9 +48,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { Folder, Plus } from '@element-plus/icons-vue'
+import {ref} from 'vue'
+import {Folder, Plus} from '@element-plus/icons-vue'
+import {useRouter} from "vue-router";
 
+const router = useRouter()
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(100) // 假设总共有100条数据
@@ -59,6 +64,9 @@ const handleSizeChange = (val) => {
 const handleCurrentChange = (val) => {
   console.log(`当前页: ${val}`)
 }
+const toDataset = (index) => {
+  router.push({path: '/ai/console/knowledge/' + index})
+}
 </script>
 
 <style scoped>

From eeb8d31f99af743728be86554384c7533f54e3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Wed, 19 Feb 2025 15:27:32 +0800
Subject: [PATCH 05/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

知识库列表，知识库数据页面
---
 src/views/knowledge/dataset-form/index.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/views/knowledge/dataset-form/index.vue b/src/views/knowledge/dataset-form/index.vue
index 73084e0..3938fc3 100644
--- a/src/views/knowledge/dataset-form/index.vue
+++ b/src/views/knowledge/dataset-form/index.vue
@@ -77,7 +77,7 @@ const tabs = ref([
               <span>{{item.label}}</span>
             </div>
           </template>
-          <el-scrollbar class="inner h-full overflow-y-auto">
+          <el-scrollbar class="inner overflow-y-auto">
             <component :is="item.component" />
           </el-scrollbar>
         </el-tab-pane>
@@ -98,7 +98,4 @@ const tabs = ref([
     box-sizing: border-box;
   }
 }
-:deep(.el-scrollbar__view) {
-  height: 100%;
-}
 </style>

From 2fd76aa5b9c398b970665b4d460b1c43662b02ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Thu, 27 Feb 2025 17:16:12 +0800
Subject: [PATCH 06/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

会话模型、向量模型、文生图模型接口对接
---
 src/api/new-ai/docs.ts                        |  61 ++++++
 src/api/new-ai/embed-store.ts                 | 101 ++++++++++
 src/api/new-ai/embedding.ts                   |  81 ++++++++
 src/api/new-ai/knowledge.ts                   |  40 ++++
 src/api/new-ai/model.ts                       |  40 ++++
 src/api/new-ai/slice.ts                       |  56 ++++++
 src/components/Form/src/Form.vue              |   5 +-
 .../ai/model/chatModel/composables/columns.ts |   6 +-
 .../ai/model/chatModel/composables/consts.ts  |   6 +
 src/views/ai/model/chatModel/edit.vue         |  49 ++++-
 src/views/ai/model/chatModel/index.vue        | 176 ++++++++----------
 .../ai/model/embedStore/composables/index.ts  |  70 ++++---
 src/views/ai/model/embedStore/edit.vue        | 146 +++++++++++++++
 src/views/ai/model/embedStore/index.vue       |  17 +-
 .../ai/model/embedding/composables/index.ts   |  69 ++++++-
 src/views/ai/model/embedding/edit.vue         |  47 ++++-
 src/views/ai/model/embedding/index.vue        |  21 ++-
 src/views/ai/model/image/composables/index.ts |  97 +++++++---
 src/views/ai/model/image/edit.vue             |  52 ++++--
 src/views/ai/model/image/index.vue            |  48 +++--
 .../dataset-form/components/data-cut.vue      |  63 ++++++-
 .../dataset-form/components/data-document.vue | 100 +++++++---
 src/views/knowledge/dataset-form/index.vue    |  51 +++--
 src/views/knowledge/dataset.vue               | 141 ++++++++------
 24 files changed, 1226 insertions(+), 317 deletions(-)
 create mode 100644 src/api/new-ai/docs.ts
 create mode 100644 src/api/new-ai/embed-store.ts
 create mode 100644 src/api/new-ai/embedding.ts
 create mode 100644 src/api/new-ai/knowledge.ts
 create mode 100644 src/api/new-ai/model.ts
 create mode 100644 src/api/new-ai/slice.ts
 create mode 100644 src/views/ai/model/embedStore/edit.vue

diff --git a/src/api/new-ai/docs.ts b/src/api/new-ai/docs.ts
new file mode 100644
index 0000000..d42e777
--- /dev/null
+++ b/src/api/new-ai/docs.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+// AI 文档 VO
+export interface DocsVO {
+  id: string
+  // TODO: Add other fields based on your data model
+}
+
+// AI 文档 API
+export const DocsApi = {
+  // 获得文档分页
+  async getDocsPage(params: any) {
+    return await request.get({ url: '/aigc/docs/page', params })
+  },
+
+  // 获得文档列表
+  async getDocsList(params: any) {
+    return await request.get({ url: '/aigc/docs/list', params })
+  },
+
+  // 获得文档详情
+  async getDocsById(id: string) {
+    return await request.get({ url: `/aigc/docs/${id}` })
+  },
+
+  // 创建文档
+  async addDocs(data: any) {
+    return await request.post({ url: '/aigc/docs', data })
+  },
+
+  // 更新文档
+  async updateDocs(data: any) {
+    return await request.put({ url: '/aigc/docs', data })
+  },
+
+  // 删除文档
+  async deleteDocs(id: string) {
+    return await request.delete({ url: `/aigc/docs/${id}` })
+  },
+
+  // 重新向量化
+  async reEmbedDocs(id: string) {
+    return await request.get({ url: `/aigc/embedding/re-embed/${id}` })
+  }
+}
diff --git a/src/api/new-ai/embed-store.ts b/src/api/new-ai/embed-store.ts
new file mode 100644
index 0000000..a67e929
--- /dev/null
+++ b/src/api/new-ai/embed-store.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+// AI 嵌入存储 VO
+export interface EmbedStoreVO {
+  id: string
+  // TODO: Add other fields based on your data model
+}
+
+// AI 嵌入存储 API
+export const EmbedStoreApi = {
+  // 获得嵌入存储列表
+  getEmbedStoreList: async (params: any) => {
+    return await request.get({ url: '/aigc/embed-store/list', params })
+  },
+
+  // 获得嵌入存储分页
+  getEmbedStorePage: async (params: any) => {
+    return await request.get({ url: '/aigc/embed-store/page', params })
+  },
+
+  // 获得嵌入存储详情
+  getEmbedStore: async (id: string) => {
+    return await request.get({ url: `/aigc/embed-store/${id}` })
+  },
+
+  // 创建嵌入存储
+  createEmbedStore: async (data: any) => {
+    return await request.post({ url: '/aigc/embed-store', data })
+  },
+
+  // 更新嵌入存储
+  updateEmbedStore: async (data: any) => {
+    return await request.put({ url: '/aigc/embed-store', data })
+  },
+
+  // 删除嵌入存储
+  deleteEmbedStore: async (id: string) => {
+    return await request.delete({ url: `/aigc/embed-store/${id}` })
+  }
+}
+// export function list(params: any) {
+//   return http.request({
+//     url: '/aigc/embed-store/list',
+//     method: 'get',
+//     params,
+//   });
+// }
+
+// export function page(params: any) {
+//   return http.request({
+//     url: '/aigc/embed-store/page',
+//     method: 'get',
+//     params,
+//   });
+// }
+
+// export function getById(id: string) {
+//   return http.request({
+//     url: `/aigc/embed-store/${id}`,
+//     method: 'get',
+//   });
+// }
+
+// export function add(params: any) {
+//   return http.request({
+//     url: '/aigc/embed-store',
+//     method: 'post',
+//     params,
+//   });
+// }
+
+// export function update(params: any) {
+//   return http.request({
+//     url: '/aigc/embed-store',
+//     method: 'put',
+//     params,
+//   });
+// }
+
+// export function del(id?: string) {
+//   return http.request({
+//     url: `/aigc/embed-store/${id}`,
+//     method: 'delete',
+//   });
+// }
diff --git a/src/api/new-ai/embedding.ts b/src/api/new-ai/embedding.ts
new file mode 100644
index 0000000..4a8326a
--- /dev/null
+++ b/src/api/new-ai/embedding.ts
@@ -0,0 +1,81 @@
+import request from '@/config/axios'
+import { AxiosProgressEvent } from 'axios'
+
+// AI 嵌入 API
+export const EmbeddingApi = {
+  // 文本嵌入
+  embeddingText: async (params: any) => {
+    return await request.post({ url: '/aigc/embedding/text', params })
+  },
+
+  // 嵌入搜索
+  embeddingSearch: async (data: any) => {
+    return await request.post({ url: '/aigc/embedding/search', data })
+  },
+
+  // 文档嵌入
+  embeddingDocs: async (
+    knowledgeId: string,
+    data: any,
+    onUploadProgress?: (progressEvent: AxiosProgressEvent) => void
+  ) => {
+    return await request.post({
+      url: `/aigc/embedding/docs/${knowledgeId}`,
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      onUploadProgress
+    })
+  }
+}
+// /*
+//  * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+//  *
+//  * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+//  * you may not use this file except in compliance with the License.
+//  * You may obtain a copy of the License at
+//  *
+//  *     https://www.gnu.org/licenses/agpl-3.0.html
+//  *
+//  * Unless required by applicable law or agreed to in writing, software
+//  * distributed under the License is distributed on an "AS IS" BASIS,
+//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  * See the License for the specific language governing permissions and
+//  * limitations under the License.
+//  */
+
+// import { http } from '@/utils/http/axios';
+// import { AxiosProgressEvent } from 'axios';
+
+// export function embeddingText(params: any) {
+//   return http.request({
+//     url: '/aigc/embedding/text',
+//     method: 'post',
+//     params,
+//   });
+// }
+
+// export function embeddingSearch(data: any) {
+//   return http.request({
+//     url: '/aigc/embedding/search',
+//     method: 'post',
+//     data,
+//   });
+// }
+
+// export function embeddingDocs(
+//   knowledgeId: string,
+//   data: any,
+//   onUploadProgress?: (progressEvent: AxiosProgressEvent) => void
+// ) {
+//   return http.request({
+//     url: `/aigc/embedding/docs/${knowledgeId}`,
+//     method: 'post',
+//     data,
+//     headers: {
+//       'Content-Type': 'multipart/form-data',
+//     },
+//     onUploadProgress,
+//   });
+// }
diff --git a/src/api/new-ai/knowledge.ts b/src/api/new-ai/knowledge.ts
new file mode 100644
index 0000000..755f834
--- /dev/null
+++ b/src/api/new-ai/knowledge.ts
@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+// AI 知识库 VO
+export interface KnowledgeVO {
+  id: string
+  // TODO: Add other fields based on your data model
+}
+
+// AI 知识库 API
+export const KnowledgeApi = {
+  // 获得知识库列表
+  getKnowledgeList: async (params: any) => {
+    return await request.get({ url: '/aigc/knowledge/list', params })
+  },
+
+  // 获得知识库分页
+  getKnowledgePage: async (params: any) => {
+    return await request.get({ url: '/aigc/knowledge/page', params })
+  },
+
+  // 获得知识库详情
+  getKnowledge: async (id: string) => {
+    return await request.get({ url: `/aigc/knowledge/${id}` })
+  },
+
+  // 创建知识库
+  createKnowledge: async (data: any) => {
+    return await request.post({ url: '/aigc/knowledge', data })
+  },
+
+  // 更新知识库
+  updateKnowledge: async (data: any) => {
+    return await request.put({ url: '/aigc/knowledge', data })
+  },
+
+  // 删除知识库
+  deleteKnowledge: async (id: string) => {
+    return await request.delete({ url: `/aigc/knowledge/${id}` })
+  }
+}
\ No newline at end of file
diff --git a/src/api/new-ai/model.ts b/src/api/new-ai/model.ts
new file mode 100644
index 0000000..2aefc33
--- /dev/null
+++ b/src/api/new-ai/model.ts
@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+// AI 模型 VO
+export interface ModelVO {
+  id: string
+  // TODO: Add other fields based on your data model
+}
+
+// AI 模型 API
+export const ModelApi = {
+  // 获得模型分页
+  getModelPage: async (params: any) => {
+    return await request.get({ url: '/chat/aigc/model/page', params })
+  },
+
+  // 获得模型列表
+  getModelList: async (params: any) => {
+    return await request.get({ url: '/chat/aigc/model/list', params })
+  },
+
+  // 获得模型详情
+  getModel: async (id: string) => {
+    return await request.get({ url: `/chat/aigc/model/${id}` })
+  },
+
+  // 创建模型
+  createModel: async (data: any) => {
+    return await request.post({ url: '/chat/aigc/model', data })
+  },
+
+  // 更新模型
+  updateModel: async (data: any) => {
+    return await request.put({ url: '/chat/aigc/model', data })
+  },
+
+  // 删除模型
+  deleteModel: async (id: string) => {
+    return await request.delete({ url: `/chat/aigc/model/${id}` })
+  }
+}
\ No newline at end of file
diff --git a/src/api/new-ai/slice.ts b/src/api/new-ai/slice.ts
new file mode 100644
index 0000000..bd7947e
--- /dev/null
+++ b/src/api/new-ai/slice.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+// AI 文档切片 VO
+export interface SliceVO {
+  id: string
+  // TODO: Add other fields based on your data model
+}
+
+// AI 文档切片 API
+export const SliceApi = {
+  // 获得切片分页
+  getSlicePage: async (params: any) => {
+    return await request.get({ url: '/aigc/docs/slice/page', params })
+  },
+
+  // 获得切片列表
+  getSliceList: async (params: any) => {
+    return await request.get({ url: '/aigc/docs/slice/list', params })
+  },
+
+  // 获得切片详情
+  getSlice: async (id: string) => {
+    return await request.get({ url: `/aigc/docs/slice/${id}` })
+  },
+
+  // 创建切片
+  createSlice: async (data: any) => {
+    return await request.post({ url: '/aigc/docs/slice', data })
+  },
+
+  // 更新切片
+  updateSlice: async (data: any) => {
+    return await request.put({ url: '/aigc/docs/slice', data })
+  },
+
+  // 删除切片
+  deleteSlice: async (id: string) => {
+    return await request.delete({ url: `/aigc/docs/slice/${id}` })
+  }
+}
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index c7d22dc..4d59f03 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -191,7 +191,7 @@ export default defineComponent({
       ) {
         slotsMap.default = () => renderOptions(item)
       }
-
+      
       const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
       // 如果有 labelMessage，自动使用插槽渲染
       if (item?.labelMessage) {
@@ -230,6 +230,7 @@ export default defineComponent({
               return slots[item.field] ? (
                 getSlot(slots, item.field, formModel.value)
               ) : (
+                <>
                 <Com
                   vModel={formModel.value[item.field]}
                   {...(autoSetPlaceholder && setTextPlaceholder(item))}
@@ -242,6 +243,8 @@ export default defineComponent({
                 >
                   {{ ...slotsMap }}
                 </Com>
+                </>
+                
               )
             }
           }}
diff --git a/src/views/ai/model/chatModel/composables/columns.ts b/src/views/ai/model/chatModel/composables/columns.ts
index 5a8f68f..d6d18f4 100644
--- a/src/views/ai/model/chatModel/composables/columns.ts
+++ b/src/views/ai/model/chatModel/composables/columns.ts
@@ -81,5 +81,9 @@ export function getColumns(provider: string) {
       return zhipuColumns;
     }
   }
-  return openaiColumns;
+  return [...openaiColumns, {
+    label: '操作',
+    field: 'action',
+    width: '150',
+  }];
 }
diff --git a/src/views/ai/model/chatModel/composables/consts.ts b/src/views/ai/model/chatModel/composables/consts.ts
index 0b003f5..3b11bc0 100644
--- a/src/views/ai/model/chatModel/composables/consts.ts
+++ b/src/views/ai/model/chatModel/composables/consts.ts
@@ -196,3 +196,9 @@ export const LLMProviders: any[] = [
     models: ['claude-3-opus', 'claude-3-opus-20240229', 'claude-3-sonnet', 'claude-3-haiku'],
   },
 ];
+export enum ModelTypeEnum {
+  CHAT = 'CHAT',
+  EMBEDDING = 'EMBEDDING',
+  TEXT_IMAGE = 'TEXT_IMAGE',
+  WEB_SEARCH = 'WEB_SEARCH',
+}
\ No newline at end of file
diff --git a/src/views/ai/model/chatModel/edit.vue b/src/views/ai/model/chatModel/edit.vue
index 603c534..6a74c4f 100644
--- a/src/views/ai/model/chatModel/edit.vue
+++ b/src/views/ai/model/chatModel/edit.vue
@@ -1,25 +1,55 @@
 <script setup lang="ts">
 import {Form} from '@/components/Form'
-import {ref} from 'vue'
+import {nextTick, ref} from 'vue'
 import {FormSchema} from "@/types/form";
 import {getSchemas} from "@/views/ai/model/chatModel/composables/schemas";
+import {ModelApi} from '@/api/new-ai/model';
+import {ElMessage} from 'element-plus';
 
+const emit = defineEmits(['reload'])
 const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
 const schemas = ref([])
+const isEdit = ref(false)
+const loading = ref(false)
+
 const close = () => {
+  formData.value = {}
   visible.value = false
-  formRef.value.clearForm()
+  schemas.value = []
+  nextTick(() => {
+    formRef.value?.clearForm()
+    formRef.value?.setSchema(schemas.value)
+  })
 }
-const show = async (data: object) => {
+
+const show = async (data: any = {}) => {
   visible.value = true
+  isEdit.value = !!data.id
   await nextTick()
   formRef.value.setValues(data)
-  schemas.value =  (getSchemas(data.provider) as FormSchema[]).splice(1);
+  schemas.value = getSchemas(data.provider).slice(1);
   formRef.value.setSchema(schemas.value)
-  // models.value = getModels(data.provider, LLMProviders)
 }
+
+const handleSubmit = async () => {
+  try {
+   
+    const form = formRef.value.getElFormRef()
+    await form.validate()
+    const values =  formRef.value.formModel
+    loading.value = true
+    const api = isEdit.value ? ModelApi.updateModel : ModelApi.createModel
+    await api(values).finally(() => loading.value = false)
+    ElMessage.success(isEdit.value ? '更新模型成功' : '创建模型成功');
+    close();
+    emit('reload');
+  } catch (error) {
+    console.error('Failed to save model:', error);
+  }
+}
+
 defineExpose({
   show,
   close
@@ -27,15 +57,14 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
-    <Form ref="formRef" :model="formData" :schema="schemas" />
+  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" draggable :title="isEdit ? '编辑模型' : '新增模型'" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas"/>
     <template #footer>
-      <el-button type="primary">确认</el-button>
-      <el-button @click="close">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
+      <el-button :loading="loading" @click="close">取消</el-button>
     </template>
   </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
 </style>
diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index dacbec3..aac7055 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -3,14 +3,12 @@
 import {Table} from '@/components/Table';
 import {Delete, Edit, Plus} from '@element-plus/icons-vue';
 import editCom from './edit.vue';
-import {computed, h, nextTick, reactive, ref} from 'vue';
-import {getColumns} from './composables/columns.ts';
-import {LLMProviders} from './composables/consts.ts';
-// import { del, list as getModels } from '@/api/aigc/model';
+import {computed, h, nextTick, reactive, ref, watch, onMounted} from 'vue';
+import {getColumns} from './composables/columns';
+import {LLMProviders, ModelTypeEnum} from './composables/consts';
+import {ModelApi} from '@/api/new-ai/model';
 import {ElMessage, ElMessageBox} from 'element-plus';
-import {FormSchema} from "@/types/form";
-// import { ModelTypeEnum } from '@/api/models';
-import {getModels, ProviderEnum} from './composables/provider.ts';
+import {getModels, ProviderEnum} from './composables/provider';
 
 const formData = ref({
   provider: ProviderEnum.OPENAI
@@ -19,129 +17,101 @@ const message = ElMessage;
 const dialog = ElMessageBox;
 const actionRef = ref();
 const editRef = ref();
-const tableData = ref([
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  },
-  {
-    name: '1111'
-  }, {
-    name: '1111'
-  },
-  {
-    name: '1111'
+const tableData = ref([]);
+const loading = ref(false);
+// 获取模型列表
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const res = await ModelApi.getModelList({
+      provider: formData.value.provider,
+      type: ModelTypeEnum.CHAT
+    }).finally(() => {
+      loading.value = false;
+    });
+    console.log(res)
+    tableData.value = res;
+  } catch (error) {
+    console.error('Failed to load models:', error);
+    message.error('获取模型列表失败');
   }
-])
-// const actionColumn = reactive({
-//   width: 100,
-//   title: '操作',
-//   key: 'action',
-//   fixed: 'right',
-//   align: 'center',
-//   render(record: any) {
-//     return h(TableAction as any, {
-//       style: 'text',
-//       actions: [
-//         {
-//           type: 'info',
-//           icon: Edit,
-//           onClick: handleEdit.bind(null, record),
-//         },
-//         {
-//           type: 'error',
-//           icon: Delete,
-//           onClick: handleDel.bind(null, record),
-//         },
-//       ],
-//     });
-//   },
-// });
+};
+
+// 监听 provider 变化重新加载数据
+watch(() => formData.value.provider, () => {
+  loadData();
+});
+
+// 初始加载
+onMounted(() => {
+  loadData();
+});
 
 const columns = computed(() => {
   nextTick();
   return getColumns(formData.value.provider);
 });
-// const loadDataTable = async (params: any) => {
-//   if (formData.value.provider === '') {
-//     formData.value.provider = LLMProviders[0].model;
-//   }
-//   return await getModels({ ...params, provider: formData.value.provider, type: ModelTypeEnum.CHAT });
-// };
 
 async function addModel() {
   console.log(formData.value.provider);
-  editRef.value.show({provider: formData.value.provider});
+  editRef.value.show({provider: formData.value.provider,   type: ModelTypeEnum.CHAT });
 }
 
 function handleEdit(record: any) {
   editRef.value.show(record);
 }
 
-function reloadTable() {
-  actionRef.value.reload();
+async function reloadTable() {
+  await loadData();
 }
 
-function handleDel(record: any) {
-  dialog.warning({
-    title: '警告',
-    message: `你确定删除 [${record.name}] 模型吗？删除之后不可再用该模型对话`,
+async function handleDel(record: any) {
+  dialog.confirm('确定要删除该模型吗？', '警告', {
     confirmButtonText: '确定',
-    cancelButtonText: '不确定',
+    cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    await del(record.id);
-    reloadTable();
-    message.success('模型删除成功');
+    try {
+      await ModelApi.deleteModel(record.id);
+      await reloadTable();
+      message.success('模型删除成功');
+    } catch (error) {
+      console.error('Failed to delete model:', error);
+      message.error('删除模型失败');
+    }
   }).catch(() => {
-    // 取消删除
   });
 }
 </script>
 
 <template>
-<!--  <content-wrap>-->
-<!--    <el-button v-for="(item,index) in LLMProviders" :key="index" @click="formData.provider = item.model">{{ item.name }}</el-button>-->
-<!--  </content-wrap>-->
   <ContentWrap>
-   <div class="flex children">
-     <el-scrollbar class="h-full w-300px pl-10px pr-20px">
-       <div
-         v-for="(item,index) in LLMProviders" :key="index"
-         :class="{active: formData.provider === item.model}" class="menu"
-         @click="formData.provider = item.model">
-         <span>{{ item.name }}</span>
-       </div>
-     </el-scrollbar>
-     <div class="h-full flex-1 px-20px">
-       <el-alert
-         class="w-full mb-10px min-alert"
-         title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
-         type="warning"
-         show-icon
-       />
-       <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
-       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
-       <editCom ref="editRef" @reload="reloadTable"/>
-     </div>
-   </div>
+    <div class="flex children">
+      <el-scrollbar class="h-full w-300px pl-10px pr-20px">
+        <div
+          v-for="(item,index) in LLMProviders" :key="index"
+          :class="{active: formData.provider === item.model}" class="menu"
+          @click="formData.provider = item.model">
+          <span>{{ item.name }}</span>
+        </div>
+      </el-scrollbar>
+      <div class="h-full flex-1 px-20px" v-loading="loading">
+        <el-alert
+          class="w-full mb-10px min-alert"
+          title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
+          type="warning"
+          show-icon
+        />
+        <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
+        <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false" >
+          <template #action="{row}">
+            <el-button text :icon="Edit" @click="handleEdit(row)"/>
+            <el-button text :icon="Delete" type="danger" @click="handleDel(row)"/>
+          </template> 
+        </Table>
+        <editCom ref="editRef" @reload="reloadTable"/>
+      </div>
+    </div>
   </ContentWrap>
 </template>
 
diff --git a/src/views/ai/model/embedStore/composables/index.ts b/src/views/ai/model/embedStore/composables/index.ts
index 1d5a2eb..90c66f8 100644
--- a/src/views/ai/model/embedStore/composables/index.ts
+++ b/src/views/ai/model/embedStore/composables/index.ts
@@ -1,20 +1,25 @@
 import {ref} from "vue";
 import {FormSchema} from "@/types/form";
 import {ElTag} from "element-plus";
+import {EmbedStoreApi} from "@/api/new-ai/embed-store";
 
 export enum ProviderEnum {
   Redis = 'REDIS',
   PgVector = 'PGVECTOR',
   Milvus = 'MILVUS',
 }
-
-
+export const ProviderConst = [
+  { label: 'Redis', value: ProviderEnum.Redis },
+  { label: 'PgVector', value: ProviderEnum.PgVector },
+  { label: 'Milvus', value: ProviderEnum.Milvus },
+];
 export default function () {
   const ProviderConst = [
     { label: 'Redis', value: ProviderEnum.Redis },
     { label: 'PgVector', value: ProviderEnum.PgVector },
     { label: 'Milvus', value: ProviderEnum.Milvus },
   ];
+  
   function getProviderLabel(value: any) {
     const arr = ProviderConst.filter((i) => i.value === value);
     if (arr === undefined || arr.length === 0) {
@@ -22,6 +27,7 @@ export default function () {
     }
     return arr[0].label;
   }
+  
   const shema = ref<FormSchema[]>([
     {
       label: '模型名称',
@@ -32,6 +38,7 @@ export default function () {
       },
     }
   ])
+  
   const columns = ref<object[]>([
     {
       label: '数据库别名',
@@ -59,7 +66,7 @@ export default function () {
       label: '向量纬度',
       field: 'dimension',
       align: 'center',
-      width: '80',
+      width: '100',
       render(row) {
         return h(
           ElTag,
@@ -76,7 +83,6 @@ export default function () {
       label: '数据库地址',
       field: 'host',
       align: 'center',
-      width: '110',
     },
     {
       label: '数据库端口',
@@ -85,32 +91,46 @@ export default function () {
       width: '100',
     },
     {
-      label: '数据库用户名',
-      field: 'username',
+      label: '数据库名称',
+      field: 'database',
       align: 'center',
     },
-    {
-      label: '数据库密码',
-      field: 'password',
-      align: 'center',
-    },
-    {
-      label: '数据库名',
-      field: 'databaseName',
-      align: 'center',
-    },
-    {
-      label: '表名称',
-      field: 'tableName',
-      align: 'center',
-    },
-  ])
+  ]);
+  
   const tableData = ref([])
+  const editRef = ref()
+  const searchParams = ref({})
+  
+  // 加载数据
+  const loadData = async () => {
+    try {
+      const res = await EmbedStoreApi.getEmbedStorePage(searchParams.value);
+      tableData.value = res.data.list;
+    } catch (error) {
+      console.error('Failed to load embed stores:', error);
+    }
+  }
+
+  // 打开编辑对话框
+  const open = () => {
+    editRef.value.show({});
+  }
+
+  // 处理搜索
+  const handleSearch = (values: any) => {
+    searchParams.value = values;
+    loadData();
+  }
+
   return {
-    ProviderConst,
-    getProviderLabel,
     shema,
     columns,
-    tableData
+    tableData,
+    editRef,
+    open,
+    loadData,
+    handleSearch,
+    ProviderConst,
+    getProviderLabel
   }
 }
diff --git a/src/views/ai/model/embedStore/edit.vue b/src/views/ai/model/embedStore/edit.vue
new file mode 100644
index 0000000..e0abcc8
--- /dev/null
+++ b/src/views/ai/model/embedStore/edit.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import {Form} from '@/components/Form'
+import {nextTick, ref} from 'vue'
+import {FormSchema} from "@/types/form";
+import {EmbedStoreApi} from "@/api/new-ai/embed-store";
+import {ElMessage} from "element-plus";
+import {ProviderConst} from './composables'
+
+const emit = defineEmits(['reload'])
+const visible = ref(false)
+const formData = ref({})
+const formRef = ref()
+const isEdit = ref(false)
+
+const schemas = ref<FormSchema[]>([
+  {
+    field: 'name',
+    label: '数据库别名',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+    }
+  },
+  {
+    field: 'provider',
+    label: '供应商',
+    component: 'Select',
+    componentProps: {
+      options: ProviderConst,
+    },
+    formItemProps: {
+      required: true,
+    }
+  },
+  {
+    field: 'dimension',
+    label: '向量纬度',
+    component: 'InputNumber',
+    formItemProps: {
+      required: true,
+    },
+    componentProps: {
+      min: 1,
+    },
+  },
+  {
+    field: 'host',
+    label: '数据库地址',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+    }
+  },
+  {
+    field: 'port',
+    label: '数据库端口',
+    component: 'InputNumber',
+    formItemProps: {
+      required: true,
+    },
+    componentProps: {
+      min: 1,
+      max: 65535,
+    },
+  },
+  {
+    field: 'database',
+    label: '数据库名称',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+    }
+  },
+  {
+    field: 'username',
+    label: '数据库用户名',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+    }
+  },
+  {
+    field: 'password',
+    label: '数据库密码',
+    component: 'Input',
+    componentProps: {
+      type: 'password',
+      showPassword: true,
+    },
+    formItemProps: {
+      required: true,
+    }
+  },
+])
+
+const close = () => {
+  visible.value = false
+  formRef.value.clearForm()
+}
+
+const show = async (data: any = {}) => {
+  visible.value = true
+  isEdit.value = !!data.id
+  await nextTick()
+  formRef.value.setValues(data)
+}
+
+const handleSubmit = async () => {
+  try {
+    const form = formRef.value.getElFormRef()
+    await form.validate()
+    const values = formRef.value.formModel
+    
+    if (isEdit.value) {
+      await EmbedStoreApi.updateEmbedStore(values);
+      ElMessage.success('更新向量数据库成功');
+    } else {
+      await EmbedStoreApi.createEmbedStore(values);
+      ElMessage.success('创建向量数据库成功');
+    }
+    close();
+    emit('reload');
+  } catch (error) {
+    console.error('Failed to save embed store:', error);
+    ElMessage.error(isEdit.value ? '更新向量数据库失败' : '创建向量数据库失败');
+  }
+}
+
+defineExpose({
+  show,
+  close
+})
+</script>
+
+<template>
+  <el-dialog v-model="visible" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas" />
+    <template #footer>
+      <el-button type="primary" @click="handleSubmit">确认</el-button>
+      <el-button @click="close">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/ai/model/embedStore/index.vue b/src/views/ai/model/embedStore/index.vue
index aedef94..1cb17e9 100644
--- a/src/views/ai/model/embedStore/index.vue
+++ b/src/views/ai/model/embedStore/index.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import {Plus} from "@element-plus/icons-vue";
 import {Table} from "@/components/Table";
+import {Search} from "@/components/Search";
 import useEmbedStore from './composables'
-const { shema, columns, tableData } = useEmbedStore()
+import Edit from './edit.vue'
+import { onMounted } from 'vue'
+
+const { shema, columns, tableData, editRef, open, loadData, handleSearch } = useEmbedStore()
+
+onMounted(() => {
+  loadData()
+})
 </script>
 
 <template>
   <content-wrap>
-    <Search :schema="shema"/>
+    <Search :schema="shema" @search="handleSearch" @reset="handleSearch"/>
   </content-wrap>
   <ContentWrap>
     <el-alert
@@ -16,8 +24,9 @@ const { shema, columns, tableData } = useEmbedStore()
       type="info"
       show-icon
     />
-    <el-button class="my-10px" type="primary" :icon="Plus">新增向量数据库</el-button>
-    <Table height="cacl(100% - 400px)" border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+    <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量数据库</el-button>
+    <Table height="calc(100% - 400px)" border :columns="columns" :data="tableData" :pagination="false"/>
+    <Edit ref="editRef" @reload="loadData" />
   </ContentWrap>
 </template>
 
diff --git a/src/views/ai/model/embedding/composables/index.ts b/src/views/ai/model/embedding/composables/index.ts
index 23a9d75..a6b14dd 100644
--- a/src/views/ai/model/embedding/composables/index.ts
+++ b/src/views/ai/model/embedding/composables/index.ts
@@ -1,12 +1,18 @@
-import {ElTag} from "element-plus";
-import {ref} from "vue";
+import {ref, watch} from "vue";
 import {ProviderEnum} from "@/views/ai/model/chatModel/composables/provider";
+import {ModelApi} from "@/api/new-ai/model";
+import {ElTag, ElMessageBox as dialog, ElMessage as message} from "element-plus";
+import { ModelTypeEnum } from "../../chatModel/composables/consts";
+
 
 export default function () {
-  const formData = ref({
-    provider: ProviderEnum.OPENAI
-  })
   const editRef = ref()
+  const formData = ref({
+    provider: ProviderEnum.OPENAI,
+    type: ModelTypeEnum.EMBEDDING
+  });
+  const tableData = ref([])
+
   const baseColumns = [
     {
       label: '模型别名',
@@ -19,7 +25,7 @@ export default function () {
     },
     {
       label: '向量纬度',
-     field: 'dimension',
+      field: 'dimension',
       align: 'center',
       width: '100',
       render(row) {
@@ -41,17 +47,60 @@ export default function () {
     {
       label: 'Base Url',
       field: 'baseUrl',
-    },
+    }, {label: '操作', field: 'action', width: 150}
   ];
-  const tableData = ref([])
+  
+  // 加载数据
+  const loadData = async () => {
+    try {
+      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.EMBEDDING });
+      tableData.value = res;
+    } catch (error) {
+      console.error('Failed to load embedding models:', error);
+    }
+  }
+
+  // 监听供应商变化
+  watch(() => formData.value.provider, () => {
+    loadData();
+  }, { immediate: true });
+
   const open = () => {
-    editRef.value.show({provider: formData.value.provider});
+    editRef.value.show({provider: formData.value.provider, type: ModelTypeEnum.EMBEDDING});
+  }
+  function handleEdit(record: any) {
+    editRef.value.show(record);
+  }
+  
+  async function reloadTable() {
+    await loadData();
+  }
+  
+  async function handleDel(record: any) {
+    dialog.confirm('确定要删除该模型吗？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(async () => {
+      try {
+        await ModelApi.deleteModel(record.id);
+        await reloadTable();
+        message.success('模型删除成功');
+      } catch (error) {
+        console.error('Failed to delete model:', error);
+        message.error('删除模型失败');
+      }
+    }).catch(() => {
+    });
   }
   return {
     baseColumns,
     tableData,
     formData,
     editRef,
-    open
+    open,
+    loadData,
+    handleDel,
+    handleEdit
   }
 }
diff --git a/src/views/ai/model/embedding/edit.vue b/src/views/ai/model/embedding/edit.vue
index c9c3be4..853b827 100644
--- a/src/views/ai/model/embedding/edit.vue
+++ b/src/views/ai/model/embedding/edit.vue
@@ -1,25 +1,59 @@
 <script setup lang="ts">
 import {Form} from '@/components/Form'
-import {ref} from 'vue'
+import {nextTick, ref} from 'vue'
 import {FormSchema} from "@/types/form";
 import {getSchemas} from "@/views/ai/model/embedding/composables/schemas";
+import {ModelApi} from "@/api/new-ai/model";
+import {ElMessage} from "element-plus";
 
+const emit = defineEmits(['reload'])
 const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
 const schemas = ref([])
+const isEdit = ref(false)
+
 const close = () => {
   visible.value = false
   formRef.value.clearForm()
+  formData.value = {}
+  schemas.value = []
+  nextTick(() => {
+    formRef.value?.clearForm()
+    formRef.value?.setSchema(schemas.value)
+  })
 }
-const show = async (data: object) => {
+
+const show = async (data: any = {}) => {
   visible.value = true
+  isEdit.value = !!data.id
   await nextTick()
   formRef.value.setValues(data)
-  schemas.value =  (getSchemas(data.provider) as FormSchema[]).splice(1);
+  schemas.value = getSchemas(data.provider).slice(1);
   formRef.value.setSchema(schemas.value)
-  // models.value = getModels(data.provider, LLMProviders)
 }
+
+const handleSubmit = async () => {
+  try {
+    const form = formRef.value.getElFormRef()
+    await form.validate()
+    const values = formRef.value.formModel
+    
+    if (isEdit.value) {
+      await ModelApi.updateModel(values);
+      ElMessage.success('更新向量模型成功');
+    } else {
+      await ModelApi.createModel(values);
+      ElMessage.success('创建向量模型成功');
+    }
+    close();
+    emit('reload');
+  } catch (error) {
+    console.error('Failed to save model:', error);
+    ElMessage.error(isEdit.value ? '更新向量模型失败' : '创建向量模型失败');
+  }
+}
+
 defineExpose({
   show,
   close
@@ -27,15 +61,14 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
+  <el-dialog v-model="visible" draggable :title="isEdit ? '编辑向量模型' : '新增向量模型'" width="800px" @close="close">
     <Form ref="formRef" :model="formData" :schema="schemas" />
     <template #footer>
-      <el-button type="primary">确认</el-button>
+      <el-button type="primary" @click="handleSubmit">确认</el-button>
       <el-button @click="close">取消</el-button>
     </template>
   </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
 </style>
diff --git a/src/views/ai/model/embedding/index.vue b/src/views/ai/model/embedding/index.vue
index f510bca..aaed469 100644
--- a/src/views/ai/model/embedding/index.vue
+++ b/src/views/ai/model/embedding/index.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-
-import {Plus} from "@element-plus/icons-vue";
+import {Plus, Delete, Edit} from "@element-plus/icons-vue";
 import usePage from './composables/index'
-import Edit from "@/views/ai/model/embedding/edit.vue";
+import EditCom from "@/views/ai/model/embedding/edit.vue";
 import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
 import {Table} from "@/components/Table";
-const { baseColumns: columns, tableData, formData, editRef, open} = usePage()
+
+const { baseColumns: columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel} = usePage()
+
+const handleReload = () => {
+  loadData()
+}
 </script>
 
 <template>
@@ -27,10 +31,15 @@ const { baseColumns: columns, tableData, formData, editRef, open} = usePage()
          show-icon
        />
        <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
-       <Table class="table-wrapper" height="100%"  border :columns="columns" :data="tableData.concat(tableData)" :pagination="false"/>
+       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false">
+        <template #action="{row}">
+            <el-button :icon="Edit" text @click="handleEdit(row)"/>
+            <el-button :icon="Delete" text type="danger" @click="handleDel(row)"/>
+          </template>
+       </Table>
      </div>
    </div>
-    <Edit ref="editRef" />
+    <EditCom ref="editRef" @reload="handleReload" />
   </ContentWrap>
 </template>
 
diff --git a/src/views/ai/model/image/composables/index.ts b/src/views/ai/model/image/composables/index.ts
index 4d4689e..d7550e1 100644
--- a/src/views/ai/model/image/composables/index.ts
+++ b/src/views/ai/model/image/composables/index.ts
@@ -1,51 +1,55 @@
+import {computed, nextTick, ref, watch} from "vue";
 import {ProviderEnum} from "@/views/ai/model/image/composables/consts";
+import {ModelApi} from "@/api/new-ai/model";
+import { ModelTypeEnum } from "../../chatModel/composables/consts";
+import {ElTag, ElMessageBox as dialog, ElMessage as message} from "element-plus";
 
 export default function () {
-
-  const editRef= ref()
+  const editRef = ref()
   const formData = ref({
     provider: ProviderEnum.OPENAI,
+    type: ModelTypeEnum.TEXT_IMAGE
   });
   const tableData = ref([])
 
-   const baseColumns = [
+  const baseColumns = [
     {
-     label: '模型别名',
-     field: 'name',
+      label: '模型别名',
+      field: 'name',
     },
     {
-     label: '模型版本',
-     field: 'model',
+      label: '模型版本',
+      field: 'model',
     },
   ];
 
-   const openaiColumns = [
+  const openaiColumns = [
     ...baseColumns,
     {
-     label: 'Api Key',
-     field: 'apiKey',
+      label: 'Api Key',
+      field: 'apiKey',
     },
   ];
 
-   const azureOpenaiColumns = [
+  const azureOpenaiColumns = [
     ...baseColumns,
     {
-     label: 'Api Key',
-     field: 'apiKey',
+      label: 'Api Key',
+      field: 'apiKey',
     },
     {
-     label: 'Endpoint',
-     field: 'endpoint',
+      label: 'Endpoint',
+      field: 'endpoint',
     },
     {
-     label: 'Deployment Name',
-     field: 'azureDeploymentName',
+      label: 'Deployment Name',
+      field: 'azureDeploymentName',
     },
   ];
 
-   const zhipuColumns = [...baseColumns];
+  const zhipuColumns = [...baseColumns];
+  
   function getColumns(provider: string) {
-    console.log(provider);
     switch (provider) {
       case ProviderEnum.OPENAI: {
         return openaiColumns;
@@ -56,21 +60,68 @@ export default function () {
       case ProviderEnum.ZHIPU: {
         return zhipuColumns;
       }
+      default: {
+        return baseColumns;
+      }
     }
-    return [];
   }
+
   const columns = computed(() => {
     nextTick();
-    return getColumns(formData.value.provider)
+    return [...getColumns(formData.value.provider), {label: '操作', field: 'action', width: 150}]
   });
+
+  // 加载数据
+  const loadData = async () => {
+    try {
+      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.TEXT_IMAGE });
+      tableData.value = res;
+    } catch (error) {
+      console.error('Failed to load image models:', error);
+    }
+  }
+
+  // 监听供应商变化
+  watch(() => formData.value.provider, () => {
+    loadData();
+  }, { immediate: true });
+
   const open = () => {
-    editRef.value.show({provider: formData.value.provider});
+    editRef.value.show({provider: formData.value.provider,  type: ModelTypeEnum.TEXT_IMAGE});
+  }
+  function handleEdit(record: any) {
+    editRef.value.show(record);
+  }
+  
+  async function reloadTable() {
+    await loadData();
+  }
+  
+  async function handleDel(record: any) {
+    dialog.confirm('确定要删除该模型吗？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(async () => {
+      try {
+        await ModelApi.deleteModel(record.id);
+        await reloadTable();
+        message.success('模型删除成功');
+      } catch (error) {
+        console.error('Failed to delete model:', error);
+        message.error('删除模型失败');
+      }
+    }).catch(() => {
+    });
   }
   return {
     columns,
     tableData,
     formData,
     editRef,
-    open
+    open,
+    loadData,
+    handleDel,
+    handleEdit
   }
 }
diff --git a/src/views/ai/model/image/edit.vue b/src/views/ai/model/image/edit.vue
index d3b9744..ee9a6ab 100644
--- a/src/views/ai/model/image/edit.vue
+++ b/src/views/ai/model/image/edit.vue
@@ -1,25 +1,55 @@
 <script setup lang="ts">
 import {Form} from '@/components/Form'
-import {ref} from 'vue'
+import {nextTick, ref} from 'vue'
 import {FormSchema} from "@/types/form";
 import {getSchemas} from "@/views/ai/model/image/composables/schemas";
+import {ModelApi} from "@/api/new-ai/model";
+import {ElMessage} from "element-plus";
 
+const emit = defineEmits(['reload'])
 const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
 const schemas = ref([])
+const isEdit = ref(false)
+const loading = ref(false)
+
 const close = () => {
+  formData.value = {}
   visible.value = false
-  formRef.value.clearForm()
+  schemas.value = []
+  nextTick(() => {
+    formRef.value?.clearForm()
+    formRef.value?.setSchema(schemas.value)
+  })
 }
-const show = async (data: object) => {
+
+const show = async (data: any = {}) => {
   visible.value = true
+  isEdit.value = !!data.id
   await nextTick()
   formRef.value.setValues(data)
-  schemas.value = (getSchemas(data.provider) as FormSchema[]);
-  // formRef.value.setSchema(schemas.value)
-  // models.value = getModels(data.provider, LLMProviders)
+  schemas.value = getSchemas(data.provider).slice(1);
+  formRef.value.setSchema(schemas.value)
 }
+
+const handleSubmit = async () => {
+  try {
+   
+    const form = formRef.value.getElFormRef()
+    await form.validate()
+    const values =  formRef.value.formModel
+    loading.value = true
+    const api = isEdit.value ? ModelApi.updateModel : ModelApi.createModel
+    await api(values).finally(() => loading.value = false)
+    ElMessage.success(isEdit.value ? '更新模型成功' : '创建模型成功');
+    close();
+    emit('reload');
+  } catch (error) {
+    console.error('Failed to save model:', error);
+  }
+}
+
 defineExpose({
   show,
   close
@@ -27,15 +57,13 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="visible" draggable title="编辑" width="800px" @close="close">
-    <Form ref="formRef" :model="formData" :schema="schemas" />
+  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" draggable :title="isEdit ? '编辑模型' : '新增模型'" width="800px" @close="close">
+    <Form ref="formRef" :model="formData" :schema="schemas"/>
     <template #footer>
-      <el-button type="primary">确认</el-button>
-      <el-button @click="close">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
+      <el-button :loading="loading" @click="close">取消</el-button>
     </template>
   </el-dialog>
 </template>
-
 <style scoped lang="scss">
-
 </style>
diff --git a/src/views/ai/model/image/index.vue b/src/views/ai/model/image/index.vue
index f402948..c55649e 100644
--- a/src/views/ai/model/image/index.vue
+++ b/src/views/ai/model/image/index.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 
-import {Plus} from "@element-plus/icons-vue";
+import {Delete, Plus, Edit } from "@element-plus/icons-vue";
 import usePage from './composables/index'
 import {LLMProviders} from "@/views/ai/model/image/composables/consts";
-import Edit from './edit.vue'
+import EditCom from './edit.vue'
+import {Table} from "@/components/Table";
 
-const {columns, tableData, formData, editRef, open} = usePage()
+const {columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel} = usePage()
+
+const handleReload = () => {
+  loadData()
+}
 </script>
 
 <template>
@@ -19,20 +24,26 @@ const {columns, tableData, formData, editRef, open} = usePage()
           <span>{{ item.name }}</span>
         </div>
       </el-scrollbar>
-      <div class="h-full  p-20px">
+      <div class="h-full p-20px">
         <el-alert
           class="w-full mb-10px min-alert"
           show-icon
           title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
           type="info"
         />
-        <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增向量模型
+        <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增图像模型
         </el-button>
-        <Table :columns="columns" :data="tableData.concat(tableData)" :pagination="false" border
-               class="table-wrapper" height="100%"/>
+        <Table
+          :columns="columns" :data="tableData" :pagination="false" border
+          class="table-wrapper" height="100%">
+          <template #action="{row}">
+            <el-button :icon="Edit" text @click="handleEdit(row)"/>
+            <el-button :icon="Delete" text type="danger" @click="handleDel(row)"/>
+          </template>
+        </Table>
       </div>
     </div>
-    <Edit ref="editRef"/>
+    <EditCom ref="editRef" @reload="handleReload"/>
   </ContentWrap>
 </template>
 
@@ -51,21 +62,18 @@ const {columns, tableData, formData, editRef, open} = usePage()
 }
 
 .menu {
-  transition: all .15s;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 6px;
   cursor: pointer;
-  padding: 12px 10px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-
-  &.active {
-    color: #ffffff;
-    background-color: var(--el-color-primary);
-  }
 
   &:hover {
-    &:not(&.active) {
-      background-color: var(--el-color-info-light-7);
-    }
+    background: var(--el-fill-color-light);
+  }
+
+  &.active {
+    background: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
   }
 }
 </style>
diff --git a/src/views/knowledge/dataset-form/components/data-cut.vue b/src/views/knowledge/dataset-form/components/data-cut.vue
index 6dc7be6..c4c4957 100644
--- a/src/views/knowledge/dataset-form/components/data-cut.vue
+++ b/src/views/knowledge/dataset-form/components/data-cut.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import {useTable} from "@/hooks/web/useTable";
 import {FormSchema} from "@/types/form";
+import {ref} from 'vue'
+import {SliceApi} from '@/api/new-ai/slice'
+import {ElMessage} from 'element-plus'
+
+const props = defineProps({
+  knowledgeData: {
+    type: Object,
+    required: true
+  }
+})
+
 const tableRef = ref()
 const elTableRef = ref()
 const columns = [
@@ -39,16 +50,36 @@ const columns = [
     width: 200,
   }
 ]
-const {tableObject, register, tableMethods} = useTable()
+const {tableObject, register, tableMethods} = useTable({
+  getListApi: async (params) => {
+    const res = await SliceApi.getSlicePage({
+      ...params,
+      knowledgeId: props.knowledgeData.id
+    })
+    return {
+      list: res.data.list || [],
+      total: res.data.total || 0
+    }
+  },
+  delListApi: async (ids) => {
+    await Promise.all(ids.map(id => SliceApi.deleteSlice(id)))
+    ElMessage.success('删除成功')
+  },
+  response: {
+    list: 'list',
+    total: 'total'
+  }
+})
 const schema = ref<FormSchema[]>([
   {
     label: '所属文档',
-    field: 'text',
+    field: 'docId',
     component: 'Select',
     componentProps: {
       style: {
         width: '150px'
-      }
+      },
+      placeholder: '请选择所属文档'
     }
   }
 ])
@@ -60,17 +91,29 @@ const pagination = computed(() => {
   }
 })
 onMounted(() => {
-  register(tableRef.value, elTableRef.value)
+  register(tableRef,elTableRef,)
 })
 </script>
 
 <template>
-<content-wrap>
-  <Search :schema="schema"/>
-</content-wrap>
-  <content-wrap>
-    <Table ref="tableRef" :pagination="pagination" :columns="columns"/>
-  </content-wrap>
+  <div>
+    <Table
+      ref="tableRef"
+      v-model:table="tableObject"
+      :columns="columns"
+      :schema="schema"
+      :label-width="100"
+      :search-table-height="true">
+      <template #action="{ row }">
+        <el-button
+          link
+          type="danger"
+          @click="tableMethods.delList([row.id], false)">
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/knowledge/dataset-form/components/data-document.vue b/src/views/knowledge/dataset-form/components/data-document.vue
index 2a41c1b..ca6f8a2 100644
--- a/src/views/knowledge/dataset-form/components/data-document.vue
+++ b/src/views/knowledge/dataset-form/components/data-document.vue
@@ -1,8 +1,20 @@
 <script setup lang="ts">
 import {useTable} from "@/hooks/web/useTable";
 import {FormSchema} from "@/types/form";
+import {ref} from 'vue'
+import {DocsApi} from '@/api/new-ai/docs'
+import {ElMessage, ElMessageBox} from 'element-plus'
+
+const props = defineProps({
+  knowledgeData: {
+    type: Object,
+    required: true
+  }
+})
+
 const tableRef = ref()
 const elTableRef = ref()
+
 const columns = [
   {
     label: '文档名称',
@@ -45,40 +57,86 @@ const columns = [
     width: 200,
   }
 ]
-const {tableObject, register, tableMethods} = useTable()
+
+const {tableObject, register, tableMethods} = useTable({
+  getListApi: async (params) => {
+    const res = await DocsApi.getDocsPage({
+      ...params,
+      knowledgeId: props.knowledgeData.id
+    })
+    return {
+      list: res.data.list || [],
+      total: res.data.total || 0
+    }
+  },
+  delListApi: async (ids) => {
+    await Promise.all(ids.map(id => DocsApi.deleteDocs(id)))
+    ElMessage.success('删除成功')
+  },
+  response: {
+    list: 'list',
+    total: 'total'
+  }
+})
+
 const schema = ref<FormSchema[]>([
   {
     label: '文档名称',
-    field: 'text',
-    component: 'Select',
+    field: 'name',
+    component: 'Input',
     componentProps: {
       style: {
         width: '150px'
-      }
+      },
+      placeholder: '请输入文档名称'
     }
   }
 ])
-const pagination = computed(() => {
-  return {
-    pageSize: tableObject.pageSize,
-    currentPage: tableObject.currentPage,
-    total: tableObject.total,
+
+// 重新向量化
+const handleReEmbed = async (row) => {
+  try {
+    await ElMessageBox.confirm('确认要重新向量化该文档吗？', '提示', {
+      type: 'warning'
+    })
+    await DocsApi.reEmbedDocs(row.id)
+    ElMessage.success('重新向量化成功')
+    tableMethods.getList()
+  } catch (error) {
+    console.error('Failed to re-embed:', error)
   }
-})
-onMounted(() => {
-  register(tableRef.value, elTableRef.value)
-})
+}
+
+// 注册表格
+register(tableRef as any ,elTableRef as any)
 </script>
 
 <template>
-  <content-wrap>
-    <Search :schema="schema"/>
-  </content-wrap>
-  <content-wrap>
-    <Table ref="tableRef" :pagination="pagination" :columns="columns"/>
-  </content-wrap>
+  <div>
+    <Table
+      ref="tableRef"
+      v-model:table="tableObject"
+      :columns="columns"
+      :schema="schema"
+      :label-width="100"
+      :search-table-height="true">
+      <template #action="{ row }">
+        <el-button
+          link
+          type="primary"
+          @click="handleReEmbed(row)">
+          重新向量化
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          @click="tableMethods.delList([row.id])">
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </div>
 </template>
 
-<style scoped lang="scss">
-
+<style scoped>
 </style>
diff --git a/src/views/knowledge/dataset-form/index.vue b/src/views/knowledge/dataset-form/index.vue
index 3938fc3..9bfb21b 100644
--- a/src/views/knowledge/dataset-form/index.vue
+++ b/src/views/knowledge/dataset-form/index.vue
@@ -1,13 +1,19 @@
 <script lang="ts" setup>
+import {ref, onMounted} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {CopyDocument, UploadFilled, Files, Document, Search} from '@element-plus/icons-vue'
 import DataCut from "@/views/knowledge/dataset-form/components/data-cut.vue";
 import DataImport from "@/views/knowledge/dataset-form/components/data-import.vue";
 import DataDocument from "@/views/knowledge/dataset-form/components/data-document.vue";
 import DataEmbedding from "@/views/knowledge/dataset-form/components/data-embedding.vue";
-const Route = useRoute()
-const Router = useRouter()
+import {KnowledgeApi} from '@/api/new-ai/knowledge'
+import {ElMessage} from 'element-plus'
+
+const route = useRoute()
+const router = useRouter()
 const active = ref('1')
+const knowledgeData = ref({})
+
 const tabs = ref([
   {
     label: '数据导入',
@@ -34,6 +40,23 @@ const tabs = ref([
     component: DataEmbedding
   }
 ])
+
+const loadKnowledge = async () => {
+  const id = route.query.id as string
+  if (id) {
+    try {
+      const res = await KnowledgeApi.getKnowledge(id)
+      knowledgeData.value = res.data
+    } catch (error) {
+      console.error('Failed to load knowledge:', error)
+      ElMessage.error('加载知识库失败')
+    }
+  }
+}
+
+onMounted(() => {
+  loadKnowledge()
+})
 </script>
 
 <template>
@@ -41,7 +64,7 @@ const tabs = ref([
     <div class="flex flex-col mr-30px w-350px">
       <el-button
         class="w-full mb-10px" plain type="primary"
-        @click="Router.push({ path: '/ai/console/knowledge' })">知识库列表
+        @click="router.push({ path: '/ai/console/knowledge' })">知识库列表
       </el-button>
       <el-scrollbar class="flex-1">
         <div class="py-20px flex items-center border-b-solid border-gray border-1 mb-10px">
@@ -86,16 +109,22 @@ const tabs = ref([
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .children {
   height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
-  box-sizing: border-box;
+}
 
-  & > div {
-    height: 100%;
-    background-color: #ffffff;
-    padding: 20px;
-    box-sizing: border-box;
-  }
+.icon-bg {
+  border-radius: 8px;
+}
+
+:deep(.el-tabs__nav) {
+  width: 100%;
+}
+
+:deep(.el-tabs__item) {
+  padding: 15px !important;
+  text-align: left;
+  width: 100%;
 }
 </style>
diff --git a/src/views/knowledge/dataset.vue b/src/views/knowledge/dataset.vue
index 4614cf3..5cf915a 100644
--- a/src/views/knowledge/dataset.vue
+++ b/src/views/knowledge/dataset.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="knowledge-base-container">
     <div class="card-container">
-      <el-card class="create-card" shadow="hover">
+      <el-card class="create-card" shadow="hover" @click="toDatasetForm">
         <div class="create-content">
           <el-icon class="create-icon"><Plus /></el-icon>
           <span class="create-text">创建知识库</span>
@@ -11,21 +11,21 @@
         </div>
       </el-card>
 
-      <el-card v-for="index in 4" :key="index" class="document-card" shadow="hover"
-               @click="toDataset(index)">
+      <el-card v-for="item in tableData" :key="item.id" class="document-card" shadow="hover"
+               @click="toDataset(item.id)">
         <div class="document-header">
           <el-icon>
             <Folder/>
           </el-icon>
-          <span>接口鉴权示例代码.md</span>
+          <span>{{ item.name }}</span>
         </div>
         <div class="document-info">
-          <el-tag size="small">1 文档</el-tag>
-          <el-tag size="small" type="info">5 千字符</el-tag>
-          <el-tag size="small" type="warning">0 关联应用</el-tag>
+          <el-tag size="small">{{ item.documentCount || 0 }} 文档</el-tag>
+          <el-tag size="small" type="info">{{ item.characterCount || 0 }} 千字符</el-tag>
+          <el-tag size="small" type="warning">{{ item.appCount || 0 }} 关联应用</el-tag>
         </div>
         <p class="document-description">
-          useful for when you want to answer queries about the 接口鉴权示例代码.md
+          {{ item.description || '暂无描述' }}
         </p>
       </el-card>
     </div>
@@ -47,94 +47,128 @@
   </div>
 </template>
 
-<script setup>
-import {ref} from 'vue'
-import {Folder, Plus} from '@element-plus/icons-vue'
-import {useRouter} from "vue-router";
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+import {Plus, Folder} from '@element-plus/icons-vue'
+import {useRouter} from 'vue-router'
+import {KnowledgeApi} from '@/api/new-ai/knowledge'
 
 const router = useRouter()
 const currentPage = ref(1)
 const pageSize = ref(10)
-const total = ref(100) // 假设总共有100条数据
+const total = ref(0)
+const tableData = ref([])
 
-const handleSizeChange = (val) => {
-  console.log(`每页 ${val} 条`)
+const loadData = async () => {
+  try {
+    const res = await KnowledgeApi.getKnowledgePage({
+      pageNo: currentPage.value,
+      pageSize: pageSize.value
+    })
+    tableData.value = res.data.list || []
+    total.value = res.data.total || 0
+  } catch (error) {
+    console.error('Failed to load knowledge list:', error)
+  }
 }
 
-const handleCurrentChange = (val) => {
-  console.log(`当前页: ${val}`)
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  loadData()
 }
-const toDataset = (index) => {
-  router.push({path: '/ai/console/knowledge/' + index})
+
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val
+  loadData()
 }
+
+const toDataset = (id: string) => {
+  router.push(`/ai/console/knowledge/${id}`)
+}
+
+const toDatasetForm = () => {
+  router.push('/ai/console/knowledge/1')
+}
+
+onMounted(() => {
+  loadData()
+})
 </script>
 
 <style scoped>
 .knowledge-base-container {
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  position: absolute;
   padding: 20px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  bottom: 40px;
-  width: 100%;
 }
 
 .card-container {
-  display: flex;
-  flex-wrap: wrap; /* Enable wrapping */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
-  margin-bottom: auto; /* Pushes pagination to the bottom */
-}
-
-.create-card, .document-card {
-  flex: 1 1 360px; /* Allow cards to grow and shrink */
-  min-width: 0;
-  max-width: 400px;
-  border-radius: 10px;
-  cursor: pointer;
+  margin-bottom: 20px;
 }
 
 .create-card {
-  background-color: rgba(168, 168, 168, 0.22);
+  cursor: pointer;
+  transition: all 0.3s;
 }
+
 .create-card:hover {
-  background-color: #fff;
+  transform: translateY(-5px);
 }
 
 .create-content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
+  justify-content: center;
+  padding: 20px 0;
 }
 
 .create-icon {
-  font-size: 24px;
-  color: #409EFF;
+  font-size: 40px;
+  color: var(--el-color-primary);
+  margin-bottom: 10px;
 }
 
 .create-text {
   font-size: 18px;
   font-weight: bold;
-  color: #303133;
+  color: var(--el-color-primary);
 }
 
 .create-footer {
+  text-align: center;
+  color: var(--el-text-color-secondary);
   font-size: 14px;
-  color: #909399;
-  line-height: 1.5;
+  padding: 10px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.document-card {
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.document-card:hover {
+  transform: translateY(-5px);
 }
 
 .document-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.document-header .el-icon {
+  margin-right: 8px;
+  font-size: 20px;
+  color: var(--el-color-primary);
+}
+
+.document-header span {
   font-size: 16px;
   font-weight: bold;
-  margin-bottom: 15px;
 }
 
 .document-info {
@@ -144,15 +178,16 @@ const toDataset = (index) => {
 }
 
 .document-description {
-  color: #606266;
+  color: var(--el-text-color-secondary);
   font-size: 14px;
-  line-height: 1.5;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .pagination-container {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
   display: flex;
   justify-content: center;
   margin-top: 20px;

From 25383d56c69f6bca27602948a61b08d715a17884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Thu, 27 Feb 2025 18:18:00 +0800
Subject: [PATCH 07/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

向量模型库接口对接
---
 src/api/new-ai/embed-store.ts                 | 28 ++----
 .../ai/model/embedStore/composables/index.ts  | 92 +++++++++++++------
 src/views/ai/model/embedStore/edit.vue        | 10 +-
 src/views/ai/model/embedStore/index.vue       | 24 +++--
 4 files changed, 89 insertions(+), 65 deletions(-)

diff --git a/src/api/new-ai/embed-store.ts b/src/api/new-ai/embed-store.ts
index a67e929..735112e 100644
--- a/src/api/new-ai/embed-store.ts
+++ b/src/api/new-ai/embed-store.ts
@@ -1,18 +1,4 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+
 
 import request from '@/config/axios'
 
@@ -26,32 +12,32 @@ export interface EmbedStoreVO {
 export const EmbedStoreApi = {
   // 获得嵌入存储列表
   getEmbedStoreList: async (params: any) => {
-    return await request.get({ url: '/aigc/embed-store/list', params })
+    return await request.get({ url: '/chat/aigc/embed-store/list', params })
   },
 
   // 获得嵌入存储分页
   getEmbedStorePage: async (params: any) => {
-    return await request.get({ url: '/aigc/embed-store/page', params })
+    return await request.get({ url: '/chat/aigc/embed-store/page', params })
   },
 
   // 获得嵌入存储详情
   getEmbedStore: async (id: string) => {
-    return await request.get({ url: `/aigc/embed-store/${id}` })
+    return await request.get({ url: `/chat/aigc/embed-store/${id}` })
   },
 
   // 创建嵌入存储
   createEmbedStore: async (data: any) => {
-    return await request.post({ url: '/aigc/embed-store', data })
+    return await request.post({ url: '/chat/aigc/embed-store', data })
   },
 
   // 更新嵌入存储
   updateEmbedStore: async (data: any) => {
-    return await request.put({ url: '/aigc/embed-store', data })
+    return await request.put({ url: '/chat/aigc/embed-store', data })
   },
 
   // 删除嵌入存储
   deleteEmbedStore: async (id: string) => {
-    return await request.delete({ url: `/aigc/embed-store/${id}` })
+    return await request.delete({ url: `/chat/aigc/embed-store/${id}` })
   }
 }
 // export function list(params: any) {
diff --git a/src/views/ai/model/embedStore/composables/index.ts b/src/views/ai/model/embedStore/composables/index.ts
index 90c66f8..ed689b8 100644
--- a/src/views/ai/model/embedStore/composables/index.ts
+++ b/src/views/ai/model/embedStore/composables/index.ts
@@ -2,24 +2,30 @@ import {ref} from "vue";
 import {FormSchema} from "@/types/form";
 import {ElTag} from "element-plus";
 import {EmbedStoreApi} from "@/api/new-ai/embed-store";
+import { useTable } from "@/hooks/web/useTable";
+import { TableColumn } from "@/types/table";
 
 export enum ProviderEnum {
   Redis = 'REDIS',
   PgVector = 'PGVECTOR',
   Milvus = 'MILVUS',
 }
+
 export const ProviderConst = [
   { label: 'Redis', value: ProviderEnum.Redis },
   { label: 'PgVector', value: ProviderEnum.PgVector },
   { label: 'Milvus', value: ProviderEnum.Milvus },
 ];
+
 export default function () {
+  const editRef = ref()
+  const searchParams = ref({});
   const ProviderConst = [
     { label: 'Redis', value: ProviderEnum.Redis },
     { label: 'PgVector', value: ProviderEnum.PgVector },
     { label: 'Milvus', value: ProviderEnum.Milvus },
   ];
-  
+
   function getProviderLabel(value: any) {
     const arr = ProviderConst.filter((i) => i.value === value);
     if (arr === undefined || arr.length === 0) {
@@ -27,10 +33,10 @@ export default function () {
     }
     return arr[0].label;
   }
-  
+
   const shema = ref<FormSchema[]>([
     {
-      label: '模型名称',
+      label: '数据库别名',
       field: 'name',
       component: 'Input',
       colProps: {
@@ -38,8 +44,8 @@ export default function () {
       },
     }
   ])
-  
-  const columns = ref<object[]>([
+
+  const columns = ref<TableColumn[]>([
     {
       label: '数据库别名',
       field: 'name',
@@ -67,7 +73,7 @@ export default function () {
       field: 'dimension',
       align: 'center',
       width: '100',
-      render(row) {
+      formatter(row) {
         return h(
           ElTag,
           {
@@ -83,6 +89,7 @@ export default function () {
       label: '数据库地址',
       field: 'host',
       align: 'center',
+      width: '110',
     },
     {
       label: '数据库端口',
@@ -91,46 +98,71 @@ export default function () {
       width: '100',
     },
     {
-      label: '数据库名称',
-      field: 'database',
+      label: '数据库用户名',
+      field: 'username',
       align: 'center',
     },
-  ]);
-  
-  const tableData = ref([])
-  const editRef = ref()
-  const searchParams = ref({})
-  
-  // 加载数据
-  const loadData = async () => {
-    try {
-      const res = await EmbedStoreApi.getEmbedStorePage(searchParams.value);
-      tableData.value = res.data.list;
-    } catch (error) {
-      console.error('Failed to load embed stores:', error);
+    {
+      label: '数据库密码',
+      field: 'password',
+      align: 'center',
+    },
+    {
+      label: '数据库名',
+      field: 'databaseName',
+      align: 'center',
+    },
+    {
+      label: '表名称',
+      field: 'tableName',
+      align: 'center',
+    },
+    {
+      label: '操作',
+      field: "action",
+      width: 150
     }
-  }
+  ]);
+
+  const {register, tableObject, methods} = useTable({
+    getListApi: EmbedStoreApi.getEmbedStorePage,
+    defaultParams: searchParams.value,
+    delListApi: EmbedStoreApi.deleteEmbedStore
+  });
+
+
 
   // 打开编辑对话框
-  const open = () => {
-    editRef.value.show({});
+  const open = (data?: any) => {
+    editRef.value.show(data);
   }
 
   // 处理搜索
   const handleSearch = (values: any) => {
-    searchParams.value = values;
-    loadData();
+    methods.setSearchParams(values)
   }
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+  const handleDel = () => {
 
+  }
   return {
     shema,
     columns,
-    tableData,
-    editRef,
+    register,
     open,
-    loadData,
     handleSearch,
     ProviderConst,
-    getProviderLabel
+    getProviderLabel,
+    methods,
+    tableObject,
+    pagination,
+    handleDel,
+    editRef
   }
 }
diff --git a/src/views/ai/model/embedStore/edit.vue b/src/views/ai/model/embedStore/edit.vue
index e0abcc8..634f8ca 100644
--- a/src/views/ai/model/embedStore/edit.vue
+++ b/src/views/ai/model/embedStore/edit.vue
@@ -11,7 +11,7 @@ const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
 const isEdit = ref(false)
-
+const loading = ref(false)
 const schemas = ref<FormSchema[]>([
   {
     field: 'name',
@@ -64,7 +64,7 @@ const schemas = ref<FormSchema[]>([
     },
   },
   {
-    field: 'database',
+    field: 'databaseName',
     label: '数据库名称',
     component: 'Input',
     formItemProps: {
@@ -133,11 +133,11 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="visible" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
+  <el-dialog v-model="visible" :close-on-click-modal="!loading" :close-on-press-escape="!loading" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
     <Form ref="formRef" :model="formData" :schema="schemas" />
     <template #footer>
-      <el-button type="primary" @click="handleSubmit">确认</el-button>
-      <el-button @click="close">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
+      <el-button @click="close" :loading="loading">取消</el-button>
     </template>
   </el-dialog>
 </template>
diff --git a/src/views/ai/model/embedStore/index.vue b/src/views/ai/model/embedStore/index.vue
index 1cb17e9..ab7a19c 100644
--- a/src/views/ai/model/embedStore/index.vue
+++ b/src/views/ai/model/embedStore/index.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import {Plus} from "@element-plus/icons-vue";
+import {Plus, Edit, Delete} from "@element-plus/icons-vue";
 import {Table} from "@/components/Table";
 import {Search} from "@/components/Search";
 import useEmbedStore from './composables'
-import Edit from './edit.vue'
-import { onMounted } from 'vue'
+import EditCom from './edit.vue'
+import { onMounted, ref } from 'vue'
+
+const { shema, columns, register, open, handleSearch,methods, tableObject, pagination, handleDel, editRef } = useEmbedStore()
 
-const { shema, columns, tableData, editRef, open, loadData, handleSearch } = useEmbedStore()
 
 onMounted(() => {
-  loadData()
+  methods?.getList()
 })
 </script>
 
@@ -17,16 +18,21 @@ onMounted(() => {
   <content-wrap>
     <Search :schema="shema" @search="handleSearch" @reset="handleSearch"/>
   </content-wrap>
-  <ContentWrap>
+  <ContentWrap v-loading="tableObject.loading">
     <el-alert
       class="w-full mb-10px min-alert"
       title="注意：请慎重修改模型的向量纬度参数（Dimension），此参数需要和向量库匹配（错误修改可能将影响已有的向量数据）"
       type="info"
       show-icon
     />
-    <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量数据库</el-button>
-    <Table height="calc(100% - 400px)" border :columns="columns" :data="tableData" :pagination="false"/>
-    <Edit ref="editRef" @reload="loadData" />
+    <el-button class="my-10px" type="primary" :icon="Plus" @click="open()">新增向量数据库</el-button>
+    <Table height="calc(100% - 400px)" border :data="tableObject.tableList" :columns="columns" :pagination="pagination" @register="register">
+      <template #action="{ row }">
+          <el-button type="primary" text :icon="Edit" @click="open(row)" />
+          <el-button type="danger" text :icon="Delete" @click="methods.delList(row.id, false)" />
+      </template>
+    </Table>
+    <EditCom ref="editRef" @reload="methods?.getList" />
   </ContentWrap>
 </template>
 

From 63278665336a05fcca284885858f260ab356a7f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Thu, 27 Feb 2025 18:26:11 +0800
Subject: [PATCH 08/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

向量模型库接口对接
---
 src/views/ai/model/chatModel/index.vue             |  4 ++--
 src/views/ai/model/embedStore/composables/index.ts | 11 ++++++++---
 src/views/ai/model/embedStore/index.vue            |  2 +-
 src/views/ai/model/embedding/composables/index.ts  |  7 ++++---
 src/views/ai/model/embedding/index.vue             |  4 ++--
 src/views/ai/model/image/composables/index.ts      |  9 +++++----
 src/views/ai/model/image/index.vue                 |  4 ++--
 7 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index aac7055..ef149ec 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -95,7 +95,7 @@ async function handleDel(record: any) {
           <span>{{ item.name }}</span>
         </div>
       </el-scrollbar>
-      <div class="h-full flex-1 px-20px" v-loading="loading">
+      <div class="h-full flex-1 px-20px" >
         <el-alert
           class="w-full mb-10px min-alert"
           title="对于完全适配OpenAI接口格式的模型都可在OpenAI中配置（只需要定义BaseUrl）"
@@ -103,7 +103,7 @@ async function handleDel(record: any) {
           show-icon
         />
         <el-button :icon="Plus" class="my-10px" type="primary" @click="addModel">新增模型</el-button>
-        <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false" >
+        <Table :loading="loading" class="table-wrapper" height="100%" border :columns="columns" :data="tableData" >
           <template #action="{row}">
             <el-button text :icon="Edit" @click="handleEdit(row)"/>
             <el-button text :icon="Delete" type="danger" @click="handleDel(row)"/>
diff --git a/src/views/ai/model/embedStore/composables/index.ts b/src/views/ai/model/embedStore/composables/index.ts
index ed689b8..a4947da 100644
--- a/src/views/ai/model/embedStore/composables/index.ts
+++ b/src/views/ai/model/embedStore/composables/index.ts
@@ -130,8 +130,6 @@ export default function () {
     delListApi: EmbedStoreApi.deleteEmbedStore
   });
 
-
-
   // 打开编辑对话框
   const open = (data?: any) => {
     editRef.value.show(data);
@@ -141,6 +139,7 @@ export default function () {
   const handleSearch = (values: any) => {
     methods.setSearchParams(values)
   }
+
   const pagination = computed(() => {
     return {
       total: tableObject.total,
@@ -148,9 +147,15 @@ export default function () {
       currentPage: tableObject.currentPage
     }
   })
-  const handleDel = () => {
 
+  const handleDel = async (id: string | number) => {
+    try {
+      await methods.delList(id, false);
+    } catch (error) {
+      console.error('Failed to delete embed store:', error);
+    }
   }
+
   return {
     shema,
     columns,
diff --git a/src/views/ai/model/embedStore/index.vue b/src/views/ai/model/embedStore/index.vue
index ab7a19c..0354929 100644
--- a/src/views/ai/model/embedStore/index.vue
+++ b/src/views/ai/model/embedStore/index.vue
@@ -29,7 +29,7 @@ onMounted(() => {
     <Table height="calc(100% - 400px)" border :data="tableObject.tableList" :columns="columns" :pagination="pagination" @register="register">
       <template #action="{ row }">
           <el-button type="primary" text :icon="Edit" @click="open(row)" />
-          <el-button type="danger" text :icon="Delete" @click="methods.delList(row.id, false)" />
+          <el-button type="danger" text :icon="Delete" @click="handleDel(row.id)" />
       </template>
     </Table>
     <EditCom ref="editRef" @reload="methods?.getList" />
diff --git a/src/views/ai/model/embedding/composables/index.ts b/src/views/ai/model/embedding/composables/index.ts
index a6b14dd..97cc98d 100644
--- a/src/views/ai/model/embedding/composables/index.ts
+++ b/src/views/ai/model/embedding/composables/index.ts
@@ -12,7 +12,7 @@ export default function () {
     type: ModelTypeEnum.EMBEDDING
   });
   const tableData = ref([])
-
+  const loading = ref(false)
   const baseColumns = [
     {
       label: '模型别名',
@@ -53,7 +53,7 @@ export default function () {
   // 加载数据
   const loadData = async () => {
     try {
-      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.EMBEDDING });
+      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.EMBEDDING }).finally(() => loading.value = false);
       tableData.value = res;
     } catch (error) {
       console.error('Failed to load embedding models:', error);
@@ -101,6 +101,7 @@ export default function () {
     open,
     loadData,
     handleDel,
-    handleEdit
+    handleEdit,
+    loading
   }
 }
diff --git a/src/views/ai/model/embedding/index.vue b/src/views/ai/model/embedding/index.vue
index aaed469..12eb8be 100644
--- a/src/views/ai/model/embedding/index.vue
+++ b/src/views/ai/model/embedding/index.vue
@@ -5,7 +5,7 @@ import EditCom from "@/views/ai/model/embedding/edit.vue";
 import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
 import {Table} from "@/components/Table";
 
-const { baseColumns: columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel} = usePage()
+const { baseColumns: columns, tableData, formData, editRef, open, loadData, loading,handleEdit, handleDel} = usePage()
 
 const handleReload = () => {
   loadData()
@@ -31,7 +31,7 @@ const handleReload = () => {
          show-icon
        />
        <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
-       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false">
+       <Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false" :loading="loading">
         <template #action="{row}">
             <el-button :icon="Edit" text @click="handleEdit(row)"/>
             <el-button :icon="Delete" text type="danger" @click="handleDel(row)"/>
diff --git a/src/views/ai/model/image/composables/index.ts b/src/views/ai/model/image/composables/index.ts
index d7550e1..44d42c9 100644
--- a/src/views/ai/model/image/composables/index.ts
+++ b/src/views/ai/model/image/composables/index.ts
@@ -1,4 +1,4 @@
-import {computed, nextTick, ref, watch} from "vue";
+import {computed, nextTick, onMounted, ref, watch} from "vue";
 import {ProviderEnum} from "@/views/ai/model/image/composables/consts";
 import {ModelApi} from "@/api/new-ai/model";
 import { ModelTypeEnum } from "../../chatModel/composables/consts";
@@ -11,7 +11,7 @@ export default function () {
     type: ModelTypeEnum.TEXT_IMAGE
   });
   const tableData = ref([])
-
+  const loading = ref(false)
   const baseColumns = [
     {
       label: '模型别名',
@@ -74,7 +74,7 @@ export default function () {
   // 加载数据
   const loadData = async () => {
     try {
-      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.TEXT_IMAGE });
+      const res = await ModelApi.getModelList({ provider: formData.value.provider, type: ModelTypeEnum.TEXT_IMAGE }).finally(() => loading.value = false);
       tableData.value = res;
     } catch (error) {
       console.error('Failed to load image models:', error);
@@ -122,6 +122,7 @@ export default function () {
     open,
     loadData,
     handleDel,
-    handleEdit
+    handleEdit,
+    loading,
   }
 }
diff --git a/src/views/ai/model/image/index.vue b/src/views/ai/model/image/index.vue
index c55649e..c8f4c46 100644
--- a/src/views/ai/model/image/index.vue
+++ b/src/views/ai/model/image/index.vue
@@ -6,7 +6,7 @@ import {LLMProviders} from "@/views/ai/model/image/composables/consts";
 import EditCom from './edit.vue'
 import {Table} from "@/components/Table";
 
-const {columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel} = usePage()
+const {columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel, loading} = usePage()
 
 const handleReload = () => {
   loadData()
@@ -34,7 +34,7 @@ const handleReload = () => {
         <el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增图像模型
         </el-button>
         <Table
-          :columns="columns" :data="tableData" :pagination="false" border
+          :columns="columns" :data="tableData" :loading="loading" border
           class="table-wrapper" height="100%">
           <template #action="{row}">
             <el-button :icon="Edit" text @click="handleEdit(row)"/>

From 05609d63c2bfa6b4e512167dbe7e8e047a770cbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Fri, 28 Feb 2025 17:38:36 +0800
Subject: [PATCH 09/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

知识库接口对接
---
 src/api/new-ai/docs.ts                        |  14 +-
 src/api/new-ai/embedding.ts                   |   6 +-
 src/api/new-ai/knowledge.ts                   |  12 +-
 src/api/new-ai/slice.ts                       |  12 +-
 src/views/knowledge/components/create.vue     | 103 ++++++++++++
 .../dataset-form/components/data-cut.vue      | 140 ++++++++--------
 .../dataset-form/components/data-document.vue | 149 ++++++++++--------
 .../components/data-embedding.vue             | 109 ++++++++-----
 .../dataset-form/components/data-import.vue   |  92 ++++++++++-
 .../dataset-form/components/edit-doc.vue      | 117 ++++++++++++++
 src/views/knowledge/dataset-form/index.vue    |  47 ++++--
 src/views/knowledge/dataset.vue               |  28 ++--
 12 files changed, 595 insertions(+), 234 deletions(-)
 create mode 100644 src/views/knowledge/components/create.vue
 create mode 100644 src/views/knowledge/dataset-form/components/edit-doc.vue

diff --git a/src/api/new-ai/docs.ts b/src/api/new-ai/docs.ts
index d42e777..4f88eaf 100644
--- a/src/api/new-ai/docs.ts
+++ b/src/api/new-ai/docs.ts
@@ -26,36 +26,36 @@ export interface DocsVO {
 export const DocsApi = {
   // 获得文档分页
   async getDocsPage(params: any) {
-    return await request.get({ url: '/aigc/docs/page', params })
+    return await request.get({ url: '/chat/aigc/docs/page', params })
   },
 
   // 获得文档列表
   async getDocsList(params: any) {
-    return await request.get({ url: '/aigc/docs/list', params })
+    return await request.get({ url: '/chat/aigc/docs/list', params })
   },
 
   // 获得文档详情
   async getDocsById(id: string) {
-    return await request.get({ url: `/aigc/docs/${id}` })
+    return await request.get({ url: `/chat/aigc/docs/${id}` })
   },
 
   // 创建文档
   async addDocs(data: any) {
-    return await request.post({ url: '/aigc/docs', data })
+    return await request.post({ url: '/chat/aigc/docs', data })
   },
 
   // 更新文档
   async updateDocs(data: any) {
-    return await request.put({ url: '/aigc/docs', data })
+    return await request.put({ url: '/chat/aigc/docs', data })
   },
 
   // 删除文档
   async deleteDocs(id: string) {
-    return await request.delete({ url: `/aigc/docs/${id}` })
+    return await request.delete({ url: `/chat/aigc/docs/${id}` })
   },
 
   // 重新向量化
   async reEmbedDocs(id: string) {
-    return await request.get({ url: `/aigc/embedding/re-embed/${id}` })
+    return await request.get({ url: `/chat/aigc/embedding/re-embed/${id}` })
   }
 }
diff --git a/src/api/new-ai/embedding.ts b/src/api/new-ai/embedding.ts
index 4a8326a..b0b064e 100644
--- a/src/api/new-ai/embedding.ts
+++ b/src/api/new-ai/embedding.ts
@@ -5,12 +5,12 @@ import { AxiosProgressEvent } from 'axios'
 export const EmbeddingApi = {
   // 文本嵌入
   embeddingText: async (params: any) => {
-    return await request.post({ url: '/aigc/embedding/text', params })
+    return await request.post({ url: '/chat/aigc/embedding/text', params })
   },
 
   // 嵌入搜索
   embeddingSearch: async (data: any) => {
-    return await request.post({ url: '/aigc/embedding/search', data })
+    return await request.post({ url: '/chat/aigc/embedding/search', data })
   },
 
   // 文档嵌入
@@ -20,7 +20,7 @@ export const EmbeddingApi = {
     onUploadProgress?: (progressEvent: AxiosProgressEvent) => void
   ) => {
     return await request.post({
-      url: `/aigc/embedding/docs/${knowledgeId}`,
+      url: `/chat/aigc/embedding/docs/${knowledgeId}`,
       data,
       headers: {
         'Content-Type': 'multipart/form-data'
diff --git a/src/api/new-ai/knowledge.ts b/src/api/new-ai/knowledge.ts
index 755f834..9a52ad2 100644
--- a/src/api/new-ai/knowledge.ts
+++ b/src/api/new-ai/knowledge.ts
@@ -10,31 +10,31 @@ export interface KnowledgeVO {
 export const KnowledgeApi = {
   // 获得知识库列表
   getKnowledgeList: async (params: any) => {
-    return await request.get({ url: '/aigc/knowledge/list', params })
+    return await request.get({ url: '/chat/aigc/knowledge/list', params })
   },
 
   // 获得知识库分页
   getKnowledgePage: async (params: any) => {
-    return await request.get({ url: '/aigc/knowledge/page', params })
+    return await request.get({ url: '/chat/aigc/knowledge/page', params })
   },
 
   // 获得知识库详情
   getKnowledge: async (id: string) => {
-    return await request.get({ url: `/aigc/knowledge/${id}` })
+    return await request.get({ url: `/chat/aigc/knowledge/${id}` })
   },
 
   // 创建知识库
   createKnowledge: async (data: any) => {
-    return await request.post({ url: '/aigc/knowledge', data })
+    return await request.post({ url: '/chat/aigc/knowledge', data })
   },
 
   // 更新知识库
   updateKnowledge: async (data: any) => {
-    return await request.put({ url: '/aigc/knowledge', data })
+    return await request.put({ url: '/chat/aigc/knowledge', data })
   },
 
   // 删除知识库
   deleteKnowledge: async (id: string) => {
-    return await request.delete({ url: `/aigc/knowledge/${id}` })
+    return await request.delete({ url: `/chat/aigc/knowledge/${id}` })
   }
 }
\ No newline at end of file
diff --git a/src/api/new-ai/slice.ts b/src/api/new-ai/slice.ts
index bd7947e..3680b99 100644
--- a/src/api/new-ai/slice.ts
+++ b/src/api/new-ai/slice.ts
@@ -26,31 +26,31 @@ export interface SliceVO {
 export const SliceApi = {
   // 获得切片分页
   getSlicePage: async (params: any) => {
-    return await request.get({ url: '/aigc/docs/slice/page', params })
+    return await request.get({ url: '/chat/aigc/docs/slice/page', params })
   },
 
   // 获得切片列表
   getSliceList: async (params: any) => {
-    return await request.get({ url: '/aigc/docs/slice/list', params })
+    return await request.get({ url: '/chat/aigc/docs/slice/list', params })
   },
 
   // 获得切片详情
   getSlice: async (id: string) => {
-    return await request.get({ url: `/aigc/docs/slice/${id}` })
+    return await request.get({ url: `/chat/aigc/docs/slice/${id}` })
   },
 
   // 创建切片
   createSlice: async (data: any) => {
-    return await request.post({ url: '/aigc/docs/slice', data })
+    return await request.post({ url: '/chat/aigc/docs/slice', data })
   },
 
   // 更新切片
   updateSlice: async (data: any) => {
-    return await request.put({ url: '/aigc/docs/slice', data })
+    return await request.put({ url: '/chat/aigc/docs/slice', data })
   },
 
   // 删除切片
   deleteSlice: async (id: string) => {
-    return await request.delete({ url: `/aigc/docs/slice/${id}` })
+    return await request.delete({ url: `/chat/aigc/docs/slice/${id}` })
   }
 }
diff --git a/src/views/knowledge/components/create.vue b/src/views/knowledge/components/create.vue
new file mode 100644
index 0000000..d4afe82
--- /dev/null
+++ b/src/views/knowledge/components/create.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-dialog v-model="visible" title="创建知识库" width="800px" :close-on-click-modal="!loading" :close-on-press-escape="!loading" @close="handleClose">
+    <Form :schema="formSchemas" v-if="visible"  :model="formData" ref="formRef"  @register="register"/>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { FormSchema } from '@/types/form';
+import {Form} from '@/components/Form'
+import { useForm } from '@/hooks/web/useForm';
+import { ref } from 'vue';
+import { KnowledgeApi } from '@/api/new-ai/knowledge';
+import { ElMessage } from 'element-plus';
+
+const { register, methods, elFormRef } = useForm();
+const visible = ref(false);
+const loading = ref(false);
+const formRef = ref();
+const formData = ref({})
+const emits = defineEmits(['reload'])
+const handleSubmit = async () => {
+ 
+  try {
+    await elFormRef.value?.validate()
+    const data = await methods.getFormData();
+    loading.value = true;
+    await KnowledgeApi.createKnowledge(data).finally(() => loading.value = false);
+    ElMessage.success('创建成功');
+    handleClose();
+    emits('reload');
+  } catch (error) {
+    console.error('创建失败:', error);
+    ElMessage.error('创建失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleClose = () => {
+  visible.value = false;
+  nextTick(() => {
+    formRef.value?.clearForm()
+    formRef.value?.setSchema([])
+  })
+};
+
+const formSchemas = computed(() => [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '知识库名称',
+    componentProps: {
+      placeholder: '请输入知识库名称',
+    },
+    formItemProps: {
+      rules: [{ required: true, message: '请输入知识库名称', trigger: ['blur'] }],
+    }
+  },
+  {
+    field: 'embedStoreId',
+    label: '向量数据库',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请选择关联向量数据库', trigger: ['blur'] }],
+    }
+  },
+  {
+    field: 'embedModelId',
+    label: '向量模型',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请选择关联向量模型', trigger: ['blur'] }],
+    }
+  },
+  {
+    field: 'des',
+    component: 'Input',
+    label: '知识库描述',
+    componentProps: {
+      placeholder: '请输入知识库描述',
+      type: 'textarea',
+      autosize: {
+        minRows: 3,
+        maxRows: 3,
+      },
+    },
+   formItemProps: {
+    rules: [{ required: true, message: '请输入知识库描述', trigger: ['blur'] }],
+   }
+  },
+]) 
+const open = async () => {
+    visible.value = true;
+  }
+// 对外暴露方法
+defineExpose({
+  open
+});
+</script>
+<script></script>
\ No newline at end of file
diff --git a/src/views/knowledge/dataset-form/components/data-cut.vue b/src/views/knowledge/dataset-form/components/data-cut.vue
index c4c4957..41eb088 100644
--- a/src/views/knowledge/dataset-form/components/data-cut.vue
+++ b/src/views/knowledge/dataset-form/components/data-cut.vue
@@ -1,121 +1,117 @@
 <script setup lang="ts">
-import {useTable} from "@/hooks/web/useTable";
-import {FormSchema} from "@/types/form";
-import {ref} from 'vue'
-import {SliceApi} from '@/api/new-ai/slice'
-import {ElMessage} from 'element-plus'
-
-const props = defineProps({
-  knowledgeData: {
-    type: Object,
-    required: true
-  }
-})
+import { useTable } from '@/hooks/web/useTable'
+import { FormSchema } from '@/types/form'
+import { ref } from 'vue'
+import { SliceApi } from '@/api/new-ai/slice'
+import { ElMessage, ElTag } from 'element-plus'
+import { DocsApi } from '@/api/new-ai/docs'
+import { Delete } from '@element-plus/icons-vue'
 
 const tableRef = ref()
-const elTableRef = ref()
+const docsList = ref([])
 const columns = [
   {
     label: '文档名称',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'name',
+    width: 200
   },
   {
     label: '字符数',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'wordNum',
+    width: 200
   },
   {
     label: '切片内容',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'content',
+    width: 200
   },
   {
     label: '切片状态',
-    field: 'text',
-    key: 'text',
+    field: 'status',
     width: 200,
+    formatter(row) {
+      return h(
+        ElTag,
+        {
+          size: 'small',
+          type: row.status == true ? 'success' : 'info'
+        },
+        {
+          default: () => (row.status == true ? '已训练' : '未训练')
+        }
+      )
+    }
   },
   {
     label: '切片时间',
-    field: 'text',
+    field: 'createTime'
   },
   {
     label: '操作',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'action',
+    width: 200
   }
 ]
-const {tableObject, register, tableMethods} = useTable({
-  getListApi: async (params) => {
-    const res = await SliceApi.getSlicePage({
-      ...params,
-      knowledgeId: props.knowledgeData.id
-    })
-    return {
-      list: res.data.list || [],
-      total: res.data.total || 0
-    }
+const { tableObject, register, tableMethods } = useTable({
+  getListApi: SliceApi.getSlicePage,
+  delListApi: SliceApi.deleteSlice,
+  defaultParams: {
+    knowledgeId: useRoute().params.id
   },
-  delListApi: async (ids) => {
-    await Promise.all(ids.map(id => SliceApi.deleteSlice(id)))
-    ElMessage.success('删除成功')
-  },
-  response: {
-    list: 'list',
-    total: 'total'
-  }
 })
-const schema = ref<FormSchema[]>([
-  {
-    label: '所属文档',
-    field: 'docId',
-    component: 'Select',
-    componentProps: {
-      style: {
-        width: '150px'
-      },
-      placeholder: '请选择所属文档'
+const schema = computed(() => {
+  return [
+    {
+      label: '所属文档',
+      field: 'docId',
+      component: 'Select',
+      componentProps: {
+        style: {
+          width: '150px'
+        },
+        placeholder: '请选择所属文档',
+        options: docsList.value.map((item: any) => {
+          return {
+            label: item.name,
+            value: item.id
+          }
+        })
+      }
     }
-  }
-])
+  ]
+})
 const pagination = computed(() => {
   return {
     pageSize: tableObject.pageSize,
     currentPage: tableObject.currentPage,
-    total: tableObject.total,
+    total: tableObject.total
   }
 })
-onMounted(() => {
-  register(tableRef,elTableRef,)
+onMounted(async () => {
+  tableMethods.getList()
 })
 </script>
 
 <template>
   <div>
+    <Search :schema="schema" @search="tableMethods.getList()" />
     <Table
+      class="mt-20px"
       ref="tableRef"
-      v-model:table="tableObject"
+      border
+      :data="tableObject.tableList"
       :columns="columns"
       :schema="schema"
       :label-width="100"
-      :search-table-height="true">
+      :pagination="pagination"
+      @register="register"
+      :search-table-height="true"
+    >
       <template #action="{ row }">
-        <el-button
-          link
-          type="danger"
-          @click="tableMethods.delList([row.id], false)">
-          删除
-        </el-button>
+        <el-button text :icon="Delete" type="danger" @click="tableMethods.delList(row.id, false)" />
       </template>
     </Table>
   </div>
 </template>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/knowledge/dataset-form/components/data-document.vue b/src/views/knowledge/dataset-form/components/data-document.vue
index ca6f8a2..b3cd144 100644
--- a/src/views/knowledge/dataset-form/components/data-document.vue
+++ b/src/views/knowledge/dataset-form/components/data-document.vue
@@ -1,84 +1,93 @@
 <script setup lang="ts">
-import {useTable} from "@/hooks/web/useTable";
-import {FormSchema} from "@/types/form";
-import {ref} from 'vue'
-import {DocsApi} from '@/api/new-ai/docs'
-import {ElMessage, ElMessageBox} from 'element-plus'
-
-const props = defineProps({
-  knowledgeData: {
-    type: Object,
-    required: true
-  }
-})
-
+import { useTable } from '@/hooks/web/useTable'
+import { FormSchema } from '@/types/form'
+import { ref } from 'vue'
+import { DocsApi } from '@/api/new-ai/docs'
+import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+import { Refresh, Delete, Edit } from '@element-plus/icons-vue'
+import EditDoc from './edit-doc.vue'
+const editDocRef = ref()
+const route = useRoute()
 const tableRef = ref()
-const elTableRef = ref()
-
 const columns = [
   {
     label: '文档名称',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'name',
+    width: 200
   },
   {
     label: '文档链接',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'url',
+    width: 200
   },
   {
     label: '文档来源',
-    field: 'text',
-    key: 'text',
+    field: 'type',
     width: 200,
+    formatter(row) {
+      return h(
+        ElTag,
+        {
+          size: 'small',
+          type: row.type == 'UPLOAD' ? 'success' : 'info',
+        },
+        {
+          default: () => (row.type == 'UPLOAD' ? '上传' : '录入'),
+        }
+      );
+    },
   },
   {
     label: '切片数量',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'sliceNum',
+    width: 200
   },
   {
     label: '切片状态',
-    field: 'text',
-    key: 'text',
+    field: 'status',
     width: 200,
+    formatter(row) {
+      return h(
+        ElTag,
+        {
+          size: 'small',
+          type: row.sliceStatus == true ? 'success' : 'info',
+        },
+        {
+          default: () => (row.sliceStatus == true ? '已训练' : '未训练'),
+        }
+      );
+    },
   },
   {
     label: '文件大小',
-    field: 'text',
+    field: 'size',
+    formatter(rowData) {
+      return (Number(rowData.size) / 1000000).toFixed(2) + ' MB';
+    }
   },
   {
     label: '操作',
-    field: 'text',
-    key: 'text',
-    width: 200,
+    field: 'action',
+    width: 200
   }
 ]
 
-const {tableObject, register, tableMethods} = useTable({
-  getListApi: async (params) => {
-    const res = await DocsApi.getDocsPage({
-      ...params,
-      knowledgeId: props.knowledgeData.id
-    })
-    return {
-      list: res.data.list || [],
-      total: res.data.total || 0
-    }
-  },
-  delListApi: async (ids) => {
-    await Promise.all(ids.map(id => DocsApi.deleteDocs(id)))
-    ElMessage.success('删除成功')
-  },
-  response: {
-    list: 'list',
-    total: 'total'
+const { tableObject, register, tableMethods } = useTable({
+  getListApi: DocsApi.getDocsPage,
+  delListApi: DocsApi.deleteDocs,
+  defaultParams: {
+    knowledgeId: route.params.id
+  }
+})
+const pagination = computed(() => {
+  return {
+    total: tableObject.total,
+    pageSize: tableObject.pageSize,
+    currentPage: tableObject.currentPage
   }
 })
-
 const schema = ref<FormSchema[]>([
   {
     label: '文档名称',
@@ -106,37 +115,37 @@ const handleReEmbed = async (row) => {
     console.error('Failed to re-embed:', error)
   }
 }
-
-// 注册表格
-register(tableRef as any ,elTableRef as any)
+const openEdit = (row) => {
+  editDocRef.value.show(route.params.id, row.id) // docId可选，用于编辑模式
+}
+onMounted(() => {
+  tableMethods.getList()
+})
 </script>
 
 <template>
   <div>
+    <Search :schema="schema" @search="tableMethods.getList()" />
     <Table
+      class="mt-20px"
       ref="tableRef"
-      v-model:table="tableObject"
+      border
+      :data="tableObject.tableList"
       :columns="columns"
       :schema="schema"
       :label-width="100"
-      :search-table-height="true">
+      :pagination="pagination"
+      :search-table-height="true"
+      @register="register"
+    >
       <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
-          @click="handleReEmbed(row)">
-          重新向量化
-        </el-button>
-        <el-button
-          link
-          type="danger"
-          @click="tableMethods.delList([row.id])">
-          删除
-        </el-button>
+        <el-button text type="primary" :icon="Refresh" @click="handleReEmbed(row)" />
+        <el-button text type="primary" :icon="Edit" @click="openEdit(row)" />
+        <el-button text :icon="Delete" type="danger" @click="tableMethods.delList(row.id, false)" />
       </template>
     </Table>
+    <edit-doc ref="editDocRef" @reload="tableMethods.getList()" />
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/knowledge/dataset-form/components/data-embedding.vue b/src/views/knowledge/dataset-form/components/data-embedding.vue
index 9dfc8f8..30a420d 100644
--- a/src/views/knowledge/dataset-form/components/data-embedding.vue
+++ b/src/views/knowledge/dataset-form/components/data-embedding.vue
@@ -1,48 +1,79 @@
-<script setup lang="ts">
-import { Management } from '@element-plus/icons-vue'
+
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Document } from '@element-plus/icons-vue'
+import { EmbeddingApi } from '@/api/new-ai/embedding'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+const { embeddingSearch, embeddingText } = EmbeddingApi
+const route = useRoute()
+const content = ref('')
+const loading = ref(false)
+const list = ref<any>([])
+
+async function onSearch(flag = false) {
+  if (content.value === '' && flag) {
+    list.value = []
+    ElMessage.warning('请先输入搜索内容')
+    return
+  }
+  loading.value = true
+  try {
+    list.value = await embeddingSearch({
+      content: content.value,
+      knowledgeId: route.params.id
+    })
+    console.log(list.value)
+  } catch (error) {
+  } finally {
+    loading.value = false
+  }
+}
+onMounted(() => {
+  onSearch()
+})
 </script>
 
 <template>
-  <div class="flex flex-wrap wrap">
-    <el-card class="mb-20px ">
-      <template #header>
-        <el-button class="w-full">向量搜索</el-button>
+  <div class="h-full w-full">
+    <div class="flex  gap-10px my-10px flex-wrap">
+      <el-card class="w-[calc(25%-10px)]">
+        <el-button class="w-full mb-10px" :loading="loading" type="primary" @click="onSearch(true)">向量搜索</el-button>
+        <el-input
+          v-model="content"
+          placeholder="请输入关键词查询向量文本"
+          :rows="10"
+          type="textarea"
+        />
+      </el-card>
+      <template v-if="list.length > 0">
+        <el-card
+          v-for="item in list"
+          :key="item.index"
+          class="rounded-lg cursor-pointer w-[calc(25%-10px)] bg-[var(--el-bg-color-pages)]"
+          shadow="hover"
+        >
+          <template #header>
+            <div class="flex items-center gap-1">
+              <el-icon>
+                <Document />
+              </el-icon>
+              <el-text class="truncate">{{ item.docsName }}</el-text>
+            </div>
+          </template>
+          <el-scrollbar height="200px" class="text-14px">
+            {{ item.text }}
+          </el-scrollbar>
+        </el-card>
       </template>
-      <el-input rows="10"  type="textarea" />
-    </el-card>
-    <el-card v-for="index in 5" :key="index" class="mb-20px ">
-      <template #header>
-        <div class="flex items-center">
-            <el-icon class="mr-10px ">
-              <Management class="text-18px  color-[var(--el-color-primary)]"/>
-            </el-icon>
-           <span class="">首席信息</span>
-        </div>
-      </template>
-      <div class="inner"></div>
-    </el-card>
+      <el-empty v-if="list.length === 0" class="my-4 flex-1" />
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.wrap {
-  &>div {
-    width: calc((100% - 40px) / 3);
-    margin-right: 20px;
-    &:nth-child(3n) {
-      margin-right: 0px;
-    }
-  }
-}
-.inner {
-  height: 220px;
-}
-.el-card:not(:first-child) {
-  background-color: mix(grey, #fff, 10%);
-}
-//div {
-//  display: grid;
-//  grid-template-columns: repeat(3, 1fr);
-//  gap: 20px;
+<style lang="scss" scoped>
+//a{
+//  color: var(--el-bg-color-page);
 //}
 </style>
diff --git a/src/views/knowledge/dataset-form/components/data-import.vue b/src/views/knowledge/dataset-form/components/data-import.vue
index 18b9fde..aa32fb2 100644
--- a/src/views/knowledge/dataset-form/components/data-import.vue
+++ b/src/views/knowledge/dataset-form/components/data-import.vue
@@ -1,11 +1,97 @@
+
 <script setup lang="ts">
-import {UploadFile} from '@/components/UploadFile'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Upload } from '@element-plus/icons-vue'
+import { EmbeddingApi } from '@/api/new-ai/embedding'
+
+const route = useRoute()
+const fileList = ref<any[]>([])
+const uploadRef = ref()
+
+const handleUpload = async (file: File) => {
+  const knowledgeId = route.params.id as string
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    await EmbeddingApi.embeddingDocs(knowledgeId, formData, (event: any) => {
+      if (event.lengthComputable) {
+        const progress = Math.round((event.loaded * 100) / event.total)
+        console.log('Upload progress:', progress)
+      }
+    })
+    ElMessage.success('上传成功，文档解析中...')
+  } catch (error) {
+    console.error('Upload failed:', error)
+    ElMessage.error('上传失败')
+  }
+}
+
+const handleExceed = () => {
+  ElMessage.warning('每次只能上传一个文件')
+}
 </script>
 
 <template>
-  <UploadFile drag />
+  <div class="upload-container">
+    <el-upload
+      ref="uploadRef"
+      class="upload-dragger"
+      drag
+      :auto-upload="false"
+      :limit="1"
+      accept=".doc,.docx,.pdf,.txt,.md"
+      :on-exceed="handleExceed"
+      :on-change="(file) => handleUpload(file.raw as File)"
+    >
+      <el-icon class="el-icon--upload"><Upload /></el-icon>
+      <div class="el-upload__text">
+        拖拽文件到此处或 <em>点击上传</em>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip">
+          支持的文件格式：.txt、.md、.docx、.doc、.pdf
+        </div>
+      </template>
+    </el-upload>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+.upload-container {
+  padding: 20px;
+}
 
+.upload-dragger {
+  width: 100%;
+}
+
+.el-upload__tip {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  margin-top: 10px;
+}
+
+:deep(.el-upload-dragger) {
+  width: 100%;
+  height: 200px;
+}
+
+.el-icon--upload {
+  font-size: 48px;
+  color: var(--el-text-color-regular);
+  margin-bottom: 12px;
+}
+
+.el-upload__text {
+  color: var(--el-text-color-regular);
+  font-size: 16px;
+  margin: 8px 0;
+}
+
+.el-upload__text em {
+  color: var(--el-color-primary);
+  font-style: normal;
+}
 </style>
diff --git a/src/views/knowledge/dataset-form/components/edit-doc.vue b/src/views/knowledge/dataset-form/components/edit-doc.vue
new file mode 100644
index 0000000..5440616
--- /dev/null
+++ b/src/views/knowledge/dataset-form/components/edit-doc.vue
@@ -0,0 +1,117 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+import { DocsApi } from '@/api/new-ai/docs'
+import { ElMessage } from 'element-plus'
+import { FormSchema } from '@/types/form'
+import { isNullOrWhitespace } from '@/utils/is'
+import { useForm } from '@/hooks/web/useForm'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const emit = defineEmits(['reload'])
+const showModal = ref(false)
+const loading = ref(false)
+const { methods, elFormRef, register } = useForm()
+const formRef = ref()
+const editFlag = ref(false)
+const formSchema = ref<FormSchema[]>([
+  {
+    label: '文档名称',
+    field: 'name',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入文档名称'
+    },
+    formItemProps: {
+      rules: [{ required: true, message: '请输入文档名称', trigger: ['blur'] }]
+    }
+  },
+  {
+    label: '文档内容',
+    field: 'content',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入文档内容',
+      type: 'textarea',
+      autosize: {
+        minRows: 10,
+        maxRows: 20
+      }
+    },
+    formItemProps: {
+      rules: [{ required: true, message: '请输入文档内容', trigger: ['blur'] }]
+    }
+  }
+])
+
+async function show(knowledgeId: string, id?: string) {
+  showModal.value = true
+  await nextTick()
+  if (id) {
+    editFlag.value = true
+    const res = await DocsApi.getDocsById(id)
+    methods.setValues(res)
+  }
+}
+
+async function handleSubmit() {
+  await elFormRef.value?.validate()
+  const formData =await methods.getFormData() as Record<string, any>
+  console.log(formData)
+  formData.knowledgeId = route.params.id as string
+  if (!formData.name) {
+    ElMessage.error('请完善表单')
+    return
+  }
+
+  try {
+    if (isNullOrWhitespace(formData.id)) {
+      await DocsApi.addDocs(formData)
+      ElMessage.success('新增成功')
+    } else {
+      await DocsApi.updateDocs(formData)
+      ElMessage.success('修改成功')
+    }
+    showModal.value = false
+    emit('reload')
+  } catch (error) {
+    ElMessage.error('操作失败')
+  }
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+  <el-dialog
+    v-model="showModal"
+    :title="editFlag ? '编辑文档' : '新增文档'"
+    width="500px"
+    :close-on-click-modal="!loading"
+    :close-on-press-escape="!loading"
+    destroy-on-close
+  >
+    <Form :schema="formSchema" ref="formRef" @register="register" />
+    <template #footer>
+      <el-button @click="showModal = false" :loading="loading">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/knowledge/dataset-form/index.vue b/src/views/knowledge/dataset-form/index.vue
index 9bfb21b..fe63642 100644
--- a/src/views/knowledge/dataset-form/index.vue
+++ b/src/views/knowledge/dataset-form/index.vue
@@ -8,11 +8,24 @@ import DataDocument from "@/views/knowledge/dataset-form/components/data-documen
 import DataEmbedding from "@/views/knowledge/dataset-form/components/data-embedding.vue";
 import {KnowledgeApi} from '@/api/new-ai/knowledge'
 import {ElMessage} from 'element-plus'
-
+interface Knowledge {
+  id: string
+  embedStore?: {
+    id: string
+    name: string
+  }
+  embedModel?: {
+    id: string
+    name: string
+  }
+}
 const route = useRoute()
 const router = useRouter()
 const active = ref('1')
-const knowledgeData = ref({})
+const loading = ref(false)
+const knowledgeData = ref<Knowledge>({
+  id: '',
+})
 
 const tabs = ref([
   {
@@ -42,11 +55,13 @@ const tabs = ref([
 ])
 
 const loadKnowledge = async () => {
-  const id = route.query.id as string
+  const id = route.params.id as string
+  console.log(id)
   if (id) {
     try {
-      const res = await KnowledgeApi.getKnowledge(id)
-      knowledgeData.value = res.data
+      loading.value = true;
+      const res = await KnowledgeApi.getKnowledge(id).finally(() => loading.value = false)
+      knowledgeData.value = res
     } catch (error) {
       console.error('Failed to load knowledge:', error)
       ElMessage.error('加载知识库失败')
@@ -60,14 +75,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="children flex">
-    <div class="flex flex-col mr-30px w-350px">
+  <div class="children flex" v-loading="loading">
+    <div class="flex flex-col mr-30px w-350px bg-white pt-10px">
       <el-button
         class="w-full mb-10px" plain type="primary"
         @click="router.push({ path: '/ai/console/knowledge' })">知识库列表
       </el-button>
-      <el-scrollbar class="flex-1">
-        <div class="py-20px flex items-center border-b-solid border-gray border-1 mb-10px">
+      <el-scrollbar class="flex-1 ">
+        <div class="py-20px flex items-center border-b-solid border-gray border-1 mb-10px  px-10px">
           <div
             class="icon-bg bg-[var(--el-color-primary-light-7)] w-40px lh-40px text-center mr-10px">
             <el-icon class="font-bold">
@@ -76,20 +91,22 @@ onMounted(() => {
           </div>
           <h3>本地测试</h3>
         </div>
-        <el-form label-position="top">
+        <el-form label-position="top" class=" px-10px">
           <el-form-item label="知识库ID">
-            <el-input />
+            <el-input v-model="knowledgeData.id" readonly />
           </el-form-item>
           <el-form-item label="关联向量数据库">
-            <el-input />
+            <el-input v-model="knowledgeData.embedStore.name" readonly v-if="knowledgeData.embedStore"/>
+            <el-text type="danger" v-else>未关联</el-text>
           </el-form-item>
           <el-form-item label="关联向量化模型">
-            <el-input />
+            <el-input v-model="knowledgeData.embedModel.name" readonly v-if="knowledgeData.embedModel"/>
+            <el-text type="danger" v-else>未关联</el-text>
           </el-form-item>
         </el-form>
       </el-scrollbar>
     </div>
-    <div class="flex-1">
+    <div class="flex-1 bg-white ">
       <el-tabs v-model="active" class="h-full">
         <el-tab-pane class="h-full" v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
           <template #label>
@@ -100,7 +117,7 @@ onMounted(() => {
               <span>{{item.label}}</span>
             </div>
           </template>
-          <el-scrollbar class="inner overflow-y-auto">
+          <el-scrollbar class="inner overflow-y-auto p-10px" v-if="active === item.name">
             <component :is="item.component" />
           </el-scrollbar>
         </el-tab-pane>
diff --git a/src/views/knowledge/dataset.vue b/src/views/knowledge/dataset.vue
index 5cf915a..6e2df4e 100644
--- a/src/views/knowledge/dataset.vue
+++ b/src/views/knowledge/dataset.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="knowledge-base-container">
     <div class="card-container">
-      <el-card class="create-card" shadow="hover" @click="toDatasetForm">
+      <el-card class="create-card" shadow="hover" @click="handleCreate">
         <div class="create-content">
           <el-icon class="create-icon"><Plus /></el-icon>
           <span class="create-text">创建知识库</span>
@@ -11,7 +11,8 @@
         </div>
       </el-card>
 
-      <el-card v-for="item in tableData" :key="item.id" class="document-card" shadow="hover"
+      <el-card
+v-for="item in tableData" :key="item.id" class="document-card" shadow="hover"
                @click="toDataset(item.id)">
         <div class="document-header">
           <el-icon>
@@ -20,12 +21,12 @@
           <span>{{ item.name }}</span>
         </div>
         <div class="document-info">
-          <el-tag size="small">{{ item.documentCount || 0 }} 文档</el-tag>
-          <el-tag size="small" type="info">{{ item.characterCount || 0 }} 千字符</el-tag>
-          <el-tag size="small" type="warning">{{ item.appCount || 0 }} 关联应用</el-tag>
+          <el-tag size="small">{{ item.docsNum || 0 }} 文档</el-tag>
+          <el-tag size="small" type="info">{{ (Number(item.totalSize) / 1000000).toFixed(2) }} MB</el-tag>
+          <el-tag size="small" type="warning" v-if="item.embedStore">  {{ item.embedStore.name }}</el-tag>
         </div>
         <p class="document-description">
-          {{ item.description || '暂无描述' }}
+          {{ item.des || '暂无描述' }}
         </p>
       </el-card>
     </div>
@@ -44,6 +45,7 @@
         @current-change="handleCurrentChange"
       />
     </div>
+    <create ref="createRef" @reload="loadData"/>
   </div>
 </template>
 
@@ -52,21 +54,21 @@ import {ref, onMounted} from 'vue'
 import {Plus, Folder} from '@element-plus/icons-vue'
 import {useRouter} from 'vue-router'
 import {KnowledgeApi} from '@/api/new-ai/knowledge'
-
+import Create from './components/create.vue'
 const router = useRouter()
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const tableData = ref([])
-
+const createRef = ref()
 const loadData = async () => {
   try {
     const res = await KnowledgeApi.getKnowledgePage({
       pageNo: currentPage.value,
       pageSize: pageSize.value
     })
-    tableData.value = res.data.list || []
-    total.value = res.data.total || 0
+    tableData.value = res.list || []
+    total.value = res.total || 0
   } catch (error) {
     console.error('Failed to load knowledge list:', error)
   }
@@ -86,10 +88,10 @@ const toDataset = (id: string) => {
   router.push(`/ai/console/knowledge/${id}`)
 }
 
-const toDatasetForm = () => {
-  router.push('/ai/console/knowledge/1')
-}
 
+const handleCreate = () => {
+  createRef.value.open()
+}
 onMounted(() => {
   loadData()
 })

From a49de525876760d3622e47783d4d4f63dbf4d3f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Fri, 28 Feb 2025 18:32:18 +0800
Subject: [PATCH 10/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

知识库接口对接
---
 src/views/knowledge/dataset.vue | 54 ++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/views/knowledge/dataset.vue b/src/views/knowledge/dataset.vue
index 6e2df4e..7d58d65 100644
--- a/src/views/knowledge/dataset.vue
+++ b/src/views/knowledge/dataset.vue
@@ -10,20 +10,42 @@
           导入您自己的文本数据或通过 Webhook 实时写入数据以增强 LLM 的上下文。
         </div>
       </el-card>
-
-      <el-card
-v-for="item in tableData" :key="item.id" class="document-card" shadow="hover"
-               @click="toDataset(item.id)">
+       <el-card class="document-card" v-if="loading">
         <div class="document-header">
           <el-icon>
-            <Folder/>
+            <Folder />
+          </el-icon>
+          <el-skeleton animated :rows="1" />
+        </div>
+        <div class="document-info">
+          <el-skeleton animated :rows="1" />
+            
+        </div>
+        <p class="document-description">
+          <el-skeleton animated :rows="3" />
+        </p>
+       </el-card> 
+      <el-card
+        v-for="item in tableData"
+        :key="item.id"
+        class="document-card"
+        shadow="hover"
+        @click="toDataset(item.id)"
+      >
+        <div class="document-header">
+          <el-icon>
+            <Folder />
           </el-icon>
           <span>{{ item.name }}</span>
         </div>
         <div class="document-info">
           <el-tag size="small">{{ item.docsNum || 0 }} 文档</el-tag>
-          <el-tag size="small" type="info">{{ (Number(item.totalSize) / 1000000).toFixed(2) }} MB</el-tag>
-          <el-tag size="small" type="warning" v-if="item.embedStore">  {{ item.embedStore.name }}</el-tag>
+          <el-tag size="small" type="info"
+            >{{ (Number(item.totalSize) / 1000000).toFixed(2) }} MB</el-tag
+          >
+          <el-tag size="small" type="warning" v-if="item.embedStore">
+            {{ item.embedStore.name }}</el-tag
+          >
         </div>
         <p class="document-description">
           {{ item.des || '暂无描述' }}
@@ -45,15 +67,15 @@ v-for="item in tableData" :key="item.id" class="document-card" shadow="hover"
         @current-change="handleCurrentChange"
       />
     </div>
-    <create ref="createRef" @reload="loadData"/>
+    <create ref="createRef" @reload="loadData" />
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
-import {Plus, Folder} from '@element-plus/icons-vue'
-import {useRouter} from 'vue-router'
-import {KnowledgeApi} from '@/api/new-ai/knowledge'
+import { ref, onMounted } from 'vue'
+import { Plus, Folder } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { KnowledgeApi } from '@/api/new-ai/knowledge'
 import Create from './components/create.vue'
 const router = useRouter()
 const currentPage = ref(1)
@@ -61,12 +83,14 @@ const pageSize = ref(10)
 const total = ref(0)
 const tableData = ref([])
 const createRef = ref()
+const loading = ref(false)
 const loadData = async () => {
   try {
+    loading.value = true
     const res = await KnowledgeApi.getKnowledgePage({
       pageNo: currentPage.value,
       pageSize: pageSize.value
-    })
+    }).finally(() => loading.value = false)
     tableData.value = res.list || []
     total.value = res.total || 0
   } catch (error) {
@@ -88,7 +112,6 @@ const toDataset = (id: string) => {
   router.push(`/ai/console/knowledge/${id}`)
 }
 
-
 const handleCreate = () => {
   createRef.value.open()
 }
@@ -99,7 +122,8 @@ onMounted(() => {
 
 <style scoped>
 .knowledge-base-container {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    '微软雅黑', Arial, sans-serif;
   padding: 20px;
 }
 

From 46d23bd6b6fe2644e207df80a1ada1bb46243d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 4 Mar 2025 15:20:01 +0800
Subject: [PATCH 11/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI应用管理移植
---
 package.json                                  |    5 +
 pnpm-lock.yaml                                |  346 +++--
 src/api/models/index.ts                       |   20 +
 src/api/new-ai/app.ts                         |   60 +
 src/api/new-ai/appApi.ts                      |   60 +
 src/api/new-ai/chat.ts                        |   77 ++
 src/api/new-ai/oss.ts                         |   72 ++
 src/components/Error/src/Error.vue            |    2 +-
 src/components/SvgIcon/index.vue              |   21 +
 src/hooks/setting/index.ts                    |   48 +
 src/hooks/setting/useDesignSetting.ts         |   34 +
 src/hooks/setting/useProjectSetting.ts        |   58 +
 src/settings/projectSetting.ts                |   59 +
 src/store/modules/projectSetting.ts           |   96 ++
 src/utils/copy.ts                             |   26 +
 src/utils/log.ts                              |   25 +
 src/views/ai/app/ApiTable.vue                 |  132 ++
 src/views/ai/app/base/index.vue               |  105 ++
 src/views/ai/app/base/prompt/index.vue        |   49 +
 .../ai/app/base/settings/KnowledgeList.vue    |  102 ++
 src/views/ai/app/base/settings/index.vue      |   98 ++
 .../ai/app/channel-api/components/docs.vue    |  113 ++
 src/views/ai/app/channel-api/index.vue        |   33 +
 src/views/ai/app/columns.ts                   |   64 +
 src/views/ai/app/edit.vue                     |  151 +++
 src/views/ai/app/index.vue                    |  189 +++
 src/views/ai/app/info.vue                     |   98 ++
 src/views/ai/app/store/index.ts               |   63 +
 src/views/ai/chat/Chat.vue                    |  244 ++++
 src/views/ai/chat/Header.vue                  |   75 ++
 src/views/ai/chat/index.vue                   |   56 +
 src/views/ai/chat/message/Message.vue         |  143 +++
 src/views/ai/chat/message/TextComponent.vue   |  139 ++
 src/views/ai/chat/message/styles.scss         |  122 ++
 .../chat/message/styles/github-markdown.less  | 1118 +++++++++++++++++
 .../ai/chat/message/styles/highlight.less     |  222 ++++
 src/views/ai/chat/message/styles/index.less   |   19 +
 src/views/ai/chat/message/styles/style.less   |  105 ++
 src/views/ai/chat/store/chat.d.ts             |   24 +
 src/views/ai/chat/store/useBasicLayout.ts     |   23 +
 src/views/ai/chat/store/useChatStore.ts       |   71 ++
 src/views/ai/chat/store/useIconRender.ts      |   55 +
 src/views/ai/chat/store/useScroll.ts          |   67 +
 src/views/common/AppSelect.vue                |   67 +
 src/views/common/ModelSelect.vue              |  107 ++
 types/config.d.ts                             |   87 ++
 vite.config.ts                                |    6 +-
 47 files changed, 4816 insertions(+), 140 deletions(-)
 create mode 100644 src/api/models/index.ts
 create mode 100644 src/api/new-ai/app.ts
 create mode 100644 src/api/new-ai/appApi.ts
 create mode 100644 src/api/new-ai/chat.ts
 create mode 100644 src/api/new-ai/oss.ts
 create mode 100644 src/components/SvgIcon/index.vue
 create mode 100644 src/hooks/setting/index.ts
 create mode 100644 src/hooks/setting/useDesignSetting.ts
 create mode 100644 src/hooks/setting/useProjectSetting.ts
 create mode 100644 src/settings/projectSetting.ts
 create mode 100644 src/store/modules/projectSetting.ts
 create mode 100644 src/utils/copy.ts
 create mode 100644 src/utils/log.ts
 create mode 100644 src/views/ai/app/ApiTable.vue
 create mode 100644 src/views/ai/app/base/index.vue
 create mode 100644 src/views/ai/app/base/prompt/index.vue
 create mode 100644 src/views/ai/app/base/settings/KnowledgeList.vue
 create mode 100644 src/views/ai/app/base/settings/index.vue
 create mode 100644 src/views/ai/app/channel-api/components/docs.vue
 create mode 100644 src/views/ai/app/channel-api/index.vue
 create mode 100644 src/views/ai/app/columns.ts
 create mode 100644 src/views/ai/app/edit.vue
 create mode 100644 src/views/ai/app/index.vue
 create mode 100644 src/views/ai/app/info.vue
 create mode 100644 src/views/ai/app/store/index.ts
 create mode 100644 src/views/ai/chat/Chat.vue
 create mode 100644 src/views/ai/chat/Header.vue
 create mode 100644 src/views/ai/chat/index.vue
 create mode 100644 src/views/ai/chat/message/Message.vue
 create mode 100644 src/views/ai/chat/message/TextComponent.vue
 create mode 100644 src/views/ai/chat/message/styles.scss
 create mode 100644 src/views/ai/chat/message/styles/github-markdown.less
 create mode 100644 src/views/ai/chat/message/styles/highlight.less
 create mode 100644 src/views/ai/chat/message/styles/index.less
 create mode 100644 src/views/ai/chat/message/styles/style.less
 create mode 100644 src/views/ai/chat/store/chat.d.ts
 create mode 100644 src/views/ai/chat/store/useBasicLayout.ts
 create mode 100644 src/views/ai/chat/store/useChatStore.ts
 create mode 100644 src/views/ai/chat/store/useIconRender.ts
 create mode 100644 src/views/ai/chat/store/useScroll.ts
 create mode 100644 src/views/common/AppSelect.vue
 create mode 100644 src/views/common/ModelSelect.vue
 create mode 100644 types/config.d.ts

diff --git a/package.json b/package.json
index d2d8b31..e19830a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,9 @@
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.11",
     "@iconify/iconify": "^3.1.1",
+    "@iconify/vue": "^4.3.0",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@traptitech/markdown-it-katex": "^3.6.0",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
@@ -53,6 +55,7 @@
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "markmap-common": "^0.16.0",
     "markmap-lib": "^0.16.1",
     "markmap-toolbar": "^0.17.0",
@@ -67,6 +70,7 @@
     "sortablejs": "^1.15.3",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
+    "uuid": "^11.1.0",
     "video.js": "^7.21.5",
     "vue": "3.5.12",
     "vue-dompurify-html": "^4.1.4",
@@ -88,6 +92,7 @@
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.12",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@unocss/eslint-config": "^0.57.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f4b94b..da0aeb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,31 +10,37 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.1.0
-        version: 2.3.1(vue@3.5.12)
+        version: 2.3.1(vue@3.5.12(typescript@5.3.3))
       '@form-create/designer':
         specifier: ^3.2.6
-        version: 3.2.8(vue@3.5.12)
+        version: 3.2.8(vue@3.5.12(typescript@5.3.3))
       '@form-create/element-ui':
         specifier: ^3.2.11
-        version: 3.2.14(vue@3.5.12)
+        version: 3.2.14(vue@3.5.12(typescript@5.3.3))
       '@iconify/iconify':
         specifier: ^3.1.1
         version: 3.1.1
+      '@iconify/vue':
+        specifier: ^4.3.0
+        version: 4.3.0(vue@3.5.12(typescript@5.3.3))
       '@microsoft/fetch-event-source':
         specifier: ^2.0.1
         version: 2.0.1
+      '@traptitech/markdown-it-katex':
+        specifier: ^3.6.0
+        version: 3.6.0
       '@videojs-player/vue':
         specifier: ^1.0.0
-        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.6)(vue@3.5.12)
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.6)(vue@3.5.12(typescript@5.3.3))
       '@vueuse/core':
         specifier: ^10.9.0
-        version: 10.11.1(vue@3.5.12)
+        version: 10.11.1(vue@3.5.12(typescript@5.3.3))
       '@wangeditor/editor':
         specifier: ^5.1.23
         version: 5.1.23
       '@wangeditor/editor-for-vue':
         specifier: ^5.1.10
-        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12)
+        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12(typescript@5.3.3))
       '@zxcvbn-ts/core':
         specifier: ^3.0.4
         version: 3.0.4
@@ -76,7 +82,7 @@ importers:
         version: 2.1.0(echarts@5.5.1)
       element-plus:
         specifier: 2.8.4
-        version: 2.8.4(vue@3.5.12)
+        version: 2.8.4(vue@3.5.12(typescript@5.3.3))
       fast-xml-parser:
         specifier: ^4.3.2
         version: 4.5.0
@@ -92,6 +98,9 @@ importers:
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
+      markdown-it-link-attributes:
+        specifier: ^4.0.1
+        version: 4.0.1
       markmap-common:
         specifier: ^0.16.0
         version: 0.16.0
@@ -115,10 +124,10 @@ importers:
         version: 0.2.0
       pinia:
         specifier: ^2.1.7
-        version: 2.2.8(typescript@5.3.3)(vue@3.5.12)
+        version: 2.2.8(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
-        version: 3.2.3(pinia@2.2.8)
+        version: 3.2.3(pinia@2.2.8(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3)))
       qrcode:
         specifier: ^1.5.3
         version: 1.5.4
@@ -134,6 +143,9 @@ importers:
       url:
         specifier: ^0.11.3
         version: 0.11.4
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
       video.js:
         specifier: ^7.21.5
         version: 7.21.6
@@ -142,19 +154,19 @@ importers:
         version: 3.5.12(typescript@5.3.3)
       vue-dompurify-html:
         specifier: ^4.1.4
-        version: 4.1.4(vue@3.5.12)
+        version: 4.1.4(vue@3.5.12(typescript@5.3.3))
       vue-i18n:
         specifier: 9.10.2
-        version: 9.10.2(vue@3.5.12)
+        version: 9.10.2(vue@3.5.12(typescript@5.3.3))
       vue-router:
         specifier: 4.4.5
-        version: 4.4.5(vue@3.5.12)
+        version: 4.4.5(vue@3.5.12(typescript@5.3.3))
       vue-types:
         specifier: ^5.1.1
-        version: 5.1.3(vue@3.5.12)
+        version: 5.1.3(vue@3.5.12(typescript@5.3.3))
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.5.12)
+        version: 4.1.0(vue@3.5.12(typescript@5.3.3))
       web-storage-cache:
         specifier: ^1.1.1
         version: 1.1.1
@@ -173,7 +185,7 @@ importers:
         version: 2.2.277
       '@intlify/unplugin-vue-i18n':
         specifier: ^2.0.0
-        version: 2.0.0(rollup@4.27.4)(vue-i18n@9.10.2)
+        version: 2.0.0(rollup@4.27.4)(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))
       '@purge-icons/generated':
         specifier: ^0.9.0
         version: 0.9.0
@@ -192,9 +204,12 @@ importers:
       '@types/qs':
         specifier: ^6.9.12
         version: 6.9.17
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.1.0
-        version: 7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.3.3)
+        version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.3.3))(eslint@8.57.1)(typescript@5.3.3)
       '@typescript-eslint/parser':
         specifier: ^7.1.0
         version: 7.18.0(eslint@8.57.1)(typescript@5.3.3)
@@ -206,13 +221,13 @@ importers:
         version: 0.58.9
       '@vitejs/plugin-legacy':
         specifier: ^5.3.1
-        version: 5.4.3(terser@5.36.0)(vite@5.1.4)
+        version: 5.4.3(terser@5.36.0)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.2.1(vite@5.1.4)(vue@3.5.12)
+        version: 5.2.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))(vue@3.5.12(typescript@5.3.3))
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
-        version: 3.1.0(vite@5.1.4)(vue@3.5.12)
+        version: 3.1.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))(vue@3.5.12(typescript@5.3.3))
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.20(postcss@8.4.49)
@@ -221,7 +236,7 @@ importers:
         version: 17.11.1
       bpmn-js-properties-panel:
         specifier: 5.23.0
-        version: 5.23.0(@bpmn-io/properties-panel@3.25.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.7.2)(diagram-js@12.8.1)
+        version: 5.23.0(@bpmn-io/properties-panel@3.25.0(@lezer/common@1.2.3))(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.7.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.7.0))(diagram-js@12.8.1)
       consola:
         specifier: ^3.2.3
         version: 3.2.3
@@ -236,7 +251,7 @@ importers:
         version: 2.1.0
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.2.1(eslint-config-prettier@9.1.0)(eslint@8.57.1)(prettier@3.4.1)
+        version: 5.2.1(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.4.1)
       eslint-plugin-vue:
         specifier: ^9.22.0
         version: 9.31.0(eslint@8.57.1)
@@ -272,16 +287,16 @@ importers:
         version: 16.11.0(typescript@5.3.3)
       stylelint-config-html:
         specifier: ^1.1.0
-        version: 1.1.0(postcss-html@1.7.0)(stylelint@16.11.0)
+        version: 1.1.0(postcss-html@1.7.0)(stylelint@16.11.0(typescript@5.3.3))
       stylelint-config-recommended:
         specifier: ^14.0.0
-        version: 14.0.1(stylelint@16.11.0)
+        version: 14.0.1(stylelint@16.11.0(typescript@5.3.3))
       stylelint-config-standard:
         specifier: ^36.0.0
-        version: 36.0.1(stylelint@16.11.0)
+        version: 36.0.1(stylelint@16.11.0(typescript@5.3.3))
       stylelint-order:
         specifier: ^6.0.4
-        version: 6.0.4(stylelint@16.11.0)
+        version: 6.0.4(stylelint@16.11.0(typescript@5.3.3))
       terser:
         specifier: ^5.28.1
         version: 5.36.0
@@ -290,40 +305,40 @@ importers:
         version: 5.3.3
       unocss:
         specifier: ^0.58.5
-        version: 0.58.9(postcss@8.4.49)(rollup@4.27.4)(vite@5.1.4)
+        version: 0.58.9(postcss@8.4.49)(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       unplugin-auto-import:
         specifier: ^0.16.7
-        version: 0.16.7(@vueuse/core@10.11.1)(rollup@4.27.4)
+        version: 0.16.7(@vueuse/core@10.11.1(vue@3.5.12(typescript@5.3.3)))(rollup@4.27.4)
       unplugin-element-plus:
         specifier: ^0.8.0
         version: 0.8.0(rollup@4.27.4)
       unplugin-vue-components:
         specifier: ^0.25.2
-        version: 0.25.2(rollup@4.27.4)(vue@3.5.12)
+        version: 0.25.2(@babel/parser@7.26.2)(rollup@4.27.4)(vue@3.5.12(typescript@5.3.3))
       vite:
         specifier: 5.1.4
         version: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@5.1.4)
+        version: 0.5.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-ejs:
         specifier: ^1.7.0
-        version: 1.7.0(vite@5.1.4)
+        version: 1.7.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-eslint:
         specifier: ^1.8.1
-        version: 1.8.1(eslint@8.57.1)(vite@5.1.4)
+        version: 1.8.1(eslint@8.57.1)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-progress:
         specifier: ^0.0.7
-        version: 0.0.7(vite@5.1.4)
+        version: 0.0.7(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-purge-icons:
         specifier: ^0.10.0
-        version: 0.10.0(vite@5.1.4)
+        version: 0.10.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-svg-icons:
         specifier: ^2.0.1
-        version: 2.0.1(vite@5.1.4)
+        version: 2.0.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vite-plugin-top-level-await:
         specifier: ^1.4.4
-        version: 1.4.4(rollup@4.27.4)(vite@5.1.4)
+        version: 1.4.4(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       vue-eslint-parser:
         specifier: ^9.3.2
         version: 9.4.3(eslint@8.57.1)
@@ -1253,6 +1268,11 @@ packages:
   '@iconify/utils@2.1.33':
     resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==, tarball: https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.33.tgz}
 
+  '@iconify/vue@4.3.0':
+    resolution: {integrity: sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==, tarball: https://registry.npmmirror.com/@iconify/vue/-/vue-4.3.0.tgz}
+    peerDependencies:
+      vue: '>=3'
+
   '@intlify/bundle-utils@7.5.1':
     resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==, tarball: https://registry.npmmirror.com/@intlify/bundle-utils/-/bundle-utils-7.5.1.tgz}
     engines: {node: '>= 14.16'}
@@ -1673,6 +1693,9 @@ packages:
   '@transloadit/prettier-bytes@0.0.7':
     resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==, tarball: https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz}
 
+  '@traptitech/markdown-it-katex@3.6.0':
+    resolution: {integrity: sha512-CnJzTWxsgLGXFdSrWRaGz7GZ1kUUi8g3E9HzJmeveX1YwVJavrKYqysktfHZQsujdnRqV5O7g8FPKEA/aeTkOQ==, tarball: https://registry.npmmirror.com/@traptitech/markdown-it-katex/-/markdown-it-katex-3.6.0.tgz}
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==, tarball: https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz}
     engines: {node: '>=10.13.0'}
@@ -1818,6 +1841,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==, tarball: https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz}
 
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==, tarball: https://registry.npmmirror.com/@types/uuid/-/uuid-10.0.0.tgz}
+
   '@types/video.js@7.3.58':
     resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==, tarball: https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz}
 
@@ -4200,6 +4226,9 @@ packages:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==, tarball: https://registry.npmmirror.com/map-visit/-/map-visit-1.0.0.tgz}
     engines: {node: '>=0.10.0'}
 
+  markdown-it-link-attributes@4.0.1:
+    resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==, tarball: https://registry.npmmirror.com/markdown-it-link-attributes/-/markdown-it-link-attributes-4.0.1.tgz}
+
   markdown-it@14.1.0:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==, tarball: https://registry.npmmirror.com/markdown-it/-/markdown-it-14.1.0.tgz}
     hasBin: true
@@ -5479,6 +5508,10 @@ packages:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==, tarball: https://registry.npmmirror.com/uuid/-/uuid-10.0.0.tgz}
     hasBin: true
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==, tarball: https://registry.npmmirror.com/uuid/-/uuid-11.1.0.tgz}
+    hasBin: true
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==, tarball: https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz}
     engines: {node: '>= 0.8'}
@@ -6610,7 +6643,7 @@ snapshots:
       '@commitlint/types': 19.5.0
       chalk: 5.3.0
       cosmiconfig: 9.0.0(typescript@5.3.3)
-      cosmiconfig-typescript-loader: 5.1.0(@types/node@20.17.9)(cosmiconfig@9.0.0)(typescript@5.3.3)
+      cosmiconfig-typescript-loader: 5.1.0(@types/node@20.17.9)(cosmiconfig@9.0.0(typescript@5.3.3))(typescript@5.3.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -6667,7 +6700,7 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.3': {}
 
-  '@csstools/media-query-list-parser@4.0.2(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)':
+  '@csstools/media-query-list-parser@4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
@@ -6680,7 +6713,7 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.1.0': {}
 
-  '@element-plus/icons-vue@2.3.1(vue@3.5.12)':
+  '@element-plus/icons-vue@2.3.1(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       vue: 3.5.12(typescript@5.3.3)
 
@@ -6821,24 +6854,24 @@ snapshots:
     dependencies:
       wangeditor: 4.7.15
 
-  '@form-create/core@3.2.14(vue@3.5.12)':
+  '@form-create/core@3.2.14(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@form-create/utils': 3.2.14
       vue: 3.5.12(typescript@5.3.3)
 
-  '@form-create/designer@3.2.8(vue@3.5.12)':
+  '@form-create/designer@3.2.8(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@form-create/component-wangeditor': 3.2.14
-      '@form-create/element-ui': 3.2.14(vue@3.5.12)
+      '@form-create/element-ui': 3.2.14(vue@3.5.12(typescript@5.3.3))
       '@form-create/utils': 3.2.14
       codemirror: 6.65.7
-      element-plus: 2.8.4(vue@3.5.12)
+      element-plus: 2.8.4(vue@3.5.12(typescript@5.3.3))
       vue: 3.5.12(typescript@5.3.3)
-      vuedraggable: 4.1.0(vue@3.5.12)
+      vuedraggable: 4.1.0(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@form-create/element-ui@3.2.14(vue@3.5.12)':
+  '@form-create/element-ui@3.2.14(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@form-create/component-elm-checkbox': 3.2.14
       '@form-create/component-elm-frame': 3.2.14
@@ -6848,7 +6881,7 @@ snapshots:
       '@form-create/component-elm-tree': 3.2.14
       '@form-create/component-elm-upload': 3.2.14
       '@form-create/component-subform': 3.1.34
-      '@form-create/core': 3.2.14(vue@3.5.12)
+      '@form-create/core': 3.2.14(vue@3.5.12(typescript@5.3.3))
       '@form-create/utils': 3.2.14
       vue: 3.5.12(typescript@5.3.3)
 
@@ -6899,7 +6932,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@intlify/bundle-utils@7.5.1(vue-i18n@9.10.2)':
+  '@iconify/vue@4.3.0(vue@3.5.12(typescript@5.3.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.12(typescript@5.3.3)
+
+  '@intlify/bundle-utils@7.5.1(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))':
     dependencies:
       '@intlify/message-compiler': 9.14.2
       '@intlify/shared': 9.14.2
@@ -6910,8 +6948,9 @@ snapshots:
       magic-string: 0.30.14
       mlly: 1.7.3
       source-map-js: 1.2.1
-      vue-i18n: 9.10.2(vue@3.5.12)
       yaml-eslint-parser: 1.2.3
+    optionalDependencies:
+      vue-i18n: 9.10.2(vue@3.5.12(typescript@5.3.3))
 
   '@intlify/core-base@9.10.2':
     dependencies:
@@ -6932,9 +6971,9 @@ snapshots:
 
   '@intlify/shared@9.14.2': {}
 
-  '@intlify/unplugin-vue-i18n@2.0.0(rollup@4.27.4)(vue-i18n@9.10.2)':
+  '@intlify/unplugin-vue-i18n@2.0.0(rollup@4.27.4)(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))':
     dependencies:
-      '@intlify/bundle-utils': 7.5.1(vue-i18n@9.10.2)
+      '@intlify/bundle-utils': 7.5.1(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))
       '@intlify/shared': 9.14.2
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
       '@vue/compiler-sfc': 3.5.13
@@ -6946,7 +6985,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
       unplugin: 1.16.0
-      vue-i18n: 9.10.2(vue@3.5.12)
+    optionalDependencies:
+      vue-i18n: 9.10.2(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7103,7 +7143,7 @@ snapshots:
       '@iconify/iconify': 3.1.1
 
   '@rollup/plugin-virtual@3.0.2(rollup@4.27.4)':
-    dependencies:
+    optionalDependencies:
       rollup: 4.27.4
 
   '@rollup/pluginutils@4.2.1':
@@ -7116,6 +7156,7 @@ snapshots:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
+    optionalDependencies:
       rollup: 4.27.4
 
   '@rollup/rollup-android-arm-eabi@4.27.4':
@@ -7230,6 +7271,10 @@ snapshots:
 
   '@transloadit/prettier-bytes@0.0.7': {}
 
+  '@traptitech/markdown-it-katex@3.6.0':
+    dependencies:
+      katex: 0.16.11
+
   '@trysound/sax@0.2.0': {}
 
   '@types/conventional-commits-parser@5.0.1':
@@ -7395,13 +7440,15 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
+  '@types/uuid@10.0.0': {}
+
   '@types/video.js@7.3.58': {}
 
   '@types/web-bluetooth@0.0.16': {}
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0)(eslint@8.57.1)(typescript@5.3.3)':
+  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.3.3))(eslint@8.57.1)(typescript@5.3.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1)(typescript@5.3.3)
@@ -7414,6 +7461,7 @@ snapshots:
       ignore: 5.3.2
       natural-compare: 1.4.0
       ts-api-utils: 1.4.3(typescript@5.3.3)
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7426,6 +7474,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.7
       eslint: 8.57.1
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7438,6 +7487,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 7.18.0
       debug: 4.3.7
       eslint: 8.57.1
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7459,6 +7509,7 @@ snapshots:
       debug: 4.3.7
       eslint: 8.57.1
       ts-api-utils: 1.4.3(typescript@5.3.3)
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7477,6 +7528,7 @@ snapshots:
       minimatch: 9.0.3
       semver: 7.6.3
       ts-api-utils: 1.4.3(typescript@5.3.3)
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7491,6 +7543,7 @@ snapshots:
       minimatch: 9.0.5
       semver: 7.6.3
       ts-api-utils: 1.4.3(typescript@5.3.3)
+    optionalDependencies:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -7532,11 +7585,12 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@unocss/astro@0.58.9(rollup@4.27.4)(vite@5.1.4)':
+  '@unocss/astro@0.58.9(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))':
     dependencies:
       '@unocss/core': 0.58.9
       '@unocss/reset': 0.58.9
-      '@unocss/vite': 0.58.9(rollup@4.27.4)(vite@5.1.4)
+      '@unocss/vite': 0.58.9(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
+    optionalDependencies:
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
     transitivePeerDependencies:
       - rollup
@@ -7695,7 +7749,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.58.9
 
-  '@unocss/vite@0.58.9(rollup@4.27.4)(vite@5.1.4)':
+  '@unocss/vite@0.58.9(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -7740,7 +7794,7 @@ snapshots:
       '@uppy/utils': 4.1.3
       nanoid: 3.3.8
 
-  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.6)(vue@3.5.12)':
+  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.6)(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/video.js': 7.3.58
       video.js: 7.21.6
@@ -7769,7 +7823,7 @@ snapshots:
       global: 4.4.0
       is-function: 1.0.2
 
-  '@vitejs/plugin-legacy@5.4.3(terser@5.36.0)(vite@5.1.4)':
+  '@vitejs/plugin-legacy@5.4.3(terser@5.36.0)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
@@ -7784,7 +7838,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.4)(vue@3.5.12)':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
@@ -7794,7 +7848,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@5.1.4)(vue@3.5.12)':
+  '@vitejs/plugin-vue@5.2.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
       vue: 3.5.12(typescript@5.3.3)
@@ -7816,7 +7870,6 @@ snapshots:
 
   '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.26.0
       '@babel/helper-module-imports': 7.25.9
       '@babel/helper-plugin-utils': 7.25.9
       '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
@@ -7827,6 +7880,8 @@ snapshots:
       '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.26.0)
       html-tags: 3.3.1
       svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
@@ -7913,8 +7968,9 @@ snapshots:
       minimatch: 9.0.5
       muggle-string: 0.3.1
       path-browserify: 1.0.1
-      typescript: 5.3.3
       vue-template-compiler: 2.7.16
+    optionalDependencies:
+      typescript: 5.3.3
 
   '@vue/reactivity@3.5.12':
     dependencies:
@@ -7932,7 +7988,7 @@ snapshots:
       '@vue/shared': 3.5.12
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.12(vue@3.5.12)':
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.12
       '@vue/shared': 3.5.12
@@ -7942,22 +7998,22 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
-  '@vueuse/core@10.11.1(vue@3.5.12)':
+  '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.12)
-      vue-demi: 0.14.10(vue@3.5.12)
+      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.3.3))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@9.13.0(vue@3.5.12)':
+  '@vueuse/core@9.13.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.5.12)
-      vue-demi: 0.14.10(vue@3.5.12)
+      '@vueuse/shared': 9.13.0(vue@3.5.12(typescript@5.3.3))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7966,23 +8022,23 @@ snapshots:
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@10.11.1(vue@3.5.12)':
+  '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@9.13.0(vue@3.5.12)':
+  '@vueuse/shared@9.13.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       is-url: 1.2.4
       lodash.throttle: 4.1.1
@@ -7990,15 +8046,15 @@ snapshots:
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/code-highlight@1.0.3(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/code-highlight@1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       prismjs: 1.29.0
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
       '@types/event-emitter': 0.3.5
       '@uppy/core': 2.3.4
@@ -8021,7 +8077,7 @@ snapshots:
       slate-history: 0.66.0(slate@0.72.8)
       snabbdom: 3.6.2
 
-  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12)':
+  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@wangeditor/editor': 5.1.23
       vue: 3.5.12(typescript@5.3.3)
@@ -8030,13 +8086,13 @@ snapshots:
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/code-highlight': 1.0.3(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/list-module': 1.0.5(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/table-module': 1.1.4(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/upload-image-module': 1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/basic-modules@1.1.7)(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/video-module': 1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/core@1.1.19)(dom7@3.0.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/code-highlight': 1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/list-module': 1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/table-module': 1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/upload-image-module': 1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/video-module': 1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       is-hotkey: 0.2.0
       lodash.camelcase: 4.3.0
@@ -8050,16 +8106,16 @@ snapshots:
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/list-module@1.0.5(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/list-module@1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       lodash.isequal: 4.5.0
       lodash.throttle: 4.1.1
@@ -8067,22 +8123,22 @@ snapshots:
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/upload-image-module@1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/basic-modules@1.1.7)(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/upload-image-module@1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       lodash.foreach: 4.5.0
       slate: 0.72.8
       snabbdom: 3.6.2
 
-  '@wangeditor/video-module@1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/core@1.1.19)(dom7@3.0.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor/video-module@1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)':
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.8)(slate@0.72.8)(snabbdom@3.6.2)
       dom7: 3.0.0
       nanoid: 3.3.8
       slate: 0.72.8
@@ -8285,7 +8341,7 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  bpmn-js-properties-panel@5.23.0(@bpmn-io/properties-panel@3.25.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.7.2)(diagram-js@12.8.1):
+  bpmn-js-properties-panel@5.23.0(@bpmn-io/properties-panel@3.25.0(@lezer/common@1.2.3))(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.7.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.7.0))(diagram-js@12.8.1):
     dependencies:
       '@bpmn-io/extract-process-variables': 0.8.0
       '@bpmn-io/properties-panel': 3.25.0(@lezer/common@1.2.3)
@@ -8590,7 +8646,7 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig-typescript-loader@5.1.0(@types/node@20.17.9)(cosmiconfig@9.0.0)(typescript@5.3.3):
+  cosmiconfig-typescript-loader@5.1.0(@types/node@20.17.9)(cosmiconfig@9.0.0(typescript@5.3.3))(typescript@5.3.3):
     dependencies:
       '@types/node': 20.17.9
       cosmiconfig: 9.0.0(typescript@5.3.3)
@@ -8603,6 +8659,7 @@ snapshots:
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
+    optionalDependencies:
       typescript: 5.3.3
 
   crelt@1.0.6: {}
@@ -9041,15 +9098,15 @@ snapshots:
 
   electron-to-chromium@1.5.67: {}
 
-  element-plus@2.8.4(vue@3.5.12):
+  element-plus@2.8.4(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
-      '@element-plus/icons-vue': 2.3.1(vue@3.5.12)
+      '@element-plus/icons-vue': 2.3.1(vue@3.5.12(typescript@5.3.3))
       '@floating-ui/dom': 1.6.12
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.13
       '@types/lodash-es': 4.17.12
-      '@vueuse/core': 9.13.0(vue@3.5.12)
+      '@vueuse/core': 9.13.0(vue@3.5.12(typescript@5.3.3))
       async-validator: 4.2.5
       dayjs: 1.11.13
       escape-html: 1.0.3
@@ -9225,13 +9282,15 @@ snapshots:
 
   eslint-define-config@2.1.0: {}
 
-  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0)(eslint@8.57.1)(prettier@3.4.1):
+  eslint-plugin-prettier@5.2.1(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.4.1):
     dependencies:
       eslint: 8.57.1
-      eslint-config-prettier: 9.1.0(eslint@8.57.1)
       prettier: 3.4.1
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
+    optionalDependencies:
+      '@types/eslint': 8.56.12
+      eslint-config-prettier: 9.1.0(eslint@8.57.1)
 
   eslint-plugin-vue@9.31.0(eslint@8.57.1):
     dependencies:
@@ -9418,7 +9477,7 @@ snapshots:
       reusify: 1.0.4
 
   fdir@6.4.2(picomatch@4.0.2):
-    dependencies:
+    optionalDependencies:
       picomatch: 4.0.2
 
   feelers@1.4.0:
@@ -9502,7 +9561,7 @@ snapshots:
       tabbable: 6.2.0
 
   follow-redirects@1.15.9(debug@4.3.7):
-    dependencies:
+    optionalDependencies:
       debug: 4.3.7
 
   for-each@0.3.3:
@@ -10206,6 +10265,8 @@ snapshots:
     dependencies:
       object-visit: 1.0.1
 
+  markdown-it-link-attributes@4.0.1: {}
+
   markdown-it@14.1.0:
     dependencies:
       argparse: 2.0.1
@@ -10611,16 +10672,17 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pinia-plugin-persistedstate@3.2.3(pinia@2.2.8):
+  pinia-plugin-persistedstate@3.2.3(pinia@2.2.8(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))):
     dependencies:
-      pinia: 2.2.8(typescript@5.3.3)(vue@3.5.12)
+      pinia: 2.2.8(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))
 
-  pinia@2.2.8(typescript@5.3.3)(vue@3.5.12):
+  pinia@2.2.8(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      typescript: 5.3.3
       vue: 3.5.12(typescript@5.3.3)
-      vue-demi: 0.14.10(vue@3.5.12)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
+    optionalDependencies:
+      typescript: 5.3.3
 
   pkcs7@1.0.4:
     dependencies:
@@ -11204,21 +11266,21 @@ snapshots:
 
   style-mod@4.1.2: {}
 
-  stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.11.0):
+  stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.11.0(typescript@5.3.3)):
     dependencies:
       postcss-html: 1.7.0
       stylelint: 16.11.0(typescript@5.3.3)
 
-  stylelint-config-recommended@14.0.1(stylelint@16.11.0):
+  stylelint-config-recommended@14.0.1(stylelint@16.11.0(typescript@5.3.3)):
     dependencies:
       stylelint: 16.11.0(typescript@5.3.3)
 
-  stylelint-config-standard@36.0.1(stylelint@16.11.0):
+  stylelint-config-standard@36.0.1(stylelint@16.11.0(typescript@5.3.3)):
     dependencies:
       stylelint: 16.11.0(typescript@5.3.3)
-      stylelint-config-recommended: 14.0.1(stylelint@16.11.0)
+      stylelint-config-recommended: 14.0.1(stylelint@16.11.0(typescript@5.3.3))
 
-  stylelint-order@6.0.4(stylelint@16.11.0):
+  stylelint-order@6.0.4(stylelint@16.11.0(typescript@5.3.3)):
     dependencies:
       postcss: 8.4.49
       postcss-sorting: 8.0.2(postcss@8.4.49)
@@ -11228,7 +11290,7 @@ snapshots:
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4)(@csstools/css-tokenizer@3.0.3)
+      '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0)
       '@dual-bundle/import-meta-resolve': 4.1.0
       balanced-match: 2.0.0
@@ -11513,9 +11575,9 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unocss@0.58.9(postcss@8.4.49)(rollup@4.27.4)(vite@5.1.4):
+  unocss@0.58.9(postcss@8.4.49)(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
-      '@unocss/astro': 0.58.9(rollup@4.27.4)(vite@5.1.4)
+      '@unocss/astro': 0.58.9(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
       '@unocss/cli': 0.58.9(rollup@4.27.4)
       '@unocss/core': 0.58.9
       '@unocss/extractor-arbitrary-variants': 0.58.9
@@ -11534,24 +11596,26 @@ snapshots:
       '@unocss/transformer-compile-class': 0.58.9
       '@unocss/transformer-directives': 0.58.9
       '@unocss/transformer-variant-group': 0.58.9
-      '@unocss/vite': 0.58.9(rollup@4.27.4)(vite@5.1.4)
+      '@unocss/vite': 0.58.9(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0))
+    optionalDependencies:
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
     transitivePeerDependencies:
       - postcss
       - rollup
       - supports-color
 
-  unplugin-auto-import@0.16.7(@vueuse/core@10.11.1)(rollup@4.27.4):
+  unplugin-auto-import@0.16.7(@vueuse/core@10.11.1(vue@3.5.12(typescript@5.3.3)))(rollup@4.27.4):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
-      '@vueuse/core': 10.11.1(vue@3.5.12)
       fast-glob: 3.3.2
       local-pkg: 0.5.1
       magic-string: 0.30.14
       minimatch: 9.0.5
       unimport: 3.14.2(rollup@4.27.4)
       unplugin: 1.16.0
+    optionalDependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - rollup
 
@@ -11564,7 +11628,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@0.25.2(rollup@4.27.4)(vue@3.5.12):
+  unplugin-vue-components@0.25.2(@babel/parser@7.26.2)(rollup@4.27.4)(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
@@ -11577,6 +11641,8 @@ snapshots:
       resolve: 1.22.8
       unplugin: 1.16.0
       vue: 3.5.12(typescript@5.3.3)
+    optionalDependencies:
+      '@babel/parser': 7.26.2
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -11616,6 +11682,8 @@ snapshots:
 
   uuid@10.0.0: {}
 
+  uuid@11.1.0: {}
+
   vary@1.1.2: {}
 
   video.js@7.21.6:
@@ -11640,7 +11708,7 @@ snapshots:
     dependencies:
       global: 4.4.0
 
-  vite-plugin-compression@0.5.1(vite@5.1.4):
+  vite-plugin-compression@0.5.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       chalk: 4.1.2
       debug: 4.3.7
@@ -11649,12 +11717,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-ejs@1.7.0(vite@5.1.4):
+  vite-plugin-ejs@1.7.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       ejs: 3.1.10
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
 
-  vite-plugin-eslint@1.8.1(eslint@8.57.1)(vite@5.1.4):
+  vite-plugin-eslint@1.8.1(eslint@8.57.1)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@types/eslint': 8.56.12
@@ -11662,14 +11730,14 @@ snapshots:
       rollup: 2.79.2
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
 
-  vite-plugin-progress@0.0.7(vite@5.1.4):
+  vite-plugin-progress@0.0.7(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       picocolors: 1.1.1
       progress: 2.0.3
       rd: 2.0.1
       vite: 5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)
 
-  vite-plugin-purge-icons@0.10.0(vite@5.1.4):
+  vite-plugin-purge-icons@0.10.0(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       '@purge-icons/core': 0.10.0
       '@purge-icons/generated': 0.10.0
@@ -11679,7 +11747,7 @@ snapshots:
       - encoding
       - supports-color
 
-  vite-plugin-svg-icons@2.0.1(vite@5.1.4):
+  vite-plugin-svg-icons@2.0.1(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       '@types/svgo': 2.6.4
       cors: 2.8.5
@@ -11693,7 +11761,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-top-level-await@1.4.4(rollup@4.27.4)(vite@5.1.4):
+  vite-plugin-top-level-await@1.4.4(rollup@4.27.4)(vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0)):
     dependencies:
       '@rollup/plugin-virtual': 3.0.2(rollup@4.27.4)
       '@swc/core': 1.9.3
@@ -11705,24 +11773,24 @@ snapshots:
 
   vite@5.1.4(@types/node@20.17.9)(sass@1.81.0)(terser@5.36.0):
     dependencies:
-      '@types/node': 20.17.9
       esbuild: 0.19.12
       postcss: 8.4.49
       rollup: 4.27.4
+    optionalDependencies:
+      '@types/node': 20.17.9
+      fsevents: 2.3.3
       sass: 1.81.0
       terser: 5.36.0
-    optionalDependencies:
-      fsevents: 2.3.3
 
-  vue-demi@0.14.10(vue@3.5.12):
+  vue-demi@0.14.10(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       vue: 3.5.12(typescript@5.3.3)
 
-  vue-dompurify-html@4.1.4(vue@3.5.12):
+  vue-dompurify-html@4.1.4(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       dompurify: 3.2.1
       vue: 3.5.12(typescript@5.3.3)
-      vue-demi: 0.14.10(vue@3.5.12)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -11739,14 +11807,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.10.2(vue@3.5.12):
+  vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@intlify/core-base': 9.10.2
       '@intlify/shared': 9.10.2
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.3.3)
 
-  vue-router@4.4.5(vue@3.5.12):
+  vue-router@4.4.5(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.3.3)
@@ -11763,9 +11831,10 @@ snapshots:
       semver: 7.6.3
       typescript: 5.3.3
 
-  vue-types@5.1.3(vue@3.5.12):
+  vue-types@5.1.3(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       is-plain-object: 5.0.0
+    optionalDependencies:
       vue: 3.5.12(typescript@5.3.3)
 
   vue@3.5.12(typescript@5.3.3):
@@ -11773,11 +11842,12 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       '@vue/compiler-sfc': 3.5.12
       '@vue/runtime-dom': 3.5.12
-      '@vue/server-renderer': 3.5.12(vue@3.5.12)
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.3.3))
       '@vue/shared': 3.5.12
+    optionalDependencies:
       typescript: 5.3.3
 
-  vuedraggable@4.1.0(vue@3.5.12):
+  vuedraggable@4.1.0(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       sortablejs: 1.14.0
       vue: 3.5.12(typescript@5.3.3)
diff --git a/src/api/models/index.ts b/src/api/models/index.ts
new file mode 100644
index 0000000..0708645
--- /dev/null
+++ b/src/api/models/index.ts
@@ -0,0 +1,20 @@
+export enum ModelTypeEnum {
+  CHAT = 'CHAT',
+  EMBEDDING = 'EMBEDDING',
+  TEXT_IMAGE = 'TEXT_IMAGE',
+  WEB_SEARCH = 'WEB_SEARCH',
+}
+
+/**
+ * 隐藏API密钥中间部分
+ * @param key API密钥
+ * @returns 隐藏处理后的密钥
+ */
+export function hideKey(key: string): string {
+  if (!key) return ''
+  const length = key.length
+  if (length <= 8) return key
+  const start = key.slice(0, 4)
+  const end = key.slice(-4)
+  return `${start}****${end}`
+}
diff --git a/src/api/new-ai/app.ts b/src/api/new-ai/app.ts
new file mode 100644
index 0000000..046e213
--- /dev/null
+++ b/src/api/new-ai/app.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+// AI 应用 API
+export const AppApi = {
+  // 获取应用列表
+  getAppList: async (params: any) => {
+    return await request.get({ url: '/aigc/app/list', params })
+  },
+
+  // 获取应用分页数据
+  getAppPage: async (params: any) => {
+    return await request.get({ url: '/aigc/app/page', params })
+  },
+
+  // 获取应用详情
+  getApp: async (id: string) => {
+    return await request.get({ url: `/aigc/app/${id}` })
+  },
+
+  // 根据模型ID获取应用
+  getAppByModelId: async (id: string) => {
+    return await request.get({ url: `/aigc/app/byModelId/${id}` })
+  },
+
+  // 获取应用API通道
+  getAppApiChannel: async (appId: string) => {
+    return await request.get({ url: `/aigc/app/channel/api/${appId}` })
+  },
+
+  // 新增应用
+  createApp: async (data: any) => {
+    return await request.post({ url: '/aigc/app', data })
+  },
+
+  // 更新应用
+  updateApp: async (data: any) => {
+    return await request.put({ url: '/aigc/app', data })
+  },
+
+  // 删除应用
+  deleteApp: async (id: string) => {
+    return await request.delete({ url: `/aigc/app/${id}` })
+  }
+}
diff --git a/src/api/new-ai/appApi.ts b/src/api/new-ai/appApi.ts
new file mode 100644
index 0000000..b78eb86
--- /dev/null
+++ b/src/api/new-ai/appApi.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+// AI 应用管理 API
+export const AppApiManagement = {
+  // 获取API列表
+  getApiList: async (params: any) => {
+    return await request.get({ url: '/aigc/app/api/list', params })
+  },
+
+  // 获取API分页数据
+  getApiPage: async (params: any) => {
+    return await request.get({ url: '/aigc/app/api/page', params })
+  },
+
+  // 获取API详情
+  getApi: async (id: string) => {
+    return await request.get({ url: `/aigc/app/api/${id}` })
+  },
+
+  // 新增API
+  createApi: async (data: any) => {
+    return await request.post({ url: '/aigc/app/api', data })
+  },
+
+  // 更新API
+  updateApi: async (data: any) => {
+    return await request.put({ url: '/aigc/app/api', data })
+  },
+
+  // 删除API
+  deleteApi: async (id: string) => {
+    return await request.delete({ url: `/aigc/app/api/${id}` })
+  },
+
+  // 发布API
+  publishApi: async (id: string) => {
+    return await request.put({ url: `/aigc/app/api/publish/${id}` })
+  },
+
+  // 下线API
+  offlineApi: async (id: string) => {
+    return await request.put({ url: `/aigc/app/api/offline/${id}` })
+  }
+}
diff --git a/src/api/new-ai/chat.ts b/src/api/new-ai/chat.ts
new file mode 100644
index 0000000..4f3b527
--- /dev/null
+++ b/src/api/new-ai/chat.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+import { AxiosProgressEvent } from 'axios'
+
+export function chat(
+  data: any,
+  controller: AbortController,
+  onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
+) {
+  return request.post({
+    url: '/aigc/chat/completions',
+    data,
+    signal: controller.signal,
+    onDownloadProgress,
+    isReturnNativeResponse: true
+  })
+}
+
+export function clean(conversationId: string | null) {
+  return request.delete({ 
+    url: `/aigc/chat/messages/clean/${conversationId}` 
+  })
+}
+
+export function getMessages(conversationId?: string) {
+  return request.get({ 
+    url: `/aigc/chat/messages/${conversationId}` 
+  })
+}
+
+export function getAppInfo(params: any) {
+  return request.get({ 
+    url: `/aigc/app/info`,
+    params 
+  })
+}
+
+export function getImageModels() {
+  return request.get({ 
+    url: '/aigc/chat/getImageModels' 
+  })
+}
+
+/**
+ * @description 生成图片
+ */
+export function genImage(data: any) {
+  return request.post({ 
+    url: '/aigc/chat/image', 
+    data 
+  })
+}
+
+/**
+ * @description: 生成思维导图
+ */
+export function genMindMap(data: any) {
+  return request.post({ 
+    url: '/aigc/chat/mindmap', 
+    data 
+  })
+}
diff --git a/src/api/new-ai/oss.ts b/src/api/new-ai/oss.ts
new file mode 100644
index 0000000..6fd99ad
--- /dev/null
+++ b/src/api/new-ai/oss.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/config/axios'
+
+/**
+ * OSS对象存储服务接口
+ */
+export class OssApi {
+  /**
+   * 获取OSS上传策略
+   */
+  static policy() {
+    return request.get({ 
+      url: '/oss/policy' 
+    })
+  }
+
+  /**
+   * 获取文件列表
+   */
+  static list(params: any) {
+    return request.get({ 
+      url: '/oss/list', 
+      params 
+    })
+  }
+
+  /**
+   * 删除文件
+   */
+  static del(objectName: string) {
+    return request.delete({ 
+      url: `/oss/${objectName}` 
+    })
+  }
+
+  /**
+   * 上传文件
+   */
+  static upload(data: FormData) {
+    return request.post({
+      url: '/aigc/oss/upload',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      data
+    })
+  }
+
+  /**
+   * 获取文件访问URL
+   */
+  static getUrl(objectName: string) {
+    return request.get({ 
+      url: `/oss/url/${objectName}` 
+    })
+  }
+}
diff --git a/src/components/Error/src/Error.vue b/src/components/Error/src/Error.vue
index 3fd7a17..2bfab24 100644
--- a/src/components/Error/src/Error.vue
+++ b/src/components/Error/src/Error.vue
@@ -3,7 +3,7 @@ import pageError from '@/assets/svgs/404.svg'
 import networkError from '@/assets/svgs/500.svg'
 import noPermission from '@/assets/svgs/403.svg'
 import { propTypes } from '@/utils/propTypes'
-
+import { onBeforeRouteUpdate } from 'vue-router'
 defineOptions({ name: 'Error' })
 
 interface ErrorMap {
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..5b89fb4
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue';
+  import { Icon } from '@iconify/vue';
+
+  interface Props {
+    icon?: string;
+  }
+
+  defineProps<Props>();
+
+  const attrs = useAttrs();
+
+  const bindAttrs = computed<{ class: string; style: string }>(() => ({
+    class: (attrs.class as string) || '',
+    style: (attrs.style as string) || '',
+  }));
+</script>
+
+<template>
+  <Icon :icon="icon!" v-bind="bindAttrs" />
+</template>
diff --git a/src/hooks/setting/index.ts b/src/hooks/setting/index.ts
new file mode 100644
index 0000000..76003b2
--- /dev/null
+++ b/src/hooks/setting/index.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { GlobConfig } from '/#/config';
+
+import { warn } from '@/utils/log';
+import { getAppEnvConfig } from '@/utils/env';
+
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_IMG_URL,
+  } = getAppEnvConfig();
+
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_UPLOAD_URL,
+    imgUrl: VITE_GLOB_IMG_URL,
+  };
+  return glob as Readonly<GlobConfig>;
+};
diff --git a/src/hooks/setting/useDesignSetting.ts b/src/hooks/setting/useDesignSetting.ts
new file mode 100644
index 0000000..d93dec1
--- /dev/null
+++ b/src/hooks/setting/useDesignSetting.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { computed } from 'vue';
+import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+export function useDesignSetting() {
+  const designStore = useDesignSettingStore();
+
+  const getDarkTheme = computed(() => designStore.darkTheme);
+
+  const getAppTheme = computed(() => designStore.appTheme);
+
+  const getAppThemeList = computed(() => designStore.appThemeList);
+
+  return {
+    getDarkTheme,
+    getAppTheme,
+    getAppThemeList,
+  };
+}
diff --git a/src/hooks/setting/useProjectSetting.ts b/src/hooks/setting/useProjectSetting.ts
new file mode 100644
index 0000000..32a13da
--- /dev/null
+++ b/src/hooks/setting/useProjectSetting.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { computed } from 'vue';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+export function useProjectSetting() {
+  const projectStore = useProjectSettingStore();
+
+  const navMode = computed(() => projectStore.navMode);
+
+  const navTheme = computed(() => projectStore.navTheme);
+
+  const isMobile = computed(() => projectStore.isMobile);
+
+  const headerSetting = computed(() => projectStore.headerSetting);
+
+  const multiTabsSetting = computed(() => projectStore.multiTabsSetting);
+
+  const menuSetting = computed(() => projectStore.menuSetting);
+
+  const crumbsSetting = computed(() => projectStore.crumbsSetting);
+
+  const permissionMode = computed(() => projectStore.permissionMode);
+
+  const showFooter = computed(() => projectStore.showFooter);
+
+  const isPageAnimate = computed(() => projectStore.isPageAnimate);
+
+  const pageAnimateType = computed(() => projectStore.pageAnimateType);
+
+  return {
+    navMode,
+    navTheme,
+    isMobile,
+    headerSetting,
+    multiTabsSetting,
+    menuSetting,
+    crumbsSetting,
+    permissionMode,
+    showFooter,
+    isPageAnimate,
+    pageAnimateType,
+  };
+}
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
new file mode 100644
index 0000000..b91faa1
--- /dev/null
+++ b/src/settings/projectSetting.ts
@@ -0,0 +1,59 @@
+
+
+const setting = {
+  //导航模式 vertical 左侧菜单模式 horizontal 顶部菜单模式
+  navMode: 'vertical',
+  //导航风格 dark 暗色侧边栏 light 白色侧边栏 header-dark 暗色顶栏
+  navTheme: 'dark',
+  // 是否处于移动端模式
+  isMobile: false,
+  //顶部
+  headerSetting: {
+    //背景色
+    bgColor: '#fff',
+    //固定顶部
+    fixed: true,
+    //显示重载按钮
+    isReload: true,
+  },
+  //页脚
+  showFooter: false,
+  //多标签
+  multiTabsSetting: {
+    //背景色
+    bgColor: '#fff',
+    //是否显示
+    show: true,
+    //固定多标签
+    fixed: true,
+  },
+  //菜单
+  menuSetting: {
+    //最小宽度
+    minMenuWidth: 64,
+    //菜单宽度
+    menuWidth: 200,
+    //固定菜单
+    fixed: true,
+    //分割菜单
+    mixMenu: false,
+    //触发移动端侧边栏的宽度
+    mobileWidth: 800,
+    // 折叠菜单
+    collapsed: false,
+  },
+  //面包屑
+  crumbsSetting: {
+    //是否显示
+    show: false,
+    //显示图标
+    showIcon: false,
+  },
+  //菜单权限模式 FIXED 前端固定路由  BACK 动态获取
+  permissionMode: 'BACK',
+  //是否开启路由动画
+  isPageAnimate: true,
+  //路由动画类型
+  pageAnimateType: 'fade-slide',
+};
+export default setting;
diff --git a/src/store/modules/projectSetting.ts b/src/store/modules/projectSetting.ts
new file mode 100644
index 0000000..fdf16c8
--- /dev/null
+++ b/src/store/modules/projectSetting.ts
@@ -0,0 +1,96 @@
+
+
+import { defineStore } from 'pinia';
+import projectSetting from '@/settings/projectSetting.ts';
+// import {ICrumbsSetting, IHeaderSetting, IMenuSetting, IMultiTabsSetting} from "../../../types/config";
+import type { ICrumbsSetting, IHeaderSetting, IMenuSetting, IMultiTabsSetting } from '/#/config';
+const {
+  navMode,
+  navTheme,
+  isMobile,
+  headerSetting,
+  showFooter,
+  menuSetting,
+  multiTabsSetting,
+  crumbsSetting,
+  permissionMode,
+  isPageAnimate,
+  pageAnimateType,
+} = projectSetting;
+
+interface ProjectSettingState {
+  navMode: string; //导航模式
+  navTheme: string; //导航风格
+  headerSetting: IHeaderSetting; //顶部设置
+  showFooter: boolean; //页脚
+  menuSetting: IMenuSetting; //多标签
+  multiTabsSetting: IMultiTabsSetting; //多标签
+  crumbsSetting: ICrumbsSetting; //面包屑
+  permissionMode: string; //权限模式
+  isPageAnimate: boolean; //是否开启路由动画
+  pageAnimateType: string; //路由动画类型
+  isMobile: boolean; // 是否处于移动端模式
+}
+
+export const useProjectSettingStore = defineStore({
+  id: 'app-project-setting',
+  state: (): ProjectSettingState => ({
+    navMode: navMode,
+    navTheme,
+    isMobile,
+    headerSetting,
+    showFooter,
+    menuSetting,
+    multiTabsSetting,
+    crumbsSetting,
+    permissionMode,
+    isPageAnimate,
+    pageAnimateType,
+  }),
+  getters: {
+    getNavMode(): string {
+      return this.navMode;
+    },
+    getNavTheme(): string {
+      return this.navTheme;
+    },
+    getIsMobile(): boolean {
+      return this.isMobile;
+    },
+    getHeaderSetting(): object {
+      return this.headerSetting;
+    },
+    getShowFooter(): boolean {
+      return this.showFooter;
+    },
+    getMenuSetting(): object {
+      return this.menuSetting;
+    },
+    getMultiTabsSetting(): object {
+      return this.multiTabsSetting;
+    },
+    getCrumbsSetting(): object {
+      return this.crumbsSetting;
+    },
+    getPermissionMode(): string {
+      return this.permissionMode;
+    },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
+  },
+  actions: {
+    setNavTheme(value: string): void {
+      this.navTheme = value;
+    },
+    setIsMobile(value: boolean): void {
+      this.isMobile = value;
+    },
+    setMenuCollapse() {
+      this.menuSetting.collapsed = true;
+    },
+  },
+});
diff --git a/src/utils/copy.ts b/src/utils/copy.ts
new file mode 100644
index 0000000..c1be43b
--- /dev/null
+++ b/src/utils/copy.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function copyToClip(text: string) {
+  return navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      return Promise.resolve(text);
+    })
+    .catch((error) => {
+      return Promise.reject(error);
+    });
+}
diff --git a/src/utils/log.ts b/src/utils/log.ts
new file mode 100644
index 0000000..501715e
--- /dev/null
+++ b/src/utils/log.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const projectName = import.meta.env.VITE_GLOB_APP_TITLE;
+
+export function warn(message: string) {
+  console.warn(`[${projectName} warn]:${message}`);
+}
+
+export function error(message: string) {
+  throw new Error(`[${projectName} error]:${message}`);
+}
diff --git a/src/views/ai/app/ApiTable.vue b/src/views/ai/app/ApiTable.vue
new file mode 100644
index 0000000..78645f4
--- /dev/null
+++ b/src/views/ai/app/ApiTable.vue
@@ -0,0 +1,132 @@
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete, DocumentCopy } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { Table } from '@/components/Table'
+import { useTable } from '@/hooks/web/useTable'
+import { copyToClip } from '@/utils/copy'
+import { AppApiManagement } from '@/api/new-ai/appApi'
+import { hideKey } from '@/api/models/index'
+import { TableColumn } from '@/types/table'
+
+const props = defineProps({
+  channel: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['reload'])
+const router = useRouter()
+
+// 表格配置
+const columns = ref<TableColumn[]>([
+  {
+    label: '密钥',
+    field: 'apiKey',
+    formatter: (row: any) => hideKey(row.apiKey)
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    width: 180
+  },
+  {
+    label: '操作',
+    field: 'action',
+    width: 150
+  }
+])
+
+// 使用表格Hook
+const { register, methods, tableObject } = useTable({
+  getListApi: async (params) => {
+    const res = await AppApiManagement.getApiList({
+      ...params,
+      appId: router.currentRoute.value.params.id,
+      channel: props.channel
+    })
+    return {
+      list: res.data,
+      total: res.total
+    }
+  }
+})
+
+// 复制API密钥
+const handleCopy = async (record: any) => {
+  await copyToClip(record.apiKey)
+  ElMessage.success('密钥复制成功')
+}
+
+// 删除API
+const handleDelete = (record: any) => {
+  ElMessageBox.confirm('确定要删除该API吗？删除后原Key将立即失效，请谨慎操作', '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  })
+    .then(async () => {
+      try {
+        await AppApiManagement.deleteApi(record.id)
+        ElMessage.success('删除成功')
+        methods.getList()
+      } catch (error) {
+        ElMessage.error('删除失败')
+      }
+    })
+    .catch(() => {})
+}
+
+// 新增API
+const handleAdd = async () => {
+  try {
+    await AppApiManagement.createApi({
+      appId: router.currentRoute.value.params.id,
+      channel: props.channel
+    })
+    ElMessage.success('新增成功')
+    methods.getList()
+  } catch (error) {
+    ElMessage.error('新增失败')
+  }
+}
+const pagination = computed(() => {
+  return {
+    total: tableObject.total,
+    currentPage: tableObject.currentPage,
+    pageSize: tableObject.pageSize
+  }
+})
+// 初始加载
+onMounted(() => {
+  methods.getList()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <el-button type="primary" class="mb-10px" @click="handleAdd">新增密钥</el-button>
+    <Table
+      border
+      :columns="columns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="pagination"
+      @register="register"
+    >
+      <template #action="{ row }">
+        <el-button :icon="DocumentCopy" text type="primary" @click="handleCopy(row)" />
+        <el-button :icon="Delete" text type="danger" @click="handleDelete(row)" />
+      </template>
+    </Table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+</style>
diff --git a/src/views/ai/app/base/index.vue b/src/views/ai/app/base/index.vue
new file mode 100644
index 0000000..2b7664a
--- /dev/null
+++ b/src/views/ai/app/base/index.vue
@@ -0,0 +1,105 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import PromptPage from './prompt/index.vue'
+import SettingsPage from './settings/index.vue'
+import Chat from '@/views/ai/chat/Chat.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useAppStore } from '../store'
+import { useChatStore } from '@/views/ai/chat/store/useChatStore'
+import { getAppInfo } from '@/api/new-ai/chat'
+import { formatToDateTime } from '@/utils/dateUtil'
+
+const appStore = useAppStore()
+const chatStore = useChatStore()
+const router = useRouter()
+const route = useRoute()
+const form = ref<any>({})
+const loading = ref(false)
+
+onMounted(async () => {
+  await fetchData()
+})
+
+async function fetchData() {
+  loading.value = true
+  const id = route.params.id
+  try {
+    const data = await getAppInfo({
+      appId: id,
+      conversationId: null
+    })
+    form.value = data
+    appStore.info = data
+    appStore.knowledgeIds = data.knowledgeIds == null ? [] : data.knowledgeIds
+    appStore.modelId = data.modelId == null ? null : data.modelId
+    appStore.knowledges = data.knowledges == null ? [] : data.knowledges
+    chatStore.modelId = data.modelId == null ? null : data.modelId
+    chatStore.appId = data.id
+  } catch (error) {
+    ElMessage.error('获取应用信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function onSave() {
+  loading.value = true
+  try {
+    form.value.saveTime = formatToDateTime(new Date())
+    await appStore.updateInfo()
+    ElMessage.success('应用配置保存成功')
+  } catch (error) {
+    ElMessage.error('保存应用配置失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-container class="h-full" v-loading="loading">
+    <el-aside width="30%" class="h-full">
+      <div class="p-2 h-full bg-white rounded-lg">
+        <PromptPage @update="onSave" />
+      </div>
+    </el-aside>
+    <el-container class="h-full ml-2">
+      <el-aside width="40%" class="h-full">
+        <div class="p-2 h-full bg-white rounded-lg">
+          <SettingsPage @update="onSave" />
+        </div>
+      </el-aside>
+      <el-main class="h-full ml-2">
+        <div class="pb-10 h-full w-full bg-white rounded-xl">
+          <Chat />
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-aside) {
+  overflow-x: hidden;
+}
+:deep(.el-main) {
+  padding: 0;
+}
+</style>
diff --git a/src/views/ai/app/base/prompt/index.vue b/src/views/ai/app/base/prompt/index.vue
new file mode 100644
index 0000000..e167c3c
--- /dev/null
+++ b/src/views/ai/app/base/prompt/index.vue
@@ -0,0 +1,49 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+  import { useAppStore } from '@/views/ai/app/store';
+
+  const emit = defineEmits(['update']);
+  const appStore = useAppStore();
+
+  async function onUpdate() {
+    emit('update');
+  }
+</script>
+
+<template>
+  <div class="h-full flex flex-col gap-2">
+    <div class="p-2 flex justify-between items-center">
+      <div class="text-md font-bold">Prompt 提示词</div>
+    </div>
+    <div class="p-4 pt-0 h-full mb-10">
+      <el-input
+      type="textarea"
+        v-model="appStore.info.prompt"
+        class="h-full w-full bg-transparent"
+        @blur="onUpdate"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-textarea__inner) {
+  height: 100%;
+  
+}
+</style>
diff --git a/src/views/ai/app/base/settings/KnowledgeList.vue b/src/views/ai/app/base/settings/KnowledgeList.vue
new file mode 100644
index 0000000..4d352be
--- /dev/null
+++ b/src/views/ai/app/base/settings/KnowledgeList.vue
@@ -0,0 +1,102 @@
+
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { KnowledgeApi  } from '@/api/new-ai/knowledge'
+import { useAppStore } from '@/views/ai/app/store'
+
+const dialogVisible = ref(false)
+const knowledges = ref()
+const appStore = useAppStore()
+
+async function show() {
+  knowledges.value = await KnowledgeApi.getKnowledgeList({})
+  await nextTick()
+  dialogVisible.value = true
+}
+
+function onAdd(item) {
+  appStore.addKnowledge(item)
+  ElMessage.success('关联成功')
+}
+
+function onRemove(item) {
+  appStore.removeKnowledge(item)
+  ElMessage.success('移除成功')
+}
+
+defineExpose({ show })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="关联知识库"
+    width="40%"
+    :close-on-click-modal="false"
+    destroy-on-close
+  >
+    <el-alert
+      class="w-full mb-2 mt-2"
+      title="注意：只能选择相同纬度向量库配置（以及相同向量模型）的知识库"
+      type="info"
+      :closable="false"
+      show-icon
+    />
+    <el-scrollbar height="400px">
+      <el-menu>
+        <el-menu-item v-for="item in knowledges" :key="item.id" class="!px-1">
+          <div class="flex items-center justify-between w-full">
+            <div class="flex gap-1 items-center">
+              <el-icon class="text-3xl"><Document /></el-icon>
+              <div>{{ item.name }}</div>
+
+              <el-divider v-if="item.embedModel != null" direction="vertical" />
+              <el-tag v-if="item.embedModel != null" type="success" size="small" round>
+                <div class="flex gap-1 px-1.5">
+                  <el-icon><Monitor /></el-icon>
+                  <span>{{ item.embedModel.name }}</span>
+                </div>
+              </el-tag>
+
+              <el-divider v-if="item.embedStore != null" direction="vertical" class="!mx-1" />
+              <el-tag v-if="item.embedStore != null" type="primary" size="small" round>
+                <div class="flex gap-1 px-1.5">
+                  <el-icon><DataLine /></el-icon>
+                  <span>{{ item.embedStore.name }}</span>
+                </div>
+              </el-tag>
+            </div>
+            <el-button
+              v-if="!appStore.knowledgeIds.includes(item.id)"
+              class="rounded-2xl py-0 px-6"
+              type="info"
+              plain
+              size="small"
+              @click="onAdd(item)"
+            >
+              关联
+            </el-button>
+            <el-button
+              v-else
+              class="rounded-2xl py-0 px-6"
+              type="danger"
+              plain
+              size="small"
+              @click="onRemove(item)"
+            >
+              移除
+            </el-button>
+          </div>
+        </el-menu-item>
+      </el-menu>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-dialog__body) {
+  padding: 10px 20px;
+}
+</style>
diff --git a/src/views/ai/app/base/settings/index.vue b/src/views/ai/app/base/settings/index.vue
new file mode 100644
index 0000000..39b47eb
--- /dev/null
+++ b/src/views/ai/app/base/settings/index.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import KnowledgeList from './KnowledgeList.vue'
+import ModelSelect from '@/views/common/ModelSelect.vue'
+import { ref } from 'vue'
+import { useAppStore } from '@/views/ai/app/store'
+import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
+const emit = defineEmits(['update'])
+const appStore = useAppStore()
+const knowledgeRef = ref()
+
+async function onSaveModel(val) {
+  appStore.modelId = val.id
+  emit('update')
+}
+
+function onShowKbPane() {
+  knowledgeRef.value.show()
+}
+
+function onRemove(item) {
+  appStore.removeKnowledge(item)
+}
+</script>
+
+<template>
+  <div class="p-2 py-4 flex flex-col gap-3">
+    <el-collapse :model-value="['0', '1']">
+      <el-collapse-item name="0" title="基础配置">
+        <div class="flex items-center">
+          <div class="w-24">对话模型：</div>
+          <ModelSelect :id="appStore.modelId" class="w-full" @update="onSaveModel" />
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="1" title="知识库">
+        <template #icon="{ isActive }">
+          <div class="flex-1 text-right">
+            <el-button text @click.stop="onShowKbPane" class="flot-right">
+              <SvgIcon class="text-lg" icon="ic:round-plus" />
+            </el-button>
+            <el-icon class="el-collapse-item__arrow " :class="{ 'is-active': isActive }">
+              <ArrowRight />
+            </el-icon>
+          </div>
+        </template>
+        <div v-if="appStore.knowledges">
+          <div class="knowledge-list">
+            <div
+              v-for="item in appStore.knowledges"
+              :key="item.id"
+              class="knowledge-item w-full bg-white overflow-hidden rounded-lg hover:bg-gray-100 p-3 mb-2"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex gap-1 items-center">
+                  <SvgIcon class="text-3xl" icon="flat-color-icons:document" />
+                  <div>{{ item.name }}</div>
+                </div>
+                <el-button text @click="onRemove(item)">
+                  <SvgIcon icon="gg:remove" />
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <div v-if="appStore.knowledges.length == 0" class="text-gray-400 text-md">
+            将文档、URL、三方数据源上传为文本知识库后，用户发送消息时，Bot
+            能够引用文本知识中的内容回答用户问题。
+          </div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+
+    <KnowledgeList ref="knowledgeRef" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-collapse-item__header {
+  font-weight: 600 !important;
+  color: #060709cc;
+}
+
+.knowledge-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.knowledge-item {
+  transition: all 0.2s ease;
+  border: 1px solid #eee;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>
diff --git a/src/views/ai/app/channel-api/components/docs.vue b/src/views/ai/app/channel-api/components/docs.vue
new file mode 100644
index 0000000..a45c3ba
--- /dev/null
+++ b/src/views/ai/app/channel-api/components/docs.vue
@@ -0,0 +1,113 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+  import hljs from 'highlight.js';
+  import javascript from 'highlight.js/lib/languages/javascript';
+
+  hljs.registerLanguage('javascript', javascript);
+
+  const url = `http://langchat.cn`;
+  const request = `
+POST /v1/chat/completions HTTP/1.1
+Content-Type: application/json
+Authorization: 'Bearer YOUR_ACCESS_TOKEN'
+Body:
+{
+    "messages": [
+        { "role": "user", "content": "你好" }
+    ]
+}
+  `;
+
+  const response = `
+data: {"choices": [{"index": 0, "delta": {"content": "你好！"}, "finish_reason": null}], "session_id": null}
+
+data: {"choices": [{"index": 0, "delta": {"content": "我能"}, "finish_reason": null}], "session_id": null}
+
+data: {"choices": [{"index": 0, "delta": {"content": "为你"}, "finish_reason": null}], "session_id": null}
+
+data: {"choices": [{"index": 0, "delta": {"content": "做些什么？"}, "finish_reason": null}], "session_id": null}
+
+data: {"choices": [{"index": 0, "delta": {}, "finish_reason": "stop", "usage": {"prompt_tokens": 9, "completion_tokens": 6, "total_tokens": 15}}], "session_id": null}
+  `;
+
+  const demo = `
+const url = 'http://langchat.cn/v1/chat/completions';
+const data = {
+    "messages": [
+        { "role": "user", "content": "你好" }
+    ]
+};
+
+fetch(url, {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
+  },
+  body: JSON.stringify(data)
+})
+.then(response => {
+  if (!response.ok) {
+    throw new Error('Network response was not ok ' + response.statusText);
+  }
+  return response.json();
+})
+.then(jsonData => {
+  console.log('Success:', jsonData);
+})
+.catch(error => {
+  console.error('Error:', error);
+});
+  `;
+</script>
+
+<template>
+  <div class="p-4 bg-white h-full overflow-auto rounded">
+    <n-config-provider :hljs="hljs" class="flex flex-col gap-4">
+      <div>
+        <n-alert title="API URL（API接口格式遵循OpenAI格式）" type="info" />
+        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
+          <n-code :code="url" class="text-white" language="JavaScript" />
+        </div>
+      </div>
+
+      <div>
+        <n-alert title="Request" type="info" />
+        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
+          <n-code :code="request" class="text-white" language="JavaScript" />
+        </div>
+      </div>
+
+      <div>
+        <n-alert title="Response（Stream）" type="info" />
+        <div class="bg-[#18181c] py-2 mt-2 px-4 overflow-x-auto rounded">
+          <n-code :code="response" class="text-white" language="JavaScript" />
+        </div>
+      </div>
+
+      <div>
+        <n-alert title="API请求示例" type="info" />
+        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
+          <n-code :code="demo" class="text-white" language="javascript" />
+        </div>
+      </div>
+    </n-config-provider>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/ai/app/channel-api/index.vue b/src/views/ai/app/channel-api/index.vue
new file mode 100644
index 0000000..e7ccb0e
--- /dev/null
+++ b/src/views/ai/app/channel-api/index.vue
@@ -0,0 +1,33 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+  import Docs from './components/docs.vue';
+  import ApiTable from '@/views/ai/app/ApiTable.vue';
+  import { CHANNEL } from '@/views/ai/app/columns';
+</script>
+
+<template>
+  <div class="w-full my-3 pb-8 flex items-start justify-start gap-2 h-full">
+    <div class="bg-white p-4 rounded w-4/5 h-full">
+      <ApiTable :channel="CHANNEL.API" />
+    </div>
+
+    <Docs class="w-full" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/ai/app/columns.ts b/src/views/ai/app/columns.ts
new file mode 100644
index 0000000..fcbf7cc
--- /dev/null
+++ b/src/views/ai/app/columns.ts
@@ -0,0 +1,64 @@
+
+
+import { FormSchema } from '@/types/form';
+
+export const CHANNEL = {
+  API: 'CHANNEL_API',
+  WEB: 'CHANNEL_WEB',
+};
+
+export const searchSchemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入Prompt标题查询',
+    },
+  },
+];
+
+export const formSchemas: FormSchema[] = [
+  // {
+  //   field: 'id',
+  //   label: 'ID',
+  //   component: 'Input',
+  //   isHidden: true,
+  // },
+  {
+    field: 'name',
+    label: '应用名称',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请输入应用名称', trigger: ['blur'] }]
+    },
+  },
+  {
+    field: 'modelId',
+    label: '关联模型',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请选择关联模型', trigger: ['blur'] }]
+    },
+  },
+  {
+    field: 'cover',
+    label: '应用封面',
+    component: 'Input',
+  },
+  {
+    field: 'des',
+    label: '应用描述',
+    component: 'Input',
+    componentProps: {
+      isFull: true,
+      placeholder: '请输入应用描述',
+      type: 'textarea',
+      autosize: {
+        minRows: 5,
+        maxRows: 8,
+      },
+    },
+    // rules: [{ required: true, message: '请输入应用描述', trigger: ['blur'] }],
+  },
+];
diff --git a/src/views/ai/app/edit.vue b/src/views/ai/app/edit.vue
new file mode 100644
index 0000000..0e38a29
--- /dev/null
+++ b/src/views/ai/app/edit.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { nextTick, ref } from 'vue'
+import { FormSchema } from '@/types/form'
+import { AppApi } from '@/api/new-ai/app'
+import { ElMessage } from 'element-plus'
+
+const emit = defineEmits(['reload'])
+const visible = ref(false)
+const formData = ref({})
+const formRef = ref()
+const schemas = ref<FormSchema[]>([
+  {
+    field: 'name',
+    label: '应用名称',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+      rules: [
+      { required: true, message: '请输入应用名称' },
+      { min: 2, max: 20, message: '长度在2-20个字符' }
+    ]
+    },
+    componentProps: {
+      placeholder: '请输入应用名称'
+    },
+   
+  },
+  {
+    field: 'description',
+    label: '应用描述',
+    component: 'Input',
+    formItemProps: {
+      required: true,
+      rules: [
+      { required: true, message: '请输入应用描述' },
+      { min: 2, max: 200, message: '长度在2-200个字符' }
+    ]
+    },
+    componentProps: {
+      type: 'textarea',
+      rows: 4,
+      placeholder: '请输入应用描述'
+    },
+   
+  },
+  {
+    field: 'icon',
+    label: '应用图标',
+    component: 'Input',
+    formItemProps: {
+      required: false,
+    },
+    componentProps: {
+      placeholder: '请输入应用图标'
+    }
+  },
+  {
+    field: 'modelId',
+    label: '关联模型',
+    component: 'Input',
+    formItemProps: {
+      required: false,
+    },
+    componentProps: {
+      placeholder: '请选择关联模型'
+    }
+  }
+])
+const isEdit = ref(false)
+const loading = ref(false)
+
+const close = () => {
+  visible.value = false
+  formRef.value.clearForm()
+}
+
+const show = async (data: any = {}) => {
+  visible.value = true
+  isEdit.value = !!data.id
+  await nextTick()
+  if (data.id) {
+    loading.value = true
+    try {
+      const res = await AppApi.getApp(data.id)
+      formRef.value.setValues(res.data)
+    } catch (error) {
+      ElMessage.error('获取应用详情失败')
+    } finally {
+      loading.value = false
+    }
+  } else {
+    formRef.value.setValues(data)
+  }
+}
+
+const handleSubmit = async () => {
+  try {
+    const form = formRef.value.getElFormRef()
+    await form.validate()
+    const values = formRef.value.formModel
+    loading.value = true
+    
+    if (isEdit.value) {
+      await AppApi.updateApp(values)
+      ElMessage.success('更新应用成功')
+    } else {
+      await AppApi.createApp(values)
+      ElMessage.success('创建应用成功')
+    }
+    close()
+    emit('reload')
+  } catch (error) {
+    console.error('Failed to save app:', error)
+    ElMessage.error(isEdit.value ? '更新应用失败' : '创建应用失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({
+  show,
+  close
+})
+</script>
+
+<template>
+  <el-dialog 
+    v-model="visible" 
+    :close-on-click-modal="!loading" 
+    :close-on-press-escape="!loading" 
+    draggable
+    :title="isEdit ? '编辑应用' : '新增应用'" 
+    width="500px"
+    @close="close"
+  >
+    <Form 
+      ref="formRef" 
+      :model="formData" 
+      :schema="schemas"
+      v-loading="loading"
+    />
+    <template #footer>
+      <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
+      <el-button @click="close" :loading="loading">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/ai/app/index.vue b/src/views/ai/app/index.vue
new file mode 100644
index 0000000..08ba0bf
--- /dev/null
+++ b/src/views/ai/app/index.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { AppApi } from '@/api/new-ai/app'
+import EditCom from './edit.vue'
+type TableDataItem = {
+  id: number
+  name: string
+  description: string
+  apiKey: string
+  provider: string
+  channel: string
+  createTime: string
+}
+// 组件实例
+const editRef = ref()
+const router = useRouter()
+
+// 数据
+const loading = ref(false)
+const tableData = ref<TableDataItem[]>([
+  {
+    id: 1,
+    name: '',
+    description: '',
+    apiKey: '',
+    provider: '',
+    channel: '',
+    createTime: ''
+  }
+])
+
+// 加载数据
+const loadData = async () => {
+  try {
+    loading.value = true
+    const res = await AppApi.getAppList({})
+    tableData.value = res.data || []
+  } catch (error) {
+    ElMessage.error('获取应用列表失败')
+    console.error('Failed to fetch app list:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 新增应用
+const handleAdd = () => {
+  editRef.value?.show()
+}
+
+// 编辑应用
+const handleEdit = (record: Recordable) => {
+  editRef.value?.show(record.id)
+}
+
+// 删除应用
+const handleDelete = (record: any) => {
+  ElMessageBox.confirm('确定要删除该应用吗？', '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  })
+    .then(async () => {
+      try {
+        await AppApi.deleteApp(record.id)
+        ElMessage.success('删除成功')
+        loadData()
+      } catch (error) {
+        ElMessage.error('删除失败')
+      }
+    })
+    .catch(() => {})
+}
+
+// 查看详情
+const handleInfo = (record: any) => {
+  router.push({
+    path: `/ai/app/${record.id}`
+  })
+}
+
+// 初始加载
+onMounted(() => {
+  loadData()
+})
+
+</script>
+
+<template>
+  <div class="app-container">
+    <el-row :gutter="20" v-loading="loading">
+      <el-col :span="6">
+        <div
+          class="h-full p-10px bg-[#eceef0] transition-all duration-300 hover:border hover:border-blue-400 border border-transparent cursor-pointer rounded-xl group"
+        >
+          <div class="font-bold text-xs mb-1.5 px-6 text-gray-500">创建应用</div>
+          <div
+            class="w-full transition-all hover:bg-white rounded-lg py-1.5 px-6 flex items-center gap-1 font-medium hover:text-blue-500"
+            @click="handleAdd"
+          >
+            <el-icon>
+              <Plus />
+            </el-icon>
+            <span class="text-sm">创建空白应用</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col
+        v-for="item in tableData.concat(tableData).concat(tableData).concat(tableData)"
+        :key="item.id"
+        :span="6"
+      >
+        <el-card
+          class="app-card cursor-pointer w-full"
+          shadow="hover"
+          @click="handleInfo(item)"
+        >
+          <template #header>
+            <div class="flex items-center">
+              <div class="sm:mx-4">
+                <div class="relative bg-orange-100 p-4 rounded-lg">
+                  <SvgIcon class="text-3xl" icon="prime:microchip-ai" />
+
+                  <div
+                    class="absolute bottom-[-6px] p-1 right-[-5px] shadow bg-white mx-auto rounded-lg"
+                  >
+                    <SvgIcon class="text-sm text-orange-500" icon="lucide:bot" />
+                  </div>
+                </div>
+              </div>
+              <span class="text-lg font-medium">{{ item.name }}</span>
+            </div>
+          </template>
+          <div class="app-card-content flex justify-between items-center">
+            <p class="text-gray-600">{{ item.description || '暂无描述' }}</p>
+            <el-dropdown trigger="hover" width="500px">
+              <div
+                :class="[activeDropdownId === item.id ? 'bg-gray-200' : 'hover:bg-gray-200']"
+                class="rounded p-1 transition-all"
+              >
+                <SvgIcon class="w-5 h-5" icon="ri:more-fill" />
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click.stop="handleEdit(item)">编辑此应用</el-dropdown-item>
+                  <el-dropdown-item @click.stop="handleDelete(item)">删除此应用</el-dropdown-item>
+                  <el-dropdown-item disabled divided>
+                    <div class='w-150px'>
+                      <div>信息</div>
+                      <span class='text-xs text-stone-500'>
+                      创建时间：{{item.createTime}}
+                    </span>
+                    </div>
+                    
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <EditCom ref="editRef" @reload="loadData" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+.group:hover {
+  border: 1px solid var(--el-color-primary);
+}
+.app-card {
+  height: 100%;
+  transition: all 0.3s;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+}
+.el-col {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/ai/app/info.vue b/src/views/ai/app/info.vue
new file mode 100644
index 0000000..000cb5b
--- /dev/null
+++ b/src/views/ai/app/info.vue
@@ -0,0 +1,98 @@
+
+
+<script lang="ts" setup>
+  import AppBase from './base/index.vue';
+  import ApiChannel from './channel-api/index.vue';
+  // import SvgIcon from '@/components/SvgIcon/index.vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { useAppStore } from './store';
+  import { getAppInfo } from '@/api/new-ai/chat';
+
+  const appStore = useAppStore();
+  const router = useRouter();
+  const route = useRoute();
+  const form = ref<any>({name: 123});
+  const loading = ref(false);
+  const activeMenus = [
+    { key: 'setting', icon: 'uil:setting', label: '应用配置' },
+    { key: 'api', icon: 'hugeicons:api', label: 'API接入渠道' },
+  ];
+
+  onMounted(async () => {
+    await fetchData();
+  });
+
+  async function fetchData() {
+    loading.value = true;
+    const id = route.params.id;
+    const data = await getAppInfo({
+      appId: id,
+      conversationId: null,
+    });
+    form.value = data;
+    loading.value = false;
+  }
+</script>
+
+<template>
+  <div v-if="form.name !== undefined" class="rounded bg-[#f9f9f9] w-full h-full pb-10 children">
+    <div class="p-4 flex justify-between items-center bg-white rounded">
+      <div class="flex gap-5 items-center min-w-20">
+        <el-button text type="primary" @click="router.push('/ai/app')">
+          <SvgIcon class="text-xl" icon="icon-park-outline:back" />
+        </el-button>
+        <div class="flex gap-2 items-center pr-4">
+          <div class="mr-3">
+            <div class="relative bg-orange-100 p-4 rounded-lg">
+              <SvgIcon class="text-3xl" icon="prime:microchip-ai" />
+
+              <div
+                class="absolute bottom-[-6px] p-1 right-[-5px] shadow bg-white mx-auto rounded-lg"
+              >
+                <SvgIcon class="text-sm text-orange-500" icon="lucide:bot" />
+              </div>
+            </div>
+          </div>
+
+          <div class="flex flex-col justify-between gap-2">
+            <div class="font-bold text-lg">{{ form.name }}</div>
+            <div v-if="!loading" class="text-gray-400 text-xs">自动保存：{{ form.saveTime }}</div>
+            <div v-else class="flex items-center gap-1 text-gray-400 text-xs">
+              <SvgIcon icon="eos-icons:bubble-loading" />保存中...
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <el-button
+          v-for="item in activeMenus"
+          :key="item.key"
+          :type="appStore.activeMenu === item.key ? 'primary' : 'default'"
+          class="!px-5 !rounded-2xl"
+          secondary
+          strong
+          @click="appStore.setActiveMenu(item.key)"
+        >
+          <template #icon>
+            <SvgIcon :icon="item.icon" />
+          </template>
+          {{ item.label }}
+        </el-button>
+      </div>
+    </div> 
+    <AppBase v-if="appStore.activeMenu === 'setting'" />
+    <ApiChannel v-if="appStore.activeMenu === 'api'" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.children {
+  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 4)) !important;
+  box-sizing: border-box;
+  &>* {
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/views/ai/app/store/index.ts b/src/views/ai/app/store/index.ts
new file mode 100644
index 0000000..75d71ce
--- /dev/null
+++ b/src/views/ai/app/store/index.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineStore } from 'pinia';
+import { AppApi } from '@/api/new-ai/app';
+
+export interface AppState {
+  activeMenu: string;
+  info: any;
+  modelId: string | null;
+  knowledgeIds: any[];
+  knowledges: any[];
+}
+
+export const useAppStore = defineStore('app-store', {
+  state: (): AppState =>
+    <AppState>{
+      activeMenu: 'setting',
+      info: {},
+      modelId: '',
+      knowledgeIds: [],
+      knowledges: [],
+    },
+
+  getters: {},
+
+  actions: {
+    setActiveMenu(active: string) {
+      this.activeMenu = active;
+    },
+    addKnowledge(item: any) {
+      this.knowledgeIds.push(item.id);
+      this.knowledges.push(item);
+      this.updateInfo();
+    },
+
+    removeKnowledge(item: any) {
+      this.knowledgeIds = this.knowledgeIds.filter((i) => i !== item.id);
+      this.knowledges = this.knowledges.filter((i) => i.id !== item.id);
+      this.updateInfo();
+    },
+
+    async updateInfo() {
+      this.info.modelId = this.modelId;
+      this.info.knowledgeIds = this.knowledgeIds;
+      this.info.knowledges = this.knowledges;
+      await AppApi.updateApp({ ...this.info });
+    },
+  },
+});
diff --git a/src/views/ai/chat/Chat.vue b/src/views/ai/chat/Chat.vue
new file mode 100644
index 0000000..cd94470
--- /dev/null
+++ b/src/views/ai/chat/Chat.vue
@@ -0,0 +1,244 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import Message from './message/Message.vue'
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
+import { computed, ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { useChatStore } from './store/useChatStore'
+import { useScroll } from './store/useScroll'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { CircleClose, Position } from '@element-plus/icons-vue'
+import { chat } from '@/api/new-ai/chat'
+
+const ms = ElMessage
+const chatStore = useChatStore()
+const { scrollRef, contentRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
+const { isMobile } = useProjectSetting()
+const loading = ref<boolean>(false)
+const message = ref('')
+const chatId = ref<string>('')
+const aiChatId = ref<string>('')
+let controller = new AbortController()
+
+const footerClass = computed(() => {
+  let classes = ['p-4']
+  if (isMobile.value) {
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
+  }
+  return classes
+})
+
+const dataSources = computed(() => {
+  scrollToBottom()
+  return chatStore.messages
+})
+
+function handleEnter(event: KeyboardEvent) {
+  if (!isMobile.value) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      handleSubmit()
+    }
+  } else {
+    if (event.key === 'Enter' && event.ctrlKey) {
+      event.preventDefault()
+      handleSubmit()
+    }
+  }
+}
+
+async function handleSubmit() {
+  const msg = message.value
+  if (loading.value) {
+    return
+  }
+  if (!msg || msg.trim() === '') {
+    ms.error('请先输入消息内容')
+    return
+  }
+  controller = new AbortController()
+
+  // user
+  chatId.value = uuidv4()
+  await chatStore.addMessage(msg, 'user', chatId.value)
+
+  loading.value = true
+  message.value = ''
+
+  // ai
+  await scrollToBottom()
+  aiChatId.value = uuidv4()
+  await scrollToBottom()
+  await chatStore.addMessage('', 'assistant', aiChatId.value)
+  await scrollToBottomIfAtBottom()
+
+  await onChat(msg)
+}
+
+async function onChat(message: string) {
+  try {
+    await chat(
+      {
+        chatId: chatId.value,
+        conversationId: chatStore.conversationId,
+        appId: chatStore.appId,
+        message,
+        role: 'user',
+        modelId: chatStore.modelId,
+        modelName: chatStore.modelName,
+        modelProvider: chatStore.modelProvider,
+      },
+      controller,
+      async ({ event }) => {
+        const list = event.target.responseText.split('\n\n')
+
+        let text = ''
+        let isRun = true
+        list.forEach((i: any) => {
+          if (i.startsWith('data:Error')) {
+            isRun = false
+            text += i.substring(5, i.length)
+            chatStore.updateMessage(aiChatId.value, text, true)
+            return
+          }
+          if (!i.startsWith('data:{')) {
+            return
+          }
+
+          const { done, message } = JSON.parse(i.substring(5, i.length))
+          if (done || message === null) {
+            return
+          }
+          text += message
+        })
+        if (!isRun) {
+          await scrollToBottomIfAtBottom()
+          return
+        }
+        await chatStore.updateMessage(aiChatId.value, text, false)
+        await scrollToBottomIfAtBottom()
+      }
+    )
+      .catch((e: any) => {
+        loading.value = false
+        console.error('chat error', e)
+        if (e.message !== undefined) {
+          chatStore.updateMessage(aiChatId.value, e.message || 'chat error', true)
+          return
+        }
+        if (e.startsWith('data:Error')) {
+          chatStore.updateMessage(aiChatId.value, e.substring(5, e.length), true)
+          return
+        }
+      })
+      .finally(() => {
+        scrollToBottomIfAtBottom()
+      })
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleStop() {
+  if (loading.value) {
+    controller.abort()
+    controller = new AbortController()
+    loading.value = false
+  }
+}
+
+function handleDelete(item: any) {
+  if (loading.value) {
+    return
+  }
+
+  ElMessageBox.confirm('确认删除消息', '删除消息', {
+    confirmButtonText: '是',
+    cancelButtonText: '否',
+    type: 'warning',
+  })
+    .then(() => {
+      chatStore.delMessage(item)
+    })
+    .catch(() => {})
+}
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full">
+    <main class="flex-1 overflow-hidden">
+      <div ref="contentRef" class="h-full overflow-hidden overflow-y-auto">
+        <div
+          ref="scrollRef"
+          :class="[isMobile ? 'p-2' : 'p-5']"
+          class="w-full max-w-screen-3xl m-auto"
+        >
+          <Message
+            v-for="(item, index) of dataSources"
+            :key="index"
+            :class="dataSources.length - 1 == index ? '!mb-2' : 'mb-6'"
+            :date-time="item.createTime"
+            :error="item.isError"
+            :inversion="item.role !== 'assistant'"
+            :loading="loading"
+            :text="item.message"
+            @delete="handleDelete(item)"
+          />
+        </div>
+      </div>
+    </main>
+
+    <footer :class="footerClass">
+      <div class="w-full max-w-screen-3xl m-auto">
+        <div class="flex items-center justify-between space-x-2">
+          <el-input
+            v-model="message"
+            :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+            :placeholder="loading ? '等待响应中...' : '请输入消息内容'"
+            :disabled="loading"
+            type="textarea"
+            @keypress="handleEnter"
+          />
+          <div class="flex items-center space-x-1">
+            <el-button v-if="loading" type="danger" @click="handleStop">
+              <template #icon>
+                <el-icon><CircleClose /></el-icon>
+              </template>
+              停止
+            </el-button>
+            <el-button v-else type="primary" @click="handleSubmit">
+              <template #icon>
+                <el-icon><Position /></el-icon>
+              </template>
+              发送
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-textarea__inner) {
+  padding: 8px 12px;
+  min-height: 42px;
+  max-height: 200px;
+  resize: none;
+}
+</style>
diff --git a/src/views/ai/chat/Header.vue b/src/views/ai/chat/Header.vue
new file mode 100644
index 0000000..98fc68f
--- /dev/null
+++ b/src/views/ai/chat/Header.vue
@@ -0,0 +1,75 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete, Star } from '@element-plus/icons-vue'
+import { useChatStore } from './store/useChatStore'
+import { clean } from '@/api/new-ai/chat'
+import ModelSelect from '@/views/common/ModelSelect.vue'
+
+defineProps<{
+  title: string
+}>()
+
+const emits = defineEmits(['reload'])
+const chatStore = useChatStore()
+
+function handleClear() {
+  if (chatStore.conversationId == null) {
+    return
+  }
+  
+  ElMessageBox.confirm('确认清除聊天', '清除聊天', {
+    confirmButtonText: '是',
+    cancelButtonText: '否',
+    type: 'warning',
+  }).then(async () => {
+    try {
+      await clean(chatStore.conversationId!)
+      emits('reload')
+      ElMessage.success('聊天记录清除成功')
+    } catch (error) {
+      ElMessage.error('清除聊天记录失败')
+    }
+  }).catch(() => {})
+}
+</script>
+
+<template>
+  <div class="mb-3 flex flex-wrap justify-between items-center">
+    <div class="font-bold flex justify-center items-center flex-wrap gap-2">
+      <el-icon class="text-lg"><Star /></el-icon>
+      <span>{{ title }}</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <ModelSelect :id="chatStore.modelId" class="w-auto min-w-[180px]" />
+
+      <el-button type="warning" size="small" @click="handleClear">
+        <template #icon>
+          <el-icon><Delete /></el-icon>
+        </template>
+        清空聊天
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-icon {
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
new file mode 100644
index 0000000..510de41
--- /dev/null
+++ b/src/views/ai/chat/index.vue
@@ -0,0 +1,56 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import Chat from '@/views/ai/chat/Chat.vue';
+  import { getMessages } from '@/api/new-ai/chat';
+  import { useChatStore } from '@/views/ai/chat/store/useChatStore';
+  import { useUserStore } from '@/store/modules/user';
+  import Header from './Header.vue';
+
+  const loading = ref(true);
+  const chatStore = useChatStore();
+  const userStore = useUserStore();
+
+  onMounted(async () => {
+    await fetch();
+  });
+
+  async function fetch() {
+    loading.value = true;
+    chatStore.conversationId = userStore.info.id;
+    chatStore.messages = await getMessages(userStore.info.id);
+    loading.value = false;
+  }
+</script>
+
+<template>
+  <n-card class="p-4 pt-1 w-full h-full">
+    <Header title="AI聊天助手" @reload="fetch" />
+    <div class="flex flex-col w-full overflow-hidden" style="height: calc(100vh - 180px)">
+      <main ref="contentRef" class="flex-1 overflow-hidden overflow-y-auto">
+        <Chat />
+      </main>
+    </div>
+  </n-card>
+</template>
+
+<style lang="less" scoped>
+  ::v-deep(.n-tabs.n-tabs--top .n-tab-pane) {
+    padding: 0 !important;
+  }
+</style>
diff --git a/src/views/ai/chat/message/Message.vue b/src/views/ai/chat/message/Message.vue
new file mode 100644
index 0000000..e38343b
--- /dev/null
+++ b/src/views/ai/chat/message/Message.vue
@@ -0,0 +1,143 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import TextComponent from './TextComponent.vue'
+import { copyToClip } from '@/utils/copy'
+
+interface Props {
+  dateTime?: string
+  text?: string
+  inversion?: boolean
+  error?: boolean
+  loading?: boolean
+}
+
+interface Emit {
+  (ev: 'delete'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+const isHover = ref(false)
+const textRef = ref<HTMLElement>()
+const asRawText = ref(props.inversion)
+const messageRef = ref<HTMLElement>()
+
+const options = computed(() => {
+  const common = [
+    {
+      label: '复制',
+      key: 'copyText',
+      icon: 'DocumentCopy'
+    }
+  ]
+
+  if (!props.inversion) {
+    common.push({
+      label: asRawText.value ? '预览' : '显示原文',
+      key: 'toggleRenderType',
+      icon: asRawText.value ? 'View' : 'Document'
+    })
+  }
+
+  return common
+})
+
+function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
+  switch (key) {
+    case 'copyText':
+      handleCopy()
+      return
+    case 'toggleRenderType':
+      asRawText.value = !asRawText.value
+      return
+    case 'delete':
+      emit('delete')
+  }
+}
+
+async function handleCopy() {
+  try {
+    await copyToClip(props.text || '')
+    ElMessage.success('复制成功')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="messageRef"
+    :class="[{ 'flex-row-reverse': inversion }]"
+    class="flex w-full overflow-hidden"
+  >
+    <div
+      :class="[inversion ? 'ml-2' : 'mr-2']"
+      class="flex items-center justify-center bg-gray-200 flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
+    >
+      <el-icon v-if="inversion"><User /></el-icon>
+      <el-icon v-else><Monitor /></el-icon>
+    </div>
+    <div :class="[inversion ? 'items-end' : 'items-start']" class="overflow-hidden text-sm">
+      <p :class="[inversion ? 'text-right' : 'text-left']" class="text-xs text-[#b4bbc4]">
+        {{ dateTime }}
+      </p>
+      <div
+        @mouseover="isHover = true"
+        @mouseleave="isHover = false"
+        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
+        class="flex items-end gap-1 mt-2 transition-all"
+      >
+        <TextComponent
+          ref="textRef"
+          :as-raw-text="asRawText"
+          :error="error"
+          :inversion="inversion"
+          :loading="loading"
+          :text="text"
+        />
+        <div class="flex flex-col transition-all w-[45px]">
+          <div v-if="isHover" class="flex gap-1.5 flex-nowrap justify-end">
+            <el-tooltip
+              v-for="item in options"
+              :key="item.key"
+              :content="item.label"
+              placement="top"
+            >
+              <el-button
+                link
+                :icon="item.icon"
+                @click="handleSelect(item.key as any)"
+                class="transition text-neutral-400 hover:text-neutral-800"
+              />
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-button) {
+  padding: 4px;
+  height: auto;
+}
+</style>
diff --git a/src/views/ai/chat/message/TextComponent.vue b/src/views/ai/chat/message/TextComponent.vue
new file mode 100644
index 0000000..28b74ad
--- /dev/null
+++ b/src/views/ai/chat/message/TextComponent.vue
@@ -0,0 +1,139 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import MarkdownIt from 'markdown-it'
+import mdKatex from '@traptitech/markdown-it-katex'
+import mila from 'markdown-it-link-attributes'
+import hljs from 'highlight.js'
+import { copyToClip } from '@/utils/copy'
+
+interface Props {
+  inversion?: boolean
+  error?: boolean
+  text?: string
+  loading?: boolean
+  asRawText?: boolean
+}
+
+const props = defineProps<Props>()
+const isMobile = ref(false)  // TODO: 从全局状态获取
+const textRef = ref<HTMLElement>()
+
+const mdi = new MarkdownIt({
+  html: false,
+  linkify: true,
+  highlight(code, language) {
+    const validLang = !!(language && hljs.getLanguage(language))
+    if (validLang) {
+      const lang = language ?? ''
+      return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
+    }
+    return highlightBlock(hljs.highlightAuto(code).value, '')
+  },
+})
+
+mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+
+const wrapClass = computed(() => {
+  return [
+    'text-wrap',
+    'rounded-md',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
+    props.inversion ? 'bg-[#70c0e829]' : 'bg-[#f4f6f8]',
+    props.inversion ? 'message-request' : 'message-reply',
+    { 'text-red-500': props.error },
+  ]
+})
+
+const text = computed(() => {
+  const value = props.text ?? ''
+  if (!props.asRawText) {
+    return mdi.render(value)
+  }
+  return value
+})
+
+function highlightBlock(str: string, lang?: string) {
+  return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+}
+
+function addCopyEvents() {
+  if (textRef.value) {
+    const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
+    copyBtn.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const code = btn.parentElement?.nextElementSibling?.textContent
+        if (code) {
+          copyToClip(code).then(() => {
+            ElMessage.success('复制成功')
+            const btnEl = btn as HTMLElement
+            btnEl.textContent = '复制成功'
+            setTimeout(() => {
+              btnEl.textContent = '复制'
+            }, 1000)
+          }).catch(() => {
+            ElMessage.error('复制失败')
+          })
+        }
+      })
+    })
+  }
+}
+
+function removeCopyEvents() {
+  if (textRef.value) {
+    const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
+    copyBtn.forEach((btn) => {
+      btn.removeEventListener('click', () => {})
+    })
+  }
+}
+
+onMounted(() => {
+  addCopyEvents()
+})
+
+onUpdated(() => {
+  addCopyEvents()
+})
+
+onUnmounted(() => {
+  removeCopyEvents()
+})
+</script>
+
+<template>
+  <div :class="wrapClass" class="text-black">
+    <div ref="textRef" class="leading-relaxed break-words">
+      <div v-if="!inversion">
+        <div v-if="!asRawText" class="markdown-body" v-html="text"></div>
+        <div v-else class="whitespace-pre-wrap" v-text="text"></div>
+      </div>
+      <div v-else class="whitespace-pre-wrap" v-text="text"></div>
+      <template v-if="loading && !text">
+        <span class="w-[4px] h-[20px] block animate-blink"></span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './styles.scss';
+</style>
diff --git a/src/views/ai/chat/message/styles.scss b/src/views/ai/chat/message/styles.scss
new file mode 100644
index 0000000..7d85314
--- /dev/null
+++ b/src/views/ai/chat/message/styles.scss
@@ -0,0 +1,122 @@
+@import 'highlight.js/styles/github.css';
+
+.message-reply,
+.message-request {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.message-reply {
+  margin-right: 12px;
+}
+
+.message-request {
+  margin-left: 12px;
+}
+
+.text-wrap {
+  max-width: 80%;
+}
+
+.code-block-wrapper {
+  position: relative;
+  padding-top: 24px;
+  border-radius: 8px;
+  margin: 8px 0;
+
+  &:hover {
+    .code-block-header__copy {
+      display: block;
+    }
+  }
+
+  .code-block-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 4px 0;
+    background-color: #f6f8fa;
+    border-radius: 8px 8px 0 0;
+
+    &__lang {
+      position: absolute;
+      left: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #666;
+    }
+
+    &__copy {
+      position: absolute;
+      right: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #666;
+      cursor: pointer;
+      display: none;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+
+  .code-block-body {
+    margin: 0;
+    padding: 12px;
+    border-radius: 0 0 8px 8px;
+    overflow-x: auto;
+    font-family: 'Fira Code', monospace;
+  }
+}
+
+.markdown-body {
+  background-color: transparent;
+  margin-bottom: 0;
+
+  pre {
+    background-color: #f6f8fa;
+  }
+
+  code {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  table {
+    width: 100%;
+    margin-bottom: 16px;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    th {
+      background-color: #f6f8fa;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+  }
+}
+
+@keyframes blink {
+  0% {
+    background: #fff;
+  }
+  50% {
+    background: #000;
+  }
+  100% {
+    background: #fff;
+  }
+}
+
+.animate-blink {
+  animation: blink 1s infinite;
+}
diff --git a/src/views/ai/chat/message/styles/github-markdown.less b/src/views/ai/chat/message/styles/github-markdown.less
new file mode 100644
index 0000000..8874393
--- /dev/null
+++ b/src/views/ai/chat/message/styles/github-markdown.less
@@ -0,0 +1,1118 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html.dark {
+  .markdown-body {
+    color-scheme: dark;
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #c9d1d9;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #6e7681;
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: rgba(110,118,129,0.4);
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-attention-subtle: rgba(187,128,9,0.15);
+    --color-danger-fg: #f85149;
+  }
+}
+
+html {
+  .markdown-body {
+    color-scheme: light;
+    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-constant: #0550ae;
+    --color-prettylights-syntax-entity: #8250df;
+    --color-prettylights-syntax-storage-modifier-import: #24292f;
+    --color-prettylights-syntax-entity-tag: #116329;
+    --color-prettylights-syntax-keyword: #cf222e;
+    --color-prettylights-syntax-string: #0a3069;
+    --color-prettylights-syntax-variable: #953800;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+    --color-prettylights-syntax-carriage-return-bg: #cf222e;
+    --color-prettylights-syntax-string-regexp: #116329;
+    --color-prettylights-syntax-markup-list: #3b2300;
+    --color-prettylights-syntax-markup-heading: #0550ae;
+    --color-prettylights-syntax-markup-italic: #24292f;
+    --color-prettylights-syntax-markup-bold: #24292f;
+    --color-prettylights-syntax-markup-deleted-text: #82071e;
+    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+    --color-prettylights-syntax-markup-inserted-text: #116329;
+    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+    --color-prettylights-syntax-markup-changed-text: #953800;
+    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+    --color-prettylights-syntax-meta-diff-range: #8250df;
+    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+    --color-fg-default: #24292f;
+    --color-fg-muted: #57606a;
+    --color-fg-subtle: #6e7781;
+    --color-canvas-default: #ffffff;
+    --color-canvas-subtle: #f6f8fa;
+    --color-border-default: #d0d7de;
+    --color-border-muted: hsla(210,18%,87%,1);
+    --color-neutral-muted: rgba(175,184,193,0.2);
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-attention-subtle: #fff8c5;
+    --color-danger-fg: #cf222e;
+  }
+}
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0;
+  //color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body [hidden] {
+  display: none !important;
+}
+
+.markdown-body a {
+  background-color: transparent;
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+.markdown-body abbr[title] {
+  border-bottom: none;
+  text-decoration: underline dotted;
+}
+
+.markdown-body b,
+.markdown-body strong {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body dfn {
+  font-style: italic;
+}
+
+.markdown-body h1 {
+  margin: .67em 0;
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: .3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+.markdown-body mark {
+  background-color: var(--color-attention-subtle);
+  color: var(--color-fg-default);
+}
+
+.markdown-body small {
+  font-size: 90%;
+}
+
+.markdown-body sub,
+.markdown-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.markdown-body sub {
+  bottom: -0.25em;
+}
+
+.markdown-body sup {
+  top: -0.5em;
+}
+
+.markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: var(--color-canvas-default);
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+.markdown-body figure {
+  margin: 1em 40px;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid var(--color-border-muted);
+  height: .25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--color-border-default);
+  border: 0;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body [type=button],
+.markdown-body [type=reset],
+.markdown-body [type=submit] {
+  -webkit-appearance: button;
+}
+
+.markdown-body [type=checkbox],
+.markdown-body [type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body [type=number]::-webkit-inner-spin-button,
+.markdown-body [type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.markdown-body [type=search]::-webkit-search-cancel-button,
+.markdown-body [type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.markdown-body ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+.markdown-body ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body ::placeholder {
+  color: var(--color-fg-subtle);
+  opacity: 1;
+}
+
+.markdown-body hr::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body details:not([open])>*:not(summary) {
+  display: none !important;
+}
+
+.markdown-body a:focus,
+.markdown-body [role=button]:focus,
+.markdown-body input[type=radio]:focus,
+.markdown-body input[type=checkbox]:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.markdown-body a:focus:not(:focus-visible),
+.markdown-body [role=button]:focus:not(:focus-visible),
+.markdown-body input[type=radio]:focus:not(:focus-visible),
+.markdown-body input[type=checkbox]:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.markdown-body a:focus-visible,
+.markdown-body [role=button]:focus-visible,
+.markdown-body input[type=radio]:focus-visible,
+.markdown-body input[type=checkbox]:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.markdown-body a:not([class]):focus,
+.markdown-body a:not([class]):focus-visible,
+.markdown-body input[type=radio]:focus,
+.markdown-body input[type=radio]:focus-visible,
+.markdown-body input[type=checkbox]:focus,
+.markdown-body input[type=checkbox]:focus-visible {
+  outline-offset: 0;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  line-height: 10px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-subtle);
+  border: solid 1px var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1.25;
+}
+
+.markdown-body h2 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: .3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+.markdown-body h3 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: .875em;
+}
+
+.markdown-body h6 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: .85em;
+  color: var(--color-fg-muted);
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--color-fg-muted);
+  border-left: .25em solid var(--color-border-default);
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body tt,
+.markdown-body code,
+.markdown-body samp {
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: 12px;
+  word-wrap: normal;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+.markdown-body input::-webkit-outer-spin-button,
+.markdown-body input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.markdown-body::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body>*:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body>*:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .absent {
+  color: var(--color-danger-fg);
+}
+
+.markdown-body .anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body blockquote>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  padding: 0 .2em;
+  font-size: inherit;
+}
+
+.markdown-body summary h1,
+.markdown-body summary h2,
+.markdown-body summary h3,
+.markdown-body summary h4,
+.markdown-body summary h5,
+.markdown-body summary h6 {
+  display: inline-block;
+}
+
+.markdown-body summary h1 .anchor,
+.markdown-body summary h2 .anchor,
+.markdown-body summary h3 .anchor,
+.markdown-body summary h4 .anchor,
+.markdown-body summary h5 .anchor,
+.markdown-body summary h6 .anchor {
+  margin-left: -40px;
+}
+
+.markdown-body summary h1,
+.markdown-body summary h2 {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+
+.markdown-body ol[type=a] {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body ol[type=A] {
+  list-style-type: upper-alpha;
+}
+
+.markdown-body ol[type=i] {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol[type=I] {
+  list-style-type: upper-roman;
+}
+
+.markdown-body ol[type="1"] {
+  list-style-type: decimal;
+}
+
+.markdown-body div>ol:not([type]) {
+  list-style-type: decimal;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li>p {
+  margin-top: 16px;
+}
+
+.markdown-body li+li {
+  margin-top: .25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--color-border-default);
+}
+
+.markdown-body table tr {
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--color-canvas-subtle);
+}
+
+.markdown-body table img {
+  background-color: transparent;
+}
+
+.markdown-body img[align=right] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align=left] {
+  padding-right: 20px;
+}
+
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+
+.markdown-body span.frame>span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+}
+
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+
+.markdown-body span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: var(--color-fg-default);
+}
+
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-center>span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-right>span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+
+.markdown-body span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+
+.markdown-body span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-right>span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body code,
+.markdown-body tt {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+}
+
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+
+.markdown-body del code {
+  text-decoration: inherit;
+}
+
+.markdown-body samp {
+  font-size: 85%;
+}
+
+.markdown-body pre code {
+  font-size: 100%;
+}
+
+.markdown-body pre>code {
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--color-canvas-subtle);
+  border-radius: 6px;
+}
+
+.markdown-body pre code,
+.markdown-body pre tt {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  padding: 5px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.markdown-body .csv-data .blob-num {
+  padding: 10px 8px 9px;
+  text-align: right;
+  background: var(--color-canvas-default);
+  border: 0;
+}
+
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+
+.markdown-body .csv-data th {
+  font-weight: var(--base-text-weight-semibold, 600);
+  background: var(--color-canvas-subtle);
+  border-top: 0;
+}
+
+.markdown-body [data-footnote-ref]::before {
+  content: "[";
+}
+
+.markdown-body [data-footnote-ref]::after {
+  content: "]";
+}
+
+.markdown-body .footnotes {
+  font-size: 12px;
+  color: var(--color-fg-muted);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.markdown-body .footnotes ol {
+  padding-left: 16px;
+}
+
+.markdown-body .footnotes ol ul {
+  display: inline-block;
+  padding-left: 16px;
+  margin-top: 16px;
+}
+
+.markdown-body .footnotes li {
+  position: relative;
+}
+
+.markdown-body .footnotes li:target::before {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  bottom: -8px;
+  left: -24px;
+  pointer-events: none;
+  content: "";
+  border: 2px solid var(--color-accent-emphasis);
+  border-radius: 6px;
+}
+
+.markdown-body .footnotes li:target {
+  color: var(--color-fg-default);
+}
+
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+
+.markdown-body .pl-c {
+  color: var(--color-prettylights-syntax-comment);
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: var(--color-prettylights-syntax-entity);
+}
+
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+
+.markdown-body .pl-ent {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+
+.markdown-body .pl-k {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+  color: var(--color-prettylights-syntax-string);
+}
+
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+  color: var(--color-prettylights-syntax-variable);
+}
+
+.markdown-body .pl-bu {
+  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+}
+
+.markdown-body .pl-ii {
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+}
+
+.markdown-body .pl-c2 {
+  color: var(--color-prettylights-syntax-carriage-return-text);
+  background-color: var(--color-prettylights-syntax-carriage-return-bg);
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+
+.markdown-body .pl-ml {
+  color: var(--color-prettylights-syntax-markup-list);
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-heading);
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: var(--color-prettylights-syntax-markup-italic);
+}
+
+.markdown-body .pl-mb {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+
+.markdown-body .pl-md {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+
+.markdown-body .pl-mi1 {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+
+.markdown-body .pl-mc {
+  color: var(--color-prettylights-syntax-markup-changed-text);
+  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+}
+
+.markdown-body .pl-mi2 {
+  color: var(--color-prettylights-syntax-markup-ignored-text);
+  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+}
+
+.markdown-body .pl-mdr {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-meta-diff-range);
+}
+
+.markdown-body .pl-ba {
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+}
+
+.markdown-body .pl-sg {
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: var(--color-prettylights-syntax-constant-other-reference-link);
+}
+
+.markdown-body g-emoji {
+  display: inline-block;
+  min-width: 1ch;
+  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 1em;
+  font-style: normal !important;
+  font-weight: var(--base-text-weight-normal, 400);
+  line-height: 1;
+  vertical-align: -0.075em;
+}
+
+.markdown-body g-emoji img {
+  width: 1em;
+  height: 1em;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item label {
+  font-weight: var(--base-text-weight-normal, 400);
+}
+
+.markdown-body .task-list-item.enabled label {
+  cursor: pointer;
+}
+
+.markdown-body .task-list-item+.task-list-item {
+  margin-top: 4px;
+}
+
+.markdown-body .task-list-item .handle {
+  display: none;
+}
+
+.markdown-body .task-list-item-checkbox {
+  margin: 0 .2em .25em -1.4em;
+  vertical-align: middle;
+}
+
+.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em .25em .2em;
+}
+
+.markdown-body .contains-task-list {
+  position: relative;
+}
+
+.markdown-body .contains-task-list:hover .task-list-item-convert-container,
+.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
+  display: block;
+  width: auto;
+  height: 24px;
+  overflow: visible;
+  clip: auto;
+}
+
+.markdown-body ::-webkit-calendar-picker-indicator {
+  filter: invert(50%);
+}
diff --git a/src/views/ai/chat/message/styles/highlight.less b/src/views/ai/chat/message/styles/highlight.less
new file mode 100644
index 0000000..98738c4
--- /dev/null
+++ b/src/views/ai/chat/message/styles/highlight.less
@@ -0,0 +1,222 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html.dark {
+	pre code.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 1em
+	}
+
+	code.hljs {
+		padding: 3px 5px
+	}
+
+	.hljs {
+		color: #abb2bf;
+		background: #282c34
+	}
+
+	.hljs-keyword,
+	.hljs-operator,
+	.hljs-pattern-match {
+		color: #f92672
+	}
+
+	.hljs-function,
+	.hljs-pattern-match .hljs-constructor {
+		color: #61aeee
+	}
+
+	.hljs-function .hljs-params {
+		color: #a6e22e
+	}
+
+	.hljs-function .hljs-params .hljs-typing {
+		color: #fd971f
+	}
+
+	.hljs-module-access .hljs-module {
+		color: #7e57c2
+	}
+
+	.hljs-constructor {
+		color: #e2b93d
+	}
+
+	.hljs-constructor .hljs-string {
+		color: #9ccc65
+	}
+
+	.hljs-comment,
+	.hljs-quote {
+		color: #b18eb1;
+		font-style: italic
+	}
+
+	.hljs-doctag,
+	.hljs-formula {
+		color: #c678dd
+	}
+
+	.hljs-deletion,
+	.hljs-name,
+	.hljs-section,
+	.hljs-selector-tag,
+	.hljs-subst {
+		color: #e06c75
+	}
+
+	.hljs-literal {
+		color: #56b6c2
+	}
+
+	.hljs-addition,
+	.hljs-attribute,
+	.hljs-meta .hljs-string,
+	.hljs-regexp,
+	.hljs-string {
+		color: #98c379
+	}
+
+	.hljs-built_in,
+	.hljs-class .hljs-title,
+	.hljs-title.class_ {
+		color: #e6c07b
+	}
+
+	.hljs-attr,
+	.hljs-number,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-pseudo,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable {
+		color: #d19a66
+	}
+
+	.hljs-bullet,
+	.hljs-link,
+	.hljs-meta,
+	.hljs-selector-id,
+	.hljs-symbol,
+	.hljs-title {
+		color: #61aeee
+	}
+
+	.hljs-emphasis {
+		font-style: italic
+	}
+
+	.hljs-strong {
+		font-weight: 700
+	}
+
+	.hljs-link {
+		text-decoration: underline
+	}
+}
+
+html {
+	pre code.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 1em
+	}
+
+	code.hljs {
+		padding: 3px 5px;
+		&::-webkit-scrollbar {
+			height: 4px;
+		}
+	}
+
+	.hljs {
+		color: #383a42;
+		background: #fafafa
+	}
+
+	.hljs-comment,
+	.hljs-quote {
+		color: #a0a1a7;
+		font-style: italic
+	}
+
+	.hljs-doctag,
+	.hljs-formula,
+	.hljs-keyword {
+		color: #a626a4
+	}
+
+	.hljs-deletion,
+	.hljs-name,
+	.hljs-section,
+	.hljs-selector-tag,
+	.hljs-subst {
+		color: #e45649
+	}
+
+	.hljs-literal {
+		color: #0184bb
+	}
+
+	.hljs-addition,
+	.hljs-attribute,
+	.hljs-meta .hljs-string,
+	.hljs-regexp,
+	.hljs-string {
+		color: #50a14f
+	}
+
+	.hljs-attr,
+	.hljs-number,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-pseudo,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable {
+		color: #986801
+	}
+
+	.hljs-bullet,
+	.hljs-link,
+	.hljs-meta,
+	.hljs-selector-id,
+	.hljs-symbol,
+	.hljs-title {
+		color: #4078f2
+	}
+
+	.hljs-built_in,
+	.hljs-class .hljs-title,
+	.hljs-title.class_ {
+		color: #c18401
+	}
+
+	.hljs-emphasis {
+		font-style: italic
+	}
+
+	.hljs-strong {
+		font-weight: 700
+	}
+
+	.hljs-link {
+		text-decoration: underline
+	}
+}
diff --git a/src/views/ai/chat/message/styles/index.less b/src/views/ai/chat/message/styles/index.less
new file mode 100644
index 0000000..542cc44
--- /dev/null
+++ b/src/views/ai/chat/message/styles/index.less
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "github-markdown.less";
+@import "highlight.less";
+@import "style.less";
diff --git a/src/views/ai/chat/message/styles/style.less b/src/views/ai/chat/message/styles/style.less
new file mode 100644
index 0000000..4c2ae23
--- /dev/null
+++ b/src/views/ai/chat/message/styles/style.less
@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.markdown-body {
+	background-color: transparent;
+	font-size: 14px;
+
+	p {
+		white-space: pre-wrap;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	pre code,
+	pre tt {
+		line-height: 1.65;
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #fff;
+	}
+
+	code.hljs {
+		padding: 0;
+	}
+
+	.code-block {
+		&-wrapper {
+			position: relative;
+			padding-top: 24px;
+      margin-top: 10px;
+		}
+
+		&-header {
+			position: absolute;
+			top: 5px;
+			right: 0;
+			width: 100%;
+			padding: 0 1rem;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			color: #b3b3b3;
+
+			&__copy {
+				cursor: pointer;
+				margin-left: 0.5rem;
+				user-select: none;
+
+				&:hover {
+					color: #65a665;
+				}
+			}
+		}
+	}
+
+}
+
+html.dark {
+
+	.message-reply {
+		.whitespace-pre-wrap {
+			white-space: pre-wrap;
+			color: var(--n-text-color);
+		}
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #282c34;
+	}
+}
+
+@keyframes blink {
+	0%, to {
+		background-color: currentColor
+	}
+	50% {
+		background-color: transparent
+	}
+}
+
+.animate-blink {
+	animation: blink 1.2s infinite steps(1, start)
+}
diff --git a/src/views/ai/chat/store/chat.d.ts b/src/views/ai/chat/store/chat.d.ts
new file mode 100644
index 0000000..ff5e8ed
--- /dev/null
+++ b/src/views/ai/chat/store/chat.d.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ChatState {
+  messages: any[];
+  modelId: string | null;
+  modelName: string | null;
+  modelProvider: string | null;
+  conversationId: string | null;
+  appId: any;
+}
diff --git a/src/views/ai/chat/store/useBasicLayout.ts b/src/views/ai/chat/store/useBasicLayout.ts
new file mode 100644
index 0000000..0e52551
--- /dev/null
+++ b/src/views/ai/chat/store/useBasicLayout.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+export const useBasicLayout = () => {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('sm');
+  return { isMobile };
+};
diff --git a/src/views/ai/chat/store/useChatStore.ts b/src/views/ai/chat/store/useChatStore.ts
new file mode 100644
index 0000000..15ba87f
--- /dev/null
+++ b/src/views/ai/chat/store/useChatStore.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineStore } from 'pinia';
+import { formatToDateTime } from '@/utils/dateUtil';
+import type { ChatState } from '@/views/ai/chat/store/chat';
+
+export const useChatStore = defineStore('chat-store', {
+  state: (): ChatState =>
+    <ChatState>{
+      modelId: null,
+      modelName: '',
+      modelProvider: '',
+      conversationId: null,
+      messages: [],
+      appId: null,
+    },
+
+  getters: {},
+
+  actions: {
+    /**
+     * 新增消息
+     */
+    async addMessage(
+      message: string,
+      role: 'user' | 'assistant' | 'system',
+      chatId: string
+    ): Promise<boolean> {
+      this.messages.push({
+        chatId,
+        role: role,
+        message: message,
+        createTime: formatToDateTime(new Date()),
+      });
+      return true;
+    },
+
+    /**
+     * 更新消息
+     * chatId 仅仅用于更新流式消息内容
+     */
+    async updateMessage(chatId: string, message: string, isError?: boolean) {
+      const index = this.messages.findIndex((item) => item?.chatId == chatId);
+      if (index !== -1) {
+        this.messages[index].message = message;
+        this.messages[index].isError = isError;
+      }
+    },
+
+    /**
+     * 删除消息
+     */
+    async delMessage(item: any) {
+      this.messages = this.messages.filter((i) => i.promptId !== item.promptId);
+    },
+  },
+});
diff --git a/src/views/ai/chat/store/useIconRender.ts b/src/views/ai/chat/store/useIconRender.ts
new file mode 100644
index 0000000..400fb44
--- /dev/null
+++ b/src/views/ai/chat/store/useIconRender.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { h } from 'vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+export const useIconRender = () => {
+  interface IconConfig {
+    icon?: string;
+    color?: string;
+    fontSize?: number;
+  }
+
+  interface IconStyle {
+    color?: string;
+    fontSize?: string;
+  }
+
+  const iconRender = (config: IconConfig) => {
+    const { color, fontSize, icon } = config;
+
+    const style: IconStyle = {};
+
+    if (color) {
+      style.color = color;
+    }
+
+    if (fontSize) {
+      style.fontSize = `${fontSize}px`;
+    }
+
+    if (!icon) {
+      window.console.warn('iconRender: icon is required');
+    }
+
+    return () => h(SvgIcon, { icon, style });
+  };
+
+  return {
+    iconRender,
+  };
+};
diff --git a/src/views/ai/chat/store/useScroll.ts b/src/views/ai/chat/store/useScroll.ts
new file mode 100644
index 0000000..3d2fd06
--- /dev/null
+++ b/src/views/ai/chat/store/useScroll.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Ref } from 'vue'
+import { nextTick, ref } from 'vue'
+
+type ScrollElement = HTMLDivElement | null
+
+interface ScrollReturn {
+  contentRef: Ref<ScrollElement>
+  scrollRef: Ref<ScrollElement>
+  scrollToBottom: () => Promise<void>
+  scrollToTop: () => Promise<void>
+  scrollToBottomIfAtBottom: () => Promise<void>
+}
+
+export function useScroll(): ScrollReturn {
+  const scrollRef = ref<ScrollElement>(null)
+  const contentRef = ref<ScrollElement>(null)
+
+  const scrollToBottom = async () => {
+    await nextTick()
+    if (contentRef.value) {
+      contentRef.value.scrollTo({ top: contentRef.value.scrollHeight, behavior: 'smooth' })
+    }
+  }
+
+  const scrollToTop = async () => {
+    await nextTick()
+    if (contentRef.value) {
+      contentRef.value.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }
+
+  const scrollToBottomIfAtBottom = async () => {
+    await nextTick()
+    if (contentRef.value) {
+      const threshold = 100 // 阈值，表示滚动条到底部的距离阈值
+      const distanceToBottom =
+        contentRef.value.scrollHeight - contentRef.value.scrollTop - contentRef.value.clientHeight
+      if (distanceToBottom <= threshold) {
+        contentRef.value.scrollTo({ top: contentRef.value.scrollHeight, behavior: 'smooth' })
+      }
+    }
+  }
+
+  return {
+    scrollRef,
+    contentRef,
+    scrollToBottom,
+    scrollToTop,
+    scrollToBottomIfAtBottom,
+  }
+}
diff --git a/src/views/common/AppSelect.vue b/src/views/common/AppSelect.vue
new file mode 100644
index 0000000..35c2c16
--- /dev/null
+++ b/src/views/common/AppSelect.vue
@@ -0,0 +1,67 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { onMounted, ref, toRaw } from 'vue'
+import { AppApi } from '@/api/new-ai/app'
+
+const props = defineProps<{
+  id: any
+}>()
+const emit = defineEmits(['update'])
+const options = ref([])
+const appId = ref('')
+
+onMounted(async () => {
+  options.value = await AppApi.getAppList({})
+  appId.value = props.id
+})
+
+function onUpdate(val: any) {
+  const obj = toRaw(options.value.find(item => item.id === val))
+  if (obj == null) {
+    emit('update', {
+      id: '',
+    })
+  } else {
+    emit('update', {
+      id: obj.id,
+    })
+  }
+}
+</script>
+
+<template>
+  <el-select
+    v-model="appId"
+    clearable
+    placeholder="请选择关联应用"
+    @change="onUpdate"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-select) {
+  width: 100%;
+}
+</style>
diff --git a/src/views/common/ModelSelect.vue b/src/views/common/ModelSelect.vue
new file mode 100644
index 0000000..f1c17eb
--- /dev/null
+++ b/src/views/common/ModelSelect.vue
@@ -0,0 +1,107 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { onMounted, ref, toRaw } from 'vue'
+import { ModelApi } from '@/api/new-ai/model'
+import { LLMProviders } from '@/views/ai/model/chatModel/composables/consts'
+import { ModelTypeEnum } from '@/api/models'
+import { useChatStore } from '@/views/ai/chat/store/useChatStore'
+
+const chatStore = useChatStore()
+const props = defineProps<{
+  id: any
+  size?: 'large' | 'default' | 'small'
+}>()
+const size = props.size || 'default'
+const emit = defineEmits(['update', 'load'])
+const options = ref([])
+const modelId = ref('')
+
+onMounted(async () => {
+  const providers = await ModelApi.getModelList({ type: ModelTypeEnum.CHAT })
+  if (chatStore.modelId === '' || chatStore.modelId === null) {
+    if (providers != null && providers.length != 0) {
+      const item = providers[0]
+      chatStore.modelId = item.id
+      chatStore.modelName = item.model
+      chatStore.modelProvider = item.provider
+
+      if (props.id == null) {
+        modelId.value = item.id
+        emit('load', item)
+      } else {
+        modelId.value = props.id
+      }
+    }
+  }
+  const data: any = []
+  LLMProviders.forEach((i) => {
+    const children = providers.filter((m) => m.provider == i.model)
+    if (children.length === 0) {
+      return
+    }
+    data.push({
+      label: i.name,
+      value: i.id,
+      children: children.map(child => ({
+        label: child.name,
+        value: child.id,
+        raw: child
+      }))
+    })
+  })
+  options.value = data
+  modelId.value = chatStore.modelId
+})
+
+function onUpdate(val: any) {
+  const group = options.value.find(g => g.children.some(c => c.value === val))
+  if (!group) return
+  
+  const option = group.children.find(c => c.value === val)
+  if (!option) return
+
+  const obj = option.raw
+  emit('update', {
+    id: obj.id,
+    modelName: obj.model,
+    modelProvider: obj.provider,
+  })
+  chatStore.modelId = obj.id
+  chatStore.modelName = obj.model
+  chatStore.modelProvider = obj.provider
+}
+</script>
+
+<template>
+  <el-cascader
+    v-model="modelId"
+    :options="options"
+    :size="size"
+    :props="{
+      expandTrigger: 'hover'
+    }"
+    placeholder="请选择关联模型"
+    @change="onUpdate"
+  />
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-cascader) {
+  width: 100%;
+}
+</style>
diff --git a/types/config.d.ts b/types/config.d.ts
new file mode 100644
index 0000000..2a0d8a3
--- /dev/null
+++ b/types/config.d.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+ *
+ * Licensed under the GNU Affero General Public License, Version 3 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ProjectSettingState {
+  //导航模式
+  navMode: string;
+  //导航风格
+  navTheme: string;
+  //顶部设置
+  headerSetting: object;
+  //页脚
+  showFooter: boolean;
+  //菜单设置
+  menuSetting: object;
+  //多标签
+  multiTabsSetting: object;
+  //面包屑
+  crumbsSetting: object;
+  //权限模式
+  permissionMode: string;
+}
+
+export interface IBodySetting {
+  fixed: boolean;
+}
+
+export interface IHeaderSetting {
+  bgColor: string;
+  fixed: boolean;
+  isReload: boolean;
+}
+
+export interface IMenuSetting {
+  minMenuWidth: number;
+  menuWidth: number;
+  fixed: boolean;
+  mixMenu: boolean;
+  collapsed: boolean;
+  mobileWidth: number;
+}
+
+export interface ICrumbsSetting {
+  show: boolean;
+  showIcon: boolean;
+}
+
+export interface IMultiTabsSetting {
+  bgColor: string;
+  fixed: boolean;
+  show: boolean;
+}
+export interface GlobConfig {
+  title: string;
+  apiUrl: string;
+  shortName: string;
+  urlPrefix?: string;
+  uploadUrl?: string;
+  imgUrl?: string;
+}
+
+export interface GlobEnvConfig {
+  // 标题
+  VITE_GLOB_APP_TITLE: string;
+  // 接口地址
+  VITE_GLOB_API_URL: string;
+  // 接口前缀
+  VITE_GLOB_API_URL_PREFIX?: string;
+  // Project abbreviation
+  VITE_GLOB_APP_SHORT_NAME: string;
+  // 图片上传地址
+  VITE_GLOB_UPLOAD_URL?: string;
+  //图片前缀地址
+  VITE_GLOB_IMG_URL?: string;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 66ddb9e..f737e15 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -59,7 +59,11 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
                 {
                     find: /\@\//,
                     replacement: `${pathResolve('src')}/`
-                }
+                },
+                {
+                    find: /\/#\//,
+                    replacement: pathResolve('types') + '/',
+                  },
             ]
         },
         build: {

From cf1c7210f79652c692cbd8e077161a93882a7324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 4 Mar 2025 16:52:20 +0800
Subject: [PATCH 12/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI聊天移植
---
 src/api/new-ai/chat.ts                        |   2 +-
 src/store/modules/projectSetting.ts           |   6 +-
 src/views/ai/app/base/index.vue               |   4 +-
 src/views/ai/chat/index.vue                   |  56 -----
 src/views/ai/chat/message/styles.scss         | 122 ----------
 .../ai/chat/message/styles/highlight.less     | 222 ------------------
 src/views/ai/chat/message/styles/index.less   |  19 --
 src/views/ai/chat/message/styles/style.less   | 105 ---------
 src/views/ai/chat/{ => new-chat}/Chat.vue     |   2 +-
 src/views/ai/chat/{ => new-chat}/Header.vue   |  19 +-
 src/views/ai/chat/new-chat/index.vue          |  47 ++++
 .../chat/{ => new-chat}/message/Message.vue   |   0
 .../{ => new-chat}/message/TextComponent.vue  |  19 +-
 .../message/styles/github-markdown.scss}      |  16 --
 .../new-chat/message/styles/highlight.scss    | 208 ++++++++++++++++
 .../chat/new-chat/message/styles/index.scss   |   3 +
 .../chat/new-chat/message/styles/style.scss   |  89 +++++++
 .../ai/chat/{ => new-chat}/store/chat.d.ts    |   0
 .../{ => new-chat}/store/useBasicLayout.ts    |   0
 .../chat/{ => new-chat}/store/useChatStore.ts |   2 +-
 .../{ => new-chat}/store/useIconRender.ts     |   0
 .../ai/chat/{ => new-chat}/store/useScroll.ts |   0
 src/views/common/ModelSelect.vue              |   2 +-
 23 files changed, 359 insertions(+), 584 deletions(-)
 delete mode 100644 src/views/ai/chat/index.vue
 delete mode 100644 src/views/ai/chat/message/styles.scss
 delete mode 100644 src/views/ai/chat/message/styles/highlight.less
 delete mode 100644 src/views/ai/chat/message/styles/index.less
 delete mode 100644 src/views/ai/chat/message/styles/style.less
 rename src/views/ai/chat/{ => new-chat}/Chat.vue (99%)
 rename src/views/ai/chat/{ => new-chat}/Header.vue (66%)
 create mode 100644 src/views/ai/chat/new-chat/index.vue
 rename src/views/ai/chat/{ => new-chat}/message/Message.vue (100%)
 rename src/views/ai/chat/{ => new-chat}/message/TextComponent.vue (82%)
 rename src/views/ai/chat/{message/styles/github-markdown.less => new-chat/message/styles/github-markdown.scss} (97%)
 create mode 100644 src/views/ai/chat/new-chat/message/styles/highlight.scss
 create mode 100644 src/views/ai/chat/new-chat/message/styles/index.scss
 create mode 100644 src/views/ai/chat/new-chat/message/styles/style.scss
 rename src/views/ai/chat/{ => new-chat}/store/chat.d.ts (100%)
 rename src/views/ai/chat/{ => new-chat}/store/useBasicLayout.ts (100%)
 rename src/views/ai/chat/{ => new-chat}/store/useChatStore.ts (96%)
 rename src/views/ai/chat/{ => new-chat}/store/useIconRender.ts (100%)
 rename src/views/ai/chat/{ => new-chat}/store/useScroll.ts (100%)

diff --git a/src/api/new-ai/chat.ts b/src/api/new-ai/chat.ts
index 4f3b527..447e21b 100644
--- a/src/api/new-ai/chat.ts
+++ b/src/api/new-ai/chat.ts
@@ -37,7 +37,7 @@ export function clean(conversationId: string | null) {
   })
 }
 
-export function getMessages(conversationId?: string) {
+export function getMessages(conversationId?: string | number) {
   return request.get({ 
     url: `/aigc/chat/messages/${conversationId}` 
   })
diff --git a/src/store/modules/projectSetting.ts b/src/store/modules/projectSetting.ts
index fdf16c8..067449c 100644
--- a/src/store/modules/projectSetting.ts
+++ b/src/store/modules/projectSetting.ts
@@ -1,9 +1,7 @@
-
-
 import { defineStore } from 'pinia';
-import projectSetting from '@/settings/projectSetting.ts';
-// import {ICrumbsSetting, IHeaderSetting, IMenuSetting, IMultiTabsSetting} from "../../../types/config";
+import projectSetting from '@/settings/projectSetting';
 import type { ICrumbsSetting, IHeaderSetting, IMenuSetting, IMultiTabsSetting } from '/#/config';
+
 const {
   navMode,
   navTheme,
diff --git a/src/views/ai/app/base/index.vue b/src/views/ai/app/base/index.vue
index 2b7664a..cd66c6d 100644
--- a/src/views/ai/app/base/index.vue
+++ b/src/views/ai/app/base/index.vue
@@ -17,12 +17,12 @@
 <script lang="ts" setup>
 import PromptPage from './prompt/index.vue'
 import SettingsPage from './settings/index.vue'
-import Chat from '@/views/ai/chat/Chat.vue'
+import Chat from '@/views/ai/chat/new-chat/Chat.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAppStore } from '../store'
-import { useChatStore } from '@/views/ai/chat/store/useChatStore'
+import { useChatStore } from '@/views/ai/chat/new-chat/store/useChatStore'
 import { getAppInfo } from '@/api/new-ai/chat'
 import { formatToDateTime } from '@/utils/dateUtil'
 
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
deleted file mode 100644
index 510de41..0000000
--- a/src/views/ai/chat/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
-  import Chat from '@/views/ai/chat/Chat.vue';
-  import { getMessages } from '@/api/new-ai/chat';
-  import { useChatStore } from '@/views/ai/chat/store/useChatStore';
-  import { useUserStore } from '@/store/modules/user';
-  import Header from './Header.vue';
-
-  const loading = ref(true);
-  const chatStore = useChatStore();
-  const userStore = useUserStore();
-
-  onMounted(async () => {
-    await fetch();
-  });
-
-  async function fetch() {
-    loading.value = true;
-    chatStore.conversationId = userStore.info.id;
-    chatStore.messages = await getMessages(userStore.info.id);
-    loading.value = false;
-  }
-</script>
-
-<template>
-  <n-card class="p-4 pt-1 w-full h-full">
-    <Header title="AI聊天助手" @reload="fetch" />
-    <div class="flex flex-col w-full overflow-hidden" style="height: calc(100vh - 180px)">
-      <main ref="contentRef" class="flex-1 overflow-hidden overflow-y-auto">
-        <Chat />
-      </main>
-    </div>
-  </n-card>
-</template>
-
-<style lang="less" scoped>
-  ::v-deep(.n-tabs.n-tabs--top .n-tab-pane) {
-    padding: 0 !important;
-  }
-</style>
diff --git a/src/views/ai/chat/message/styles.scss b/src/views/ai/chat/message/styles.scss
deleted file mode 100644
index 7d85314..0000000
--- a/src/views/ai/chat/message/styles.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-@import 'highlight.js/styles/github.css';
-
-.message-reply,
-.message-request {
-  position: relative;
-  margin-bottom: 0;
-}
-
-.message-reply {
-  margin-right: 12px;
-}
-
-.message-request {
-  margin-left: 12px;
-}
-
-.text-wrap {
-  max-width: 80%;
-}
-
-.code-block-wrapper {
-  position: relative;
-  padding-top: 24px;
-  border-radius: 8px;
-  margin: 8px 0;
-
-  &:hover {
-    .code-block-header__copy {
-      display: block;
-    }
-  }
-
-  .code-block-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding: 4px 0;
-    background-color: #f6f8fa;
-    border-radius: 8px 8px 0 0;
-
-    &__lang {
-      position: absolute;
-      left: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #666;
-    }
-
-    &__copy {
-      position: absolute;
-      right: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #666;
-      cursor: pointer;
-      display: none;
-
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-
-  .code-block-body {
-    margin: 0;
-    padding: 12px;
-    border-radius: 0 0 8px 8px;
-    overflow-x: auto;
-    font-family: 'Fira Code', monospace;
-  }
-}
-
-.markdown-body {
-  background-color: transparent;
-  margin-bottom: 0;
-
-  pre {
-    background-color: #f6f8fa;
-  }
-
-  code {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  table {
-    width: 100%;
-    margin-bottom: 16px;
-    border-collapse: collapse;
-
-    th,
-    td {
-      padding: 6px 13px;
-      border: 1px solid #dfe2e5;
-    }
-
-    th {
-      background-color: #f6f8fa;
-    }
-
-    tr:nth-child(2n) {
-      background-color: #f6f8fa;
-    }
-  }
-}
-
-@keyframes blink {
-  0% {
-    background: #fff;
-  }
-  50% {
-    background: #000;
-  }
-  100% {
-    background: #fff;
-  }
-}
-
-.animate-blink {
-  animation: blink 1s infinite;
-}
diff --git a/src/views/ai/chat/message/styles/highlight.less b/src/views/ai/chat/message/styles/highlight.less
deleted file mode 100644
index 98738c4..0000000
--- a/src/views/ai/chat/message/styles/highlight.less
+++ /dev/null
@@ -1,222 +0,0 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-html.dark {
-	pre code.hljs {
-		display: block;
-		overflow-x: auto;
-		padding: 1em
-	}
-
-	code.hljs {
-		padding: 3px 5px
-	}
-
-	.hljs {
-		color: #abb2bf;
-		background: #282c34
-	}
-
-	.hljs-keyword,
-	.hljs-operator,
-	.hljs-pattern-match {
-		color: #f92672
-	}
-
-	.hljs-function,
-	.hljs-pattern-match .hljs-constructor {
-		color: #61aeee
-	}
-
-	.hljs-function .hljs-params {
-		color: #a6e22e
-	}
-
-	.hljs-function .hljs-params .hljs-typing {
-		color: #fd971f
-	}
-
-	.hljs-module-access .hljs-module {
-		color: #7e57c2
-	}
-
-	.hljs-constructor {
-		color: #e2b93d
-	}
-
-	.hljs-constructor .hljs-string {
-		color: #9ccc65
-	}
-
-	.hljs-comment,
-	.hljs-quote {
-		color: #b18eb1;
-		font-style: italic
-	}
-
-	.hljs-doctag,
-	.hljs-formula {
-		color: #c678dd
-	}
-
-	.hljs-deletion,
-	.hljs-name,
-	.hljs-section,
-	.hljs-selector-tag,
-	.hljs-subst {
-		color: #e06c75
-	}
-
-	.hljs-literal {
-		color: #56b6c2
-	}
-
-	.hljs-addition,
-	.hljs-attribute,
-	.hljs-meta .hljs-string,
-	.hljs-regexp,
-	.hljs-string {
-		color: #98c379
-	}
-
-	.hljs-built_in,
-	.hljs-class .hljs-title,
-	.hljs-title.class_ {
-		color: #e6c07b
-	}
-
-	.hljs-attr,
-	.hljs-number,
-	.hljs-selector-attr,
-	.hljs-selector-class,
-	.hljs-selector-pseudo,
-	.hljs-template-variable,
-	.hljs-type,
-	.hljs-variable {
-		color: #d19a66
-	}
-
-	.hljs-bullet,
-	.hljs-link,
-	.hljs-meta,
-	.hljs-selector-id,
-	.hljs-symbol,
-	.hljs-title {
-		color: #61aeee
-	}
-
-	.hljs-emphasis {
-		font-style: italic
-	}
-
-	.hljs-strong {
-		font-weight: 700
-	}
-
-	.hljs-link {
-		text-decoration: underline
-	}
-}
-
-html {
-	pre code.hljs {
-		display: block;
-		overflow-x: auto;
-		padding: 1em
-	}
-
-	code.hljs {
-		padding: 3px 5px;
-		&::-webkit-scrollbar {
-			height: 4px;
-		}
-	}
-
-	.hljs {
-		color: #383a42;
-		background: #fafafa
-	}
-
-	.hljs-comment,
-	.hljs-quote {
-		color: #a0a1a7;
-		font-style: italic
-	}
-
-	.hljs-doctag,
-	.hljs-formula,
-	.hljs-keyword {
-		color: #a626a4
-	}
-
-	.hljs-deletion,
-	.hljs-name,
-	.hljs-section,
-	.hljs-selector-tag,
-	.hljs-subst {
-		color: #e45649
-	}
-
-	.hljs-literal {
-		color: #0184bb
-	}
-
-	.hljs-addition,
-	.hljs-attribute,
-	.hljs-meta .hljs-string,
-	.hljs-regexp,
-	.hljs-string {
-		color: #50a14f
-	}
-
-	.hljs-attr,
-	.hljs-number,
-	.hljs-selector-attr,
-	.hljs-selector-class,
-	.hljs-selector-pseudo,
-	.hljs-template-variable,
-	.hljs-type,
-	.hljs-variable {
-		color: #986801
-	}
-
-	.hljs-bullet,
-	.hljs-link,
-	.hljs-meta,
-	.hljs-selector-id,
-	.hljs-symbol,
-	.hljs-title {
-		color: #4078f2
-	}
-
-	.hljs-built_in,
-	.hljs-class .hljs-title,
-	.hljs-title.class_ {
-		color: #c18401
-	}
-
-	.hljs-emphasis {
-		font-style: italic
-	}
-
-	.hljs-strong {
-		font-weight: 700
-	}
-
-	.hljs-link {
-		text-decoration: underline
-	}
-}
diff --git a/src/views/ai/chat/message/styles/index.less b/src/views/ai/chat/message/styles/index.less
deleted file mode 100644
index 542cc44..0000000
--- a/src/views/ai/chat/message/styles/index.less
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import "github-markdown.less";
-@import "highlight.less";
-@import "style.less";
diff --git a/src/views/ai/chat/message/styles/style.less b/src/views/ai/chat/message/styles/style.less
deleted file mode 100644
index 4c2ae23..0000000
--- a/src/views/ai/chat/message/styles/style.less
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.markdown-body {
-	background-color: transparent;
-	font-size: 14px;
-
-	p {
-		white-space: pre-wrap;
-	}
-
-	ol {
-		list-style-type: decimal;
-	}
-
-	ul {
-		list-style-type: disc;
-	}
-
-	pre code,
-	pre tt {
-		line-height: 1.65;
-	}
-
-	.highlight pre,
-	pre {
-		background-color: #fff;
-	}
-
-	code.hljs {
-		padding: 0;
-	}
-
-	.code-block {
-		&-wrapper {
-			position: relative;
-			padding-top: 24px;
-      margin-top: 10px;
-		}
-
-		&-header {
-			position: absolute;
-			top: 5px;
-			right: 0;
-			width: 100%;
-			padding: 0 1rem;
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			color: #b3b3b3;
-
-			&__copy {
-				cursor: pointer;
-				margin-left: 0.5rem;
-				user-select: none;
-
-				&:hover {
-					color: #65a665;
-				}
-			}
-		}
-	}
-
-}
-
-html.dark {
-
-	.message-reply {
-		.whitespace-pre-wrap {
-			white-space: pre-wrap;
-			color: var(--n-text-color);
-		}
-	}
-
-	.highlight pre,
-	pre {
-		background-color: #282c34;
-	}
-}
-
-@keyframes blink {
-	0%, to {
-		background-color: currentColor
-	}
-	50% {
-		background-color: transparent
-	}
-}
-
-.animate-blink {
-	animation: blink 1.2s infinite steps(1, start)
-}
diff --git a/src/views/ai/chat/Chat.vue b/src/views/ai/chat/new-chat/Chat.vue
similarity index 99%
rename from src/views/ai/chat/Chat.vue
rename to src/views/ai/chat/new-chat/Chat.vue
index cd94470..fe2106e 100644
--- a/src/views/ai/chat/Chat.vue
+++ b/src/views/ai/chat/new-chat/Chat.vue
@@ -15,7 +15,7 @@
   -->
 
 <script lang="ts" setup>
-import Message from './message/Message.vue'
+import Message from '@/views/ai/chat/new-chat/message/Message.vue'
 import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
 import { computed, ref } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
diff --git a/src/views/ai/chat/Header.vue b/src/views/ai/chat/new-chat/Header.vue
similarity index 66%
rename from src/views/ai/chat/Header.vue
rename to src/views/ai/chat/new-chat/Header.vue
index 98fc68f..ed6e491 100644
--- a/src/views/ai/chat/Header.vue
+++ b/src/views/ai/chat/new-chat/Header.vue
@@ -1,18 +1,3 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
 
 <script lang="ts" setup>
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -32,7 +17,7 @@ function handleClear() {
   if (chatStore.conversationId == null) {
     return
   }
-  
+
   ElMessageBox.confirm('确认清除聊天', '清除聊天', {
     confirmButtonText: '是',
     cancelButtonText: '否',
@@ -50,7 +35,7 @@ function handleClear() {
 </script>
 
 <template>
-  <div class="mb-3 flex flex-wrap justify-between items-center">
+  <div class="mb-10px flex flex-wrap justify-between items-center">
     <div class="font-bold flex justify-center items-center flex-wrap gap-2">
       <el-icon class="text-lg"><Star /></el-icon>
       <span>{{ title }}</span>
diff --git a/src/views/ai/chat/new-chat/index.vue b/src/views/ai/chat/new-chat/index.vue
new file mode 100644
index 0000000..3f94ba4
--- /dev/null
+++ b/src/views/ai/chat/new-chat/index.vue
@@ -0,0 +1,47 @@
+
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import Chat from '@/views/ai/chat/new-chat/Chat.vue';
+  import { getMessages } from '@/api/new-ai/chat';
+  import { useChatStore } from '@/views/ai/chat/new-chat/store/useChatStore';
+  import { useUserStore } from '@/store/modules/user';
+  import Header from './Header.vue';
+
+  const loading = ref(true);
+  const chatStore = useChatStore();
+  const userStore = useUserStore();
+
+  onMounted(async () => {
+    await fetch();
+  });
+
+  async function fetch() {
+    loading.value = true;
+    chatStore.conversationId = userStore.user.id;
+    chatStore.messages = await getMessages(userStore.user.id);
+    loading.value = false;
+  }
+</script>
+
+<template>
+  <div class="p-4 pt-1 chat-card w-full h-full bg-white rounded-xl shadow-xl pt-20px">
+    <Header title="AI聊天助手" @reload="fetch" />
+    <main ref="contentRef" class="flex-1 overflow-hidden overflow-y-auto">
+        <Chat />
+      </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  :v-deep(.n-tabs.n-tabs--top .n-tab-pane) {
+    padding: 0 !important;
+  }
+  .chat-card {
+    box-sizing: border-box;
+    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+    main {
+      height: calc(100% - 60px);
+    }
+  }
+</style>
diff --git a/src/views/ai/chat/message/Message.vue b/src/views/ai/chat/new-chat/message/Message.vue
similarity index 100%
rename from src/views/ai/chat/message/Message.vue
rename to src/views/ai/chat/new-chat/message/Message.vue
diff --git a/src/views/ai/chat/message/TextComponent.vue b/src/views/ai/chat/new-chat/message/TextComponent.vue
similarity index 82%
rename from src/views/ai/chat/message/TextComponent.vue
rename to src/views/ai/chat/new-chat/message/TextComponent.vue
index 28b74ad..954fc2f 100644
--- a/src/views/ai/chat/message/TextComponent.vue
+++ b/src/views/ai/chat/new-chat/message/TextComponent.vue
@@ -1,18 +1,3 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
@@ -134,6 +119,6 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss">
-@import './styles.scss';
+<style lang="scss" scoped>
+@import './styles/index.scss';
 </style>
diff --git a/src/views/ai/chat/message/styles/github-markdown.less b/src/views/ai/chat/new-chat/message/styles/github-markdown.scss
similarity index 97%
rename from src/views/ai/chat/message/styles/github-markdown.less
rename to src/views/ai/chat/new-chat/message/styles/github-markdown.scss
index 8874393..41861d5 100644
--- a/src/views/ai/chat/message/styles/github-markdown.less
+++ b/src/views/ai/chat/new-chat/message/styles/github-markdown.scss
@@ -1,19 +1,3 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 html.dark {
   .markdown-body {
     color-scheme: dark;
diff --git a/src/views/ai/chat/new-chat/message/styles/highlight.scss b/src/views/ai/chat/new-chat/message/styles/highlight.scss
new file mode 100644
index 0000000..98423b0
--- /dev/null
+++ b/src/views/ai/chat/new-chat/message/styles/highlight.scss
@@ -0,0 +1,208 @@
+
+
+html.dark {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+
+  code.hljs {
+    padding: 3px 5px;
+  }
+
+  .hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+
+  .hljs-keyword,
+  .hljs-operator,
+  .hljs-pattern-match {
+    color: #f92672;
+  }
+
+  .hljs-function,
+  .hljs-pattern-match .hljs-constructor {
+    color: #61aeee;
+  }
+
+  .hljs-function .hljs-params {
+    color: #a6e22e;
+  }
+
+  .hljs-function .hljs-params .hljs-typing {
+    color: #fd971f;
+  }
+
+  .hljs-module-access .hljs-module {
+    color: #7e57c2;
+  }
+
+  .hljs-constructor {
+    color: #e2b93d;
+  }
+
+  .hljs-constructor .hljs-string {
+    color: #9ccc65;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #b18eb1;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #e6c07b;
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #d19a66;
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
+html {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+
+  code.hljs {
+    padding: 3px 5px;
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+  }
+
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: #a626a4;
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e45649;
+  }
+
+  .hljs-literal {
+    color: #0184bb;
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #50a14f;
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #986801;
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #4078f2;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #c18401;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
diff --git a/src/views/ai/chat/new-chat/message/styles/index.scss b/src/views/ai/chat/new-chat/message/styles/index.scss
new file mode 100644
index 0000000..0f5ccac
--- /dev/null
+++ b/src/views/ai/chat/new-chat/message/styles/index.scss
@@ -0,0 +1,3 @@
+@import "github-markdown";
+@import "highlight";
+@import "style";
diff --git a/src/views/ai/chat/new-chat/message/styles/style.scss b/src/views/ai/chat/new-chat/message/styles/style.scss
new file mode 100644
index 0000000..d41142f
--- /dev/null
+++ b/src/views/ai/chat/new-chat/message/styles/style.scss
@@ -0,0 +1,89 @@
+
+
+.markdown-body {
+  background-color: transparent;
+  font-size: 14px;
+
+  p {
+    white-space: pre-wrap;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  pre code,
+  pre tt {
+    line-height: 1.65;
+  }
+
+  .highlight pre,
+  pre {
+    background-color: #fff;
+  }
+
+  code.hljs {
+    padding: 0;
+  }
+
+  .code-block {
+    &-wrapper {
+      position: relative;
+      padding-top: 24px;
+      margin-top: 10px;
+    }
+
+    &-header {
+      position: absolute;
+      top: 5px;
+      right: 0;
+      width: 100%;
+      padding: 0 1rem;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      color: #b3b3b3;
+
+      &__copy {
+        cursor: pointer;
+        margin-left: 0.5rem;
+        user-select: none;
+
+        &:hover {
+          color: #65a665;
+        }
+      }
+    }
+  }
+}
+
+html.dark {
+  .message-reply {
+    .whitespace-pre-wrap {
+      white-space: pre-wrap;
+      color: var(--n-text-color);
+    }
+  }
+
+  .highlight pre,
+  pre {
+    background-color: #282c34;
+  }
+}
+
+@keyframes blink {
+  0%, to {
+    background-color: currentColor;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.animate-blink {
+  animation: blink 1.2s infinite steps(1, start);
+}
diff --git a/src/views/ai/chat/store/chat.d.ts b/src/views/ai/chat/new-chat/store/chat.d.ts
similarity index 100%
rename from src/views/ai/chat/store/chat.d.ts
rename to src/views/ai/chat/new-chat/store/chat.d.ts
diff --git a/src/views/ai/chat/store/useBasicLayout.ts b/src/views/ai/chat/new-chat/store/useBasicLayout.ts
similarity index 100%
rename from src/views/ai/chat/store/useBasicLayout.ts
rename to src/views/ai/chat/new-chat/store/useBasicLayout.ts
diff --git a/src/views/ai/chat/store/useChatStore.ts b/src/views/ai/chat/new-chat/store/useChatStore.ts
similarity index 96%
rename from src/views/ai/chat/store/useChatStore.ts
rename to src/views/ai/chat/new-chat/store/useChatStore.ts
index 15ba87f..8c8d9fa 100644
--- a/src/views/ai/chat/store/useChatStore.ts
+++ b/src/views/ai/chat/new-chat/store/useChatStore.ts
@@ -16,7 +16,7 @@
 
 import { defineStore } from 'pinia';
 import { formatToDateTime } from '@/utils/dateUtil';
-import type { ChatState } from '@/views/ai/chat/store/chat';
+import type { ChatState } from '@/views/ai/chat/new-chat/store/chat';
 
 export const useChatStore = defineStore('chat-store', {
   state: (): ChatState =>
diff --git a/src/views/ai/chat/store/useIconRender.ts b/src/views/ai/chat/new-chat/store/useIconRender.ts
similarity index 100%
rename from src/views/ai/chat/store/useIconRender.ts
rename to src/views/ai/chat/new-chat/store/useIconRender.ts
diff --git a/src/views/ai/chat/store/useScroll.ts b/src/views/ai/chat/new-chat/store/useScroll.ts
similarity index 100%
rename from src/views/ai/chat/store/useScroll.ts
rename to src/views/ai/chat/new-chat/store/useScroll.ts
diff --git a/src/views/common/ModelSelect.vue b/src/views/common/ModelSelect.vue
index f1c17eb..63d7828 100644
--- a/src/views/common/ModelSelect.vue
+++ b/src/views/common/ModelSelect.vue
@@ -19,7 +19,7 @@ import { onMounted, ref, toRaw } from 'vue'
 import { ModelApi } from '@/api/new-ai/model'
 import { LLMProviders } from '@/views/ai/model/chatModel/composables/consts'
 import { ModelTypeEnum } from '@/api/models'
-import { useChatStore } from '@/views/ai/chat/store/useChatStore'
+import { useChatStore } from '@/views/ai/chat/new-chat/store/useChatStore'
 
 const chatStore = useChatStore()
 const props = defineProps<{

From 1bc33d2784955d016ae101b2775145e98d9eed8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Tue, 4 Mar 2025 16:56:47 +0800
Subject: [PATCH 13/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI聊天移植
---
 src/views/ai/chat/new-chat/Header.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/ai/chat/new-chat/Header.vue b/src/views/ai/chat/new-chat/Header.vue
index ed6e491..bc25578 100644
--- a/src/views/ai/chat/new-chat/Header.vue
+++ b/src/views/ai/chat/new-chat/Header.vue
@@ -35,15 +35,15 @@ function handleClear() {
 </script>
 
 <template>
-  <div class="mb-10px flex flex-wrap justify-between items-center">
+  <div class="mb-10px flex flex-wrap justify-between items-center pl-10px">
     <div class="font-bold flex justify-center items-center flex-wrap gap-2">
-      <el-icon class="text-lg"><Star /></el-icon>
+      <SvgIcon class="text-lg" icon="ion:sparkles-outline" />
       <span>{{ title }}</span>
     </div>
     <div class="flex items-center gap-2">
       <ModelSelect :id="chatStore.modelId" class="w-auto min-w-[180px]" />
 
-      <el-button type="warning" size="small" @click="handleClear">
+      <el-button type="warning" plain @click="handleClear">
         <template #icon>
           <el-icon><Delete /></el-icon>
         </template>

From ac2d981a23704c0832e275b70ad8e5f72b6d9289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Wed, 5 Mar 2025 17:44:31 +0800
Subject: [PATCH 14/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI应用接口对接
---
 .vscode/settings.json                         |   2 +-
 src/api/new-ai/app.ts                         |  16 +-
 src/api/new-ai/appApi.ts                      |  16 +-
 src/api/new-ai/chat.ts                        |  14 +-
 src/api/new-ai/oss.ts                         |  29 ++--
 src/components/Form/src/Form.vue              |   7 +-
 src/components/UploadFile/src/UploadImg.vue   |  12 +-
 src/components/UploadFile/src/useUpload.ts    |   5 +-
 src/config/axios/service.ts                   |   2 +-
 src/styles/highligt.css                       | 142 ++++++++++++++++++
 src/styles/index.scss                         |   2 +-
 src/views/ai/app/base/index.vue               |   1 -
 src/views/ai/app/base/prompt/index.vue        |  18 +--
 .../ai/app/base/settings/KnowledgeList.vue    |   2 +-
 src/views/ai/app/base/settings/index.vue      |   1 +
 .../ai/app/channel-api/components/docs.vue    |  97 ++++++++----
 src/views/ai/app/edit.vue                     | 141 +++++++++--------
 src/views/ai/app/index.vue                    |  46 ++----
 src/views/ai/app/info.vue                     |   8 +-
 src/views/ai/chat/new-chat/index.vue          |   8 +-
 src/views/common/ModelSelect.vue              |  29 ++--
 21 files changed, 374 insertions(+), 224 deletions(-)
 create mode 100644 src/styles/highligt.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f145f38..2db1f3d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -62,7 +62,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
diff --git a/src/api/new-ai/app.ts b/src/api/new-ai/app.ts
index 046e213..8788e4e 100644
--- a/src/api/new-ai/app.ts
+++ b/src/api/new-ai/app.ts
@@ -20,41 +20,41 @@ import request from '@/config/axios'
 export const AppApi = {
   // 获取应用列表
   getAppList: async (params: any) => {
-    return await request.get({ url: '/aigc/app/list', params })
+    return await request.get({ url: '/chat/aigc/app/list', params })
   },
 
   // 获取应用分页数据
   getAppPage: async (params: any) => {
-    return await request.get({ url: '/aigc/app/page', params })
+    return await request.get({ url: '/chat/aigc/app/page', params })
   },
 
   // 获取应用详情
   getApp: async (id: string) => {
-    return await request.get({ url: `/aigc/app/${id}` })
+    return await request.get({ url: `/chat/aigc/app/${id}` })
   },
 
   // 根据模型ID获取应用
   getAppByModelId: async (id: string) => {
-    return await request.get({ url: `/aigc/app/byModelId/${id}` })
+    return await request.get({ url: `/chat/aigc/app/byModelId/${id}` })
   },
 
   // 获取应用API通道
   getAppApiChannel: async (appId: string) => {
-    return await request.get({ url: `/aigc/app/channel/api/${appId}` })
+    return await request.get({ url: `/chat/aigc/app/channel/api/${appId}` })
   },
 
   // 新增应用
   createApp: async (data: any) => {
-    return await request.post({ url: '/aigc/app', data })
+    return await request.post({ url: '/chat/aigc/app', data })
   },
 
   // 更新应用
   updateApp: async (data: any) => {
-    return await request.put({ url: '/aigc/app', data })
+    return await request.put({ url: '/chat/aigc/app', data })
   },
 
   // 删除应用
   deleteApp: async (id: string) => {
-    return await request.delete({ url: `/aigc/app/${id}` })
+    return await request.delete({ url: `/chat/aigc/app/${id}` })
   }
 }
diff --git a/src/api/new-ai/appApi.ts b/src/api/new-ai/appApi.ts
index b78eb86..9b3793f 100644
--- a/src/api/new-ai/appApi.ts
+++ b/src/api/new-ai/appApi.ts
@@ -20,41 +20,41 @@ import request from '@/config/axios'
 export const AppApiManagement = {
   // 获取API列表
   getApiList: async (params: any) => {
-    return await request.get({ url: '/aigc/app/api/list', params })
+    return await request.get({ url: '/chat/aigc/app/api/list', params })
   },
 
   // 获取API分页数据
   getApiPage: async (params: any) => {
-    return await request.get({ url: '/aigc/app/api/page', params })
+    return await request.get({ url: '/chat/aigc/app/api/page', params })
   },
 
   // 获取API详情
   getApi: async (id: string) => {
-    return await request.get({ url: `/aigc/app/api/${id}` })
+    return await request.get({ url: `/chat/aigc/app/api/${id}` })
   },
 
   // 新增API
   createApi: async (data: any) => {
-    return await request.post({ url: '/aigc/app/api', data })
+    return await request.post({ url: '/chat/aigc/app/api', data })
   },
 
   // 更新API
   updateApi: async (data: any) => {
-    return await request.put({ url: '/aigc/app/api', data })
+    return await request.put({ url: '/chat/aigc/app/api', data })
   },
 
   // 删除API
   deleteApi: async (id: string) => {
-    return await request.delete({ url: `/aigc/app/api/${id}` })
+    return await request.delete({ url: `/chat/aigc/app/api/${id}` })
   },
 
   // 发布API
   publishApi: async (id: string) => {
-    return await request.put({ url: `/aigc/app/api/publish/${id}` })
+    return await request.put({ url: `/chat/aigc/app/api/publish/${id}` })
   },
 
   // 下线API
   offlineApi: async (id: string) => {
-    return await request.put({ url: `/aigc/app/api/offline/${id}` })
+    return await request.put({ url: `/chat/aigc/app/api/offline/${id}` })
   }
 }
diff --git a/src/api/new-ai/chat.ts b/src/api/new-ai/chat.ts
index 447e21b..5072b61 100644
--- a/src/api/new-ai/chat.ts
+++ b/src/api/new-ai/chat.ts
@@ -23,7 +23,7 @@ export function chat(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return request.post({
-    url: '/aigc/chat/completions',
+    url: '/chat/aigc/chat/completions',
     data,
     signal: controller.signal,
     onDownloadProgress,
@@ -33,26 +33,26 @@ export function chat(
 
 export function clean(conversationId: string | null) {
   return request.delete({ 
-    url: `/aigc/chat/messages/clean/${conversationId}` 
+    url: `/chat/aigc/chat/messages/clean/${conversationId}` 
   })
 }
 
 export function getMessages(conversationId?: string | number) {
   return request.get({ 
-    url: `/aigc/chat/messages/${conversationId}` 
+    url: `/chat/aigc/chat/messages/${conversationId}` 
   })
 }
 
 export function getAppInfo(params: any) {
   return request.get({ 
-    url: `/aigc/app/info`,
+    url: `/chat/aigc/app/info`,
     params 
   })
 }
 
 export function getImageModels() {
   return request.get({ 
-    url: '/aigc/chat/getImageModels' 
+    url: '/chat/aigc/chat/getImageModels' 
   })
 }
 
@@ -61,7 +61,7 @@ export function getImageModels() {
  */
 export function genImage(data: any) {
   return request.post({ 
-    url: '/aigc/chat/image', 
+    url: '/chat/aigc/chat/image', 
     data 
   })
 }
@@ -71,7 +71,7 @@ export function genImage(data: any) {
  */
 export function genMindMap(data: any) {
   return request.post({ 
-    url: '/aigc/chat/mindmap', 
+    url: '/chat/aigc/chat/mindmap', 
     data 
   })
 }
diff --git a/src/api/new-ai/oss.ts b/src/api/new-ai/oss.ts
index 6fd99ad..199e015 100644
--- a/src/api/new-ai/oss.ts
+++ b/src/api/new-ai/oss.ts
@@ -24,8 +24,8 @@ export class OssApi {
    * 获取OSS上传策略
    */
   static policy() {
-    return request.get({ 
-      url: '/oss/policy' 
+    return request.get({
+      url: '/chat/oss/policy'
     })
   }
 
@@ -33,9 +33,9 @@ export class OssApi {
    * 获取文件列表
    */
   static list(params: any) {
-    return request.get({ 
-      url: '/oss/list', 
-      params 
+    return request.get({
+      url: '/chat/oss/list',
+      params
     })
   }
 
@@ -43,20 +43,19 @@ export class OssApi {
    * 删除文件
    */
   static del(objectName: string) {
-    return request.delete({ 
-      url: `/oss/${objectName}` 
+    return request.delete({
+      url: `/chat/oss/${objectName}`
     })
   }
 
   /**
    * 上传文件
    */
-  static upload(data: FormData) {
-    return request.post({
-      url: '/aigc/oss/upload',
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
+  static uploadUrl = '/chat/aigc/oss/upload'
+
+  static upload(data: any) {
+    return request.upload({
+      url: '/chat/aigc/oss/upload',
       data
     })
   }
@@ -65,8 +64,8 @@ export class OssApi {
    * 获取文件访问URL
    */
   static getUrl(objectName: string) {
-    return request.get({ 
-      url: `/oss/url/${objectName}` 
+    return request.get({
+      url: `/chat/oss/url/${objectName}`
     })
   }
 }
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index 4d59f03..f23e103 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -113,7 +113,9 @@ export default defineComponent({
         }
       }
     }
-
+    const setValue = (key: string, value: any) => {
+      formModel.value[key] = value
+    }
     const getElFormRef = (): ComponentRef<typeof ElForm> => {
       return unref(elFormRef) as ComponentRef<typeof ElForm>
     }
@@ -129,7 +131,8 @@ export default defineComponent({
       addSchema,
       setSchema,
       getElFormRef,
-      clearForm
+      clearForm,
+      setValue
     })
 
     // 监听表单结构化数组，重新生成formModel
diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue
index ac0c162..f152e2b 100644
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@@ -79,7 +79,9 @@ const props = defineProps({
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
   borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
   showDelete: propTypes.bool.def(true), // 是否显示删除按钮
-  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
+  showBtnText: propTypes.bool.def(true), // 是否显示按钮文字
+  customApi: propTypes.func.def(() => undefined), // 上传接口地址 ==> 非必传（默认为 '')
+  successBefore: propTypes.func.def(() => undefined), // 上传成功之前的钩子 ==> 非必传（默认为 undefined）
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -99,7 +101,7 @@ const deleteImg = () => {
   emit('update:modelValue', '')
 }
 
-const { uploadUrl, httpRequest } = useUpload()
+const { uploadUrl, httpRequest } = useUpload({ customApi: props.customApi })
 
 const editImg = () => {
   const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
@@ -117,8 +119,12 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 // 图片上传成功提示
 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  let params = res
+  if (props.successBefore) {
+    params = props.successBefore(res)
+  }
   message.success('上传成功')
-  emit('update:modelValue', res.data)
+  emit('update:modelValue', params.data)
 }
 
 // 图片上传错误提示
diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts
index 2981e12..f718888 100644
--- a/src/components/UploadFile/src/useUpload.ts
+++ b/src/components/UploadFile/src/useUpload.ts
@@ -10,7 +10,7 @@ export const getUploadUrl = (): string => {
   return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
 }
 
-export const useUpload = () => {
+export const useUpload = (defaultParams?: { customApi: any }) => {
   // 后端上传地址
   const uploadUrl = getUploadUrl()
   // 是否使用前端直连上传
@@ -40,7 +40,8 @@ export const useUpload = () => {
       // 模式二：后端上传
       // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
       return new Promise((resolve, reject) => {
-        FileApi.updateFile({ file: options.file })
+        const Api = defaultParams?.customApi || FileApi.updateFile
+        Api({ file: options.file })
           .then((res) => {
             if (res.code === 0) {
               resolve(res)
diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts
index 618f14a..d64f755 100644
--- a/src/config/axios/service.ts
+++ b/src/config/axios/service.ts
@@ -149,7 +149,7 @@ service.interceptors.response.use(
         })
       }
     } else if (code === 500) {
-      ElMessage.error(t('sys.api.errMsg500'))
+      ElMessage.error(msg || t('sys.api.errMsg500'))
       return Promise.reject(new Error(msg))
     } else if (code === 901) {
       ElMessage.error({
diff --git a/src/styles/highligt.css b/src/styles/highligt.css
new file mode 100644
index 0000000..f0d9740
--- /dev/null
+++ b/src/styles/highligt.css
@@ -0,0 +1,142 @@
+/* VSCode Dark+ Theme for highlight.js */
+
+.hljs {
+  background: #1e1e1e !important;
+  color: #d4d4d4 !important;
+  --el-scrollbar-opacity: 0.3;
+  --el-scrollbar-bg-color: var(--el-text-color-secondary);
+  --el-scrollbar-hover-opacity: 0.5;
+  --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
+}
+
+/* 滚动条样式 */
+.hljs::-webkit-scrollbar {
+  width: 6px !important;
+}
+
+.hljs::-webkit-scrollbar-thumb {
+  background-color: var(--el-scrollbar-bg-color) !important;
+  opacity: var(--el-scrollbar-opacity) !important;
+  border-radius: 3px !important;
+}
+
+.hljs::-webkit-scrollbar-thumb:hover {
+  background-color: var(--el-scrollbar-hover-bg-color) !important;
+  opacity: var(--el-scrollbar-hover-opacity) !important;
+}
+
+.hljs::-webkit-scrollbar-track {
+  background-color: transparent !important;
+}
+
+.hljs-keyword {
+  color: #569cd6 !important;
+}
+
+.hljs-built_in {
+  color: #4ec9b0 !important;
+}
+
+.hljs-type {
+  color: #4ec9b0 !important;
+}
+
+.hljs-literal {
+  color: #569cd6 !important;
+}
+
+.hljs-number {
+  color: #b5cea8 !important;
+}
+
+.hljs-regexp {
+  color: #d16969 !important;
+}
+
+.hljs-string {
+  color: #ce9178 !important;
+}
+
+.hljs-subst {
+  color: #d4d4d4 !important;
+}
+
+.hljs-symbol {
+  color: #d4d4d4 !important;
+}
+
+.hljs-class {
+  color: #4ec9b0 !important;
+}
+
+.hljs-function {
+  color: #dcdcaa !important;
+}
+
+.hljs-title {
+  color: #dcdcaa !important;
+}
+
+.hljs-params {
+  color: #d4d4d4 !important;
+}
+
+.hljs-comment {
+  color: #6a9955 !important;
+}
+
+.hljs-doctag {
+  color: #608b4e !important;
+}
+
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: #9b9b9b !important;
+}
+
+.hljs-meta .hljs-string {
+  color: #ce9178 !important;
+}
+
+.hljs-attr {
+  color: #9cdcfe !important;
+}
+
+.hljs-attribute {
+  color: #9cdcfe !important;
+}
+
+.hljs-name {
+  color: #569cd6 !important;
+}
+
+.hljs-section {
+  color: #d4d4d4 !important;
+}
+
+.hljs-tag {
+  color: #569cd6 !important;
+}
+
+.hljs-variable {
+  color: #9cdcfe !important;
+}
+
+.hljs-template-variable {
+  color: #9cdcfe !important;
+}
+
+.hljs-template-tag {
+  color: #569cd6 !important;
+}
+
+/* 添加代码块样式 */
+pre code.hljs {
+  display: block !important;
+  padding: 1em !important;
+  overflow-x: auto !important;
+  border-radius: 6px !important;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7607941..b6988e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,7 +2,7 @@
 @use './FormCreate/index.scss';
 @use './theme.scss';
 @use 'element-plus/theme-chalk/dark/css-vars.css';
-
+@import './highligt.css';
 .reset-margin [class*='el-icon'] + span {
   margin-left: 2px !important;
 }
diff --git a/src/views/ai/app/base/index.vue b/src/views/ai/app/base/index.vue
index cd66c6d..b4c6879 100644
--- a/src/views/ai/app/base/index.vue
+++ b/src/views/ai/app/base/index.vue
@@ -43,7 +43,6 @@ async function fetchData() {
   try {
     const data = await getAppInfo({
       appId: id,
-      conversationId: null
     })
     form.value = data
     appStore.info = data
diff --git a/src/views/ai/app/base/prompt/index.vue b/src/views/ai/app/base/prompt/index.vue
index e167c3c..19c67be 100644
--- a/src/views/ai/app/base/prompt/index.vue
+++ b/src/views/ai/app/base/prompt/index.vue
@@ -1,18 +1,4 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
+
 
 <script lang="ts" setup>
   import { useAppStore } from '@/views/ai/app/store';
@@ -30,7 +16,7 @@
     <div class="p-2 flex justify-between items-center">
       <div class="text-md font-bold">Prompt 提示词</div>
     </div>
-    <div class="p-4 pt-0 h-full mb-10">
+    <div class="p-4 pt-0 h-full mb-10" v-if="appStore.info">
       <el-input
       type="textarea"
         v-model="appStore.info.prompt"
diff --git a/src/views/ai/app/base/settings/KnowledgeList.vue b/src/views/ai/app/base/settings/KnowledgeList.vue
index 4d352be..b8ee9d3 100644
--- a/src/views/ai/app/base/settings/KnowledgeList.vue
+++ b/src/views/ai/app/base/settings/KnowledgeList.vue
@@ -18,7 +18,7 @@ async function show() {
 
 function onAdd(item) {
   appStore.addKnowledge(item)
-  ElMessage.success('关联成功')
+  // ElMessage.success('关联成功')
 }
 
 function onRemove(item) {
diff --git a/src/views/ai/app/base/settings/index.vue b/src/views/ai/app/base/settings/index.vue
index 39b47eb..41f2b67 100644
--- a/src/views/ai/app/base/settings/index.vue
+++ b/src/views/ai/app/base/settings/index.vue
@@ -11,6 +11,7 @@ const knowledgeRef = ref()
 
 async function onSaveModel(val) {
   appStore.modelId = val.id
+  console.log(val)
   emit('update')
 }
 
diff --git a/src/views/ai/app/channel-api/components/docs.vue b/src/views/ai/app/channel-api/components/docs.vue
index a45c3ba..4fb4a54 100644
--- a/src/views/ai/app/channel-api/components/docs.vue
+++ b/src/views/ai/app/channel-api/components/docs.vue
@@ -15,13 +15,13 @@
   -->
 
 <script lang="ts" setup>
-  import hljs from 'highlight.js';
-  import javascript from 'highlight.js/lib/languages/javascript';
+import hljs from 'highlight.js';
+import javascript from 'highlight.js/lib/languages/javascript';
+import { onMounted } from 'vue';
 
-  hljs.registerLanguage('javascript', javascript);
-
-  const url = `http://langchat.cn`;
-  const request = `
+hljs.registerLanguage('javascript', javascript);
+const url = `http://langchat.cn`;
+const request = `
 POST /v1/chat/completions HTTP/1.1
 Content-Type: application/json
 Authorization: 'Bearer YOUR_ACCESS_TOKEN'
@@ -31,9 +31,9 @@ Body:
         { "role": "user", "content": "你好" }
     ]
 }
-  `;
+`;
 
-  const response = `
+const response = `
 data: {"choices": [{"index": 0, "delta": {"content": "你好！"}, "finish_reason": null}], "session_id": null}
 
 data: {"choices": [{"index": 0, "delta": {"content": "我能"}, "finish_reason": null}], "session_id": null}
@@ -43,9 +43,9 @@ data: {"choices": [{"index": 0, "delta": {"content": "为你"}, "finish_reason":
 data: {"choices": [{"index": 0, "delta": {"content": "做些什么？"}, "finish_reason": null}], "session_id": null}
 
 data: {"choices": [{"index": 0, "delta": {}, "finish_reason": "stop", "usage": {"prompt_tokens": 9, "completion_tokens": 6, "total_tokens": 15}}], "session_id": null}
-  `;
+`;
 
-  const demo = `
+const demo = `
 const url = 'http://langchat.cn/v1/chat/completions';
 const data = {
     "messages": [
@@ -73,41 +73,76 @@ fetch(url, {
 .catch(error => {
   console.error('Error:', error);
 });
-  `;
+`;
+
+onMounted(() => {
+  // 高亮所有代码块
+  document.querySelectorAll('pre code').forEach((el) => {
+    hljs.highlightElement(el as HTMLElement);
+  });
+});
 </script>
 
 <template>
-  <div class="p-4 bg-white h-full overflow-auto rounded">
-    <n-config-provider :hljs="hljs" class="flex flex-col gap-4">
+  <el-scrollbar class="p-4 bg-white h-full overflow-auto rounded">
+    <div class="flex flex-col gap-4">
       <div>
-        <n-alert title="API URL（API接口格式遵循OpenAI格式）" type="info" />
-        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
-          <n-code :code="url" class="text-white" language="JavaScript" />
+        <el-alert
+          title="API URL（API接口格式遵循OpenAI格式）"
+          type="info"
+          :closable="false"
+          show-icon
+        />
+        <div class="bg-[#18181c] mt-10px py-2 px-4 overflow-x-auto rounded">
+          <pre><code class="javascript">{{ url }}</code></pre>
         </div>
       </div>
 
       <div>
-        <n-alert title="Request" type="info" />
-        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
-          <n-code :code="request" class="text-white" language="JavaScript" />
-        </div>
+        <el-alert
+          title="Request"
+          type="info"
+          :closable="false"
+          show-icon
+        />
+        <el-scrollbar class="bg-[#18181c] mt-10px py-2 px-4 overflow-x-auto rounded">
+          <pre><code class="javascript">{{ request }}</code></pre>
+        </el-scrollbar>
       </div>
 
       <div>
-        <n-alert title="Response（Stream）" type="info" />
-        <div class="bg-[#18181c] py-2 mt-2 px-4 overflow-x-auto rounded">
-          <n-code :code="response" class="text-white" language="JavaScript" />
-        </div>
+        <el-alert
+          title="Response（Stream）"
+          type="info"
+          :closable="false"
+          show-icon
+        />
+        <el-scrollbar class="mt-10px bg-[#18181c] py-2 px-4 rounded">
+          <pre><code class="javascript">{{ response }}</code></pre>
+        </el-scrollbar>
       </div>
 
       <div>
-        <n-alert title="API请求示例" type="info" />
-        <div class="bg-[#18181c] mt-2 py-2 px-4 overflow-x-auto rounded">
-          <n-code :code="demo" class="text-white" language="javascript" />
-        </div>
+        <el-alert
+          title="API请求示例"
+          type="info"
+          :closable="false"
+          show-icon
+        />
+        <el-scrollbar class="mt-10px bg-[#18181c] py-2 px-4 rounded">
+          <pre><code class="javascript">{{ demo }}</code></pre>
+        </el-scrollbar>
       </div>
-    </n-config-provider>
-  </div>
+    </div>
+  </el-scrollbar>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped>
+:deep(pre) {
+  margin: 0;
+  code {
+    color: white;
+  }
+}
+
+</style>
diff --git a/src/views/ai/app/edit.vue b/src/views/ai/app/edit.vue
index 0e38a29..d865b66 100644
--- a/src/views/ai/app/edit.vue
+++ b/src/views/ai/app/edit.vue
@@ -4,12 +4,15 @@ import { nextTick, ref } from 'vue'
 import { FormSchema } from '@/types/form'
 import { AppApi } from '@/api/new-ai/app'
 import { ElMessage } from 'element-plus'
-
+import { OssApi } from '@/api/new-ai/oss'
+import type { UploadFile, UploadRequestOptions } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import ModelSelect from '@/views/common/ModelSelect.vue'
 const emit = defineEmits(['reload'])
 const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
-const schemas = ref<FormSchema[]>([
+const schemas = ref<Array<FormSchema>>([
   {
     field: 'name',
     label: '应用名称',
@@ -17,14 +20,32 @@ const schemas = ref<FormSchema[]>([
     formItemProps: {
       required: true,
       rules: [
-      { required: true, message: '请输入应用名称' },
-      { min: 2, max: 20, message: '长度在2-20个字符' }
-    ]
+        { required: true, message: '请输入应用名称' },
+        { min: 2, max: 20, message: '长度在2-20个字符' }
+      ]
     },
     componentProps: {
       placeholder: '请输入应用名称'
+    }
+  },
+  {
+    field: 'modelId',
+    label: '关联模型',
+    component: 'Input',
+    formItemProps: {
+      rules: [{ required: true, message: '请选择关联模型' }]
+    }
+  },
+  {
+    field: 'cover',
+    label: '应用图标',
+    component: 'Input',
+    formItemProps: {
+      required: false
     },
-   
+    componentProps: {
+      placeholder: '请输入应用图标'
+    }
   },
   {
     field: 'description',
@@ -33,37 +54,14 @@ const schemas = ref<FormSchema[]>([
     formItemProps: {
       required: true,
       rules: [
-      { required: true, message: '请输入应用描述' },
-      { min: 2, max: 200, message: '长度在2-200个字符' }
-    ]
+        { required: true, message: '请输入应用描述' },
+        { min: 2, max: 200, message: '长度在2-200个字符' }
+      ]
     },
     componentProps: {
       type: 'textarea',
       rows: 4,
       placeholder: '请输入应用描述'
-    },
-   
-  },
-  {
-    field: 'icon',
-    label: '应用图标',
-    component: 'Input',
-    formItemProps: {
-      required: false,
-    },
-    componentProps: {
-      placeholder: '请输入应用图标'
-    }
-  },
-  {
-    field: 'modelId',
-    label: '关联模型',
-    component: 'Input',
-    formItemProps: {
-      required: false,
-    },
-    componentProps: {
-      placeholder: '请选择关联模型'
     }
   }
 ])
@@ -95,29 +93,22 @@ const show = async (data: any = {}) => {
 }
 
 const handleSubmit = async () => {
-  try {
-    const form = formRef.value.getElFormRef()
-    await form.validate()
-    const values = formRef.value.formModel
-    loading.value = true
-    
-    if (isEdit.value) {
-      await AppApi.updateApp(values)
-      ElMessage.success('更新应用成功')
-    } else {
-      await AppApi.createApp(values)
-      ElMessage.success('创建应用成功')
-    }
-    close()
-    emit('reload')
-  } catch (error) {
-    console.error('Failed to save app:', error)
-    ElMessage.error(isEdit.value ? '更新应用失败' : '创建应用失败')
-  } finally {
-    loading.value = false
+  const form = formRef.value.getElFormRef()
+  await form.validate()
+  const values = formRef.value.formModel
+  const Api = isEdit.value ? AppApi.updateApp : AppApi.createApp
+  loading.value = true
+  values.modelId =  values.modelId?.[1]
+  await Api(values).finally(() => (loading.value = false))
+  ElMessage.success(isEdit.value ? '更新应用成功' : '创建应用成功')
+  close()
+  emit('reload')
+}
+const handleImport = (params: Record<any, any>) => {
+  return {
+    data: params.data.url
   }
 }
-
 defineExpose({
   show,
   close
@@ -125,21 +116,23 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog 
-    v-model="visible" 
-    :close-on-click-modal="!loading" 
-    :close-on-press-escape="!loading" 
+  <el-dialog
+    v-model="visible"
+    :close-on-click-modal="!loading"
+    :close-on-press-escape="!loading"
     draggable
-    :title="isEdit ? '编辑应用' : '新增应用'" 
+    :title="isEdit ? '编辑应用' : '新增应用'"
     width="500px"
     @close="close"
   >
-    <Form 
-      ref="formRef" 
-      :model="formData" 
-      :schema="schemas"
-      v-loading="loading"
-    />
+    <Form ref="formRef" :model="formData" :schema="schemas" v-loading="loading">
+      <template #modelId="scope">
+        <ModelSelect :id="scope.modelId" class="w-full" v-model="scope.modelId" />
+      </template>
+      <template #cover="scoped">
+        <UploadImg v-model="scoped.cover" :custom-api="OssApi.upload" :success-before="handleImport"/>
+      </template>
+    </Form>
     <template #footer>
       <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
       <el-button @click="close" :loading="loading">取消</el-button>
@@ -148,4 +141,24 @@ defineExpose({
 </template>
 
 <style scoped lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
 </style>
diff --git a/src/views/ai/app/index.vue b/src/views/ai/app/index.vue
index 08ba0bf..92eced3 100644
--- a/src/views/ai/app/index.vue
+++ b/src/views/ai/app/index.vue
@@ -20,30 +20,15 @@ const router = useRouter()
 
 // 数据
 const loading = ref(false)
-const tableData = ref<TableDataItem[]>([
-  {
-    id: 1,
-    name: '',
-    description: '',
-    apiKey: '',
-    provider: '',
-    channel: '',
-    createTime: ''
-  }
-])
+const tableData = ref<TableDataItem[]>([])
 
 // 加载数据
 const loadData = async () => {
-  try {
-    loading.value = true
-    const res = await AppApi.getAppList({})
-    tableData.value = res.data || []
-  } catch (error) {
-    ElMessage.error('获取应用列表失败')
-    console.error('Failed to fetch app list:', error)
-  } finally {
+  loading.value = true
+  const res = await AppApi.getAppList({}).finally(() => {
     loading.value = false
-  }
+  })
+  tableData.value = res || []
 }
 
 // 新增应用
@@ -86,7 +71,6 @@ const handleInfo = (record: any) => {
 onMounted(() => {
   loadData()
 })
-
 </script>
 
 <template>
@@ -109,15 +93,11 @@ onMounted(() => {
         </div>
       </el-col>
       <el-col
-        v-for="item in tableData.concat(tableData).concat(tableData).concat(tableData)"
+        v-for="item in tableData"
         :key="item.id"
         :span="6"
       >
-        <el-card
-          class="app-card cursor-pointer w-full"
-          shadow="hover"
-          @click="handleInfo(item)"
-        >
+        <el-card class="app-card cursor-pointer w-full" shadow="hover" @click="handleInfo(item)">
           <template #header>
             <div class="flex items-center">
               <div class="sm:mx-4">
@@ -135,7 +115,7 @@ onMounted(() => {
             </div>
           </template>
           <div class="app-card-content flex justify-between items-center">
-            <p class="text-gray-600">{{ item.description || '暂无描述' }}</p>
+            <p class="text-gray-600">{{ item.des || '暂无描述' }}</p>
             <el-dropdown trigger="hover" width="500px">
               <div
                 :class="[activeDropdownId === item.id ? 'bg-gray-200' : 'hover:bg-gray-200']"
@@ -148,13 +128,10 @@ onMounted(() => {
                   <el-dropdown-item @click.stop="handleEdit(item)">编辑此应用</el-dropdown-item>
                   <el-dropdown-item @click.stop="handleDelete(item)">删除此应用</el-dropdown-item>
                   <el-dropdown-item disabled divided>
-                    <div class='w-150px'>
+                    <div class="w-150px">
                       <div>信息</div>
-                      <span class='text-xs text-stone-500'>
-                      创建时间：{{item.createTime}}
-                    </span>
+                      <span class="text-xs text-stone-500"> 创建时间：{{ item.createTime }} </span>
                     </div>
-                    
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -162,6 +139,9 @@ onMounted(() => {
           </div>
         </el-card>
       </el-col>
+      <el-col v-if="!tableData.length" :span="18">
+        <el-empty description="暂无数据"/>
+      </el-col>
     </el-row>
 
     <EditCom ref="editRef" @reload="loadData" />
diff --git a/src/views/ai/app/info.vue b/src/views/ai/app/info.vue
index 000cb5b..c029183 100644
--- a/src/views/ai/app/info.vue
+++ b/src/views/ai/app/info.vue
@@ -25,13 +25,11 @@
 
   async function fetchData() {
     loading.value = true;
-    const id = route.params.id;
-    const data = await getAppInfo({
-      appId: id,
-      conversationId: null,
+    const appId = route.params.id;
+    const data = await getAppInfo({ appId }).finally(() => {
+      loading.value = false
     });
     form.value = data;
-    loading.value = false;
   }
 </script>
 
diff --git a/src/views/ai/chat/new-chat/index.vue b/src/views/ai/chat/new-chat/index.vue
index 3f94ba4..b1238b9 100644
--- a/src/views/ai/chat/new-chat/index.vue
+++ b/src/views/ai/chat/new-chat/index.vue
@@ -25,7 +25,7 @@
 </script>
 
 <template>
-  <div class="p-4 pt-1 chat-card w-full h-full bg-white rounded-xl shadow-xl pt-20px">
+  <div class="p-4 pt-1 chat-card w-full h-full bg-white rounded-xl shadow-md pt-20px">
     <Header title="AI聊天助手" @reload="fetch" />
     <main ref="contentRef" class="flex-1 overflow-hidden overflow-y-auto">
         <Chat />
@@ -34,12 +34,10 @@
 </template>
 
 <style lang="scss" scoped>
-  :v-deep(.n-tabs.n-tabs--top .n-tab-pane) {
-    padding: 0 !important;
-  }
+
   .chat-card {
     box-sizing: border-box;
-    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
+    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3) + 20px) !important;
     main {
       height: calc(100% - 60px);
     }
diff --git a/src/views/common/ModelSelect.vue b/src/views/common/ModelSelect.vue
index 63d7828..d15fd21 100644
--- a/src/views/common/ModelSelect.vue
+++ b/src/views/common/ModelSelect.vue
@@ -1,18 +1,4 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
+
 
 <script lang="ts" setup>
 import { onMounted, ref, toRaw } from 'vue'
@@ -69,12 +55,12 @@ onMounted(async () => {
 })
 
 function onUpdate(val: any) {
+  console.log(val, 'val')
   const group = options.value.find(g => g.children.some(c => c.value === val))
   if (!group) return
-  
+  console.log(group, 'group')
   const option = group.children.find(c => c.value === val)
   if (!option) return
-
   const obj = option.raw
   emit('update', {
     id: obj.id,
@@ -88,16 +74,19 @@ function onUpdate(val: any) {
 </script>
 
 <template>
-  <el-cascader
+  <el-select
     v-model="modelId"
-    :options="options"
     :size="size"
     :props="{
       expandTrigger: 'hover'
     }"
     placeholder="请选择关联模型"
     @change="onUpdate"
-  />
+  >
+    <el-option-group v-for="group in options" :key="group.label" :label="group.label">
+      <el-option v-for="option in group.children" :key="option.value" :label="option.label" :value="option.value" />
+    </el-option-group>
+  </el-select>
 </template>
 
 <style lang="scss" scoped>

From c117e5f59b01779ea0045fd683e2eecc58d0916f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Wed, 5 Mar 2025 18:25:46 +0800
Subject: [PATCH 15/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI应用接口对接
---
 src/views/ai/chat/new-chat/message/Message.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ai/chat/new-chat/message/Message.vue b/src/views/ai/chat/new-chat/message/Message.vue
index e38343b..e4e26de 100644
--- a/src/views/ai/chat/new-chat/message/Message.vue
+++ b/src/views/ai/chat/new-chat/message/Message.vue
@@ -92,8 +92,8 @@ async function handleCopy() {
       :class="[inversion ? 'ml-2' : 'mr-2']"
       class="flex items-center justify-center bg-gray-200 flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
     >
-      <el-icon v-if="inversion"><User /></el-icon>
-      <el-icon v-else><Monitor /></el-icon>
+    <SvgIcon v-if="inversion" icon="solar:user-broken" />
+    <SvgIcon v-else icon="mingcute:ai-line" />
     </div>
     <div :class="[inversion ? 'items-end' : 'items-start']" class="overflow-hidden text-sm">
       <p :class="[inversion ? 'text-right' : 'text-left']" class="text-xs text-[#b4bbc4]">

From 373d8b771b9393f47897334759572224523a4fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Wed, 5 Mar 2025 18:27:52 +0800
Subject: [PATCH 16/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AI应用接口对接
---
 src/views/ai/chat/new-chat/Chat.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ai/chat/new-chat/Chat.vue b/src/views/ai/chat/new-chat/Chat.vue
index fe2106e..767a718 100644
--- a/src/views/ai/chat/new-chat/Chat.vue
+++ b/src/views/ai/chat/new-chat/Chat.vue
@@ -182,7 +182,7 @@ function handleDelete(item: any) {
 <template>
   <div class="flex flex-col w-full h-full">
     <main class="flex-1 overflow-hidden">
-      <div ref="contentRef" class="h-full overflow-hidden overflow-y-auto">
+      <el-scrollbar ref="contentRef" class="h-full overflow-hidden overflow-y-auto">
         <div
           ref="scrollRef"
           :class="[isMobile ? 'p-2' : 'p-5']"
@@ -200,7 +200,7 @@ function handleDelete(item: any) {
             @delete="handleDelete(item)"
           />
         </div>
-      </div>
+      </el-scrollbar>
     </main>
 
     <footer :class="footerClass">

From 1285218eea770fb7937efb20034655bbafa114f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Thu, 6 Mar 2025 14:07:05 +0800
Subject: [PATCH 17/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对话数据、账单统计移植
---
 src/api/new-ai/conversation.ts                |  23 +++
 src/api/new-ai/message.ts                     |  63 +++++++
 src/api/new-ai/statictic.ts                   |  33 ++++
 .../ai/chat/new-chat/message/Message.vue      |  16 +-
 src/views/ai/message/columns.ts               | 107 ++++++++++++
 src/views/ai/message/composables/index.ts     | 165 ++++++++++++++++++
 src/views/ai/message/conversation/columns.ts  |  12 ++
 .../conversation/components/InfoList.vue      |  68 ++++++++
 .../message/conversation/composables/index.ts | 107 ++++++++++++
 src/views/ai/message/conversation/index.vue   |  45 +++++
 src/views/ai/message/index.vue                |  57 ++++++
 src/views/ai/order/components/Chart.vue       |  79 +++++++++
 src/views/ai/order/components/List.vue        |  53 ++++++
 src/views/ai/order/components/columns.ts      |  56 ++++++
 src/views/ai/order/composables/index.ts       |  39 +++++
 src/views/ai/order/index.vue                  |  15 ++
 .../dataset-form/components/edit-doc.vue      |   2 +-
 17 files changed, 924 insertions(+), 16 deletions(-)
 create mode 100644 src/api/new-ai/conversation.ts
 create mode 100644 src/api/new-ai/message.ts
 create mode 100644 src/api/new-ai/statictic.ts
 create mode 100644 src/views/ai/message/columns.ts
 create mode 100644 src/views/ai/message/composables/index.ts
 create mode 100644 src/views/ai/message/conversation/columns.ts
 create mode 100644 src/views/ai/message/conversation/components/InfoList.vue
 create mode 100644 src/views/ai/message/conversation/composables/index.ts
 create mode 100644 src/views/ai/message/conversation/index.vue
 create mode 100644 src/views/ai/message/index.vue
 create mode 100644 src/views/ai/order/components/Chart.vue
 create mode 100644 src/views/ai/order/components/List.vue
 create mode 100644 src/views/ai/order/components/columns.ts
 create mode 100644 src/views/ai/order/composables/index.ts
 create mode 100644 src/views/ai/order/index.vue

diff --git a/src/api/new-ai/conversation.ts b/src/api/new-ai/conversation.ts
new file mode 100644
index 0000000..ef7a12a
--- /dev/null
+++ b/src/api/new-ai/conversation.ts
@@ -0,0 +1,23 @@
+
+
+
+import request from '@/config/axios'
+
+export function page(params: any) {
+  return request.get({
+    url: '/chat/aigc/conversation/page',
+    params,
+  });
+}
+
+export function del(id: string) {
+  return request.delete({
+    url: `/chat/aigc/conversation/${id}`,
+  });
+}
+
+export function getMessages(conversationId: string) {
+  return request.get({
+    url: `/chat/aigc/conversation/messages/${conversationId}`,
+  });
+}
diff --git a/src/api/new-ai/message.ts b/src/api/new-ai/message.ts
new file mode 100644
index 0000000..a7ebdf8
--- /dev/null
+++ b/src/api/new-ai/message.ts
@@ -0,0 +1,63 @@
+
+
+import request from '@/config/axios'
+
+/**
+ * 消息列表接口参数
+ */
+export interface MessageParams {
+  text?: string;
+  username?: string;
+  role?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+/**
+ * 获取消息列表
+ */
+export function list(params: MessageParams) {
+  return request.get({
+    url: '/chat/aigc/message/list',
+    params
+  })
+}
+
+/**
+ * 分页获取消息列表
+ */
+export function page(params: MessageParams) {
+  return request.get({
+    url: '/chat/aigc/message/page',
+    params
+  })
+}
+
+/**
+ * 添加消息
+ */
+export function add(data: any) {
+  return request.post({
+    url: '/chat/aigc/message',
+    data
+  })
+}
+
+/**
+ * 更新消息
+ */
+export function update(data: any) {
+  return request.put({
+    url: '/chat/aigc/message',
+    data
+  })
+}
+
+/**
+ * 删除消息
+ */
+export function del(id: string) {
+  return request.delete({
+    url: `/chat/aigc/message/${id}`
+  })
+}
diff --git a/src/api/new-ai/statictic.ts b/src/api/new-ai/statictic.ts
new file mode 100644
index 0000000..3ed400b
--- /dev/null
+++ b/src/api/new-ai/statictic.ts
@@ -0,0 +1,33 @@
+
+
+import request from '@/config/axios'
+
+export function getReqChartBy30() {
+  return request.get({
+    url: `/chat/aigc/statistic/requestBy30`,
+  });
+}
+
+export function getReqChart() {
+  return request.get({
+    url: `/chat/aigc/statistic/request`,
+  });
+}
+
+export function getTokenChartBy30() {
+  return request.get({
+    url: `/chat/aigc/statistic/tokenBy30`,
+  });
+}
+
+export function getTokenChart() {
+  return request.get({
+    url: `/chat/aigc/statistic/token`,
+  });
+}
+
+export function getHomeData() {
+  return request.get({
+    url: `/chat/aigc/statistic/home`,
+  });
+}
diff --git a/src/views/ai/chat/new-chat/message/Message.vue b/src/views/ai/chat/new-chat/message/Message.vue
index e4e26de..9584608 100644
--- a/src/views/ai/chat/new-chat/message/Message.vue
+++ b/src/views/ai/chat/new-chat/message/Message.vue
@@ -1,18 +1,4 @@
-<!--
-  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
-  -
-  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     https://www.gnu.org/licenses/agpl-3.0.html
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
+
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
diff --git a/src/views/ai/message/columns.ts b/src/views/ai/message/columns.ts
new file mode 100644
index 0000000..6a7e8cc
--- /dev/null
+++ b/src/views/ai/message/columns.ts
@@ -0,0 +1,107 @@
+
+
+import { TableColumnCtx } from 'element-plus';
+import { ElTag } from 'element-plus';
+import { h } from 'vue';
+import type { FormSchema } from '@/types/form';
+export const columns: Partial<TableColumnCtx<any>>[] = [
+  {
+    label: '用户名',
+    prop: 'username',
+    align: 'center',
+    width: 120,
+  },
+  {
+    label: '请求ip',
+    prop: 'ip',
+    align: 'center',
+    width: 120,
+  },
+  {
+    label: '对话角色',
+    prop: 'role',
+    align: 'center',
+    width: 100,
+    formatter: (row: any) => {
+      return h(
+        ElTag,
+        {
+          type: row.role === 'user' ? 'success' : 'danger',
+          size: 'small',
+        },
+        { default: () => row.role }
+      );
+    },
+  },
+  {
+    label: '模型名称',
+    prop: 'model',
+    align: 'center',
+    width: 100,
+  },
+  {
+    label: 'Token消耗',
+    prop: 'tokens',
+    align: 'center',
+    width: 100,
+  },
+  {
+    label: '提示词Token消耗',
+    prop: 'promptTokens',
+    align: 'center',
+    width: 120,
+  },
+  {
+    label: '消息内容',
+    prop: 'message',
+    formatter: (row: any) => {
+      return String(row.message).replace(/```|\n/g, '');
+    },
+  },
+  {
+    label: '会话时间',
+    prop: 'createTime',
+    width: 180,
+    align: 'center',
+  },
+];
+
+export const searchSchemas: FormSchema[] = [
+  {
+    field: 'text',
+    component: 'Input',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入内容查询',
+    },
+  },
+  {
+    field: 'username',
+    component: 'Input',
+    label: '用户名',
+    componentProps: {
+      placeholder: '请输入用户名查询',
+    },
+  },
+  {
+    field: 'role',
+    component: 'Select',
+    label: '对话角色',
+    componentProps: {
+      placeholder: '请选择对话角色查询',
+      style: {
+        width: '140px',
+      },
+      options: [
+        {
+          label: 'user',
+          value: 'user',
+        },
+        {
+          label: 'assistant',
+          value: 'assistant',
+        },
+      ],
+    },
+  },
+];
diff --git a/src/views/ai/message/composables/index.ts b/src/views/ai/message/composables/index.ts
new file mode 100644
index 0000000..89aeb1e
--- /dev/null
+++ b/src/views/ai/message/composables/index.ts
@@ -0,0 +1,165 @@
+import { ref, computed } from 'vue'
+import type { FormSchema } from '@/types/form'
+import type { TableColumn } from '@/types/table'
+import { useTable } from '@/hooks/web/useTable'
+import { ElTag, dayjs } from 'element-plus'
+import { h } from 'vue'
+import * as MessageApi from '@/api/new-ai/message'
+
+export default function () {
+  const searchParams = ref({})
+
+  const schema = ref<FormSchema[]>([
+    {
+      field: 'text',
+      component: 'Input',
+      label: '内容',
+      componentProps: {
+        placeholder: '请输入内容查询'
+      },
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      field: 'username',
+      component: 'Input',
+      label: '用户名',
+      componentProps: {
+        placeholder: '请输入用户名查询'
+      },
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      field: 'role',
+      component: 'Select',
+      label: '对话角色',
+      componentProps: {
+        placeholder: '请选择对话角色查询',
+        options: [
+          {
+            label: 'user',
+            value: 'user'
+          },
+          {
+            label: 'assistant',
+            value: 'assistant'
+          }
+        ]
+      },
+      colProps: {
+        span: 6
+      }
+    }
+  ])
+
+  const columns = ref<TableColumn[]>([
+    {
+      label: '用户名',
+      field: 'username',
+      align: 'center',
+      width: 120
+    },
+    {
+      label: '请求ip',
+      field: 'ip',
+      align: 'center',
+      width: 120
+    },
+    {
+      label: '对话角色',
+      field: 'role',
+      align: 'center',
+      width: 100,
+      formatter(row) {
+        return h(
+          ElTag,
+          {
+            type: row.role === 'user' ? 'success' : 'danger',
+            size: 'small'
+          },
+          {
+            default: () => row.role
+          }
+        )
+      }
+    },
+    {
+      label: '模型名称',
+      field: 'model',
+      align: 'center',
+      width: 100
+    },
+    {
+      label: 'Token消耗',
+      field: 'tokens',
+      align: 'center',
+      width: 100
+    },
+    {
+      label: '提示词Token消耗',
+      field: 'promptTokens',
+      align: 'center',
+      width: 120
+    },
+    {
+      label: '消息内容',
+      field: 'message',
+      formatter: (row: any) => {
+        return String(row.message).replace(/```|\n/g, '')
+      }
+    },
+    {
+      label: '会话时间',
+      field: 'createTime',
+      width: 180,
+      align: 'center',
+      formatter: (row: any) => {
+        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
+      }
+    },
+    
+  ])
+
+  const { register, tableObject, methods } = useTable({
+    getListApi: MessageApi.page,
+    defaultParams: searchParams.value,
+    delListApi: MessageApi.del
+  })
+
+  const handleSearch = (values: any) => {
+    methods.setSearchParams(values)
+    // methods.getList()
+  }
+
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+
+  const handleDel = async (id: string | number) => {
+    try {
+      await methods.delList(id, false)
+    } catch (error) {
+      console.error('Failed to delete message:', error)
+    }
+  }
+  onMounted(() => {
+    methods.getList()
+  })
+  return {
+    schema,
+    columns,
+    register,
+    handleSearch,
+    methods,
+    tableObject,
+    pagination,
+    handleDel
+  }
+}
diff --git a/src/views/ai/message/conversation/columns.ts b/src/views/ai/message/conversation/columns.ts
new file mode 100644
index 0000000..861cafe
--- /dev/null
+++ b/src/views/ai/message/conversation/columns.ts
@@ -0,0 +1,12 @@
+import type { FormSchema } from '@/types/form'
+
+export const searchSchemas: FormSchema[] = [
+  {
+    field: 'text',
+    component: 'Input',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入内容'
+    }
+  }
+]
diff --git a/src/views/ai/message/conversation/components/InfoList.vue b/src/views/ai/message/conversation/components/InfoList.vue
new file mode 100644
index 0000000..925d34b
--- /dev/null
+++ b/src/views/ai/message/conversation/components/InfoList.vue
@@ -0,0 +1,68 @@
+
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue';
+import { getMessages } from '@/api/new-ai/conversation';
+import Message from '@/views/ai/chat/new-chat/message/Message.vue';
+
+const messageRef = ref();
+const contentRef = ref();
+const loading = ref(true);
+const dialogVisible = ref(false);
+const info = ref<any>({});
+const messages = ref<any>([]);
+
+async function show(row: any) {
+  dialogVisible.value = true;
+  await nextTick();
+
+  info.value = row;
+  messages.value = await getMessages(row.id);
+  loading.value = false;
+}
+
+async function handleDelete(row) {
+  console.log('del', row);
+}
+
+defineExpose({ show });
+</script>
+
+<template>
+  <el-drawer
+    v-model="dialogVisible"
+    :title="info.title"
+    size="1000px"
+    direction="rtl"
+  >
+    <template #default>
+      <div ref="contentRef" class="drawer-content">
+        <el-scrollbar ref="messageRef" height="calc(100vh - 180px)">
+          <Message
+            v-for="(item, index) of messages"
+            :key="index"
+            :date-time="item.createTime"
+            :error="false"
+            :inversion="item.role !== 'assistant'"
+            :loading="loading"
+            :text="item.message"
+            @delete="handleDelete(item)"
+          />
+        </el-scrollbar>
+      </div>
+      <el-empty v-if="messages.length === 0" description="此会话还没有聊天信息" class="mt-5" />
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped>
+.drawer-content {
+  height: 100%;
+  padding: 0 20px;
+}
+</style>
diff --git a/src/views/ai/message/conversation/composables/index.ts b/src/views/ai/message/conversation/composables/index.ts
new file mode 100644
index 0000000..47326c7
--- /dev/null
+++ b/src/views/ai/message/conversation/composables/index.ts
@@ -0,0 +1,107 @@
+import { ref, computed, onMounted } from 'vue'
+import type { FormSchema } from '@/types/form'
+import type { TableColumn } from '@/types/table'
+import { useTable } from '@/hooks/web/useTable'
+import { ElTag, dayjs } from 'element-plus'
+import { h } from 'vue'
+import * as ConversationApi from '@/api/new-ai/conversation'
+
+export default function () {
+  const searchParams = ref({})
+  const infoRef = ref()
+
+  const schema = ref<FormSchema[]>([
+    {
+      field: 'text',
+      component: 'Input',
+      label: '内容',
+      componentProps: {
+        placeholder: '请输入内容'
+      },
+      colProps: {
+        span: 6
+      }
+    }
+  ])
+
+  const columns = ref<TableColumn[]>([
+    {
+      label: '用户名',
+      field: 'username',
+      align: 'center'
+    },
+    {
+      label: '窗口标题',
+      field: 'title',
+      align: 'center'
+    },
+    {
+      label: '对话次数',
+      field: 'chatTotal',
+      align: 'center',
+      width: 180
+    },
+    {
+      label: 'Token消耗量',
+      field: 'tokenUsed',
+      align: 'center',
+      width: 180
+    },
+    {
+      label: '最后一次对话时间',
+      field: 'endTime',
+      align: 'center',
+      width: 180,
+      formatter: (row: any) => {
+        return dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
+      }
+    },
+    {
+      label: '创建时间',
+      field: 'createTime',
+      width: 180,
+      align: 'center',
+      formatter: (row: any) => {
+        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
+      }
+    }
+  ])
+
+  const { register, tableObject, methods } = useTable({
+    getListApi: ConversationApi.page,
+    defaultParams: searchParams.value,
+    delListApi: ConversationApi.del
+  })
+
+  const handleSearch = (values: any) => {
+    methods.setSearchParams(values)
+  }
+
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+
+  const handleShowInfo = (row: any) => {
+    infoRef.value?.show(row)
+  }
+
+  onMounted(() => {
+    methods.getList()
+  })
+
+  return {
+    schema,
+    columns,
+    register,
+    handleSearch,
+    methods,
+    tableObject,
+    pagination,
+    handleShowInfo,
+    infoRef
+  }
+}
diff --git a/src/views/ai/message/conversation/index.vue b/src/views/ai/message/conversation/index.vue
new file mode 100644
index 0000000..51dd132
--- /dev/null
+++ b/src/views/ai/message/conversation/index.vue
@@ -0,0 +1,45 @@
+
+
+<script lang="ts" setup>
+  import { Delete, View } from '@element-plus/icons-vue'
+  import { Table } from '@/components/Table'
+  import useConversation from './composables'
+  import InfoList from './components/InfoList.vue'
+  import { searchSchemas } from './columns'
+
+  const {
+    columns,
+    register,
+    handleSearch,
+    methods,
+    tableObject,
+    pagination,
+    handleShowInfo,
+    infoRef
+  } = useConversation()
+
+  const actionColumn = {
+    label: '操作',
+    field: 'action',
+    width: 80,
+    fixed: 'right',
+    align: 'center'
+  }
+</script>
+
+<template>
+  <div class="mt-2">
+    <Search :schema="searchSchemas" inline @search="handleSearch" />
+
+    <Table :columns="[...columns, actionColumn]" :data="tableObject.tableList" :pagination="pagination" @register="register">
+      <template #action="{ row }">
+        <el-button :icon="View" text type="primary" @click="handleShowInfo(row)" />
+        <el-button :icon="Delete" text type="danger" @click="methods.delList(row.id, false)" />
+      </template>
+    </Table>
+
+    <InfoList ref="infoRef" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/ai/message/index.vue b/src/views/ai/message/index.vue
new file mode 100644
index 0000000..ffcffea
--- /dev/null
+++ b/src/views/ai/message/index.vue
@@ -0,0 +1,57 @@
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { Table } from '@/components/Table'
+import useMessage from './composables'
+import ConversationList from './conversation/index.vue'
+import { searchSchemas } from './columns'
+import { format } from 'path'
+const activeName = ref('1')
+const {
+  schema,
+  columns,
+  register,
+  handleSearch,
+  methods,
+  tableObject,
+  pagination,
+  handleDel
+} = useMessage()
+
+const actionColumn = {
+  label: '操作',
+  field: 'action',
+  width: 70,
+  fixed: 'right',
+  align: 'center',
+}
+</script>
+
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="会话消息列表" name="1">
+        <div class="mt-2">
+          <Search :schema="searchSchemas" @search="handleSearch"/>
+          <Table
+            :columns="[...columns, actionColumn]"
+            :data="tableObject.tableList"
+            :pagination="pagination"
+            @register="register"
+          >
+          <template #action="{row}">
+            <el-button :icon="Delete" text type="danger" @click="methods.delList(row.id, false)" />
+          </template>
+        </Table>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="会话窗口列表" name="2">
+        <ConversationList />
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/ai/order/components/Chart.vue b/src/views/ai/order/components/Chart.vue
new file mode 100644
index 0000000..b4b24ca
--- /dev/null
+++ b/src/views/ai/order/components/Chart.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { Echart } from '@/components/Echart';
+  import { getReqChartBy30 } from '@/api/new-ai/statictic';
+
+  const options = ref({});
+
+  onMounted(async () => {
+    const data = await getReqChartBy30();
+    const xData: any = [];
+    const yData: any = [];
+    data.forEach((i: any) => {
+      xData.push(i.date);
+      yData.push(i.tokens);
+    });
+
+    options.value = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: xData,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2%', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: true,
+          data: yData,
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+      ],
+    };
+  });
+</script>
+
+<template>
+  <div>
+    <h3 class="my-2 mb-6 text-lg">近30天请求汇总</h3>
+    <Echart :options="options" height="240px" />
+  </div>
+</template>
diff --git a/src/views/ai/order/components/List.vue b/src/views/ai/order/components/List.vue
new file mode 100644
index 0000000..73ddbe4
--- /dev/null
+++ b/src/views/ai/order/components/List.vue
@@ -0,0 +1,53 @@
+<!--
+  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
+  -
+  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<script lang="ts" setup>
+import { Delete } from '@element-plus/icons-vue'
+
+import { searchSchemas } from './columns'
+import useOrder from '../composables'
+import { columns } from './columns'
+const { register, handleSearch, methods, tableObject, pagination } = useOrder()
+
+const actionColumn = {
+  label: '操作',
+  field: 'action',
+  width: 70,
+  fixed: 'right',
+  align: 'center'
+}
+</script>
+
+<template>
+  <div class="h-full">
+    <el-card>
+      <Search :schema="searchSchemas" inline @search="handleSearch" />
+
+      <Table
+        :columns="[...columns, actionColumn]"
+        :data="tableObject.tableList"
+        :pagination="pagination"
+        @register="register"
+      >
+        <template #action="{ row }">
+          <el-button :icon="Delete" text type="danger" @click="methods.delList(row.id, false)" />
+        </template>
+      </Table>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/ai/order/components/columns.ts b/src/views/ai/order/components/columns.ts
new file mode 100644
index 0000000..2628593
--- /dev/null
+++ b/src/views/ai/order/components/columns.ts
@@ -0,0 +1,56 @@
+import type { FormSchema } from '@/types/form';
+
+export const columns = [
+  {
+    label: '用户名',
+    field: 'username',
+    align: 'center',
+  },
+  {
+    label: '模型名称',
+    field: 'model',
+    align: 'center',
+  },
+  {
+    label: 'Tokens',
+    field: 'tokens',
+    align: 'center',
+  },
+  {
+    label: 'Prompt Tokens',
+    field: 'promptTokens',
+    align: 'center',
+  },
+  {
+    label: 'Prompt Tokens',
+    field: 'promptTokens',
+    align: 'center',
+  },
+  {
+    label: 'IP地址',
+    field: 'ip',
+    align: 'center',
+  },
+  {
+    label: '调用时间',
+    field: 'createTime',
+    align: 'center',
+    width: 180,
+  },
+];
+
+export const searchSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '用户名',
+    componentProps: {
+      placeholder: '请输入用户名查询'
+    },
+    colProps: {
+      span: 6
+    }
+  },
+  
+  
+]
diff --git a/src/views/ai/order/composables/index.ts b/src/views/ai/order/composables/index.ts
new file mode 100644
index 0000000..aba3ae1
--- /dev/null
+++ b/src/views/ai/order/composables/index.ts
@@ -0,0 +1,39 @@
+import { ref, computed, onMounted } from 'vue'
+
+import type { TableColumn } from '@/types/table'
+import { useTable } from '@/hooks/web/useTable'
+import { dayjs } from 'element-plus'
+import {page, del} from '@/api/new-ai/message'
+
+export default function () {
+  const searchParams = ref({})
+  const { register, tableObject, methods } = useTable({
+    getListApi:page,
+    defaultParams: searchParams.value,
+    delListApi:del
+  })
+
+  const handleSearch = (values: any) => {
+    methods.setSearchParams(values)
+  }
+
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+
+  onMounted(() => {
+    methods.getList()
+  })
+
+  return {
+    register,
+    handleSearch,
+    methods,
+    tableObject,
+    pagination
+  }
+}
diff --git a/src/views/ai/order/index.vue b/src/views/ai/order/index.vue
new file mode 100644
index 0000000..c663a40
--- /dev/null
+++ b/src/views/ai/order/index.vue
@@ -0,0 +1,15 @@
+
+
+<script lang="ts" setup>
+  import Chart from './components/Chart.vue';
+  import List from './components/List.vue';
+</script>
+
+<template>
+  <div class="overflow-y-auto h-full">
+    <el-card>
+      <Chart />
+      <List />
+    </el-card>
+  </div>
+</template>
diff --git a/src/views/knowledge/dataset-form/components/edit-doc.vue b/src/views/knowledge/dataset-form/components/edit-doc.vue
index 5440616..5bf3890 100644
--- a/src/views/knowledge/dataset-form/components/edit-doc.vue
+++ b/src/views/knowledge/dataset-form/components/edit-doc.vue
@@ -114,4 +114,4 @@ defineExpose({ show })
   </el-dialog>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>

From aaa0967f240db3833be3f591244f0e3127ac4e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=B0=A2=E9=9B=A8?= <554737215@qq.com>
Date: Thu, 6 Mar 2025 15:57:03 +0800
Subject: [PATCH 18/18] =?UTF-8?q?fetch:=20=E9=A1=B5=E9=9D=A2=E7=A7=BB?=
 =?UTF-8?q?=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对话数据、账单统计移植
---
 src/views/ai/order/components/Chart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ai/order/components/Chart.vue b/src/views/ai/order/components/Chart.vue
index b4b24ca..eb230ab 100644
--- a/src/views/ai/order/components/Chart.vue
+++ b/src/views/ai/order/components/Chart.vue
@@ -2,7 +2,7 @@
   import { onMounted, ref } from 'vue';
   import { Echart } from '@/components/Echart';
   import { getReqChartBy30 } from '@/api/new-ai/statictic';
-
+  import {dayjs} from 'element-plus'
   const options = ref({});
 
   onMounted(async () => {
@@ -10,7 +10,7 @@
     const xData: any = [];
     const yData: any = [];
     data.forEach((i: any) => {
-      xData.push(i.date);
+      xData.push(dayjs(i.date).format('YYYY-MM-DD'));
       yData.push(i.tokens);
     });