diff --git a/src/api/ai/base/aiApp/index.ts b/src/api/ai/base/aiApp/index.ts
new file mode 100644
index 0000000..42e0fa9
--- /dev/null
+++ b/src/api/ai/base/aiApp/index.ts
@@ -0,0 +1,178 @@
+import request from '@/utils/request'
+
+// AI聊天消息接口
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  timestamp?: number
+}
+
+// AI聊天请求参数
+export interface ChatRequest {
+  messages: ChatMessage[]
+  model: string
+  temperature?: number
+  top_p?: number
+  max_tokens?: number
+  stream?: boolean
+  api_key?: string
+  api_endpoint?: string
+}
+
+// AI聊天响应
+export interface ChatResponse {
+  id: string
+  object: string
+  created: number
+  model: string
+  choices: Array<{
+    index: number
+    message: ChatMessage
+    finish_reason: string
+  }>
+  usage?: {
+    prompt_tokens: number
+    completion_tokens: number
+    total_tokens: number
+  }
+}
+
+// 流式响应数据
+export interface StreamChunk {
+  id: string
+  object: string
+  created: number
+  model: string
+  choices: Array<{
+    index: number
+    delta: {
+      content?: string
+      role?: string
+    }
+    finish_reason: string | null
+  }>
+}
+
+// 发送聊天消息（非流式）
+export function sendChatMessage(data: ChatRequest) {
+  return request<ChatResponse>({
+    url: '/ai/chat',
+    method: 'post',
+    data
+  })
+}
+
+// 发送聊天消息（流式）
+export function sendChatMessageStream(data: ChatRequest): ReadableStream<StreamChunk> {
+  return new ReadableStream({
+    start(controller) {
+      const eventSource = new EventSource(`/ai/chat/stream?${new URLSearchParams({
+        messages: JSON.stringify(data.messages),
+        model: data.model,
+        temperature: data.temperature?.toString() || '0.7',
+        top_p: data.top_p?.toString() || '1',
+        max_tokens: data.max_tokens?.toString() || '2048',
+        api_key: data.api_key || '',
+        api_endpoint: data.api_endpoint || ''
+      })}`)
+
+      eventSource.onmessage = (event) => {
+        try {
+          if (event.data === '[DONE]') {
+            controller.close()
+            eventSource.close()
+            return
+          }
+
+          const chunk: StreamChunk = JSON.parse(event.data)
+          controller.enqueue(chunk)
+        } catch (error) {
+          console.error('解析流式数据失败:', error)
+        }
+      }
+
+      eventSource.onerror = (error) => {
+        console.error('流式请求错误:', error)
+        controller.error(error)
+        eventSource.close()
+      }
+    }
+  })
+}
+
+// 获取聊天历史
+export function getChatHistory(params?: {
+  page?: number
+  size?: number
+  chatId?: string
+}) {
+  return request<{
+    total: number
+    list: Array<{
+      id: string
+      title: string
+      messages: ChatMessage[]
+      createdAt: string
+      updatedAt: string
+    }>
+  }>({
+    url: '/ai/chat/history',
+    method: 'get',
+    params
+  })
+}
+
+// 保存聊天记录
+export function saveChat(data: {
+  title: string
+  messages: ChatMessage[]
+}) {
+  return request<{ id: string }>({
+    url: '/ai/chat/save',
+    method: 'post',
+    data
+  })
+}
+
+// 删除聊天记录
+export function deleteChat(chatId: string) {
+  return request({
+    url: `/ai/chat/${chatId}`,
+    method: 'delete'
+  })
+}
+
+// 更新聊天标题
+export function updateChatTitle(chatId: string, title: string) {
+  return request({
+    url: `/ai/chat/${chatId}/title`,
+    method: 'put',
+    data: { title }
+  })
+}
+
+// AI问答设置接口
+export interface AiChatSettings {
+  welcomeIcon: string
+  welcomeTitle: string
+  welcomeMessage: string
+  presetQuestions: string[]
+  historyCount: number
+}
+
+// 获取AI问答设置
+export function getAiChatSettings() {
+  return request<AiChatSettings>({
+    url: '/ai/chat/settings',
+    method: 'get'
+  })
+}
+
+// 保存AI问答设置
+export function saveAiChatSettings(data: AiChatSettings) {
+  return request({
+    url: '/ai/chat/settings',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/ai/skill/aiKnowledgeBase/index.ts b/src/api/ai/skill/aiKnowledgeBase/index.ts
new file mode 100644
index 0000000..1bfcc0b
--- /dev/null
+++ b/src/api/ai/skill/aiKnowledgeBase/index.ts
@@ -0,0 +1,143 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { AiKnowledgeBaseVO, AiKnowledgeBaseForm, AiKnowledgeBaseQuery } from '@/api/ai/skill/aiKnowledgeBase/types';
+
+/**
+ * 查询AI知识库列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listAiKnowledgeBase = (query?: AiKnowledgeBaseQuery): AxiosPromise<AiKnowledgeBaseVO[]> => {
+  return request({
+    url: '/ai/aiKnowledgeBase/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询AI知识库详细
+ * @param knowledgeBaseId
+ */
+export const getAiKnowledgeBase = (knowledgeBaseId: string | number): AxiosPromise<AiKnowledgeBaseVO> => {
+  return request({
+    url: '/ai/aiKnowledgeBase/' + knowledgeBaseId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增AI知识库
+ * @param data
+ */
+export const addAiKnowledgeBase = (data: AiKnowledgeBaseForm) => {
+  return request({
+    url: '/ai/aiKnowledgeBase',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改AI知识库
+ * @param data
+ */
+export const updateAiKnowledgeBase = (data: AiKnowledgeBaseForm) => {
+  return request({
+    url: '/ai/aiKnowledgeBase',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除AI知识库
+ * @param knowledgeBaseId
+ */
+export const delAiKnowledgeBase = (knowledgeBaseId: string | number | Array<string | number>) => {
+  return request({
+    url: '/ai/aiKnowledgeBase/' + knowledgeBaseId,
+    method: 'delete'
+  });
+};
+
+
+/**
+ * 下拉框查询AI知识库列表
+ * @param query
+ * @returns {*}
+ */
+export function getAiKnowledgeBaseList (query) {
+    return request({
+        url: '/ai/aiKnowledgeBase/getAiKnowledgeBaseList',
+        method: 'get',
+        params: query
+    });
+};
+
+
+
+
+/**
+ * 知识库文件上传切分后向量化
+ * @param data 知识库切片内容
+ */
+export const vectorizeKnowledgeContent = (data: FormData) => {
+  return request({
+    url: '/ai/aiKnowledgeBase/vectorizeKnowledgeContent',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 获取AI知识库内容列表
+ * @param query
+ * @returns {*}
+ */
+export function listAiKnowledgeContent (query) {
+  return request({
+    url: '/ai/aiKnowledgeBase/listAiKnowledgeContent',
+    method: 'get',
+    params: query
+  });
+};
+
+
+/**
+ * 删除AI知识库内容,连同向量库内容一同删除
+ * @param knowledgeBaseId
+ * @param knowledgeContentId
+ */
+export const delAiKnowledgeContent = (knowledgeBaseId: string | number ,knowledgeContentId: string | number | Array<string | number>) => {
+  return request({
+    url: '/ai/aiKnowledgeBase/deleteKnowledgeContent/' + knowledgeBaseId + '/' + knowledgeContentId,
+    method: 'post'
+  });
+};
+
+
+/**
+ * 删除知识库内容文件
+ * @param knowledgeContentId
+ */
+export const removeContentFile = (knowledgeContentId: string | number) => {
+  return request({
+    url: '/ai/aiKnowledgeBase/removeContentFile/' +  knowledgeContentId,
+    method: 'post'
+  });
+};
+
+/**
+ * 获取AI知识库内容分段列表
+ * @param query
+ * @returns {*}
+ */
+export function getKnowledgeContentFragmentList (query) {
+  return request({
+    url: '/ai/aiKnowledgeBase/getKnowledgeContentFragmentList',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/ai/skill/aiKnowledgeBase/types.ts b/src/api/ai/skill/aiKnowledgeBase/types.ts
new file mode 100644
index 0000000..9210314
--- /dev/null
+++ b/src/api/ai/skill/aiKnowledgeBase/types.ts
@@ -0,0 +1,232 @@
+export interface AiKnowledgeBaseVO {
+  /**
+   * 主键
+   */
+  knowledgeBaseId: string | number;
+
+  /**
+   * 知识库名称
+   */
+  knowledgeBaseName: string;
+
+  /**
+   * 知识库图标
+   */
+  knowledgeBaseIcon: string;
+
+
+  /**
+   * AI模型ID，关联ai_model
+   */
+  modelId: string | number;
+
+  /**
+   * 知识库类型ID,关联ai_knowledge_base_type
+   */
+  knowledgeBaseTypeId: string | number;
+
+  /**
+   * 分隔符
+   */
+  knowledgeBaseSeparator: string;
+
+  /**
+   * 知识库中检索的条数
+   */
+  retrieveLimit: number;
+
+  /**
+   * 文本块大小
+   */
+  textBlockSize: number;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter: number;
+
+  /**
+   * 提问分隔符
+   */
+  questionSeparator: string;
+
+  /**
+   * 知识库描述
+   */
+  knowledgeBaseDesc: string;
+
+  /**
+   * 状态(1启用，0禁用)
+   */
+  knowledgeBaseStatus: string;
+
+  /**
+   * 向量库（milvus）
+   */
+  vector: string;
+
+  /**
+   * 是否公开(1是，0否)
+   */
+  openFlag: string;
+
+  /**
+   * AI模型名称
+   */
+  modelName: string;
+
+  /**
+   * AI知识库类型名称
+   */
+  knowledgeBaseTypeName: string;
+
+}
+
+export interface AiKnowledgeBaseForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  knowledgeBaseId?: string | number;
+
+  /**
+   * 知识库名称
+   */
+  knowledgeBaseName?: string;
+
+  /**
+   * 知识库图标
+   */
+  knowledgeBaseIcon?: string;
+
+  /**
+   * AI模型ID，关联ai_model
+   */
+  modelId?: string | number;
+
+  /**
+   * 知识库类型ID,关联ai_knowledge_base_type
+   */
+  knowledgeBaseTypeId?: string | number;
+
+  /**
+   * 分隔符
+   */
+  knowledgeBaseSeparator?: string;
+
+  /**
+   * 知识库中检索的条数
+   */
+  retrieveLimit?: number;
+
+  /**
+   * 文本块大小
+   */
+  textBlockSize?: number;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter?: number;
+
+  /**
+   * 提问分隔符
+   */
+  questionSeparator?: string;
+
+  /**
+   * 知识库描述
+   */
+  knowledgeBaseDesc?: string;
+
+  /**
+   * 状态(1启用，0禁用)
+   */
+  knowledgeBaseStatus?: string;
+
+  /**
+   * 向量库（milvus）
+   */
+  vector?: string;
+
+  /**
+   * 是否公开(1是，0否)
+   */
+  openFlag?: string;
+
+}
+
+export interface AiKnowledgeBaseQuery extends PageQuery {
+
+  /**
+   * 主键
+   */
+  knowledgeBaseId?: string | number;
+
+  /**
+   * 知识库名称
+   */
+  knowledgeBaseName?: string;
+
+  /**
+   * AI模型ID，关联ai_model
+   */
+  modelId?: string | number;
+
+  /**
+   * 知识库类型ID,关联ai_knowledge_base_type
+   */
+  knowledgeBaseTypeId?: string | number;
+
+  /**
+   * 分隔符
+   */
+  knowledgeBaseSeparator?: string;
+
+  /**
+   * 知识库中检索的条数
+   */
+  retrieveLimit?: number;
+
+  /**
+   * 文本块大小
+   */
+  textBlockSize?: number;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter?: number;
+
+  /**
+   * 提问分隔符
+   */
+  questionSeparator?: string;
+
+  /**
+   * 知识库描述
+   */
+  knowledgeBaseDesc?: string;
+
+  /**
+   * 状态(1启用，0禁用)
+   */
+  knowledgeBaseStatus?: string;
+
+  /**
+   * 向量库（milvus）
+   */
+  vector?: string;
+
+  /**
+   * 是否公开(1是，0否)
+   */
+  openFlag?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
+
+
+
diff --git a/src/api/ai/skill/aiKnowledgeContent/index.ts b/src/api/ai/skill/aiKnowledgeContent/index.ts
new file mode 100644
index 0000000..ecf6e0c
--- /dev/null
+++ b/src/api/ai/skill/aiKnowledgeContent/index.ts
@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { AiKnowledgeContentVO, AiKnowledgeContentForm, AiKnowledgeContentQuery } from '@/api/ai/aiKnowledgeContent/types';
+
+/**
+ * 查询AI知识库内容列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listAiKnowledgeContent = (query?: AiKnowledgeContentQuery): AxiosPromise<AiKnowledgeContentVO[]> => {
+  return request({
+    url: '/ai/aiKnowledgeContent/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询AI知识库内容详细
+ * @param knowledgeContentId
+ */
+export const getAiKnowledgeContent = (knowledgeContentId: string | number): AxiosPromise<AiKnowledgeContentVO> => {
+  return request({
+    url: '/ai/aiKnowledgeContent/' + knowledgeContentId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增AI知识库内容
+ * @param data
+ */
+export const addAiKnowledgeContent = (data: AiKnowledgeContentForm) => {
+  return request({
+    url: '/ai/aiKnowledgeContent',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改AI知识库内容
+ * @param data
+ */
+export const updateAiKnowledgeContent = (data: AiKnowledgeContentForm) => {
+  return request({
+    url: '/ai/aiKnowledgeContent',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除AI知识库内容
+ * @param knowledgeContentId
+ */
+export const delAiKnowledgeContent = (knowledgeContentId: string | number | Array<string | number>) => {
+  return request({
+    url: '/ai/aiKnowledgeContent/' + knowledgeContentId,
+    method: 'delete'
+  });
+};
+
+
+/**
+ * 下拉框查询AI知识库内容列表
+ * @param query
+ * @returns {*}
+ */
+export function getAiKnowledgeContentList (query) {
+    return request({
+        url: '/ai/aiKnowledgeContent/getAiKnowledgeContentList',
+        method: 'get',
+        params: query
+    });
+};
diff --git a/src/api/ai/skill/aiKnowledgeContent/types.ts b/src/api/ai/skill/aiKnowledgeContent/types.ts
new file mode 100644
index 0000000..15827b3
--- /dev/null
+++ b/src/api/ai/skill/aiKnowledgeContent/types.ts
@@ -0,0 +1,206 @@
+export interface AiKnowledgeContentVO {
+  /**
+   * 主键
+   */
+  knowledgeContentId: string | number;
+
+  /**
+   * 知识库ID,关联ai_knowledge_base
+   */
+  knowledgeBaseId: string | number;
+
+  /**
+   * 标题
+   */
+  contentTitle: string;
+
+  /**
+   * 内容方式（1上传文件，2手动录入）
+   */
+  contentWay: string;
+
+  /**
+   * 内容（暂时不存，只存内容片段）
+   */
+  description: string;
+
+  /**
+   * 文件名称
+   */
+  fileName: string;
+
+  /**
+   * 文件路径
+   */
+  filePath: string;
+
+  /**
+   * 文件类型
+   */
+  fileType: string;
+
+  /**
+   * 文件大小（byte）
+   */
+  fileSize: number;
+
+  /**
+   * 内容状态(1已完成，2失败（解析或向量失败等），3待解析)
+   */
+  contentStatus: string;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter: number;
+
+  /**
+   * 总共片段
+   */
+  totalChunk: number;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 更新时间
+   */
+  updateTime: string;
+
+}
+
+export interface AiKnowledgeContentForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  knowledgeContentId?: string | number;
+
+  /**
+   * 知识库ID,关联ai_knowledge_base
+   */
+  knowledgeBaseId?: string | number;
+
+  /**
+   * 标题
+   */
+  contentTitle?: string;
+
+  /**
+   * 内容方式（1上传文件，2手动录入）
+   */
+  contentWay?: string;
+
+  /**
+   * 内容（暂时不存，只存内容片段）
+   */
+  description?: string;
+
+  /**
+   * 文件名称
+   */
+  fileName?: string;
+
+  /**
+   * 文件路径
+   */
+  filePath?: string;
+
+  /**
+   * 文件类型
+   */
+  fileType?: string;
+
+  /**
+   * 文件大小（byte）
+   */
+  fileSize?: number;
+
+  /**
+   * 内容状态(1已完成，2失败（解析或向量失败等），3待解析)
+   */
+  contentStatus?: string;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter?: number;
+
+  /**
+   * 总共片段
+   */
+  totalChunk?: number;
+
+}
+
+export interface AiKnowledgeContentQuery extends PageQuery {
+
+  /**
+   * 主键
+   */
+  knowledgeContentId?: string | number;
+
+  /**
+   * 知识库ID,关联ai_knowledge_base
+   */
+  knowledgeBaseId?: string | number;
+
+  /**
+   * 标题
+   */
+  contentTitle?: string;
+
+  /**
+   * 内容方式（1上传文件，2手动录入）
+   */
+  contentWay?: string;
+
+  /**
+   * 内容（暂时不存，只存内容片段）
+   */
+  description?: string;
+
+  /**
+   * 文件名称
+   */
+  fileName?: string;
+
+  /**
+   * 文件路径
+   */
+  filePath?: string;
+
+  /**
+   * 文件类型
+   */
+  fileType?: string;
+
+  /**
+   * 文件大小（byte）
+   */
+  fileSize?: number;
+
+  /**
+   * 内容状态(1已完成，2失败（解析或向量失败等），3待解析)
+   */
+  contentStatus?: string;
+
+  /**
+   * 重叠字符数
+   */
+  overlapCharacter?: number;
+
+  /**
+   * 总共片段
+   */
+  totalChunk?: number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+
diff --git a/src/assets/PDF.png b/src/assets/PDF.png
new file mode 100644
index 0000000..ee947e3
Binary files /dev/null and b/src/assets/PDF.png differ
diff --git a/src/assets/document.png b/src/assets/document.png
new file mode 100644
index 0000000..53cf297
Binary files /dev/null and b/src/assets/document.png differ
diff --git a/src/assets/docx.png b/src/assets/docx.png
new file mode 100644
index 0000000..23af3a1
Binary files /dev/null and b/src/assets/docx.png differ
diff --git a/src/assets/icons/svg/knowledge-base.svg b/src/assets/icons/svg/knowledge-base.svg
new file mode 100644
index 0000000..7e62cf0
--- /dev/null
+++ b/src/assets/icons/svg/knowledge-base.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755589338029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M876.407224 954.162564H185.412484a46.694369 46.694369 0 0 1-46.899168-46.557836c0-25.66825 21.026119-46.489569 46.899168-46.489569h491.929272V0H138.513316C99.737875 0 68.266962 31.266112 68.266962 69.836753v837.767975A116.735922 116.735922 0 0 0 185.412484 1023.999317h690.99474a35.020777 35.020777 0 0 0 35.15731-34.884243 35.020777 35.020777 0 0 0-35.15731-34.95251z" fill="#515B77" p-id="2380"></path><path d="M834.081919 0H730.862787v843.297571h103.219132c42.803171 0 77.482615-30.651713 77.482615-68.403154V68.334888C911.564534 30.651713 876.88509 0 834.081919 0z" fill="#515B77" p-id="2381"></path></svg>
diff --git a/src/assets/knowledge-base.png b/src/assets/knowledge-base.png
new file mode 100644
index 0000000..bb06082
Binary files /dev/null and b/src/assets/knowledge-base.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index b36eacd..22df47a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -518,35 +518,35 @@ export const dynamicRoutes: RouteRecordRaw[] = [
     ]
   },
 
-  // {
-  //   path: '/ai/skill/knowledgeBaseDocs',
-  //   component: Layout,
-  //   hidden: true,
-  //   permissions: ['ai:aiKnowledgeBaseDocs:list'],
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/ai/skill/aiKnowledge/knowledgeBaseDocs.vue'),
-  //       name: 'KnowledgeBaseDocs',
-  //       meta: { title: '知识库详情', activeMenu: '/ai/skill/aiKnowledge', noCache: true }
-  //     }
-  //   ]
-  // },
-  //
-  // {
-  //   path: '/ai/skill/knowledgeBaseQA',
-  //   component: Layout,
-  //   hidden: true,
-  //   permissions: ['ai:aiKnowledgeBaseDocs:qa'],
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/ai/skill/aiChat/index.vue'),
-  //       name: 'KnowledgeBaseQA',
-  //       meta: { title: '知识库问答', activeMenu: '/ai/skill/aiKnowledge', noCache: true }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/ai/skill/knowledgeContent',
+    component: Layout,
+    hidden: true,
+    permissions: ['ai:aiKnowledgeContent:list'],
+    children: [
+      {
+        path: 'index/:knowledgeBaseId/:modelId/:knowledgeBaseName',
+        component: () => import('@/views/ai/skill/aiKnowledge/knowledgeContent.vue'),
+        name: 'KnowledgeContent',
+        meta: { title: '知识库内容', activeMenu: '/ai/skill/aiKnowledge', noCache: true }
+      }
+    ]
+  },
+
+  {
+    path: '/ai/skill/knowledgeBaseQA',
+    component: Layout,
+    hidden: true,
+    permissions: ['ai:aiKnowledgeBaseDocs:qa'],
+    children: [
+      {
+        path: 'index/:knowledgeBaseId',
+        component: () => import('@/views/ai/skill/aiChat/index.vue'),
+        name: 'KnowledgeBaseQA',
+        meta: { title: '知识库问答', activeMenu: '/ai/skill/aiChat', noCache: true }
+      }
+    ]
+  },
 
   // {
   //   path: '/knowledge-base-preview',
diff --git a/src/views/ai/base/aiApp/aiAppConfig.vue b/src/views/ai/base/aiApp/aiAppConfig.vue
new file mode 100644
index 0000000..f661095
--- /dev/null
+++ b/src/views/ai/base/aiApp/aiAppConfig.vue
@@ -0,0 +1,522 @@
+<template>
+  <div>
+    <el-card class="box-card">
+<!--      <template #header>-->
+<!--        <div class="card-header">-->
+<!--          <span>AI问答编排设置</span>-->
+<!--        </div>-->
+<!--      </template>-->
+
+      <el-form
+        ref="settingsFormRef"
+        :model="settingsForm"
+        :rules="rules"
+        label-width="120px"
+        class="settings-form"
+      >
+        <!-- 欢迎语图标设置 -->
+        <el-form-item label="欢迎语图标" prop="welcomeIcon">
+          <div class="welcome-icon-container">
+            <div class="icon-preview">
+              <img
+                v-if="settingsForm.welcomeIcon"
+                :src="settingsForm.welcomeIcon"
+                alt="欢迎语图标"
+                class="welcome-icon-preview"
+              />
+              <div v-else class="icon-placeholder">
+                <el-icon><Picture /></el-icon>
+                <span>暂无图标</span>
+              </div>
+            </div>
+            <div class="icon-actions">
+              <el-upload
+                ref="iconUploadRef"
+                :show-file-list="false"
+                :before-upload="beforeIconUpload"
+                :on-success="handleIconSuccess"
+                :on-error="handleIconError"
+                accept="image/*"
+                action="/api/upload"
+                class="icon-upload"
+              >
+                <el-button type="primary" size="small">
+                  <el-icon><Upload /></el-icon>
+                  上传图标
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="settingsForm.welcomeIcon"
+                type="danger"
+                size="small"
+                @click="removeIcon"
+              >
+                <el-icon><Delete /></el-icon>
+                删除图标
+              </el-button>
+            </div>
+          </div>
+        </el-form-item>
+
+        <!-- 欢迎语标题设置 -->
+        <el-form-item label="欢迎语标题" prop="welcomeTitle">
+          <el-input
+            v-model="settingsForm.welcomeTitle"
+            placeholder="请输入欢迎语标题..."
+            class="welcome-title-input"
+            maxlength="50"
+            show-word-limit
+            type="text"
+          />
+        </el-form-item>
+
+        <!-- 欢迎语设置 -->
+        <el-form-item label="欢迎语" prop="welcomeMessage">
+          <el-input
+            v-model="settingsForm.welcomeMessage"
+            type="text"
+            placeholder="请输入欢迎语内容..."
+            class="welcome-text-input"
+            maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+
+        <!-- 预设问题设置 -->
+        <el-form-item label="预设问题" prop="presetQuestions">
+          <div class="preset-questions">
+            <div
+              v-for="(question, index) in settingsForm.presetQuestions"
+              :key="index"
+              class="question-item"
+            >
+              <el-input
+                v-model="settingsForm.presetQuestions[index]"
+                placeholder="请输入预设问题内容..."
+                class="question-input"
+              >
+                <template #append>
+                  <el-button
+                    type="danger"
+                    size="small"
+                    @click="removeQuestion(index)"
+                    :disabled="settingsForm.presetQuestions.length <= 1"
+                  >
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </template>
+              </el-input>
+            </div>
+
+            <el-button
+              type="primary"
+              plain
+              size="small"
+              @click="addQuestion"
+              class="add-question-btn"
+            >
+              <el-icon><Plus /></el-icon>
+              添加预设问题
+            </el-button>
+          </div>
+        </el-form-item>
+
+        <!-- 历史聊天记录数量设置 -->
+        <el-form-item label="历史记录数量" prop="historyCount">
+          <el-input-number
+            v-model="settingsForm.historyCount"
+            :min="1"
+            :max="100"
+            :precision="0"
+            placeholder="请输入历史聊天记录数量"
+            class="history-count-input"
+          />
+          <span class="input-tip">条（1-100之间的正整数）</span>
+        </el-form-item>
+
+        <!-- 操作按钮 -->
+        <el-form-item>
+          <el-button type="primary" @click="saveSettings" :loading="loading">
+            保存设置
+          </el-button>
+          <el-button @click="resetSettings">重置</el-button>
+          <el-button @click="previewSettings">预览效果</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 预览对话框 -->
+    <el-dialog
+      v-model="previewVisible"
+      title="设置预览"
+      width="800px"
+      :before-close="handlePreviewClose"
+    >
+      <div class="preview-content">
+        <div class="preview-section">
+          <h4>欢迎语图标预览：</h4>
+          <div class="icon-preview-section">
+            <img
+              v-if="settingsForm.welcomeIcon"
+              :src="settingsForm.welcomeIcon"
+              alt="欢迎语图标"
+              class="preview-icon"
+            />
+            <div v-else class="no-icon">暂无图标</div>
+          </div>
+        </div>
+
+        <div class="preview-section">
+          <h4>欢迎语标题预览：</h4>
+          <div class="welcome-title-preview">{{ settingsForm.welcomeTitle }}</div>
+        </div>
+
+        <div class="preview-section">
+          <h4>欢迎语预览：</h4>
+          <div class="welcome-preview">{{ settingsForm.welcomeMessage }}</div>
+        </div>
+
+        <div class="preview-section">
+          <h4>预设问题预览：</h4>
+          <div class="questions-preview">
+            <el-tag
+              v-for="(question, index) in settingsForm.presetQuestions"
+              :key="index"
+              class="question-tag"
+              type="info"
+            >
+              {{ question }}
+            </el-tag>
+          </div>
+        </div>
+
+        <div class="preview-section">
+          <h4>历史记录数量：</h4>
+          <span>{{ settingsForm.historyCount }} 条</span>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getAiChatSettings, saveAiChatSettings } from '@/api/ai/base/aiApp/index'
+import {
+  Delete,
+  Plus,
+  Picture,
+  Upload
+} from '@element-plus/icons-vue'
+
+// 表单引用
+const settingsFormRef = ref()
+const iconUploadRef = ref()
+
+// 加载状态
+const loading = ref(false)
+
+// 预览对话框
+const previewVisible = ref(false)
+
+// 表单数据
+const settingsForm = reactive({
+  welcomeIcon: '',
+  welcomeTitle: 'AI智能问答',
+  welcomeMessage: '欢迎使用AI智能问答系统！\n\n我可以帮助您解答各种问题，请随时向我提问。',
+  presetQuestions: [
+    '什么是人工智能？',
+    '如何提高工作效率？',
+    '推荐一些学习资源'
+  ],
+  historyCount: 20
+})
+
+// 表单验证规则
+const rules = {
+  welcomeMessage: [
+    { required: true, message: '请输入欢迎语内容', trigger: 'blur' }
+  ],
+  historyCount: [
+    { required: true, message: '请输入历史记录数量', trigger: 'blur' },
+    { type: 'number', min: 1, max: 100, message: '历史记录数量必须在1-100之间', trigger: 'blur' }
+  ]
+}
+
+// 图标上传前验证
+const beforeIconUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB!')
+    return false
+  }
+  return true
+}
+
+// 图标上传成功
+const handleIconSuccess = (response) => {
+  if (response.code === 200) {
+    settingsForm.welcomeIcon = response.data
+    ElMessage.success('图标上传成功')
+  } else {
+    ElMessage.error('图标上传失败')
+  }
+}
+
+// 图标上传失败
+const handleIconError = () => {
+  ElMessage.error('图标上传失败')
+}
+
+// 删除图标
+const removeIcon = () => {
+  settingsForm.welcomeIcon = ''
+  ElMessage.success('图标已删除')
+}
+
+// 添加预设问题
+const addQuestion = () => {
+  settingsForm.presetQuestions.push('')
+}
+
+// 删除预设问题
+const removeQuestion = (index) => {
+  if (settingsForm.presetQuestions.length > 1) {
+    settingsForm.presetQuestions.splice(index, 1)
+  }
+}
+
+// 保存设置
+const saveSettings = async () => {
+  try {
+    await settingsFormRef.value.validate()
+
+    loading.value = true
+
+    // 验证预设问题不能为空
+    const emptyQuestions = settingsForm.presetQuestions.filter(q => !q.trim())
+    if (emptyQuestions.length > 0) {
+      ElMessage.error('预设问题不能为空，请填写完整')
+      return
+    }
+
+    // 调用API保存设置
+    await saveAiChatSettings(settingsForm)
+
+    ElMessage.success('设置保存成功')
+    loading.value = false
+  } catch (error) {
+    loading.value = false
+    console.error('保存设置失败:', error)
+    ElMessage.error('保存设置失败，请重试')
+  }
+}
+
+// 重置设置
+const resetSettings = async () => {
+  try {
+    await ElMessageBox.confirm('确定要重置所有设置吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    // 重置为默认值
+    settingsForm.welcomeIcon = ''
+    settingsForm.welcomeTitle = 'AI智能问答'
+    settingsForm.welcomeMessage = '欢迎使用AI智能问答系统！\n\n我可以帮助您解答各种问题，请随时向我提问。'
+    settingsForm.presetQuestions = [
+      '什么是人工智能？',
+      '如何提高工作效率？',
+      '推荐一些学习资源'
+    ]
+    settingsForm.historyCount = 20
+
+    ElMessage.success('设置已重置')
+  } catch (error) {
+    // 用户取消操作
+  }
+}
+
+// 预览设置
+const previewSettings = () => {
+  previewVisible.value = true
+}
+
+// 关闭预览对话框
+const handlePreviewClose = () => {
+  previewVisible.value = false
+}
+
+// 简单的Markdown渲染
+const renderMarkdown = (text) => {
+  if (!text) return ''
+
+  return text
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
+    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+    .replace(/\n/g, '<br>')
+}
+
+// 组件挂载时加载设置
+onMounted(async () => {
+  try {
+    // 调用API加载现有设置
+    const response = await getAiChatSettings()
+    Object.assign(settingsForm, response.data)
+  } catch (error) {
+    console.error('加载设置失败:', error)
+    ElMessage.error('加载设置失败')
+  }
+})
+</script>
+
+<style scoped>
+.app-container {
+  padding: 1px;
+}
+
+.box-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.settings-form {
+  max-width: 800px;
+}
+
+.welcome-editor {
+  position: relative;
+}
+
+.welcome-textarea {
+  margin-bottom: 10px;
+}
+
+.editor-toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.preset-questions {
+  width: 100%;
+}
+
+.question-item {
+  margin-bottom: 10px;
+}
+
+.question-input {
+  width: 100%;
+}
+
+.add-question-btn {
+  margin-top: 10px;
+}
+
+.history-count-input {
+  width: 200px;
+}
+
+.input-tip {
+  margin-left: 10px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.preview-content {
+  padding: 20px 0;
+}
+
+.preview-section {
+  margin-bottom: 30px;
+}
+
+.preview-section h4 {
+  margin-bottom: 10px;
+  color: #303133;
+  font-weight: 600;
+}
+
+.welcome-preview {
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  border-left: 4px solid #409eff;
+  line-height: 1.6;
+}
+
+.welcome-preview :deep(strong) {
+  font-weight: bold;
+}
+
+.welcome-preview :deep(em) {
+  font-style: italic;
+}
+
+.welcome-preview :deep(a) {
+  color: #409eff;
+  text-decoration: none;
+}
+
+.welcome-preview :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.welcome-preview :deep(pre) {
+  background-color: #f6f8fa;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.welcome-preview :deep(code) {
+  font-family: 'Courier New', monospace;
+  background-color: #f6f8fa;
+  padding: 2px 4px;
+  border-radius: 2px;
+}
+
+.questions-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.question-tag {
+  margin-bottom: 5px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .settings-form {
+    max-width: 100%;
+  }
+
+  .history-count-input {
+    width: 100%;
+  }
+
+  .input-tip {
+    display: block;
+    margin-left: 0;
+    margin-top: 5px;
+  }
+}
+</style>
diff --git a/src/views/ai/record/tokenUsage/index.vue b/src/views/ai/record/tokenUsage/index.vue
new file mode 100644
index 0000000..ec78dba
--- /dev/null
+++ b/src/views/ai/record/tokenUsage/index.vue
@@ -0,0 +1,621 @@
+<template>
+  <div class="app-container">
+    <div class="panel-container">
+      <!-- 左侧：用户总览 -->
+      <div class="left-panel" :class="{ 'collapsed': isLeftPanelCollapsed }">
+        <el-card shadow="never" class="user-overview-card">
+          <template #header>
+            <div class="card-header">
+              <span>用户Token使用总览</span>
+            </div>
+          </template>
+
+          <div v-show="!isLeftPanelCollapsed">
+            <!-- 搜索区域 -->
+            <el-form :model="userQueryParams" ref="userQueryFormRef" :inline="true" label-width="80px">
+              <el-form-item label="用户姓名" prop="userName">
+                <el-input
+                  v-model="userQueryParams.userName"
+                  placeholder="请输入用户姓名进行模糊搜索"
+                  clearable
+                  style="width: 200px"
+                  @keyup.enter="handleUserQuery"
+                />
+              </el-form-item>
+              <el-form-item label="AI模型" prop="aiModel">
+                <el-select v-model="userQueryParams.aiModel" placeholder="请选择AI模型" clearable style="width: 200px">
+                  <el-option label="GPT-3.5" value="gpt-3.5" />
+                  <el-option label="GPT-4" value="gpt-4" />
+                  <el-option label="Claude-3" value="claude-3" />
+                  <el-option label="DeepSeek" value="deepseek" />
+                  <el-option label="通义千问" value="qwen" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleUserQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetUserQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <!-- 用户列表 -->
+            <el-table
+              v-loading="userLoading"
+              :data="userPaginatedList"
+              @row-click="handleUserSelect"
+              highlight-current-row
+              :row-class-name="getUserRowClass"
+            >
+              <el-table-column label="用户姓名" align="center" prop="userName" />
+              <el-table-column label="AI模型" align="center" prop="aiModel" />
+              <el-table-column label="提问Token" align="center" prop="promptTokens">
+                <template #default="scope">
+                  <span class="token-count">{{ scope.row.promptTokens.toLocaleString() }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="回答Token" align="center" prop="completionTokens">
+                <template #default="scope">
+                  <span class="token-count">{{ scope.row.completionTokens.toLocaleString() }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="总Token" align="center" prop="totalTokens">
+                <template #default="scope">
+                  <span class="token-count total">{{ scope.row.totalTokens.toLocaleString() }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 用户分页 -->
+            <el-pagination
+              v-show="userTotal > 0"
+              class="mt-4"
+              :total="userTotal"
+              v-model:current-page="userQueryParams.pageNum"
+              v-model:page-size="userQueryParams.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleUserQuery"
+              @current-change="handleUserQuery"
+            />
+          </div>
+        </el-card>
+      </div>
+
+      <!-- 收缩/展开按钮 -->
+      <div class="toggle-button" @click="toggleLeftPanel">
+        <el-button
+          type="text"
+          :icon="isLeftPanelCollapsed ? 'ArrowRight' : 'ArrowLeft'"
+          class="toggle-btn"
+        />
+      </div>
+
+      <!-- 右侧：详情记录 -->
+      <div class="right-panel">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>Token使用详情记录</span>
+              <span v-if="selectedUser" class="selected-user">当前用户：{{ selectedUser.userName }}</span>
+            </div>
+          </template>
+
+          <!-- 搜索区域 -->
+          <el-form :model="detailQueryParams" ref="detailQueryFormRef" :inline="true" label-width="80px">
+            <el-form-item label="使用类型" prop="usageType">
+              <el-select v-model="detailQueryParams.usageType" placeholder="请选择使用类型" clearable style="width: 200px">
+                <el-option label="AI问答" value="ai_chat" />
+                <el-option label="AI知识库" value="ai_knowledge" />
+                <el-option label="AI生成SQL" value="ai_sql" />
+                <el-option label="AI智能填报" value="ai_form" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleDetailQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetDetailQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <!-- 详情列表 -->
+          <el-table v-loading="detailLoading" :data="detailPaginatedList">
+            <el-table-column label="用户姓名" align="center" prop="userName" />
+            <el-table-column label="使用类型" align="center" prop="usageType">
+              <template #default="scope">
+                <el-tag :type="getUsageTypeTagType(scope.row.usageType)">
+                  {{ getUsageTypeLabel(scope.row.usageType) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="AI模型" align="center" prop="aiModel" />
+            <el-table-column label="会话名称" align="center" prop="sessionName" :show-overflow-tooltip="true" />
+            <el-table-column label="提问Token" align="center" prop="promptTokens">
+              <template #default="scope">
+                <span class="token-count">{{ scope.row.promptTokens.toLocaleString() }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="回答Token" align="center" prop="completionTokens">
+              <template #default="scope">
+                <span class="token-count">{{ scope.row.completionTokens.toLocaleString() }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="总Token" align="center" prop="totalTokens">
+              <template #default="scope">
+                <span class="token-count total">{{ scope.row.totalTokens.toLocaleString() }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 详情分页 -->
+          <el-pagination
+            v-show="detailTotal > 0"
+            class="mt-4"
+            :total="detailTotal"
+            v-model:current-page="detailQueryParams.pageNum"
+            v-model:page-size="detailQueryParams.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleDetailQuery"
+            @current-change="handleDetailQuery"
+          />
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="TokenUsageDetails">
+import { ref, reactive, onMounted, computed } from 'vue';
+
+// ================= MOCK DATA =================
+// 模拟用户总览数据
+const mockUserList = [
+  {
+    id: 1,
+    userName: '张三',
+    aiModel: 'gpt-3.5',
+    promptTokens: 15420,
+    completionTokens: 8920,
+    totalTokens: 24340
+  },
+  {
+    id: 2,
+    userName: '李四',
+    aiModel: 'gpt-4',
+    promptTokens: 23450,
+    completionTokens: 15680,
+    totalTokens: 39130
+  },
+  {
+    id: 3,
+    userName: '王五',
+    aiModel: 'claude-3',
+    promptTokens: 9870,
+    completionTokens: 6540,
+    totalTokens: 16410
+  },
+  {
+    id: 4,
+    userName: '赵六',
+    aiModel: 'deepseek',
+    promptTokens: 12340,
+    completionTokens: 7890,
+    totalTokens: 20230
+  },
+  {
+    id: 5,
+    userName: '钱七',
+    aiModel: 'qwen',
+    promptTokens: 8760,
+    completionTokens: 5430,
+    totalTokens: 14190
+  },
+  {
+    id: 6,
+    userName: '孙八',
+    aiModel: 'gpt-3.5',
+    promptTokens: 11230,
+    completionTokens: 6780,
+    totalTokens: 18010
+  },
+];
+
+// 模拟详情记录数据
+const mockDetailList = [
+  {
+    id: 1,
+    userId: 1,
+    userName: '张三',
+    usageType: 'ai_chat',
+    aiModel: 'gpt-3.5',
+    sessionName: '关于Vue3开发的讨论',
+    promptTokens: 1200,
+    completionTokens: 800,
+    totalTokens: 2000,
+    createTime: '2024-01-15 10:30:00'
+  },
+  {
+    id: 2,
+    userId: 1,
+    userName: '张三',
+    usageType: 'ai_knowledge',
+    aiModel: 'gpt-3.5',
+    sessionName: '知识库查询-产品文档',
+    promptTokens: 800,
+    completionTokens: 600,
+    totalTokens: 1400,
+    createTime: '2024-01-15 14:20:00'
+  },
+  {
+    id: 3,
+    userId: 2,
+    userName: '李四',
+    usageType: 'ai_sql',
+    aiModel: 'gpt-4',
+    sessionName: 'SQL生成-用户统计',
+    promptTokens: 1500,
+    completionTokens: 1200,
+    totalTokens: 2700,
+    createTime: '2024-01-15 09:15:00'
+  },
+  {
+    id: 4,
+    userId: 2,
+    userName: '李四',
+    usageType: 'ai_form',
+    aiModel: 'gpt-4',
+    sessionName: '智能填报-订单信息',
+    promptTokens: 2000,
+    completionTokens: 1500,
+    totalTokens: 3500,
+    createTime: '2024-01-15 16:45:00'
+  },
+  {
+    id: 5,
+    userId: 3,
+    userName: '王五',
+    usageType: 'ai_chat',
+    aiModel: 'claude-3',
+    sessionName: '技术问题咨询',
+    promptTokens: 900,
+    completionTokens: 700,
+    totalTokens: 1600,
+    createTime: '2024-01-15 11:30:00'
+  },
+  {
+    id: 6,
+    userId: 4,
+    userName: '赵六',
+    usageType: 'ai_knowledge',
+    aiModel: 'deepseek',
+    sessionName: '知识库查询-技术文档',
+    promptTokens: 1100,
+    completionTokens: 900,
+    totalTokens: 2000,
+    createTime: '2024-01-15 13:20:00'
+  },
+  {
+    id: 7,
+    userId: 5,
+    userName: '钱七',
+    usageType: 'ai_sql',
+    aiModel: 'qwen',
+    sessionName: 'SQL生成-销售报表',
+    promptTokens: 1300,
+    completionTokens: 1000,
+    totalTokens: 2300,
+    createTime: '2024-01-15 15:10:00'
+  },
+  {
+    id: 8,
+    userId: 6,
+    userName: '孙八',
+    usageType: 'ai_form',
+    aiModel: 'gpt-3.5',
+    sessionName: '智能填报-客户信息',
+    promptTokens: 1800,
+    completionTokens: 1200,
+    totalTokens: 3000,
+    createTime: '2024-01-15 17:30:00'
+  },
+];
+
+/**
+ * 模拟API调用
+ * @param {*} data
+ * @param {number} delay
+ */
+const mockApiCall = (data, delay = 300) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(data);
+    }, delay);
+  });
+};
+// ================= MOCK DATA END =================
+
+// ================= 面板控制逻辑 =================
+const isLeftPanelCollapsed = ref(false);
+
+// 切换左侧面板收缩状态
+const toggleLeftPanel = () => {
+  isLeftPanelCollapsed.value = !isLeftPanelCollapsed.value;
+};
+// ================= 面板控制逻辑 END =================
+
+// ================= 工具函数 =================
+/**
+ * 获取使用类型标签
+ * @param {string} usageType
+ */
+const getUsageTypeLabel = (usageType) => {
+  const typeMap = {
+    'ai_chat': 'AI问答',
+    'ai_knowledge': 'AI知识库',
+    'ai_sql': 'AI生成SQL',
+    'ai_form': 'AI智能填报'
+  };
+  return typeMap[usageType] || usageType;
+};
+
+/**
+ * 获取使用类型标签颜色
+ * @param {string} usageType
+ */
+const getUsageTypeTagType = (usageType) => {
+  const typeMap = {
+    'ai_chat': 'primary',
+    'ai_knowledge': 'success',
+    'ai_sql': 'warning',
+    'ai_form': 'info'
+  };
+  return typeMap[usageType] || '';
+};
+
+/**
+ * 获取用户行样式类名
+ * @param {object} param0
+ */
+const getUserRowClass = ({ row }) => {
+  return selectedUser.value && row.id === selectedUser.value.id ? 'selected-row' : '';
+};
+// ================= 工具函数 END =================
+
+// ================= 左侧用户总览逻辑 =================
+const userLoading = ref(false);
+const userList = ref([]);
+const userTotal = ref(0);
+const userQueryFormRef = ref();
+const userQueryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  aiModel: '',
+});
+
+// 计算属性：用户列表过滤和分页
+const userFilteredList = computed(() => {
+  let list = userList.value;
+  if (userQueryParams.userName) {
+    list = list.filter(item => item.userName.includes(userQueryParams.userName));
+  }
+  if (userQueryParams.aiModel) {
+    list = list.filter(item => item.aiModel === userQueryParams.aiModel);
+  }
+  return list;
+});
+
+const userPaginatedList = computed(() => {
+  userTotal.value = userFilteredList.value.length;
+  const start = (userQueryParams.pageNum - 1) * userQueryParams.pageSize;
+  const end = start + userQueryParams.pageSize;
+  return userFilteredList.value.slice(start, end);
+});
+
+// 获取用户列表数据
+const getUserList = async () => {
+  userLoading.value = true;
+  const res = await mockApiCall(mockUserList);
+  userList.value = res;
+  handleUserQuery();
+  userLoading.value = false;
+};
+
+// 用户搜索按钮操作
+const handleUserQuery = () => {
+  userQueryParams.pageNum = 1;
+};
+
+// 用户重置按钮操作
+const resetUserQuery = () => {
+  userQueryFormRef.value.resetFields();
+  handleUserQuery();
+};
+// ================= 左侧用户总览逻辑 END =================
+
+// ================= 右侧详情记录逻辑 =================
+const detailLoading = ref(false);
+const detailList = ref([]);
+const detailTotal = ref(0);
+const detailQueryFormRef = ref();
+const detailQueryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  usageType: '',
+  userId: null, // 当前选中的用户ID
+});
+
+const selectedUser = ref(null); // 当前选中的用户
+
+// 计算属性：详情列表过滤和分页
+const detailFilteredList = computed(() => {
+  let list = detailList.value;
+
+  // 根据选中的用户过滤
+  if (detailQueryParams.userId) {
+    list = list.filter(item => item.userId === detailQueryParams.userId);
+  }
+
+  // 根据使用类型过滤
+  if (detailQueryParams.usageType) {
+    list = list.filter(item => item.usageType === detailQueryParams.usageType);
+  }
+
+  return list;
+});
+
+const detailPaginatedList = computed(() => {
+  detailTotal.value = detailFilteredList.value.length;
+  const start = (detailQueryParams.pageNum - 1) * detailQueryParams.pageSize;
+  const end = start + detailQueryParams.pageSize;
+  return detailFilteredList.value.slice(start, end);
+});
+
+// 获取详情列表数据
+const getDetailList = async () => {
+  detailLoading.value = true;
+  const res = await mockApiCall(mockDetailList);
+  detailList.value = res;
+  handleDetailQuery();
+  detailLoading.value = false;
+};
+
+// 详情搜索按钮操作
+const handleDetailQuery = () => {
+  detailQueryParams.pageNum = 1;
+};
+
+// 详情重置按钮操作
+const resetDetailQuery = () => {
+  detailQueryFormRef.value.resetFields();
+  detailQueryParams.userId = selectedUser.value ? selectedUser.value.id : null;
+  handleDetailQuery();
+};
+
+// 用户选择操作
+const handleUserSelect = (row) => {
+  selectedUser.value = row;
+  detailQueryParams.userId = row.id;
+  handleDetailQuery();
+};
+// ================= 右侧详情记录逻辑 END =================
+
+// ================= 生命周期 =================
+onMounted(() => {
+  getUserList();
+  getDetailList();
+});
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.collapse-btn {
+  font-size: 12px;
+}
+
+.panel-container {
+  display: flex;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.left-panel {
+  width: 40%;
+  height: 100%;
+  transition: width 0.3s ease;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.left-panel.collapsed {
+  width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.right-panel {
+  flex: 1;
+  height: 100%;
+  transition: width 0.3s ease;
+  overflow: hidden;
+}
+
+.toggle-button {
+  position: absolute;
+  left: 40%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  background: white;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: left 0.3s ease;
+}
+
+.left-panel.collapsed ~ .toggle-button {
+  left: 0;
+}
+
+.left-panel:not(.collapsed) ~ .toggle-button {
+  left: 40%;
+}
+
+.toggle-btn {
+  padding: 8px;
+  font-size: 14px;
+}
+
+.user-overview-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-overview-card .el-card__body {
+  flex: 1;
+  overflow: auto;
+}
+
+.right-panel .el-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-panel .el-card__body {
+  flex: 1;
+  overflow: auto;
+}
+
+.selected-user {
+  font-size: 14px;
+  color: #409eff;
+  font-weight: 500;
+}
+
+.token-count {
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+}
+
+.token-count.total {
+  color: #e6a23c;
+  font-weight: 600;
+}
+
+:deep(.selected-row) {
+  background-color: #f0f9ff !important;
+}
+
+:deep(.selected-row td) {
+  background-color: #f0f9ff !important;
+}
+
+.mt-4 {
+  margin-top: 1.25rem;
+}
+</style>
diff --git a/src/views/ai/record/usageRecord/index.vue b/src/views/ai/record/usageRecord/index.vue
new file mode 100644
index 0000000..973388a
--- /dev/null
+++ b/src/views/ai/record/usageRecord/index.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="user-session-container">
+    <!-- 左侧会话列表 -->
+    <div class="session-list-panel" :style="{ flexBasis: leftPanelWidth + 'px' }">
+      <el-card shadow="never" class="session-list-card">
+        <el-form :model="queryParams" :inline="true" class="mb-2">
+          <el-form-item label="用户姓名">
+            <el-input v-model="queryParams.userName" placeholder="模糊搜索" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="使用类型">
+            <el-select v-model="queryParams.usageType" placeholder="全部" clearable>
+              <el-option label="AI问答" value="ai_chat" />
+              <el-option label="AI知识库" value="ai_knowledge" />
+              <el-option label="AI生成SQL" value="ai_sql" />
+              <el-option label="AI智能填报" value="ai_form" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="AI模型">
+            <el-select v-model="queryParams.aiModel" placeholder="全部" clearable>
+              <el-option label="GPT-3.5" value="gpt-3.5" />
+              <el-option label="GPT-4" value="gpt-4" />
+              <el-option label="Claude-3" value="claude-3" />
+              <el-option label="DeepSeek" value="deepseek" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="paginatedList"
+          highlight-current-row
+          @row-click="handleSelect"
+          :row-class-name="rowClass"
+          style="height: 60vh"
+        >
+          <el-table-column label="用户姓名" prop="userName" />
+          <el-table-column label="使用类型" prop="usageType">
+            <template #default="scope">
+              {{ usageTypeLabel(scope.row.usageType) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="AI模型" prop="aiModel" />
+          <el-table-column label="知识库" prop="knowledgeBase" />
+          <el-table-column label="会话名称" prop="sessionName" />
+        </el-table>
+        <el-pagination
+          class="mt-2"
+          :total="total"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleQuery"
+          @current-change="handleQuery"
+        />
+      </el-card>
+    </div>
+    <!-- 拖拽分割条（flex子项） -->
+    <div class="drag-bar" @mousedown="startDrag"></div>
+    <!-- 右侧会话详情 -->
+    <div class="session-detail-panel">
+      <el-card shadow="never" class="session-detail-card">
+        <template #header>
+          <div class="detail-header">
+            <span v-if="selectedSession">会话详情：{{ selectedSession.sessionName }}</span>
+            <span v-else>请选择左侧会话</span>
+            <div v-if="selectedSession" class="detail-meta">
+              <span>用户：{{ selectedSession.userName }}</span>
+              <span>｜类型：{{ usageTypeLabel(selectedSession.usageType) }}</span>
+              <span>｜AI模型：{{ selectedSession.aiModel }}</span>
+            </div>
+          </div>
+        </template>
+        <div v-if="selectedSession">
+          <div class="chat-list">
+            <div
+              v-for="(msg, idx) in sessionDetail"
+              :key="idx"
+              :class="['chat-item', msg.role === 'user' ? 'chat-user' : 'chat-ai']"
+            >
+              <div class="chat-bubble">
+                <span v-if="msg.role === 'user'">👤</span>
+                <span v-else>🤖</span>
+                <span class="chat-content">{{ msg.content }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="empty-detail">暂无会话详情</div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
+
+// mock 数据
+const mockSessionList = [
+  {
+    id: 1,
+    userName: '张三',
+    usageType: 'ai_chat',
+    aiModel: 'gpt-3.5',
+    sessionName: '关于Vue3开发的讨论',
+    knowledgeBase: '产品知识库'
+  },
+  {
+    id: 2,
+    userName: '李四',
+    usageType: 'ai_knowledge',
+    aiModel: 'gpt-4',
+    sessionName: '知识库查询-产品文档',
+    knowledgeBase: '技术文档库'
+  },
+  {
+    id: 3,
+    userName: '王五',
+    usageType: 'ai_sql',
+    aiModel: 'claude-3',
+    sessionName: 'SQL生成-用户统计',
+    knowledgeBase: 'SQL知识库'
+  },
+  {
+    id: 4,
+    userName: '张三',
+    usageType: 'ai_form',
+    aiModel: 'gpt-3.5',
+    sessionName: '智能填报-客户信息',
+    knowledgeBase: ''
+  }
+]
+
+const mockSessionDetails = {
+  1: [
+    { role: 'user', content: 'Vue3和Vue2有什么区别？' },
+    { role: 'ai', content: 'Vue3在响应式、性能、TypeScript支持等方面有较大提升。' },
+    { role: 'user', content: '能举个例子吗？' },
+    { role: 'ai', content: '比如ref和reactive的用法，组合式API等。' }
+  ],
+  2: [
+    { role: 'user', content: '请查找产品文档相关知识。' },
+    { role: 'ai', content: '已为您找到产品文档相关内容，请查收。' }
+  ],
+  3: [
+    { role: 'user', content: '帮我生成一个用户统计的SQL。' },
+    { role: 'ai', content: 'SELECT COUNT(*) FROM users;' }
+  ],
+  4: [
+    { role: 'user', content: '我要填报客户信息。' },
+    { role: 'ai', content: '请提供客户名称、联系方式等信息。' }
+  ]
+}
+
+// 工具
+const usageTypeLabel = (type) => {
+  const map = {
+    ai_chat: 'AI问答',
+    ai_knowledge: 'AI知识库',
+    ai_sql: 'AI生成SQL',
+    ai_form: 'AI智能填报'
+  }
+  return map[type] || type
+}
+
+// 查询与分页
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  usageType: '',
+  aiModel: ''
+})
+const total = ref(0)
+const sessionList = ref([])
+const selectedSession = ref(null)
+const sessionDetail = ref([])
+
+// 拖拽宽度
+const minLeft = 240
+const maxLeft = 600
+const leftPanelWidth = ref(Math.floor(window.innerWidth * 0.3)) // 3:7 初始
+
+let dragging = false
+let startX = 0
+let startWidth = 0
+
+function startDrag(e) {
+  dragging = true
+  startX = e.clientX
+  startWidth = leftPanelWidth.value
+  document.body.style.cursor = 'col-resize'
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+function onDrag(e) {
+  if (!dragging) return
+  let newWidth = startWidth + (e.clientX - startX)
+//   if (newWidth < minLeft) newWidth = minLeft
+//   if (newWidth > maxLeft) newWidth = maxLeft
+  leftPanelWidth.value = newWidth
+}
+function stopDrag() {
+  dragging = false
+  document.body.style.cursor = ''
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+onBeforeUnmount(() => {
+  stopDrag()
+})
+
+const filteredList = computed(() => {
+  let list = mockSessionList
+  if (queryParams.userName) {
+    list = list.filter(item => item.userName.includes(queryParams.userName))
+  }
+  if (queryParams.usageType) {
+    list = list.filter(item => item.usageType === queryParams.usageType)
+  }
+  if (queryParams.aiModel) {
+    list = list.filter(item => item.aiModel === queryParams.aiModel)
+  }
+  return list
+})
+
+const paginatedList = computed(() => {
+  total.value = filteredList.value.length
+  const start = (queryParams.pageNum - 1) * queryParams.pageSize
+  return filteredList.value.slice(start, start + queryParams.pageSize)
+})
+
+function handleQuery() {
+  queryParams.pageNum = 1
+}
+
+function resetQuery() {
+  queryParams.userName = ''
+  queryParams.usageType = ''
+  queryParams.aiModel = ''
+  handleQuery()
+}
+
+function handleSelect(row) {
+  selectedSession.value = row
+  sessionDetail.value = mockSessionDetails[row.id] || []
+}
+
+function rowClass({ row }) {
+  return selectedSession.value && row.id === selectedSession.value.id ? 'selected-row' : ''
+}
+
+onMounted(() => {
+  sessionList.value = mockSessionList
+})
+</script>
+
+<style scoped>
+.user-session-container {
+  display: flex;
+  height: 100vh;
+  background: #f5f7fa;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+}
+.session-list-panel {
+  min-width: 120px;
+  max-width: 90%;
+  height: 100%;
+  background: #fff;
+  border-right: 1px solid #ebeef5;
+  display: flex;
+  flex-direction: column;
+  transition: flex-basis 0.2s;
+  z-index: 1;
+  flex-shrink: 0;
+  flex-grow: 0;
+  min-width: 0;
+}
+.drag-bar {
+  width: 6px;
+  background: #d3e2f7;
+  cursor: col-resize;
+  height: 100%;
+  z-index: 10;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.drag-bar:hover {
+  background: #409eff;
+}
+.session-detail-panel {
+  flex: 1 1 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+  min-width: 0 !important;
+}
+.session-list-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+.session-detail-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+.session-detail-card :deep(.el-card__body) {
+  min-width: 0 !important;
+}
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.detail-meta {
+  font-size: 14px;
+  color: #888;
+  font-weight: 400;
+  display: flex;
+  gap: 16px;
+}
+.chat-list {
+  padding: 24px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  overflow-y: auto;
+  min-width: 0;
+}
+.chat-item {
+  display: flex;
+  align-items: flex-start;
+}
+.chat-user {
+  justify-content: flex-start;
+}
+.chat-ai {
+  justify-content: flex-end;
+}
+.chat-bubble {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 8px;
+  padding: 8px 16px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  max-width: 70%;
+  word-break: break-all;
+}
+.chat-user .chat-bubble {
+  background: #e6f7ff;
+}
+.chat-ai .chat-bubble {
+  background: #f4f4f5;
+}
+.chat-content {
+  margin-left: 8px;
+}
+.selected-row {
+  background: #f0f9ff !important;
+}
+.empty-detail {
+  color: #bbb;
+  text-align: center;
+  margin-top: 40px;
+}
+.mb-2 {
+  margin-bottom: 12px;
+}
+.mt-2 {
+  margin-top: 12px;
+}
+</style>
diff --git a/src/views/ai/skill/aiChat/index.vue b/src/views/ai/skill/aiChat/index.vue
index c3fa5fa..3baf040 100644
--- a/src/views/ai/skill/aiChat/index.vue
+++ b/src/views/ai/skill/aiChat/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="ai-chat-container">
     <!-- 左侧会话栏 -->
-    <div :class="['sidebar', { collapsed }]">
+    <div :class="['sidebar', { collapsed }]" v-loading="sidebarLoading">
       <div class="sidebar-header">
         <svg-icon class-name="search-icon" icon-class="aichat"/>
-        <span class="logo-text">AI助手</span>
+        <span class="logo-text">{{ chatTitle }}</span>
         <el-button
           v-if="!collapsed"
           class="collapse-btn"
@@ -111,13 +111,15 @@
     </el-button>
 
     <!-- 主对话区 -->
-    <main class="main-content">
+    <main class="main-content" v-loading="mainLoading">
       <header class="chat-header">
         <div class="header-left">
           <h2>{{ currentChat?.messageTopic || '新对话' }}</h2>
         </div>
         <div class="header-right">
-          <el-select v-model="selectedModel" placeholder="选择模型" @change="onModelChange">
+          <label style="width: 100px;">模型</label>
+          <el-select v-model="selectedModel" placeholder="请选择模型" @change="onModelChange"
+          >
             <el-option
               v-for="model in aiModelList"
               :key="model.modelId"
@@ -125,6 +127,17 @@
               :value="model.modelId"
             />
           </el-select>
+          <label style="width: 130px;" v-if="selectedKnowledgeBaseId && selectedKnowledgeBaseId !== ''">知识库</label>
+          <el-select v-model="selectedKnowledgeBaseId" placeholder="请选择知识库" @change="onKnowledgeBaseChange"
+                     v-if="selectedKnowledgeBaseId && selectedKnowledgeBaseId !== ''">
+            <el-option
+              v-for="knowledgeBase in aiKnowledgeBaseList"
+              :key="knowledgeBase.knowledgeBaseId"
+              :label="knowledgeBase.knowledgeBaseName"
+              :value="knowledgeBase.knowledgeBaseId"
+            />
+          </el-select>
+
           <!--          <el-button @click="showSettings = true" title="设置">-->
           <!--            <el-icon>-->
           <!--              <Setting/>-->
@@ -136,7 +149,9 @@
       <!-- 聊天消息区域 -->
       <div class="chat-messages" ref="messagesRef">
         <!-- 加载动画 -->
-        <div v-if="loadingChatId && activeChatSessionId && (!currentChat?.messages || currentChat.messages.length === 0)" class="loading-container">
+        <div
+          v-if="loadingChatId && activeChatSessionId && (!currentChat?.messages || currentChat.messages.length === 0)"
+          class="loading-container">
           <div class="loading-spinner">
             <el-icon class="is-loading">
               <Loading/>
@@ -145,10 +160,11 @@
           <div class="loading-text">正在加载对话内容...</div>
         </div>
 
-        <div v-else-if="!currentChat || !currentChat.messages || currentChat.messages.length === 0" class="welcome-message">
+        <div v-else-if="!currentChat || !currentChat.messages || currentChat.messages.length === 0"
+             class="welcome-message">
           <div class="welcome-icon">🤖</div>
-          <h3>欢迎使用AI助手</h3>
-          <p>我可以帮助你回答问题、编写代码、分析数据等</p>
+          <h3>{{ welcomeTitle }}</h3>
+          <p>{{ welcomeContent }}</p>
         </div>
 
         <div
@@ -185,19 +201,19 @@
               <span class="cursor">|</span>
             </div>
           </div>
-<!--          <div class="message-actions">-->
-<!--            <el-button-->
-<!--              size="small"-->
-<!--              type="danger"-->
-<!--              @click="stopStreaming"-->
-<!--              class="stop-btn"-->
-<!--            >-->
-<!--              <el-icon>-->
-<!--                <Close/>-->
-<!--              </el-icon>-->
-<!--              停止-->
-<!--            </el-button>-->
-<!--          </div>-->
+          <!--          <div class="message-actions">-->
+          <!--            <el-button-->
+          <!--              size="small"-->
+          <!--              type="danger"-->
+          <!--              @click="stopStreaming"-->
+          <!--              class="stop-btn"-->
+          <!--            >-->
+          <!--              <el-icon>-->
+          <!--                <Close/>-->
+          <!--              </el-icon>-->
+          <!--              停止-->
+          <!--            </el-button>-->
+          <!--          </div>-->
         </div>
 
         <!-- 继续按钮区域 -->
@@ -231,7 +247,7 @@
       <!-- 输入区域 -->
       <footer class="chat-input">
         <div class="input-container">
-          <div class="suggestion-bar align-to-textarea">
+          <div class="suggestion-bar align-to-textarea" v-if="!selectedKnowledgeBaseId || selectedKnowledgeBaseId === ''">
               <span
                 v-for="(sug, i) in suggestions"
                 :key="i"
@@ -257,6 +273,7 @@
                 @click="toggleHistory"
                 :type="carryHistory ? 'primary' : ''"
                 title="携带历史"
+                v-if="!selectedKnowledgeBaseId || selectedKnowledgeBaseId === ''"
               >
                 <el-icon>
                   <Collection/>
@@ -284,22 +301,22 @@
               <!--                  </el-icon>-->
               <!--                </el-button>-->
               <!--              </el-upload>-->
-<!--              <el-button-->
-<!--                type="primary"-->
-<!--                @click="isStreaming ? stopStreaming() : sendMessage()"-->
-<!--              >-->
-<!--                <el-icon>-->
-<!--                  <Position v-if="!isStreaming"/>-->
-<!--                  <Close v-else/>-->
-<!--                </el-icon>-->
-<!--                {{ isStreaming ? '停止' : '发送' }}-->
-<!--              </el-button>-->
+              <!--              <el-button-->
+              <!--                type="primary"-->
+              <!--                @click="isStreaming ? stopStreaming() : sendMessage()"-->
+              <!--              >-->
+              <!--                <el-icon>-->
+              <!--                  <Position v-if="!isStreaming"/>-->
+              <!--                  <Close v-else/>-->
+              <!--                </el-icon>-->
+              <!--                {{ isStreaming ? '停止' : '发送' }}-->
+              <!--              </el-button>-->
 
               <el-button
                 type="primary"
                 @click="sendMessage()"
-                :disabled = "isStreaming"
-                :loading = "isStreaming"
+                :disabled="isStreaming"
+                :loading="isStreaming"
               >
                 <el-icon>
                   <Position/>
@@ -353,7 +370,8 @@ import {ref, reactive, computed, nextTick, onMounted, onUnmounted} from 'vue'
 import axios from 'axios'
 import request from '@/utils/request';
 import {getToken} from "@/utils/auth";
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {
@@ -371,8 +389,17 @@ import {
 } from '@element-plus/icons-vue'
 import service from "@/utils/request";
 
-import {getAiModelJoinList, getAiChatMessageList, getAiChatMessages,updateAiMessageTopic,delAiMessage} from "@/api/ai/skill/aiChat"
+import {
+  getAiModelJoinList,
+  getAiChatMessageList,
+  getAiChatMessages,
+  updateAiMessageTopic,
+  delAiMessage
+} from "@/api/ai/skill/aiChat"
 import {AIModelVO} from '@/api/ai/skill/aiChat/types';
+import {getAiKnowledgeBaseList} from "@/api/ai/skill/aiKnowledgeBase";
+import {AiKnowledgeBaseVO} from "@/api/ai/skill/aiKnowledgeBase/types";
+
 import {HttpStatus} from "@/enums/RespEnum";
 
 // 类型定义
@@ -411,10 +438,17 @@ const inputMessage = ref('') //输入框输入的信息
 const isStreaming = ref(false) //代表是否正在发送信息
 const streamingContent = ref('')
 const showSettings = ref(false)
-const carryHistory = ref(true)
+const carryHistory = ref(false)
 const messagesRef = ref<HTMLElement>()
 const inputRef = ref<HTMLTextAreaElement>()
-const loading = ref(false)
+
+const sidebarLoading = ref(false)
+const mainLoading = ref(false)
+
+
+const chatTitle = ref('');
+const welcomeTitle = ref('');
+const welcomeContent = ref('');
 
 // 添加请求取消控制器
 const currentRequestController = ref<AbortController | null>(null)
@@ -434,6 +468,8 @@ const platformIcon = ref('');//ai平台图标
 // 聊天会话列表
 const chatList = ref<ChatSession[]>([])
 
+const selectedKnowledgeBaseId = ref()
+const aiKnowledgeBaseList = ref<AiKnowledgeBaseVO[]>([])
 
 // 可用模型
 // const availableModels = ref<ModelConfig[]>([
@@ -450,12 +486,12 @@ const chatList = ref<ChatSession[]>([])
 const selectedModel = ref(0)
 
 const getAiChatSessions = async () => {
-  // loading.value = true;
-  const res = await getAiChatMessageList({});
+  sidebarLoading.value = true;
+  chatList.value = [];
+  const res = await getAiChatMessageList({knowledgeBaseId: selectedKnowledgeBaseId.value});
   chatList.value = res.data;
   console.log(res)
-  // platformList.value = res.data;
-  // loading.value = false;
+  sidebarLoading.value = false;
 }
 
 
@@ -550,7 +586,7 @@ const hasGroupContent = (groupKey: string) => {
 }
 
 //新建对话
-function createNewChat(){
+function createNewChat() {
   activeChatSessionId.value = undefined
   inputMessage.value = ''
 }
@@ -573,6 +609,7 @@ function newChatFirstMessage() {
 }
 
 const selectChat = async (chatSessionId: string) => {
+  mainLoading.value = true;
   // 取消之前的请求
   if (currentRequestController.value) {
     currentRequestController.value.abort()
@@ -588,8 +625,6 @@ const selectChat = async (chatSessionId: string) => {
   console.log(activeChatSessionId.value)
 
   if (!currentChat.value.messages) {
-    console.log("----")
-
     // 设置加载状态
     loadingChatId.value = chatSessionId
 
@@ -627,10 +662,12 @@ const selectChat = async (chatSessionId: string) => {
         loadingChatId.value = null
       }
       currentRequestController.value = null
+      mainLoading.value = false;
     }
   } else {
     // 如果消息已存在，清除加载状态
     loadingChatId.value = null
+    mainLoading.value = false;
   }
 
   // console.log("-=-"+JSON.stringify(currentChat.value.messages, null, 2))
@@ -665,7 +702,7 @@ const editChatTitle = async (chat: ChatSession) => {
       // 设置编辑状态，显示加载动画
       editingChatId.value = chat.sessionId
 
-      updateAiMessageTopic({sessionId:chat.sessionId,messageTopic:value.trim()}).then((res: any) => {
+      updateAiMessageTopic({sessionId: chat.sessionId, messageTopic: value.trim()}).then((res: any) => {
         chat.messageTopic = value.trim()
         chat.updatedAt = Date.now()
         ElMessage.success('重命名成功')
@@ -768,6 +805,14 @@ function onModelChange() {
   }
 }
 
+function onKnowledgeBaseChange() {
+  const knowledgeBase = aiKnowledgeBaseList.value.find(kb => kb.knowledgeBaseId === selectedKnowledgeBaseId.value)
+  if (knowledgeBase) {
+    getAiChatSessions();
+  }
+}
+
+
 function clearInput() {
   inputMessage.value = ''
   nextTick(() => {
@@ -845,7 +890,6 @@ const sendMessage = async () => {
   }
 
   inputMessage.value = ''
-  loading.value = true
   isStreaming.value = true
   streamingContent.value = ''
 
@@ -866,7 +910,8 @@ const sendMessage = async () => {
       messages: sendMessages.map(m => ({role: m.role, content: m.content})),
       carryHistoryFlag: carryHistory.value ? "1" : "0",
       modelId: selectedModel.value,
-      sessionId: activeChatSessionId.value
+      sessionId: activeChatSessionId.value,
+      knowledgeBaseId: selectedKnowledgeBaseId.value
     }, {
       responseType: 'text',
       headers: {
@@ -896,7 +941,6 @@ const sendMessage = async () => {
       timestamp: Date.now()
     })
   } finally {
-    loading.value = false
     isStreaming.value = false;
     streamingContent.value = ''
     scrollToBottom()
@@ -1078,135 +1122,48 @@ function handleSuggestion(sug: string) {
   })
 }
 
-// 生命周期
-onMounted(() => {
-  getAiChatSessions();
-  getAiModelList();
-
-  // availableModels.value = [
-  //   {label: '产品知识库', value: 'deepseek-r1', apiEndpoint: 'https://api.deepseek.com/v1/chat/completions'},
-  //   {label: '设备知识库', value: 'gpt-3.5-turbo', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
-  //   {label: '维修知识库', value: 'gpt-4', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
-  // ]
-
-  // 添加mock数据
-  const mockChats: ChatSession[] = [
-    {
-      sessionId: '1',
-      messageTopic: '如何配置产品参数？',
-      messages: [
-        {
-          role: 'user',
-          content: '我想了解如何配置产品参数',
-          timestamp: Date.now() - 2 * 60 * 60 * 1000 // 2小时前
-        },
-        {
-          role: 'assistant',
-          content: '产品参数配置需要按照以下步骤进行...',
-          timestamp: Date.now() - 2 * 60 * 60 * 1000 + 60000
-        }
-      ],
-      createdAt: Date.now() - 2 * 60 * 60 * 1000,
-      updatedAt: Date.now() - 2 * 60 * 60 * 1000
-    },
-    {
-      sessionId: '2',
-      messageTopic: '设备故障排查指南',
-      messages: [
-        {
-          role: 'user',
-          content: '设备出现故障，需要排查指南',
-          timestamp: Date.now() - 24 * 60 * 60 * 1000 // 1天前
-        },
-        {
-          role: 'assistant',
-          content: '设备故障排查需要按照以下流程...',
-          timestamp: Date.now() - 24 * 60 * 60 * 1000 + 60000
-        }
-      ],
-      createdAt: Date.now() - 24 * 60 * 60 * 1000,
-      updatedAt: Date.now() - 24 * 60 * 60 * 1000
-    },
-    {
-      sessionId: '3',
-      messageTopic: '维修知识库查询',
-      messages: [
-        {
-          role: 'user',
-          content: '查询维修相关的知识',
-          timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000 // 3天前
-        },
-        {
-          role: 'assistant',
-          content: '维修知识库包含以下内容...',
-          timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000 + 60000
-        }
-      ],
-      createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000,
-      updatedAt: Date.now() - 3 * 24 * 60 * 60 * 1000
-    },
-    {
-      sessionId: '4',
-      messageTopic: '系统配置优化建议',
-      messages: [
-        {
-          role: 'user',
-          content: '系统配置需要优化，有什么建议？',
-          timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 // 1周前
-        },
-        {
-          role: 'assistant',
-          content: '系统配置优化建议如下...',
-          timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 60000
-        }
-      ],
-      createdAt: Date.now() - 7 * 24 * 60 * 60 * 1000,
-      updatedAt: Date.now() - 7 * 24 * 60 * 60 * 1000
-    },
-    {
-      sessionId: '5',
-      messageTopic: '历史数据分析报告',
-      messages: [
-        {
-          role: 'user',
-          content: '需要分析历史数据，生成报告',
-          timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 // 1月前
-        },
-        {
-          role: 'assistant',
-          content: '历史数据分析报告已生成...',
-          timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 60000
-        }
-      ],
-      createdAt: Date.now() - 30 * 24 * 60 * 60 * 1000,
-      updatedAt: Date.now() - 30 * 24 * 60 * 60 * 1000
-    }
-  ]
-
-  // 将mock数据添加到聊天列表
-  // chatList.value = mockChats
 
+const getAiChat = async () => {
+  mainLoading.value = true;
+  await getAiChatSessions();
+  await getAiModelList();
+  if (selectedKnowledgeBaseId && selectedKnowledgeBaseId !== '') {
+    await getKnowledgeBaseSelectList();
+  }
   // 加载设置
   const savedSettings = localStorage.getItem('ai-chat-settings')
   if (savedSettings) {
     Object.assign(settings, JSON.parse(savedSettings))
   }
+  mainLoading.value = false;
+}
 
-  // 创建默认对话 - 确保用户进入时就有新建对话状态
-  // createNewChat()
 
-  // 下拉列表默认值：根据settings.apiEndpoint自动匹配
-  // const matched = availableModels.value.find(m => m.apiEndpoint === settings.apiEndpoint)
-  // if (matched) {
-  //   selectedModel.value = matched.value
-  // } else if (!selectedModel.value && availableModels.value.length > 0) {
-  //   selectedModel.value = availableModels.value[0].value
-  // }
+const getKnowledgeBaseSelectList = async () => {
+  const res = await getAiKnowledgeBaseList({knowledgeBaseStatus:'1'});
+  aiKnowledgeBaseList.value = res.data;
+}
 
+
+// 生命周期
+onMounted(() => {
+  let knowledgeBaseId = proxy.$route.params?.knowledgeBaseId
+  if (knowledgeBaseId && knowledgeBaseId !== '') {
+    selectedKnowledgeBaseId.value = parseInt(knowledgeBaseId);
+    chatTitle.value = 'AI知识库';
+    welcomeTitle.value = '欢迎使用AI知识库';
+    welcomeContent.value = '我将通过查阅知识库来为您解答问题。';
+  } else {
+    chatTitle.value = 'AI智能助手';
+    welcomeTitle.value = '欢迎使用AI智能助手';
+    welcomeContent.value = '我是AI智能助手，我可以回答您的问题和分析数据等。';
+  }
+  getAiChat();
   // 自动调整输入框高度
   autoResize()
 })
 
+
 onUnmounted(() => {
   // 清理工作
   if (currentRequestController.value) {
@@ -1468,7 +1425,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 12px;
-  width: 260px;
+  width: 560px;
 }
 
 .chat-messages {
diff --git a/src/views/ai/skill/aiForm/index.vue b/src/views/ai/skill/aiForm/index.vue
new file mode 100644
index 0000000..39ed5af
--- /dev/null
+++ b/src/views/ai/skill/aiForm/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="物料名称" prop="materialId">
+            <el-input v-model="form.materialId" placeholder="请输入物料名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="物料BOM" prop="materialBomId">
+            <el-input v-model="form.materialBomId" placeholder="请输入物料BOM" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="工艺路线" prop="dispatchId">
+            <el-select v-model="form.dispatchId" placeholder="请选择工艺路线">
+              <el-option v-for="item in dispatchOptions" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="计划交货日期" prop="planDeliveryDate">
+            <el-date-picker v-model="form.planDeliveryDate" type="date" placeholder="请选择计划交货日期" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="计划开始日期" prop="planBeginTime">
+            <el-date-picker v-model="form.planBeginTime" type="date" placeholder="请选择计划开始日期" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="计划结束日期" prop="planEndTime">
+            <el-date-picker v-model="form.planEndTime" type="date" placeholder="请选择计划结束日期" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="计划数量" prop="planAmount">
+            <el-input-number v-model="form.planAmount" :min="0" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const formRef = ref()
+
+
+
+
+const dispatchOptions = [
+  { id: 'route1', name: '工艺路线A' },
+  { id: 'route2', name: '工艺路线B' },
+  { id: 'route3', name: '工艺路线C' },
+]
+
+const rules = {
+  materialId: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
+  materialBomId: [{ required: true, message: '请输入物料BOM', trigger: 'blur' }],
+  dispatchId: [{ required: true, message: '请选择工艺路线', trigger: 'change' }],
+  planDeliveryDate: [{ required: true, message: '请选择计划交货日期', trigger: 'change' }],
+  planBeginTime: [{ required: true, message: '请选择计划开始日期', trigger: 'change' }],
+  planEndTime: [{ required: true, message: '请选择计划结束日期', trigger: 'change' }],
+  planAmount: [{ required: true, message: '请输入计划数量', trigger: 'blur' }],
+}
+
+function submitForm() {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success('提交成功！')
+      // 这里可以处理表单数据提交逻辑
+    }
+  })
+}
+function resetForm() {
+  formRef.value.resetFields()
+}
+
+
+
+
+
+
+
+
+interface FormData {
+  materialId?: string | number
+  materialBomId?: string | number
+  dispatchId?: string | number
+  planDeliveryDate?: string
+  planBeginTime?: string
+  planEndTime?: string
+  planAmount?: number
+  // ...其他字段
+}
+
+const props = defineProps<FormData>()
+
+const form = reactive<FormData>({
+  materialId: '',
+  materialBomId: '',
+  dispatchId: '',
+  planDeliveryDate: '',
+  planBeginTime: '',
+  planEndTime: '',
+  planAmount: 0,
+  // ...其他字段
+})
+
+// 初始化赋值
+Object.keys(form).forEach(key => {
+  if (props[key] !== undefined) {
+    form[key] = props[key]
+  }
+})
+
+// 响应props变化
+watch(
+  () => ({ ...props }),
+  (newProps) => {
+    Object.keys(form).forEach(key => {
+      console.log("----");
+      if (newProps[key] !== undefined) {
+        form[key] = newProps[key]
+        console.log(newProps[key]);
+      }
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+
+</script>
+
+<style scoped>
+.app-container {
+  padding: 24px;
+  background: #fff;
+  border-radius: 8px;
+  max-width: 900px;
+  margin: 32px auto;
+  box-shadow: 0 2px 8px #f0f1f2;
+}
+</style>
diff --git a/src/views/ai/skill/aiKnowledge/index.vue b/src/views/ai/skill/aiKnowledge/index.vue
new file mode 100644
index 0000000..4301e6a
--- /dev/null
+++ b/src/views/ai/skill/aiKnowledge/index.vue
@@ -0,0 +1,618 @@
+<template>
+  <div class="kb-list-page">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+            <el-form-item label="知识库名称" prop="knowledgeBaseName">
+              <el-input v-model="queryParams.knowledgeBaseName" placeholder="请输入知识库名称" clearable
+                        @keyup.enter="handleQuery"/>
+            </el-form-item>
+            <el-form-item label="AI模型" prop="modelId">
+              <el-select v-model="queryParams.modelId" placeholder="请选择AI模型" clearable @keyup.enter="handleQuery">
+                <el-option
+                  v-for="model in aiModelList"
+                  :key="model.modelId"
+                  :label="model.modelName"
+                  :value="model.modelId"
+                />
+              </el-select>
+
+            </el-form-item>
+            <el-form-item label="知识库类型" prop="knowledgeBaseTypeId">
+              <el-select v-model="queryParams.knowledgeBaseTypeId" placeholder="请选择知识库类型" clearable
+                         @keyup.enter="handleQuery">
+                <el-option
+                  v-for="model in aiKnowledgeBaseTypeList"
+                  :key="model.knowledgeBaseTypeId"
+                  :label="model.knowledgeBaseTypeName"
+                  :value="model.knowledgeBaseTypeId"
+                />
+              </el-select>
+            </el-form-item>
+
+
+            <!--            <el-form-item label="状态(1启用，0禁用)" prop="knowledgeBaseStatus">-->
+            <!--              <el-select v-model="queryParams.knowledgeBaseStatus" placeholder="请选择状态(1启用，0禁用)" clearable >-->
+            <!--                <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>-->
+            <!--              </el-select>-->
+            <!--            </el-form-item>-->
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['ai:aiKnowledgeBase:add']">
+              创建知识库
+            </el-button>
+          </el-col>
+        </el-row>
+      </template>
+
+      <el-row :gutter="20" v-loading="loading">
+
+        <el-col v-for="kb in aiKnowledgeBaseList" :key="kb.knowledgeBaseId" :span="8" style="margin-bottom:20px;">
+          <div class="kb-card" :class="kb.knowledgeBaseStatus === '1' ? 'enabled' : 'disabled'" @click="goDetail(kb)">
+            <div class="kb-card-header">
+              <img :src="kb.knowledgeBaseIcon ? kb.knowledgeBaseIcon : knowledgeBaseIcon" alt="knowledgeBaseIcon"
+                   class="knowledge-base-icon"/>
+              <!--            <svg-icon class-name="search-icon" icon-class="knowledge-base"/>-->
+              <div class="kb-card-title-container">
+                <div class="kb-card-title">{{ kb.knowledgeBaseName }}</div>
+                <div class="kb-card-knowledge-type">{{ kb.knowledgeBaseTypeName }}</div>
+              </div>
+            </div>
+            <div class="kb-card-desc" :title="kb.knowledgeBaseDesc">{{ kb.knowledgeBaseDesc }}</div>
+            <div class="kb-card-footer">
+              <div class="kb-card-info">
+                <span>向量模型：{{ kb.modelName }}</span>
+              </div>
+              <div class="kb-card-actions">
+                <el-button size="small" type="primary" @click.stop="handleUpdate(kb)">编辑</el-button>
+                <el-button size="small" type="danger" @click.stop="handleDelete(kb)">删除</el-button>
+<!--                <el-button size="small" type="primary" @click.stop="openArrangeDialog(kb)">编排</el-button>-->
+                <el-button size="small" type="success" @click.stop="goQA(kb)" v-if="kb.knowledgeBaseStatus === '1'">检索</el-button>
+              </div>
+            </div>
+            <div class="kb-card-status-switch">
+              <span v-if="kb.knowledgeBaseStatus === '1'">启用</span>
+              <span v-else>禁用</span>
+              <el-switch
+                v-model="switchStatusMap[String(kb.knowledgeBaseId)]"
+                :active-value="'1'"
+                :inactive-value="'0'"
+                @change="(val: string) => handleStatusChange(kb, val)"
+                @click.stop
+                style="margin-left: 8px;"
+              />
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                  v-model:limit="queryParams.pageSize" @pagination="getList"/>
+    </el-card>
+
+    <!-- 添加或修改AI知识库对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="aiKnowledgeBaseFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="知识库名称" prop="knowledgeBaseName">
+          <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称"/>
+        </el-form-item>
+        <el-form-item label="AI模型" prop="modelId">
+          <el-select v-model="form.modelId" placeholder="请选择AI模型">
+            <el-option
+              v-for="model in aiModelList"
+              :key="model.modelId"
+              :label="model.modelName"
+              :value="model.modelId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="知识库类型" prop="knowledgeBaseTypeId">
+          <el-select v-model="form.knowledgeBaseTypeId" placeholder="请选择知识库类型">
+            <el-option
+              v-for="model in aiKnowledgeBaseTypeList"
+              :key="model.knowledgeBaseTypeId"
+              :label="model.knowledgeBaseTypeName"
+              :value="model.knowledgeBaseTypeId"
+            />
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="分隔符" prop="knowledgeBaseSeparator">-->
+<!--          <el-input v-model="form.knowledgeBaseSeparator" placeholder="请输入分隔符"/>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="检索条数" prop="retrieveLimit">-->
+<!--          <el-input v-model="form.retrieveLimit" placeholder="请输入知识库中检索的条数"/>-->
+<!--        </el-form-item>-->
+        <el-form-item label="文本块大小" prop="textBlockSize">
+          <el-input v-model="form.textBlockSize" placeholder="请输入文本块大小"/>
+        </el-form-item>
+        <el-form-item label="重叠字符数" prop="overlapCharacter">
+          <el-input v-model="form.overlapCharacter" placeholder="请输入重叠字符数"/>
+        </el-form-item>
+        <el-form-item label="知识库描述" prop="knowledgeBaseDesc">
+          <el-input type="textarea" v-model="form.knowledgeBaseDesc" placeholder="请输入知识库描述"/>
+        </el-form-item>
+        <el-form-item label="状态" prop="knowledgeBaseStatus">
+          <el-radio-group v-model="form.knowledgeBaseStatus">
+            <el-radio
+              v-for="dict in ai_knowledge_base_status"
+              :key="dict.value"
+              :value="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+
+
+        </el-form-item>
+        <el-form-item label="向量库" prop="vector" v-if="false">
+          <el-input v-model="form.vector" placeholder="请输入向量库"/>
+        </el-form-item>
+        <el-form-item label="是否公开(1是，0否)" prop="openFlag" v-if="false">
+          <el-input v-model="form.openFlag" placeholder="请输入是否公开(1是，0否)"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+
+    <el-dialog v-model="showArrangeDialog" title="AI问答编排设置" width="900px" top="5vh" :close-on-click-modal="false">
+      <AiChatSettings v-if="showArrangeDialog"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {useRouter} from 'vue-router'
+import {ElMessageBox} from 'element-plus'
+import KnowledgeBaseCreate from './knowledgeBaseCreate.vue'
+import AiChatSettings from '../../base/aiApp/aiAppConfig.vue'
+
+import {
+  listAiKnowledgeBase,
+  getAiKnowledgeBase,
+  delAiKnowledgeBase,
+  addAiKnowledgeBase,
+  updateAiKnowledgeBase
+} from '@/api/ai/skill/aiKnowledgeBase';
+import {AiKnowledgeBaseVO, AiKnowledgeBaseQuery, AiKnowledgeBaseForm} from '@/api/ai/skill/aiKnowledgeBase/types';
+
+import {getAiKnowledgeBaseTypeList} from '@/api/ai/base/aiKnowledgeBaseType';
+import {AiKnowledgeBaseTypeVO} from '@/api/ai/base//aiKnowledgeBaseType/types';
+
+import {getAiModelList} from '@/api/ai/base/aiModel';
+import {AiModelVO} from '@/api/ai/base/aiModel/types';
+
+import knowledgeBaseIcon from '@/assets/knowledge-base.png'
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const {ai_knowledge_base_status} = toRefs<any>(proxy?.useDict('ai_knowledge_base_status'));
+
+const aiKnowledgeBaseList = ref<AiKnowledgeBaseVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const aiKnowledgeBaseFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const aiKnowledgeBaseTypeList = ref<AiKnowledgeBaseTypeVO[]>([]);
+const aiModelList = ref<AiModelVO[]>([]);
+
+
+const initFormData: AiKnowledgeBaseForm = {
+  knowledgeBaseId: undefined,
+  knowledgeBaseName: undefined,
+  modelId: undefined,
+  knowledgeBaseTypeId: undefined,
+  knowledgeBaseSeparator: undefined,
+  retrieveLimit: undefined,
+  textBlockSize: undefined,
+  overlapCharacter: undefined,
+  questionSeparator: undefined,
+  knowledgeBaseDesc: undefined,
+  knowledgeBaseStatus: undefined,
+  vector: 'milvus',
+  openFlag: undefined,
+}
+const data = reactive<PageData<AiKnowledgeBaseForm, AiKnowledgeBaseQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    knowledgeBaseId: undefined,
+    knowledgeBaseName: undefined,
+    modelId: undefined,
+    knowledgeBaseTypeId: undefined,
+    knowledgeBaseSeparator: undefined,
+    retrieveLimit: undefined,
+    textBlockSize: undefined,
+    overlapCharacter: undefined,
+    questionSeparator: undefined,
+    knowledgeBaseDesc: undefined,
+    knowledgeBaseStatus: undefined,
+    vector: undefined,
+    openFlag: undefined,
+    params: {}
+  },
+  rules: {
+    knowledgeBaseName: [
+      {required: true, message: "知识库名称不能为空", trigger: "blur"}
+    ],
+    modelId: [
+      {required: true, message: "AI模型不能为空", trigger: "blur"}
+    ],
+    knowledgeBaseTypeId: [
+      {required: true, message: "知识库类型不能为空", trigger: "blur"}
+    ],
+    knowledgeBaseStatus: [
+      {required: true, message: "状态不能为空", trigger: "change"}
+    ],
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+/** 查询AI知识库类型下拉列表 */
+const getAiKnowledgeBaseTypes = async () => {
+  const res = await getAiKnowledgeBaseTypeList({});
+  aiKnowledgeBaseTypeList.value = res.data;
+}
+
+/** 查询AI模型下来列表 */
+const getAiModels = async () => {
+  const res = await getAiModelList({modelTypeId: 2});
+  aiModelList.value = res.data;
+}
+
+
+/** 查询AI知识库列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listAiKnowledgeBase(queryParams.value);
+  aiKnowledgeBaseList.value = res.rows;
+  // 初始化switchStatusMap
+  aiKnowledgeBaseList.value.forEach(kb => {
+    switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+  })
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  aiKnowledgeBaseFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: AiKnowledgeBaseVO[]) => {
+  ids.value = selection.map(item => item.knowledgeBaseId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "添加AI知识库";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: AiKnowledgeBaseVO) => {
+  reset();
+  const _knowledgeBaseId = row?.knowledgeBaseId || ids.value[0]
+  const res = await getAiKnowledgeBase(_knowledgeBaseId);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改AI知识库";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  aiKnowledgeBaseFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.knowledgeBaseId) {
+        await updateAiKnowledgeBase(form.value).finally(() => buttonLoading.value = false);
+      } else {
+        await addAiKnowledgeBase(form.value).finally(() => buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: AiKnowledgeBaseVO) => {
+  const _knowledgeBaseIds = row?.knowledgeBaseId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除AI知识库["' + row.knowledgeBaseName + '"]的数据项？').finally(() => loading.value = false);
+  await delAiKnowledgeBase(_knowledgeBaseIds);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+onMounted(() => {
+  getList();
+  getAiKnowledgeBaseTypes();
+  getAiModels();
+});
+
+
+const router = useRouter()
+const searchName = ref('')
+const page = ref(1)
+const pageSize = 6
+const showCreateDialog = ref(false)
+const showArrangeDialog = ref(false)
+
+const kbList = ref([
+  {
+    id: 1,
+    icon: '',
+    name: '产品知识库',
+    description: '产品相关知识',
+    vectorModel: 'text-embedding-ada-002',
+    status: 'enabled'
+  },
+  {id: 2, icon: '', name: '技术文档库', description: '技术文档集合', vectorModel: 'bge-large-zh', status: 'disabled'},
+  {
+    id: 3,
+    icon: '',
+    name: '运营知识库',
+    description: '运营相关知识',
+    vectorModel: 'text-embedding-ada-002',
+    status: 'enabled'
+  },
+  // ...更多模拟数据
+])
+
+const filteredList = computed(() => {
+  if (!searchName.value) return kbList.value
+  return kbList.value.filter(kb => kb.name.includes(searchName.value))
+})
+const pagedList = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredList.value.slice(start, start + pageSize)
+})
+
+// 新增：用于受控切换的临时状态
+const switchStatusMap = ref<Record<string, string>>({})
+
+const handleStatusChange = async (kb: any, val: string) => {
+  try {
+    loading.value = true;
+    await proxy?.$modal.confirm(`确定要将知识库“${kb.knowledgeBaseName}”${val === '1' ? '启用' : '禁用'}吗？`);
+    let statusChangeForm = ref<AiKnowledgeBaseVO>();
+    Object.assign(statusChangeForm, kb);
+    statusChangeForm.knowledgeBaseStatus = val
+    await updateAiKnowledgeBase(statusChangeForm)
+      .then(() => {
+        proxy?.$modal.msgSuccess("操作成功");
+        kb.knowledgeBaseStatus = val
+        switchStatusMap.value[String(kb.knowledgeBaseId)] = val
+      }).catch(() => {
+        // 还原switch
+        switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+      })
+  } catch {
+    switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+  }finally {
+    loading.value = false;
+    console.log(kb)
+  }
+}
+
+function goCreate() {
+  router.push({name: 'KnowledgeBaseCreate'})
+}
+
+function goDetail(kb: any) {
+  router.push({name: 'KnowledgeContent', params: {knowledgeBaseId: kb.knowledgeBaseId,modelId:kb.modelId,knowledgeBaseName: encodeURIComponent(kb.knowledgeBaseName)}})
+}
+
+function editKb(kb: any) {
+  router.push({name: 'KnowledgeBaseEdit', params: {id: kb.id}})
+}
+
+function deleteKb(kb: any) {
+  // TODO: 删除逻辑
+  kbList.value = kbList.value.filter(item => item.id !== kb.id)
+}
+
+function goQA(kb: any) {
+  router.push({name: 'KnowledgeBaseQA', params: {knowledgeBaseId: kb.knowledgeBaseId}})
+}
+
+function openArrangeDialog(kb: any) {
+  showArrangeDialog.value = true
+}
+
+function onCreated(newKb) {
+  // 可选：将新建的知识库添加到kbList
+  showCreateDialog.value = false
+}
+
+function onCreateDialogClose() {
+  showCreateDialog.value = false
+}
+</script>
+
+<style scoped>
+.kb-list-page {
+  padding: 24px;
+}
+
+.kb-list-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.kb-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  padding: 20px;
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow .2s;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 200px;
+}
+
+.kb-card.enabled {
+  border-left: 6px solid #67c23a;
+}
+
+.kb-card.disabled {
+  border-left: 6px solid #dcdfe6;
+  background: #f5f7fa;
+}
+
+.kb-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.knowledge-base-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.kb-card-title-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.kb-card-title {
+  font-size: 18px;
+  font-weight: bold;
+
+}
+
+.kb-card-knowledge-type {
+  font-size: 14px;
+  color: #666;
+  margin-top: 2px;
+}
+
+.kb-card-desc {
+  color: #888;
+  margin-bottom: 8px;
+  min-height: 32px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kb-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.kb-card-info {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 0;
+}
+
+.kb-card-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 0;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.kb-card-status {
+  display: none;
+}
+
+.kb-card-status-switch {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: bold;
+  color: #222;
+  border-radius: 4px;
+  padding: 0;
+  z-index: 2;
+  gap: 8px;
+}
+
+.kb-card-status-switch span {
+  color: #fff;
+  background: #67c23a;
+  border-radius: 4px;
+  padding: 2px 10px;
+  display: inline-block;
+}
+
+.kb-card.disabled .kb-card-status-switch span {
+  background: #bfbfbf;
+}
+
+
+</style>
diff --git a/src/views/ai/skill/aiKnowledge/knowledgeBaseCreate.vue b/src/views/ai/skill/aiKnowledge/knowledgeBaseCreate.vue
new file mode 100644
index 0000000..67c62ca
--- /dev/null
+++ b/src/views/ai/skill/aiKnowledge/knowledgeBaseCreate.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="kb-create-page">
+<!--    <div class="kb-create-title">创建知识库</div>-->
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="kb-create-form">
+      <el-form-item label="知识库名称" prop="knowledgeBaseName">
+        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
+      </el-form-item>
+      <el-form-item label="知识库名称" prop="knowledgeBaseName">
+        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
+      </el-form-item>
+      <el-form-item label="分段长度" prop="segmentLength">
+        <el-input-number v-model="form.segmentLength" :min="1" :step="1" />
+      </el-form-item>
+      <el-form-item label="分段重叠" prop="segmentOverlap">
+        <el-input-number v-model="form.segmentOverlap" :min="0" :step="1" />
+      </el-form-item>
+      <el-form-item label="检索条数" prop="topK">
+        <el-input-number v-model="form.topK" :min="1" :step="1" />
+      </el-form-item>
+      <el-form-item label="知识库类型" prop="vectorStore">
+        <el-select v-model="form.vectorStore" placeholder="请选择知识库类型">
+          <el-option label="vectorStoreA" value="vectorStoreA" />
+          <el-option label="vectorStoreB" value="vectorStoreB" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="向量库" prop="vectorStore">
+        <el-select v-model="form.vectorStore" placeholder="请选择向量库">
+          <el-option label="vectorStoreA" value="vectorStoreA" />
+          <el-option label="vectorStoreB" value="vectorStoreB" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="向量模型" prop="vectorModel">
+        <el-select v-model="form.vectorModel" placeholder="请选择向量模型">
+          <el-option label="text-embedding-ada-002" value="text-embedding-ada-002" />
+          <el-option label="bge-large-zh" value="bge-large-zh" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="知识库描述" prop="description">
+        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio label="enabled">启用</el-radio>
+          <el-radio label="disabled">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+
+      </el-form-item>
+    </el-form>
+  </div>
+  <div style="display: flex;justify-content: center">
+    <el-button type="primary" @click="onSubmit">保存</el-button>
+    <el-button @click="onCancel">取消</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const emit = defineEmits(['created', 'cancel'])
+const formRef = ref()
+const form = ref({
+  name: '',
+  segmentLength: 100,
+  segmentOverlap: 20,
+  topK: 5,
+  vectorStore: '',
+  vectorModel: '',
+  description: '',
+  status: 'enabled',
+})
+const rules = {
+  name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
+  segmentLength: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
+  segmentOverlap: [{ required: true, type: 'number' as const, min: 0, message: '请输入非负整数', trigger: 'blur' }],
+  topK: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
+  vectorStore: [{ required: true, message: '请选择向量库', trigger: 'change' }],
+  vectorModel: [{ required: true, message: '请选择向量模型', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+}
+
+function onSubmit() {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      // TODO: 保存逻辑
+      ElMessage.success('保存成功')
+      emit('created', { ...form.value })
+    }
+  })
+}
+function onCancel() {
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+.kb-create-page {
+  padding: 0;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.kb-create-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 24px;
+  text-align: center;
+}
+.kb-create-form {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  padding: 0 24px 0 24px;
+}
+</style>
diff --git a/src/views/ai/skill/aiKnowledge/knowledgeContent.vue b/src/views/ai/skill/aiKnowledge/knowledgeContent.vue
new file mode 100644
index 0000000..c67b897
--- /dev/null
+++ b/src/views/ai/skill/aiKnowledge/knowledgeContent.vue
@@ -0,0 +1,496 @@
+<template>
+  <div class="kb-docs-page">
+    <div class="kb-docs-header">
+      <span><b>AI知识库：</b>{{ knowledgeBaseName}}</span>
+      <el-button type="primary" @click="showUploadDialog = true" style="margin-right:auto; margin-left:20px;" >上传文档</el-button>
+    </div>
+    <el-row :gutter="20" v-loading="loading">
+      <el-col v-for="doc in aiKnowledgeContentList" :key="doc.knowledgeContentId" :xs="24" :sm="12" :md="8" :lg="8"
+              :xl="6" style="margin-bottom:20px;">
+        <div :class="['doc-card', getStatusClass(doc)]" @click.self="goPreview(doc)">
+          <!-- 右上角状态 -->
+          <div class="doc-card-status-top" :class="getStatusClass(doc)">
+            {{ getStatusText(doc) }}
+          </div>
+
+          <div class="doc-card-title">
+            <span :class="['file-icon', getFileIconClass(doc)]"/>
+            <span class="title-text" :title="doc.fileName">{{ doc.fileName }}</span>
+          </div>
+
+          <!-- 左下角上传信息 -->
+          <div class="doc-card-upload-info">
+            <div class="upload-time">{{ doc.updateTime || doc.createTime }}</div>
+            <!--            <div class="upload-user">{{ doc.createBy || doc.updateBy || '未知用户' }}</div>-->
+          </div>
+
+          <div class="doc-card-footer">
+            <div class="doc-card-actions">
+              <el-button size="small" type="primary" v-if="Number(doc.contentStatus) !== 1"
+                         @click.stop="vectorizeDoc(doc)">向量化
+              </el-button>
+              <el-button size="small" type="danger" @click.stop="handleDelete(doc)">删除</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize" @pagination="getList"/>
+
+
+    <el-dialog v-model="showEditDialog" title="编辑文档" width="500px">
+      <el-input v-model="editDocForm.title" placeholder="标题" style="margin-bottom:12px;"/>
+      <el-input v-model="editDocForm.content" type="textarea" :rows="4" placeholder="内容"/>
+      <div style="margin-top:12px;text-align:right;">
+        <el-button @click="showEditDialog=false">取消</el-button>
+        <el-button type="primary" @click="saveEditDoc">保存</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog v-model="showUploadDialog" title="上传文档" width="80vw" :modal-append-to-body="false"
+               :close-on-click-modal="false" :destroy-on-close="true" :before-close="onUploadDialogClose">
+      <KnowledgeBaseUpload @confirm="onUploadSuccess" @cancel="onUploadDialogClose"/>
+    </el-dialog>
+    <el-dialog v-model="showPreviewDialog" title="文档预览" width="80vw" height="90vw" :modal-append-to-body="false"
+               :close-on-click-modal="false" :destroy-on-close="true">
+      <KnowledgeBasePreview :doc="previewDoc"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
+import KnowledgeBaseUpload from './knowledgeContentUpload.vue'
+import KnowledgeBasePreview from './knowledgeContentPreview.vue'
+import {
+  listAiKnowledgeContent,
+  vectorizeKnowledgeContent,
+  delAiKnowledgeContent,
+  delAiKnowledgeBase
+} from '@/api/ai/skill/aiKnowledgeBase';
+import {
+  AiKnowledgeContentVO,
+  AiKnowledgeContentQuery,
+  AiKnowledgeContentForm
+} from '@/api/ai/skill/aiKnowledgeContent/types';
+import {ElMessage} from 'element-plus'
+import {AiKnowledgeBaseVO} from "@/api/ai/skill/aiKnowledgeBase/types";
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const knowledgeBaseId = ref();
+const knowledgeBaseName = ref();
+const modelId = ref();
+const embeddingKnowledgeContentVo = ref({});
+
+const page = ref(1)
+const pageSize = 6
+const showEditDialog = ref(false)
+const showUploadDialog = ref(false)
+const editDocForm = ref({id: 0, title: '', content: '', status: 'enabled'})
+const docList = ref([
+  {
+    id: 1,
+    title: '文档A',
+    content: '内容A第一行，内容A第二行，内容A第三行，内容A第四行，内容A第五行，内容A第六行，内容A第七行，内容A第八行，内容A第九行。',
+    status: 'enabled'
+  },
+  {
+    id: 2,
+    title: '文档B',
+    content: '内容B第一行，内容B第二行，内容B第三行，内容B第四行，内容B第五行，内容B第六行，内容B第七行，内容B第八行，内容B第九行。',
+    status: 'disabled'
+  },
+  {
+    id: 3,
+    title: '文档C',
+    content: '内容C第一行，内容C第二行，内容C第三行，内容C第四行，内容C第五行，内容C第六行，内容C第七行，内容C第八行，内容C第九行。',
+    status: 'enabled'
+  },
+  // ...更多模拟数据
+])
+
+
+const aiKnowledgeContentList = ref<AiKnowledgeContentVO[]>([]);
+const total = ref(0);
+const loading = ref(true);
+
+const initFormData: AiKnowledgeContentForm = {
+  knowledgeContentId: undefined,
+  knowledgeBaseId: undefined,
+  contentTitle: undefined,
+  contentWay: undefined,
+  description: undefined,
+  fileName: undefined,
+  filePath: undefined,
+  fileType: undefined,
+  fileSize: undefined,
+  contentStatus: undefined,
+  overlapCharacter: undefined,
+  totalChunk: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  createBy: undefined,
+  updateBy: undefined,
+}
+const data = reactive<PageData<AiKnowledgeContentForm, AiKnowledgeContentQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    knowledgeContentId: undefined,
+    knowledgeBaseId: undefined,
+    contentTitle: undefined,
+    contentWay: undefined,
+    description: undefined,
+    fileName: undefined,
+    filePath: undefined,
+    fileType: undefined,
+    fileSize: undefined,
+    contentStatus: undefined,
+    overlapCharacter: undefined,
+    totalChunk: undefined,
+    params: {}
+  },
+  rules: {
+    knowledgeContentId: [
+      {required: true, message: "主键不能为空", trigger: "blur"}
+    ],
+
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+/** 查询AI知识库内容列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listAiKnowledgeContent(queryParams.value);
+  aiKnowledgeContentList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+  if (!aiKnowledgeContentList.value || aiKnowledgeContentList.value.length <= 0) {
+    proxy.$modal.msgWarning('未查询到数据')
+  }
+}
+
+// 根据文件名或fileType返回图标class
+function getFileIconClass(doc: any) {
+  // alert(JSON.stringify(doc))
+  const name: string = doc.fileName || doc.contentTitle || ''
+  const type: string = (doc.fileType || '').toString().toLowerCase()
+  const ext = (name.split('.').pop() || '').toLowerCase()
+  const t = type || ext
+  if ([
+    'doc', 'docx', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  ].includes(t)) return 'icon-word'
+  if ([
+    'pdf', 'application/pdf'
+  ].includes(t)) return 'icon-pdf'
+  if ([
+    'xls', 'xlsx', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  ].includes(t)) return 'icon-excel'
+  if ([
+    'ppt', 'pptx', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+  ].includes(t)) return 'icon-ppt'
+  if ([
+    'txt', 'text/plain', 'md', 'markdown'
+  ].includes(t)) return 'icon-txt'
+  return 'icon-file'
+}
+
+function getStatusText(doc: any) {
+  const v = Number(doc.contentStatus)
+  if (v === 1) return '成功'
+  if (v === 2) return '解析失败'
+  if (v === 3) return '待解析'
+  return '失败'
+}
+
+function getStatusClass(doc: any) {
+  const v = Number(doc.contentStatus)
+  if (v === 1) return 'enabled'
+  if (v === 0) return 'pending'
+  return 'disabled'
+}
+
+async function vectorizeDoc(doc) {
+  try {
+    proxy?.$modal.loading('正在向量化文档，请稍候...')
+
+    // 如果有可用的向量化参数，则调用后端处理（可选）
+    embeddingKnowledgeContentVo.value.knowledgeContentId = doc.knowledgeContentId
+    embeddingKnowledgeContentVo.value.knowledgeBaseId = knowledgeBaseId.value
+    embeddingKnowledgeContentVo.value.modelId = modelId.value
+    await vectorizeKnowledgeContent(embeddingKnowledgeContentVo.value)
+    ElMessage.success('向量化完成')
+    doc.contentStatus = 1
+
+  } catch (err) {
+    console.error(err)
+  } finally {
+    proxy?.$modal.closeLoading()
+  }
+}
+
+function formatTime(timestamp: string | number) {
+  if (!timestamp) return '未知时间';
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+
+const pagedList = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return docList.value.slice(start, start + pageSize)
+})
+
+const showPreviewDialog = ref(false)
+const previewDoc = ref(null)
+
+function goPreview(doc: any) {
+  previewDoc.value = doc
+  showPreviewDialog.value = true
+}
+
+function editDoc(doc: any) {
+  editDocForm.value = {...doc}
+  showEditDialog.value = true
+}
+
+function saveEditDoc() {
+  // TODO: 保存编辑逻辑
+  const idx = docList.value.findIndex(d => d.id === editDocForm.value.id)
+  if (idx !== -1) docList.value[idx] = {...editDocForm.value}
+  showEditDialog.value = false
+}
+
+
+const handleDelete = async (row?: AiKnowledgeContentVO) => {
+  const knowledgeBaseId = row?.knowledgeBaseId;
+  await proxy?.$modal.confirm('是否确认删除知识库内容["' + row.fileName + '"]的数据项？').finally(() => loading.value = false);
+  await delAiKnowledgeContent(knowledgeBaseId, row.knowledgeContentId);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+function handleFileChange(file) {
+  // TODO: 处理文件选择
+}
+
+function confirmUpload() {
+  // TODO: 上传逻辑
+  showUploadDialog.value = false
+}
+
+function onUploadSuccess() {
+  showUploadDialog.value = false
+  // 可选：刷新文档列表
+}
+
+function onUploadDialogClose() {
+  showUploadDialog.value = false
+  getList();
+}
+
+onMounted(() => {
+  let paramKnowledgeBaseId = proxy.$route.params?.knowledgeBaseId
+  let paramModelId = proxy.$route.params?.modelId
+  if (paramModelId === undefined || paramKnowledgeBaseId === undefined) {
+    proxy?.$modal.msgWarning("请选择知识库和模型");
+    return;
+  }
+
+  knowledgeBaseId.value = paramKnowledgeBaseId
+  queryParams.value.knowledgeBaseId = paramKnowledgeBaseId
+  modelId.value = paramModelId;
+  knowledgeBaseName.value = decodeURIComponent(proxy.$route.params?.knowledgeBaseName)
+  getList();
+});
+
+</script>
+
+<style scoped>
+.kb-docs-page {
+  padding: 24px;
+  height: 100%;
+}
+
+.kb-docs-header {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 24px;
+}
+
+.doc-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  padding: 16px 16px 48px 16px;
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow .2s, transform .2s;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  height: 160px;
+}
+
+.doc-card:hover {
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
+  transform: translateY(-2px);
+}
+
+.doc-card-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 隐藏内容区（仅标题卡片） */
+.doc-card-content {
+  display: none;
+}
+
+.doc-card-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  bottom: 12px;
+  left: 16px;
+  right: 16px;
+}
+
+.doc-card-status {
+  margin-right: auto;
+  font-size: 16px;
+  font-weight: 600;
+  color: #909399;
+}
+
+.doc-card-status.enabled {
+  color: #67c23a;
+}
+
+.doc-card-status.pending {
+  color: #e6a23c;
+}
+
+.doc-card-status.disabled {
+  color: #f56c6c;
+}
+
+.doc-card.enabled {
+  background: #f6ffed;
+}
+
+.doc-card.disabled {
+  background: #fff1f0;
+}
+
+.doc-card-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.doc-card-status-top {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background-color: #409eff; /* 默认蓝色 */
+}
+
+.doc-card-status-top.enabled {
+  background-color: #67c23a;
+}
+
+.doc-card-status-top.pending {
+  background-color: #e6a23c;
+}
+
+.doc-card-status-top.disabled {
+  background-color: #f56c6c;
+}
+
+.doc-card-upload-info {
+  position: absolute;
+  bottom: 12px;
+  left: 16px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+.upload-time {
+  margin-bottom: 2px;
+  font-weight: 500;
+  color: #606266;
+  font-size: 14px;
+}
+
+.upload-user {
+  opacity: 0.8;
+  color: #909399;
+}
+
+/* 文件类型图标 */
+.file-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.icon-word {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-pdf {
+  background-image: url('@/assets/PDF.png');
+  background-size: 50px 50px;
+}
+
+.icon-excel {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-ppt {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-txt {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-file {
+  background-image: url('@/assets/document.png');
+  background-size: 50px 50px;
+}
+</style>
diff --git a/src/views/ai/skill/aiKnowledge/knowledgeContentPreview.vue b/src/views/ai/skill/aiKnowledge/knowledgeContentPreview.vue
new file mode 100644
index 0000000..bdb94c8
--- /dev/null
+++ b/src/views/ai/skill/aiKnowledge/knowledgeContentPreview.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="kb-preview-page">
+    <div class="kb-preview-container" v-loading="loading">
+      <div class="kb-preview-left" :style="leftPaneStyle" :class="{ collapsed: !showSegments }">
+        <div class="kb-preview-title-row">
+          <span v-if="showSegments">文档信息</span>
+          <el-button type="text" @click="toggleLeftPane" style="margin-left:auto;">
+            <el-icon v-if="!showSegments"><ArrowRight /></el-icon>
+            <el-icon v-else><ArrowLeft /></el-icon>
+          </el-button>
+        </div>
+        <div class="kb-preview-basic">
+          <div><b>名称：</b>{{ props.doc.fileName }}</div>
+          <div><b>附件：</b> <el-button type="text" @click.stop="downloadAttachment(props.doc.filePath)">下载</el-button></div>
+          <ul class="kb-preview-attachments">
+            <!--            <li>-->
+            <!--              <span>{{ props.doc.filePath }}</span>-->
+
+            <!--            </li>-->
+          </ul>
+        </div>
+        <!--        <div class="kb-preview-detail">-->
+        <!--          <div><b>详细内容：</b></div>-->
+        <!--          <div class="kb-preview-content">{{ doc.content }}</div>-->
+        <!--        </div>-->
+      </div>
+      <div class="kb-preview-drag" v-if="showSegments" @mousedown="startDrag"></div>
+      <div class="kb-preview-right">
+        <div class="kb-preview-title kb-preview-title-row">
+          <span>内容分段</span>
+          <span class="kb-preview-segment-count">共{{ props.doc.chunkList?.length }}段</span>
+        </div>
+        <div class="kb-segments-flow">
+          <div class="kb-segment-flow-row" v-for="(seg, idx) in props.doc.chunkList" :key="idx">
+            <div class="kb-segment-flow-left">
+              <div v-if="idx < props.doc.chunkList?.length - 1" class="kb-segment-flow-line"></div>
+              <div class="kb-segment-flow-circle">{{ idx + 1 }}</div>
+            </div>
+            <div class="kb-segment-content">{{ seg }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
+import {
+  getKnowledgeContentFragmentList,
+} from "@/api/ai/skill/aiKnowledgeBase";
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const route = useRoute()
+const leftWidth = ref(400)
+const dragging = ref(false)
+const props = defineProps({
+  doc: {
+    type: [Object],
+    required: true
+  },
+});
+const loading = ref(false);
+
+const doc = ref({
+  id: 1,
+  title: '文档A',
+  content: '这是文档A的全部内容。分段1内容。分段2内容。分段3内容。',
+  status: 'enabled',
+  attachments: [
+    { name: '附件1.pdf', url: '/download/1' }
+  ]
+})
+const segments = ref([
+  '分段1内容',
+  '分段2内容\n第二行内容\n第三行内容\n第四行内容',
+  '分段3内容'
+])
+
+
+const showSegments = ref(true)
+const leftPaneStyle = computed(() => showSegments.value
+  ? { width: leftWidth.value + 'px', minWidth: '200px', maxWidth: '800px' }
+  : { width: '20px', minWidth: '10px', maxWidth: '120px', overflow: 'hidden' })
+
+// 添加切换左边面板的函数
+function toggleLeftPane() {
+  showSegments.value = !showSegments.value
+}
+
+function startDrag(e: MouseEvent) {
+  dragging.value = true
+  const startX = e.clientX
+  const startWidth = leftWidth.value
+  function onMouseMove(ev: MouseEvent) {
+    if (!dragging.value) return
+    const delta = ev.clientX - startX
+    leftWidth.value = Math.max(200, Math.min(600, startWidth + delta))
+  }
+  function onMouseUp() {
+    dragging.value = false
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+function downloadAttachment(url) {
+  window.open(url, '_blank')
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', () => {})
+  window.removeEventListener('mouseup', () => {})
+})
+
+
+/** 查询AI知识库列表 */
+const getChunkList = async () => {
+  loading.value = true;
+  const res = await getKnowledgeContentFragmentList({contentId:props.doc.knowledgeContentId});
+  // alert(JSON.stringify(res))
+  props.doc.chunkList = [];
+  res.data.forEach(fragment => {
+    props.doc.chunkList.push(fragment.fragmentText);
+  })
+  loading.value = false;
+}
+
+
+onMounted(() => {
+  // alert(JSON.stringify(props.doc))
+  let paramKnowledgeContentId =props.doc.knowledgeContentId
+  if(!props.doc.chunkList || props.doc.chunkList.length == 0){
+    getChunkList();
+  }else{
+
+  }
+
+});
+
+</script>
+
+<style scoped>
+.kb-preview-page {
+  padding: 0;
+}
+.kb-preview-container {
+  display: flex;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  height:100%;
+  overflow: hidden;
+}
+.kb-preview-left {
+  padding: 24px;
+  border-right: 2px solid #f0f1f2;
+  background: #fafbfc;
+  min-width: 200px;
+  max-width: 800px;
+  transition: all 0.3s ease; /* 添加平滑过渡效果 */
+  box-sizing: border-box;
+  overflow: hidden; /* 防止内容溢出 */
+}
+
+/* 收缩状态下的样式 */
+.kb-preview-left.collapsed .kb-preview-basic,
+.kb-preview-left.collapsed .kb-preview-detail {
+  display: none;
+}
+.kb-preview-drag {
+  width: 6px;
+  cursor: ew-resize;
+  background: #e4e7ed;
+  transition: background 0.2s;
+}
+.kb-preview-drag:hover {
+  background: #b3c0d1;
+}
+.kb-preview-right {
+  flex: 1;
+  padding: 24px;
+  overflow: auto;
+  min-width: 0; /* 确保flex子项能正确收缩 */
+}
+.kb-preview-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+.kb-preview-info {
+  font-size: 15px;
+  color: #333;
+}
+.kb-preview-content {
+  margin-top: 8px;
+  color: #666;
+  word-break: break-all;
+}
+.kb-segment-content {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 16px;
+  color: #333;
+  width: 100%;
+  height: auto; /* 改为auto，让高度自适应内容 */
+  min-height: 48px; /* 设置最小高度，与圆圈高度一致 */
+  box-sizing: border-box;
+  font-size: 15px;
+  line-height: 1.7;
+  word-break: break-all;
+  white-space: normal;
+  cursor: pointer;
+  flex: 1; /* 让内容区域占据剩余空间 */
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+}
+.kb-segment-ellipsis {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: normal;
+  cursor: pointer;
+}
+.kb-preview-attachments {
+  margin: 0 0 8px 0;
+  padding: 0;
+  list-style: none;
+}
+.kb-preview-attachments li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.kb-preview-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+.kb-preview-segment-count {
+  font-size: 18px;
+  color: #888;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+.kb-segments-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-top: 8px;
+}
+.kb-segment-flow-row {
+  display: flex;
+  align-items: stretch;
+  gap: 20px;
+  position: relative;
+  min-height: auto; /* 改为auto，让高度自适应 */
+}
+.kb-segment-flow-left {
+  position: relative;
+  min-width: 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%; /* 保持100%以填充整个行高度 */
+}
+.kb-segment-flow-circle {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border: 4px solid #409EFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  color: #409EFF;
+  font-weight: bold;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px #e0eaff33;
+  z-index: 1;
+  position: relative;
+  flex-shrink: 0; /* 防止圆圈被压缩 */
+}
+.kb-segment-flow-line {
+  position: absolute;
+  top: 48px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: calc(100% - 48px); /* 从圆圈底部开始，到行底部结束 */
+  background: #409EFF33;
+  border-radius: 2px;
+  z-index: 0;
+}
+.kb-segment-flow-row:last-child .kb-segment-flow-line {
+  display: none;
+}
+.kb-preview-basic {
+  margin-bottom: 24px;
+  font-size: 18px;
+}
+.kb-preview-detail {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/ai/skill/aiKnowledge/knowledgeContentUpload.vue b/src/views/ai/skill/aiKnowledge/knowledgeContentUpload.vue
new file mode 100644
index 0000000..d827418
--- /dev/null
+++ b/src/views/ai/skill/aiKnowledge/knowledgeContentUpload.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="kb-upload-page">
+    <div class="kb-upload-steps-bar">
+      <el-steps :active="step" finish-status="success" process-status="finish" align-center>
+        <el-step title="上传文档"/>
+        <el-step title="预览文档"/>
+        <!--        <el-step title="文档预览" />-->
+      </el-steps>
+    </div>
+    <div v-if="step === 0" class="kb-upload-step1">
+      <el-form :model="form" ref="formRef" label-width="100px" class="kb-upload-form">
+        <!--        <el-form-item label="标题" prop="title">-->
+        <!--          <el-input v-model="form.title" placeholder="请输入文档标题" style="width:90%" />-->
+        <!--        </el-form-item>-->
+
+        <el-form-item label="上传文档" prop="file">
+          <el-upload
+            single
+            drag
+            style="width:80%"
+            :action="uploadImgUrl"
+            :data="form"
+            :before-upload="beforeUpload"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :limit="limit"
+            ref="fileUploadRef"
+            :show-file-list="true"
+            :headers="headers"
+            :file-list="fileList"
+            :before-remove="beforeRemove"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传一个文档，支持<b style="color:#f56c6c">PDF、Word</b>等格式，最大<b
+              style="color:#f56c6c">10MB</b></div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;margin-top:24px;">
+        <el-button @click="onCancel">取消</el-button>
+        <el-button type="primary" @click="onNext" :loading="isProcessing" :disabled="isProcessing">下一步</el-button>
+      </div>
+    </div>
+    <div v-else class="kb-upload-step2">
+      <KnowledgeContentPreview :doc="previewDoc"/>
+      <div style="text-align:right;margin-top:24px;">
+        <el-button type="primary" @click="onCancel">关闭</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+import {ElMessage} from 'element-plus'
+import KnowledgeContentPreview from './knowledgeContentPreview.vue'
+import useUserStore from "@/store/modules/user";
+import {UploadRawFile} from 'element-plus';
+import {
+  vectorizeKnowledgeContent,
+  removeContentFile,
+} from "@/api/ai/skill/aiKnowledgeBase";
+import {getToken} from "@/utils/auth";
+
+const step = ref(0)
+const formRef = ref()
+const form = ref({title: '', file: null, knowledgeBaseId: null, modelId: null})
+const fileList = ref([])
+
+const fileUploadRef = ref<ElUploadInstance>();
+
+const number = ref(0)
+const uploadList = ref([])
+const dialogImageUrl = ref("")
+const dialogVisible = ref(false)
+const limit = ref(1)
+const hideUpload = ref(false)
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadImgUrl = ref(baseUrl + "/ai/aiKnowledgeBase/uploadKnowledgeContent") // 上传的图片服务器地址
+const headers = ref({
+  Authorization: "Bearer " + getToken(),
+  clientid: import.meta.env.VITE_APP_CLIENT_ID
+})
+
+const embeddingKnowledgeContentVo = ref({});
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'confirm', payload?: any): void
+}>()
+
+
+const segments = ref([
+  '分段1内容',
+  '分段2内容',
+  '分段3内容'
+])
+
+interface Options {
+  file: '';
+  fileName: string;
+  previews: any; // 预览数据
+  outputType: string;
+  visible: boolean;
+}
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const cropper = ref<any>({});
+//图片裁剪数据
+const options = reactive<Options>({
+  file: '',
+  outputType: 'png',
+  fileName: '',
+  previews: {},
+  visible: false
+});
+
+
+/** 上传预处理 */
+const beforeUpload = (file: UploadRawFile): any => {
+  // 校检文件类型
+  // if (props.fileType.length) {
+  //   const fileName = file.name.split('.');
+  //   const fileExt = fileName[fileName.length - 1];
+  //   const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+  //   if (!isTypeOk) {
+  //     proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+  //     return false;
+  //   }
+  // }
+  // 校检文件大小
+  // if (props.fileSize) {
+  //   const isLt = file.size / 1024 / 1024 < props.fileSize;
+  //   if (!isLt) {
+  //     proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+  //     return false;
+  //   }
+  // }
+  if (fileList.value.length >= limit.value) {
+    proxy?.$modal.msgError(`最多上传${limit.value}个文件`);
+    return false;
+  }
+
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file, fileList) => {
+  console.log('上传成功:', res)
+  if (res.code === 200) {
+    embeddingKnowledgeContentVo.value = res.data
+    embeddingKnowledgeContentVo.value.knowledgeBaseId = form.value.knowledgeBaseId;
+    embeddingKnowledgeContentVo.value.modelId = form.value.modelId;
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      knowledgeContentId: res.data.knowledgeContentId
+    });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    // emit('update:modelValue', listToString(fileList.value));
+    // emit('update:modelValue', fileList.value);
+    proxy?.$modal.closeLoading();
+  }
+};
+
+/** 删除预处理 */
+const beforeRemove =  (file: UploadRawFile) => {
+  let knowledgeContentId = file.knowledgeContentId;
+  return new Promise((resolve, reject) => {
+    // 模拟确认对话框
+    ElMessageBox.confirm(
+      `确定删除 ${file.name} ？`,
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    ).then(() => {
+      // 模拟API调用
+      removeContentFile(knowledgeContentId)
+        .then(() => {
+          resolve(true); // 允许删除
+        })
+        .catch(() => {
+          resolve(false); // 阻止删除
+        });
+    }).catch(() => {
+      // 用户点击取消，阻止删除
+      resolve(false);
+    });
+  });
+}
+
+
+// 删除文件
+const handleDelete = (index: number) => {
+  let ossId = fileList.value[index].ossId;
+  // delOss(ossId);
+  fileList.value.splice(index, 1);
+  // emit('update:modelValue', listToString(fileList.value));
+};
+
+
+// 上传失败回调
+const handleUploadError = (error: any) => {
+  console.error('上传失败:', error)
+
+  // 添加到上传记录
+  const record = {
+    fileName: '上传失败',
+    fileSize: '未知',
+    uploadTime: new Date().toLocaleString(),
+    status: 'error'
+  }
+  // uploadRecords.value.unshift(record)
+
+  ElMessage.error('文件上传失败')
+}
+
+
+const previewDoc = ref(null)
+
+function handleFileChange(file) {
+  form.value.file = file.raw
+  fileList.value = [file]
+}
+
+const isProcessing = ref(false)
+
+function onNext() {
+  // if (!form.value.title) return ElMessage.warning('请输入文档标题')
+  if (fileList.value.length === 0) return ElMessage.warning('请上传文档')
+  // 实际应上传并解析文档，获取分段内容
+  // step.value = 1
+  processNext();
+}
+
+async function processNext() {
+  try {
+    isProcessing.value = true
+    proxy?.$modal.loading('正在向量化文档，请稍候...')
+
+    // 如果有可用的向量化参数，则调用后端处理（可选）
+    if (embeddingKnowledgeContentVo.value && Object.keys(embeddingKnowledgeContentVo.value).length > 0) {
+      await vectorizeKnowledgeContent(embeddingKnowledgeContentVo.value)
+      previewDoc.value = embeddingKnowledgeContentVo.value
+      step.value = 1
+      ElMessage.success('向量化完成')
+    } else {
+      ElMessage.error('处理失败，请重试')
+    }
+
+  } catch (err) {
+    console.error(err)
+  } finally {
+    proxy?.$modal.closeLoading()
+    isProcessing.value = false
+  }
+}
+
+function onCancel() {
+  // TODO: 返回或关闭页面
+  ElMessage.info('已取消')
+  emit('cancel')
+}
+
+function onConfirm() {
+}
+
+
+watch([() => form.value.title, segments], () => {
+  previewDoc.value.title = form.value.title
+  previewDoc.value.segments = segments.value
+})
+
+
+onMounted(() => {
+  let paramKnowledgeBaseId = proxy.$route.params?.knowledgeBaseId
+  form.value.knowledgeBaseId = paramKnowledgeBaseId;
+  let paramModelId = proxy.$route.params?.modelId;
+  form.value.modelId = paramModelId;
+});
+
+</script>
+
+<style>
+.kb-upload-page {
+  height: 90%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.kb-upload-step1 {
+  padding: 32px 24px 0 24px;
+  width: 100%;
+  height: 80%;
+  margin: 0 auto;
+}
+
+.kb-upload-form {
+  padding: 32px 24px 0 24px;
+  width: 70%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.kb-upload-form .el-form-item__content {
+  width: 100%;
+}
+
+.kb-upload-form .el-input {
+  width: 100%;
+}
+
+.kb-upload-form .el-upload {
+  width: 100%;
+}
+
+.kb-upload-preview-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.kb-upload-segment-content {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.kb-upload-steps-bar {
+  background: #f5f7fa;
+  padding: 32px 0 24px 0;
+  margin-bottom: 32px;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 2px 8px #f0f1f2;
+}
+
+.kb-upload-steps-bar .el-steps {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.kb-upload-steps-bar .el-step__icon {
+  width: 120px !important;
+  height: 120px !important;
+  font-size: 40px !important;
+  border-width: 10px !important;
+
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__icon,
+.kb-upload-steps-bar .el-step.is-success .el-step__icon {
+  border-color: #409EFF !important;
+  border-width: 10px !important;
+  background: #409EFF !important;
+  color: #fff !important;
+  box-shadow: 0 0 16px #409EFF55;
+}
+
+.kb-upload-steps-bar .el-step__title {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__title,
+.kb-upload-steps-bar .el-step.is-success .el-step__title {
+  color: #409EFF !important;
+  font-weight: bold;
+}
+
+.kb-upload-steps-bar .el-step__line {
+  margin-top: 50px;
+  height: 10px !important;
+  border-radius: 3px;
+}
+
+.kb-upload-steps-bar .el-step.is-success .el-step__line {
+  background: #409EFF !important;
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__line {
+  background: #409EFF !important;
+}
+
+.kb-upload-steps-bar .el-step.is-wait .el-step__icon {
+  border-color: #e0e0e0 !important;
+  border-width: 3px !important;
+  background: #f0f1f2 !important;
+  color: #bbb !important;
+}
+
+.kb-upload-steps-bar .el-step.is-wait .el-step__line {
+  background: #e0e0e0 !important;
+}
+
+.kb-upload-steps-bar .el-step.is-success .el-step__icon {
+  background: #409EFF !important; /* 你想要的蓝色 */
+  border-color: #409EFF !important;
+  color: #fff !important;
+}
+
+.kb-upload-step2 {
+  width: 100%;
+  height: 100%;
+}
+
+.el-dialog__body {
+  height: 100% !important;
+  min-height: 100% !important;
+  padding: 0;
+}
+</style>
diff --git a/src/views/ai/skill/aiSql/index.vue b/src/views/ai/skill/aiSql/index.vue
new file mode 100644
index 0000000..5959e7a
--- /dev/null
+++ b/src/views/ai/skill/aiSql/index.vue
@@ -0,0 +1,341 @@
+<template>
+  <el-form :model="form" label-width="100px" class="dataset-form" style="margin-bottom: 0;">
+    <div class="form-row">
+      <el-form-item label="数据集名称">
+        <el-input v-model="form.name" placeholder="请输入数据集名称" />
+      </el-form-item>
+      <el-form-item label="数据源">
+        <el-select v-model="form.datasource" placeholder="请选择数据源" style="width: 240px;">
+          <el-option v-for="ds in datasourceList" :key="ds.value" :label="ds.label" :value="ds.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否分页">
+        <el-switch v-model="form.pagination" />
+        <el-tooltip content="开启分页后，查询结果将按页返回，适用于大数据量场景。" placement="top">
+          <el-icon style="margin-left:4px;cursor:pointer;"><QuestionFilled /></el-icon>
+        </el-tooltip>
+      </el-form-item>
+    </div>
+    <el-form-item label="查询SQL" class="sql-form-item">
+      <div style="display: flex; align-items: flex-start; width: 100%;">
+        <el-input
+          type="textarea"
+          v-model="form.sql"
+          :rows="3"
+          placeholder="请输入查询SQL"
+          style="flex:1"
+        />
+        <el-button type="primary" @click="showAiDialog = true" style="margin-left:8px;">
+          <svg width="20" height="20" viewBox="0 0 1024 1024"><circle cx="512" cy="512" r="512" fill="#409EFF"/><text x="50%" y="60%" text-anchor="middle" fill="#fff" font-size="400" font-family="Arial" dy=".3em">AI</text></svg>
+        </el-button>
+      </div>
+      <div class="sql-desc">
+        <div class="sql-tips">
+          <div>• 请填写标准SQL，支持参数占位符</div>
+          <div>• 参数占位符格式：#{参数名}，如：#{year}</div>
+          <div>• 支持SELECT、FROM、WHERE等标准SQL语法</div>
+        </div>
+        <el-button type="primary" size="small" @click="parseSql" style="margin-left:8px;">查询解析</el-button>
+      </div>
+    </el-form-item>
+  </el-form>
+
+  <el-tabs v-model="activeTab" style="margin: 16px 0 0 10px;">
+    <el-tab-pane label="列表字段" name="fields">
+      <div style="margin-bottom:8px;display:flex;align-items:center;">
+        <el-button type="danger" size="small" :disabled="!multipleSelection.length" @click="batchRemoveFields">批量删除</el-button>
+      </div>
+      <el-table
+        :data="fields"
+        style="width: 100%"
+        border
+        ref="fieldsTableRef"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column prop="name" label="字段名" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.name" size="small" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="text" label="字段文本" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.text" size="small" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="字段类型" min-width="100">
+          <template #default="scope">
+            <el-select v-model="scope.row.type" size="small" style="width:100px">
+              <el-option label="文本" value="varchar" />
+              <el-option label="数值" value="int" />
+              <el-option label="日期" value="date" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="order" label="排序" min-width="80">
+          <template #default="scope">
+            <el-input-number v-model="scope.row.order" :min="1" size="small" style="width:80px" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="dictCode" label="字典编码" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.dictCode" size="small" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tab-pane>
+    <el-tab-pane label="参数字段" name="params">
+      <div style="margin-bottom:8px;display:flex;align-items:center;">
+        <el-button type="primary" size="small" @click="addParam">新增参数</el-button>
+        <el-button type="danger" size="small" :disabled="!multipleParamSelection.length" @click="batchRemoveParams" style="margin-left:8px;">批量删除</el-button>
+      </div>
+      <el-table
+        :data="params"
+        style="width: 100%"
+        border
+        ref="paramsTableRef"
+        @selection-change="handleParamSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column prop="param" label="参数" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.param" size="small" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="text" label="参数文本" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.text" size="small" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" min-width="100">
+          <template #default="scope">
+            <el-select v-model="scope.row.type" size="small" style="width:100px">
+              <el-option label="文本" value="varchar" />
+              <el-option label="数值" value="int" />
+              <el-option label="日期" value="date" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="defaultValue" label="默认值" min-width="120">
+          <template #default="scope">
+            <el-input v-model="scope.row.defaultValue" size="small" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tab-pane>
+    <el-tab-pane label="数据预览" name="preview">
+      <div style="display:flex;align-items:center;margin-bottom:8px;">
+        <el-button type="primary" size="small" @click="fetchPreviewData">刷新预览</el-button>
+        <span style="margin-left:8px;padding:2px 14px;background:#ecf5ff;color:#409EFF;font-weight:bold;border-radius:4px;font-size:14px;">仅预览前10条数据</span>
+      </div>
+      <el-table :data="previewData" style="width: 100%" border v-if="previewData.length">
+        <el-table-column v-for="col in previewColumns" :key="col.prop" :prop="col.prop" :label="col.label" />
+      </el-table>
+      <div v-else style="color:#888;text-align:center;padding:24px 0;">暂无数据</div>
+    </el-tab-pane>
+  </el-tabs>
+
+  <div style="text-align:right;margin-top:24px;">
+    <el-button @click="onClose">关闭</el-button>
+    <el-button type="primary" @click="onSave">保存</el-button>
+  </div>
+
+  <!-- AI生成SQL弹窗 -->
+  <el-dialog v-model="showAiDialog" title="AI生成SQL" width="800px">
+    <el-input
+      v-model="aiPrompt"
+      type="textarea"
+      placeholder="请输入需求描述，如：查询年龄大于35的用户信息，包括所在部门的名称"
+      style="margin-bottom:12px;"
+    />
+    <el-button type="primary" @click="generateSql" :loading="aiLoading">生成SQL</el-button>
+    <el-input
+      v-model="aiSql"
+      type="textarea"
+      :rows="4"
+      readonly
+      style="margin-top:12px;"
+    />
+    <div style="text-align:right;margin-top:8px;">
+      <el-button @click="showAiDialog=false">取消</el-button>
+      <el-button type="primary" @click="replaceSql">替换到查询SQL</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import {aiSqlAsk} from "@/api/ai/skill/aiChat/index";
+
+const form = reactive({
+  name: '',
+  datasource: '',
+  sql: '',
+  pagination: true
+})
+const datasourceList = ref([
+  { label: '数据源1', value: 'ds1' },
+  { label: '数据源2', value: 'ds2' }
+])
+
+const showAiDialog = ref(false)
+const aiPrompt = ref('')
+const aiSql = ref('')
+const aiLoading = ref(false)
+
+const activeTab = ref('fields')
+const fields = ref<any[]>([])
+const params = ref<any[]>([])
+const multipleSelection = ref<any[]>([])
+const fieldsTableRef = ref()
+const multipleParamSelection = ref<any[]>([])
+const paramsTableRef = ref()
+
+const previewData = ref<any[]>([])
+const previewColumns = ref<any[]>([])
+
+const generateSql = async () => {
+  if (!aiPrompt.value.trim() || aiLoading.value) return
+
+  aiLoading.value = true
+
+  // let sql1 = "```sql\nSELECT \n user_id,\n tenant_id,\n dept_id,\n user_name,\n nick_name,\n user_type,\n email,\n phonenumber,\n sex,\n avatar,\n password,\n status,\n del_flag,\n login_ip,\n login_date,\n create_dept,\n create_by,\n create_time,\n update_by,\n update_time,\n remark\nFROM \n sys_user WITH(NOLOCK)\nWHERE \n del_flag = '0'\n```";
+
+  // sql1 =sql1.replace(/\s+/g, ' ');
+  // aiSql.value = sql1;
+  // return;
+
+  try {
+    const response = await aiSqlAsk({prompt:aiPrompt.value})
+    let sql  = JSON.stringify(response)
+    // sql = sql.replaceAll("\"","");
+    // sql = sql.substring(String.prototype.toLowerCase(sql).indexOf("select"));
+// 检查首尾是否是双引号或单引号
+    if ((sql.startsWith("\"") && sql.endsWith("\"")) ||
+      (sql.startsWith("'") && sql.endsWith("'"))) {
+      sql =  sql.substring(1, sql.length - 1);
+    }
+
+    aiSql.value = sql;
+    console.log(1)
+    console.log(response)
+    console.log(2)
+
+  } catch (error) {
+    console.log("Error:"+error)
+  } finally {
+    aiLoading.value = false
+  }
+}
+
+
+function replaceSql() {
+  form.sql = aiSql.value
+  showAiDialog.value = false
+}
+function parseSql() {
+  if (!form.sql) return ElMessage.warning('请先填写SQL')
+  fields.value = [
+    { name: 'id', text: '编号', type: 'int', order: 1, dictCode: '' },
+    { name: 'name', text: '名称', type: 'varchar', order: 2, dictCode: '' }
+  ]
+  params.value = [
+    { param: 'year', text: '年份', type: 'int', defaultValue: 2023 }
+  ]
+  ElMessage.success('解析成功')
+}
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val
+}
+function batchRemoveFields() {
+  if (!multipleSelection.value.length) return
+  fields.value = fields.value.filter(row => !multipleSelection.value.includes(row))
+  multipleSelection.value = []
+}
+function handleParamSelectionChange(val: any[]) {
+  multipleParamSelection.value = val
+}
+function batchRemoveParams() {
+  if (!multipleParamSelection.value.length) return
+  params.value = params.value.filter(row => !multipleParamSelection.value.includes(row))
+  multipleParamSelection.value = []
+}
+function addParam() {
+  params.value.push({ param: '', text: '', type: '', defaultValue: '' })
+}
+function onSave() {
+  ElMessage.success('保存成功')
+}
+function onClose() {
+  ElMessage.info('已关闭')
+}
+
+function fetchPreviewData() {
+  // 模拟数据预览，实际可根据SQL和参数请求后端
+  if (!fields.value.length) {
+    previewData.value = []
+    previewColumns.value = []
+    return
+  }
+  // 构造表头
+  previewColumns.value = fields.value.map(f => ({ prop: f.name, label: f.text }))
+  // 构造10条模拟数据
+  previewData.value = Array.from({ length: 10 }, (_, i) => {
+    const row: any = {}
+    fields.value.forEach(f => {
+      if (f.type === 'int') row[f.name] = i + 1
+      else if (f.type === 'date') row[f.name] = '2023-01-01'
+      else row[f.name] = f.text + (i + 1)
+    })
+    return row
+  })
+}
+
+// 默认进入时预览
+if (activeTab.value === 'preview') fetchPreviewData()
+
+watch(activeTab, (val) => {
+  if (val === 'preview') fetchPreviewData()
+})
+</script>
+
+<style scoped>
+.dataset-form {
+  max-width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  padding: 16px 24px 0 24px;
+  border-radius: 8px;
+}
+.form-row {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  margin-bottom: 0;
+}
+.sql-form-item {
+  margin-bottom: 0;
+}
+.sql-desc {
+  color: #888;
+  font-size: 12px;
+  margin-top: 4px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.sql-tips {
+  flex: 1;
+}
+.sql-tips div {
+  line-height: 1.5;
+  margin-bottom: 2px;
+}
+.sql-desc .el-button {
+  margin-left: 8px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+</style>