From 71c12a61d4c25a5a29e8597d57e2e2030ebeddc2 Mon Sep 17 00:00:00 2001
From: BBIT-Kai <2911862937@qq.com>
Date: Thu, 18 Sep 2025 17:09:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8A=A5=E8=A1=A8=E3=80=81?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/apps/web-antd/src/api/llm/report-bot.ts   |  26 +
 vue/apps/web-antd/src/api/llm/report-data.ts  |  44 ++
 .../web-antd/src/api/llm/service-knowledge.ts |  44 ++
 vue/apps/web-antd/src/api/llm/service.ts      |  29 +
 .../src/views/llm/report/report-bot/index.vue | 282 ++++++++++
 .../views/llm/report/report-chat/index.vue    | 510 ++++++++++++++++++
 .../views/llm/report/report-data/index.vue    | 246 +++++++++
 .../llm/report/report-knowledge/index.vue     | 211 ++++++++
 .../views/llm/service/service-bot/index.vue   | 285 ++++++++++
 .../views/llm/service/service-chat/index.vue  | 309 +++++++++++
 .../llm/service/service-knowledge/index.vue   | 211 ++++++++
 .../views/llm/service/service-mem/index.vue   |   5 +
 12 files changed, 2202 insertions(+)
 create mode 100644 vue/apps/web-antd/src/api/llm/report-bot.ts
 create mode 100644 vue/apps/web-antd/src/api/llm/report-data.ts
 create mode 100644 vue/apps/web-antd/src/api/llm/service-knowledge.ts
 create mode 100644 vue/apps/web-antd/src/api/llm/service.ts
 create mode 100644 vue/apps/web-antd/src/views/llm/report/report-bot/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/report/report-chat/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/report/report-data/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/report/report-knowledge/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/service/service-bot/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/service/service-chat/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/service/service-knowledge/index.vue
 create mode 100644 vue/apps/web-antd/src/views/llm/service/service-mem/index.vue

diff --git a/vue/apps/web-antd/src/api/llm/report-bot.ts b/vue/apps/web-antd/src/api/llm/report-bot.ts
new file mode 100644
index 0000000..3f1c5ba
--- /dev/null
+++ b/vue/apps/web-antd/src/api/llm/report-bot.ts
@@ -0,0 +1,26 @@
+import { pyRequestClient } from '#/api/request';
+
+/**
+ * 保存智能体name: str
+    available_report_tables:list[str]
+    description: str
+    role: str
+    service: str
+    welcome_words: str
+    title: str
+ */
+export async function saveBot(data: {
+  available_kn_bases: string[];
+  available_module: string;
+  available_report_tables: string[];
+  description: string;
+  id?: string;
+  name: string;
+  report_id: string;
+  role: string;
+  service: string;
+  title: string;
+  welcome_words: string;
+}) {
+  return pyRequestClient.post('/llm/saveBot', data);
+}
diff --git a/vue/apps/web-antd/src/api/llm/report-data.ts b/vue/apps/web-antd/src/api/llm/report-data.ts
new file mode 100644
index 0000000..d84700c
--- /dev/null
+++ b/vue/apps/web-antd/src/api/llm/report-data.ts
@@ -0,0 +1,44 @@
+import { pyRequestClient } from '#/api/request';
+/**
+ * 获取表列表
+ */
+export async function refreshTableList() {
+  return pyRequestClient.get('/llm/tableList');
+}
+
+/**
+ * 获取字段列表
+ */
+export async function refreshFieldList(tableId: string) {
+  return pyRequestClient.get('/llm/fieldList', {
+    params: {
+      tableId,
+    },
+  });
+}
+
+/**
+ * 新增表
+ */
+export async function addTable(data: { description: string; name: string }) {
+  return pyRequestClient.post('/llm/addTable', data);
+}
+
+/**
+ * 新增字段
+ */
+export async function addField(data: {
+  description?: string;
+  is_active?: boolean;
+  name: string;
+  table_id: string;
+  type: string;
+}) {
+  return pyRequestClient.post('/llm/addField', {
+    name: data.name,
+    type: data.type,
+    description: data.description ?? '', // 如果没填就传空字符串
+    is_active: data.is_active ?? false, // 如果没勾选就传 false
+    table_id: data.table_id,
+  });
+}
diff --git a/vue/apps/web-antd/src/api/llm/service-knowledge.ts b/vue/apps/web-antd/src/api/llm/service-knowledge.ts
new file mode 100644
index 0000000..49900ff
--- /dev/null
+++ b/vue/apps/web-antd/src/api/llm/service-knowledge.ts
@@ -0,0 +1,44 @@
+import { pyRequestClient } from '#/api/request';
+
+/**
+ * 获取知识库列表
+ */
+export async function refreshKnowledgeBaseListForService() {
+  return pyRequestClient.get('/llm/knowledgeBaseListForService');
+}
+
+/**
+ * 获取知识列表
+ */
+export async function refreshKnowledgeList(knowledgeBaseId: string) {
+  return pyRequestClient.get('/llm/knowledgeList', {
+    params: {
+      knowledgeBaseId,
+    },
+  });
+}
+
+/**
+ * 新增知识库
+ */
+export async function addKnowledgeBase(data: {
+  description: string;
+  name: string;
+}) {
+  return pyRequestClient.post('/llm/addKnowledgeBase', data);
+}
+
+/**
+ * 新增知识
+ */
+export async function addKnowledge(data: {
+  is_active?: boolean;
+  knowledge_base_id: string;
+  text: string;
+}) {
+  return pyRequestClient.post('/llm/addKnowledge', {
+    text: data.text,
+    is_active: data.is_active ?? false, // 默认 false
+    knowledge_base_id: data.knowledge_base_id,
+  });
+}
diff --git a/vue/apps/web-antd/src/api/llm/service.ts b/vue/apps/web-antd/src/api/llm/service.ts
new file mode 100644
index 0000000..f373558
--- /dev/null
+++ b/vue/apps/web-antd/src/api/llm/service.ts
@@ -0,0 +1,29 @@
+import { pyRequestClient } from '#/api/request';
+/**
+ * 获取AI列表
+ */
+export async function getAIBotListForService() {
+  return pyRequestClient.get('/llm/aiListForService');
+}
+
+/**
+ * 获取对话列表
+ */
+export async function getSessionsForService() {
+  return pyRequestClient.get('/llm/sessionsForService');
+}
+
+/**
+ * 聊天
+ */
+export async function chatWithService(
+  aiId: string,
+  sessionId: null | string,
+  userInput: string,
+) {
+  return pyRequestClient.post('/llm/chatForService', {
+    aiId,
+    sessionId,
+    userInput,
+  });
+}
diff --git a/vue/apps/web-antd/src/views/llm/report/report-bot/index.vue b/vue/apps/web-antd/src/views/llm/report/report-bot/index.vue
new file mode 100644
index 0000000..48bbd13
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/report/report-bot/index.vue
@@ -0,0 +1,282 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as api from '#/api';
+
+// ---------------- 左侧智能体列表 ----------------
+interface AgentItem {
+  id: string;
+  title: string;
+  description: string;
+  welcome_words: string;
+  name: string;
+  role: string;
+  service: string;
+  available_report_tables: string[];
+}
+const agentList = ref<AgentItem[]>([]);
+const selectedAgent = ref<AgentItem | null>(null);
+
+// 页面加载
+onMounted(() => {
+  loadAgentList();
+});
+async function loadAgentList() {
+  // TODO: 调用接口获取智能体列表
+  agentList.value = (await api.getAIReportList?.()) || [];
+}
+async function loadAgent(agent: AgentItem) {
+  selectedAgent.value = agent;
+
+  if (!agentDetailFormApi) return;
+
+  // 1️⃣ 异步获取备选表格
+  const tableList = await api.refreshTableList();
+  availableTablesOptions.value = tableList.map(
+    (t: { id: string; name: string }) => ({
+      label: t.name, // 页面显示文字
+      value: t.id, // 对应值
+    }),
+  );
+
+  // 2️⃣ 填充表单，同时 available_report_tables 会对应选中项
+  agentDetailFormApi.setValues?.({
+    name: agent.name,
+    title: agent.title,
+    description: agent.description,
+    welcome_words: agent.welcome_words,
+    role: agent.role,
+    service: agent.service,
+    available_report_tables: agent.available_report_tables || [], // ✅ 默认选中
+  });
+}
+
+const availableTablesOptions = ref([]);
+// ---------------- 新增智能体弹窗 ----------------
+const [AgentDrawer, agentDrawerApi] = useVbenDrawer({
+  title: '新增智能体',
+  onCancel() {
+    agentFormApi.resetForm?.();
+    agentDrawerApi.close();
+  },
+  onConfirm: async () => {
+    const values = await agentFormApi.getValues();
+    // TODO: 调用新增智能体接口
+    saveAgent(values);
+    loadAgentList();
+    agentFormApi.resetForm?.();
+    agentDrawerApi.close();
+  },
+});
+
+const [AgentForm, agentFormApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'title',
+      label: '智能体标题',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体标题' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '描述',
+      componentProps: { placeholder: '请输入描述' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'welcome_words',
+      label: '欢迎词',
+      rules: 'required',
+      componentProps: { placeholder: '请输入欢迎词', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '智能体名字',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体名字', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'role',
+      label: '智能体性格',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体性格特点', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'service',
+      label: '工作',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体负责的业务板块', rows: 3 },
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'aaa',
+        options: availableTablesOptions,
+      },
+      fieldName: 'available_report_tables',
+      label: '可用数据源',
+      rules: 'selectRequired',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// ---------------- 右侧智能体表单 ----------------
+
+const [AgentDetailForm, agentDetailFormApi] = useVbenForm({
+  layout: 'vertical',
+  submitOnEnter: true,
+  showDefaultActions: true,
+  resetButtonOptions: { show: false },
+  handleSubmit: saveAgent,
+  submitButtonOptions: { content: '保存' },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'title',
+      label: '智能体标题',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体标题' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '描述',
+      componentProps: { placeholder: '请输入描述' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'welcome_words',
+      label: '欢迎词',
+      rules: 'required',
+      componentProps: { placeholder: '请输入欢迎词', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '智能体名字',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体名字', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'role',
+      label: '智能体性格',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体性格特点', rows: 3 },
+    },
+    {
+      component: 'Input',
+      fieldName: 'service',
+      label: '工作',
+      rules: 'required',
+      componentProps: { placeholder: '请输入智能体负责的业务板块', rows: 3 },
+    },
+    {
+      component: 'CheckboxGroup',
+      componentProps: {
+        name: 'available_report_tables',
+        options: availableTablesOptions,
+      },
+      fieldName: 'available_report_tables',
+      label: '可用数据源',
+      rules: 'selectRequired',
+    },
+  ],
+});
+
+async function saveAgent(values: Record<string, any>) {
+  // 这里做一个类型转换，把 Record<string, any> 转成 saveReportBot 需要的结构
+  const payload: {
+    available_kn_bases: string[];
+    available_module: string;
+    available_report_tables: string[];
+    description: string;
+    id?: string;
+    name: string;
+    role: string;
+    service: string;
+    title: string;
+    welcome_words: string;
+  } = {
+    id: selectedAgent.value?.id,
+    name: values.name,
+    title: values.title,
+    description: values.description,
+    welcome_words: values.welcome_words,
+    role: values.role,
+    service: values.service,
+    available_report_tables: values.available_report_tables || [],
+    available_kn_bases: [],
+    available_module: 'report',
+  };
+
+  // 调用 API 保存
+  await api.saveBot(payload);
+  message.success('保存成功');
+  // 刷新列表
+  loadAgentList();
+}
+
+async function agentDrawerOpen() {
+  const tableList = await api.refreshTableList();
+  availableTablesOptions.value = tableList.map(
+    (t: { id: string; name: string }) => ({
+      label: t.name, // 页面显示文字
+      value: t.id, // 对应值
+    }),
+  );
+  agentDrawerApi.open();
+  selectedAgent.value = null;
+}
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧智能体列表 -->
+    <div class="flex w-64 flex-col border-r bg-white p-2">
+      <Button type="primary" class="mb-2" @click="agentDrawerOpen()">
+        新增智能体
+      </Button>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="agent in agentList"
+          :key="agent.id"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold':
+              selectedAgent && selectedAgent.id === agent.id,
+          }"
+          @click="loadAgent(agent)"
+        >
+          <div class="truncate font-bold">{{ agent.title }}</div>
+          <div class="truncate text-sm text-gray-400">
+            {{ agent.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧智能体表单 -->
+    <div class="flex flex-1 flex-col p-4">
+      <div v-if="selectedAgent" class="w-2/3">
+        <AgentDetailForm />
+      </div>
+    </div>
+
+    <!-- 新增智能体弹窗 -->
+    <AgentDrawer>
+      <AgentForm />
+    </AgentDrawer>
+  </div>
+</template>
diff --git a/vue/apps/web-antd/src/views/llm/report/report-chat/index.vue b/vue/apps/web-antd/src/views/llm/report/report-chat/index.vue
new file mode 100644
index 0000000..9f6d153
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/report/report-chat/index.vue
@@ -0,0 +1,510 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { HotTable } from '@handsontable/vue3';
+import { message } from 'ant-design-vue';
+// 报表相关
+import { registerAllModules } from 'handsontable/registry';
+import MarkdownIt from 'markdown-it';
+import { markdownItTable } from 'markdown-it-table';
+
+import * as api from '#/api';
+
+import 'handsontable/styles/handsontable.min.css';
+import 'handsontable/styles/ht-theme-main.min.css';
+import 'handsontable/styles/ht-theme-horizon.min.css';
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+}).use(markdownItTable);
+
+// 输入框内容
+const inputMessage = ref('');
+
+// SQL语句
+const sqlQuery = ref({
+  reportId: '',
+  sql: '',
+});
+
+// 对话列表
+const reports = ref<{ createAt: string; id: string; title: string }[]>([]);
+
+// AI 实体
+interface AgentItem {
+  id: string;
+  title: string;
+  welcome_words: string;
+}
+
+// AI列表
+const aiOptions = ref<AgentItem>();
+// 租户列表
+const companyOptions = ref<{ id: string; name: string }[]>([]);
+
+// 当前选中的AI
+const selectedAI = ref<AgentItem | null>(null);
+// 当前选中的租户
+const selectedCompany = ref<null | {
+  id: string;
+  name: string;
+}>(null);
+// 当前选中的对话
+const currentReport = ref<null | string>(null);
+
+// 聊天记录
+const messages = reactive<{ content: string; sender: 'ai' | 'user' }[]>([]);
+
+// 计算第一次聊天状态
+const isInitial = computed(() => messages.length === 0);
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.ctrlKey) {
+    // Ctrl + Enter 换行
+    const target = e.target as HTMLTextAreaElement;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    target.value = `${target.value.slice(0, Math.max(0, start))}\n${target.value.slice(Math.max(0, end))}`;
+    target.selectionStart = target.selectionEnd = start + 1;
+    inputMessage.value = target.value;
+  } else {
+    // Enter 发送
+    sendMessage();
+  }
+}
+
+function autoResize(e: Event) {
+  const target = e.target as HTMLTextAreaElement;
+  if (!target) return;
+  target.style.height = 'auto';
+  target.style.height = `${target.scrollHeight}px`;
+}
+
+// 滚动到底部
+function scrollToBottom() {
+  const container = document.querySelector('#chat-container');
+  if (container)
+    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+}
+
+// 获取对话列表
+async function getReports() {
+  reports.value = await api.getReports();
+}
+
+// 按钮状态
+const isSaving = ref(false);
+const saved = ref(false);
+const buttonText = ref('保存');
+const canSave = ref(true); // 控制 SQL 改变后才能再保存
+
+// SQL变化时，允许再次保存
+watch(
+  () => sqlQuery.value.sql,
+  () => {
+    saved.value = false;
+    canSave.value = true;
+    buttonText.value = '保存';
+  },
+);
+
+async function saveReport() {
+  if (isSaving.value || !canSave.value) return;
+
+  isSaving.value = true;
+  canSave.value = false;
+  buttonText.value = '正在保存...';
+
+  try {
+    await api.saveReport({
+      reportId: sqlQuery.value.reportId,
+    });
+
+    // 保存成功
+    saved.value = true;
+    buttonText.value = '保存成功';
+    getReports();
+  } catch (error) {
+    console.error(error);
+    buttonText.value = '保存失败';
+    canSave.value = true;
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+// 点击对话加载SQL与新对话
+async function loadConversation(id: string) {
+  createNewConversation();
+  currentReport.value = id;
+  messages.splice(0);
+  const report = await api.getReport(id);
+  sqlQuery.value = {
+    reportId: id,
+    sql: report.sql,
+  };
+  initTableData(report.tableData);
+}
+
+// 发送消息
+async function sendMessage() {
+  const content = inputMessage.value.trim();
+  if (!content) return;
+
+  messages.push({ type: 'human', content });
+  inputMessage.value = '';
+
+  nextTick(() => scrollToBottom());
+
+  // 发送消息
+  const answer = await api.chatWithReport(
+    selectedAI.value?.id || '',
+    selectedCompany.value?.id || '',
+    currentReport.value,
+    content,
+  );
+  initConversation(answer);
+  nextTick(() => scrollToBottom());
+  // 焦点回到输入框
+  const textarea = document.querySelector(
+    'textarea[placeholder="输入消息开始聊天..."], textarea[placeholder="输入消息..."]',
+  ) as HTMLTextAreaElement;
+  if (textarea) {
+    textarea.focus();
+  }
+}
+
+// 新建聊天
+function createNewConversation() {
+  currentReport.value = null;
+  messages.splice(0);
+  sqlQuery.value = {
+    reportId: '',
+    sql: '',
+  };
+  tableData.value = [];
+  colHeaders.value = [];
+  columns.value = [];
+  tableKey.value += 1;
+}
+
+// 获取AI列表
+const fetchOptions = async () => {
+  try {
+    aiOptions.value = await api.getAIReportList();
+    if (aiOptions.value.length > 0 && aiOptions.value[0] !== undefined) {
+      selectedAI.value = aiOptions.value[0]!;
+    }
+  } catch (error) {
+    console.error('获取下拉选项失败:', error);
+  }
+};
+// 页面加载时调用接口
+onMounted(() => {
+  fetchOptions();
+  getReports();
+  getCompany();
+});
+async function getCompany() {
+  companyOptions.value = await api.getCompany();
+  if (companyOptions.value.length > 0) {
+    selectedCompany.value = companyOptions.value[0]!;
+  }
+}
+
+// 注册所有模块
+registerAllModules();
+
+// 初始化对话
+function initConversation(answer: any) {
+  currentReport.value = answer.reportId;
+  // 更新对话列表的时间和标题
+  sqlQuery.value = {
+    reportId: answer.reportId,
+    sql: answer.sql,
+  };
+  messages.push({ type: 'ai', content: answer.content });
+  // 恢复按钮状态
+  buttonText.value = '保存';
+  saved.value = false;
+  canSave.value = true;
+
+  initTableData(answer.tableData);
+}
+
+function initTableData(res: any) {
+  // 动态生成列头
+  if (res.length > 0) {
+    colHeaders.value = Object.keys(res[0]);
+    columns.value = colHeaders.value.map((key) => {
+      if (key === 'is_active') return { data: key, type: 'checkbox' };
+      if (key === 'join_date')
+        return { data: key, type: 'date', dateFormat: 'YYYY-MM-DD' };
+      if (['age', 'id', 'salary'].includes(key))
+        return { data: key, type: 'numeric' };
+      return { data: key, type: 'text' };
+    });
+    tableData.value = res;
+    tableKey.value += 1;
+  }
+}
+
+const tableKey = ref(0);
+
+// 表格数据
+const tableData = ref([]);
+const colHeaders = ref([]);
+const columns = ref([]);
+
+const displayedChars = ref([]); // 用于显示的字符数组
+
+let typingTimeout: null | ReturnType<typeof setTimeout> = null;
+
+// 监听 sqlQuery.sql 变化
+watch(
+  () => sqlQuery.value.sql,
+  (newSql) => {
+    // 先清空
+    displayedChars.value = [];
+    if (typingTimeout) clearTimeout(typingTimeout);
+
+    let i = 0;
+    function typeNext() {
+      if (i < newSql.length) {
+        displayedChars.value.push(newSql[i]);
+        i++;
+        typingTimeout = setTimeout(typeNext, 5); // 每个字出现的间隔 50ms
+      }
+    }
+
+    typeNext();
+  },
+);
+// 复制按钮逻辑
+function copyText() {
+  const text = displayedChars.value.join('');
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      message.success('复制成功');
+    })
+    .catch((error) => {
+      message.error(`复制失败: ${error}`);
+    });
+}
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧对话列表 -->
+    <div
+      class="flex h-full w-64 flex-shrink-0 flex-col border-r border-gray-200 bg-white"
+    >
+      <div class="flex items-center space-x-2 border-b border-gray-200 p-4">
+        <button
+          @click="createNewConversation"
+          class="flex items-center rounded bg-blue-500 px-3 py-1 text-white transition-colors hover:bg-blue-600"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-1 h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 4v16m8-8H4"
+            />
+          </svg>
+          新聊天
+        </button>
+
+        <!-- 下拉框 -->
+        <select
+          v-model="selectedAI"
+          class="flex-1 rounded border border-gray-300 p-1"
+        >
+          <option v-for="item in aiOptions" :key="item.id" :value="item">
+            {{ item.title }}
+          </option>
+        </select>
+      </div>
+      <div class="flex items-center space-x-1 border-b border-gray-200 p-4">
+        <select
+          v-model="selectedCompany"
+          class="min-w-0 flex-1 rounded border border-gray-300 p-1"
+        >
+          <option v-for="item in companyOptions" :key="item.id" :value="item">
+            {{ item.name }}
+          </option>
+        </select>
+      </div>
+
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="report in reports"
+          :key="report.id"
+          @click="loadConversation(report.id)"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold': currentReport === report.id,
+          }"
+        >
+          <div class="truncate">{{ report.title }}</div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 中侧聊天区 -->
+    <div class="relative flex flex-1 flex-col">
+      <!-- 报表列表 -->
+      <div
+        id="chat-container"
+        class="flex flex-1 flex-col space-y-4 overflow-y-auto p-4 transition-all duration-300"
+        :class="{
+          'items-center justify-center': isInitial,
+          'justify-start': !isInitial,
+        }"
+      >
+        <template v-if="isInitial">
+          <div class="flex w-full flex-col items-center space-y-4">
+            <!-- 欢迎词 -->
+            <div class="text-center text-lg text-gray-700">
+              {{ selectedAI?.welcome_words }}
+            </div>
+
+            <!-- 输入框 -->
+            <textarea
+              v-model="inputMessage"
+              placeholder="输入消息开始聊天..."
+              rows="1"
+              class="w-1/2 resize-none overflow-hidden rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
+              @keydown.enter.prevent="handleEnter($event)"
+              @input="autoResize($event)"
+            ></textarea>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex w-full flex-col items-center space-y-4">
+            <div
+              v-for="(msg, idx) in messages"
+              :key="idx"
+              class="animate-fadeIn flex w-full transition-opacity duration-500"
+              :class="msg.type === 'ai' ? 'justify-start' : 'justify-end'"
+            >
+              <div
+                class="prose inline-block max-w-[80%] break-words rounded-lg p-3"
+                :class="
+                  msg.type === 'ai'
+                    ? 'bg-blue-100 text-gray-800'
+                    : 'bg-gray-200 text-gray-800'
+                "
+                v-html="md.render(msg.content)"
+              ></div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- 输入框固定底部 -->
+      <div v-if="!isInitial" class="flex border-t border-gray-200 bg-white p-4">
+        <textarea
+          v-model="inputMessage"
+          @keyup.enter="sendMessage"
+          rows="1"
+          placeholder="输入消息..."
+          class="flex-1 resize-none overflow-hidden rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
+          @input="
+            $event.target.style.height = 'auto';
+            $event.target.style.height = `${$event.target.scrollHeight}px`;
+          "
+        ></textarea>
+        <button
+          @click="sendMessage"
+          class="ml-2 rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+        >
+          发送
+        </button>
+      </div>
+    </div>
+
+    <!-- 右侧报表区 -->
+    <div
+      class="relative flex w-64 flex-1 flex-col border-l border-gray-200 bg-white"
+    >
+      <div class="flex border-b border-gray-300 bg-gray-50 p-4">
+        <!-- 左侧文本区 -->
+        <pre
+          class="m-0 max-h-40 flex-1 overflow-auto whitespace-pre-wrap break-words text-sm text-gray-700"
+        >
+      <span v-for="(char, index) in displayedChars" :key="index">{{ char }}</span>
+    </pre>
+
+        <!-- 右侧按钮 -->
+        <div class="ml-4 flex flex-col gap-2">
+          <button
+            v-if="displayedChars.length > 0"
+            :disabled="isSaving || !canSave"
+            @click="saveReport"
+            class="rounded bg-blue-500 px-4 py-2 text-white disabled:bg-gray-400"
+          >
+            {{ buttonText }}
+          </button>
+
+          <button
+            v-if="displayedChars.length > 0"
+            @click="copyText"
+            class="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+          >
+            复制
+          </button>
+        </div>
+      </div>
+
+      <!-- Handsontable 区域 -->
+      <HotTable
+        :key="tableKey"
+        :data="tableData"
+        :col-headers="colHeaders"
+        :columns="columns"
+        row-headers
+        stretch-h="all"
+        license-key="non-commercial-and-evaluation"
+        width="100%"
+        height="auto"
+        theme-name="ht-theme-horizon"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s forwards;
+}
+</style>
diff --git a/vue/apps/web-antd/src/views/llm/report/report-data/index.vue b/vue/apps/web-antd/src/views/llm/report/report-data/index.vue
new file mode 100644
index 0000000..cd47113
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/report/report-data/index.vue
@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as api from '#/api';
+
+// ---------------- 左侧表列表相关 ----------------
+interface TableItem {
+  id: string;
+  name: string;
+  description: string;
+}
+interface FieldItem {
+  name: string;
+  type: string;
+  description: string;
+  is_active: boolean;
+}
+const fieldList = ref<FieldItem[]>([]);
+
+const tableList = ref<TableItem[]>([]);
+const selectedTable = ref<null | TableItem>(null);
+
+async function loadTableList() {
+  tableList.value = await api.refreshTableList();
+}
+
+async function loadField(table: TableItem) {
+  selectedTable.value = table;
+  loading.value = true;
+  fieldList.value = await api.refreshFieldList(table.id);
+  loading.value = false;
+  fieldGridApi.reload(); // 刷新表格
+}
+
+// ---------------- 新增表弹窗 ----------------
+const [TableDrawer, tableDrawerApi] = useVbenDrawer({
+  title: '新增表',
+  onCancel() {
+    // 重置表单内容
+    tableFormApi.resetForm?.();
+    tableDrawerApi.close();
+  },
+  onConfirm: async () => {
+    const values = await tableFormApi.getValues();
+    await api.addTable(values as { description: string; name: string });
+    loadTableList();
+    tableFormApi.resetForm?.();
+    tableDrawerApi.close();
+  },
+});
+
+const [TableForm, tableFormApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '表名',
+      rules: 'required',
+      componentProps: { placeholder: '请输入表名' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '描述',
+      componentProps: { placeholder: '请输入描述' },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// ---------------- 右侧字段表单 ----------------
+const [FieldForm, fieldFormApi] = useVbenForm({
+  layout: 'horizontal', // 横向排列
+  submitOnEnter: true,
+  showDefaultActions: true,
+  resetButtonOptions: {
+    show: false,
+  },
+  wrapperClass: 'grid-cols-5 gap-2',
+  handleSubmit: saveField,
+  submitButtonOptions: {
+    content: '新增字段',
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '字段名称',
+      rules: 'required',
+      componentProps: { placeholder: '请输入字段名' },
+    },
+    {
+      component: 'Select',
+      fieldName: 'type',
+      label: '数据类型',
+      rules: 'required',
+      componentProps: {
+        class: 'w-40',
+        placeholder: '数据类型',
+        options: [
+          { label: 'nvarchar', value: 'nvarchar' }, // 字符串
+          { label: 'int', value: 'int' }, // 整数
+          { label: 'bigint', value: 'bigint' }, // 大整数
+          { label: 'decimal', value: 'decimal' }, // 高精度小数
+          { label: 'float', value: 'float' }, // 浮点数
+          { label: 'date', value: 'date' }, // 日期（无时间）
+          { label: 'datetime', value: 'datetime' }, // 日期时间
+        ],
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '字段描述',
+      componentProps: {
+        placeholder: '字段描述(包含举例)',
+        class: 'w-200',
+      },
+    },
+    {
+      component: 'Switch',
+      fieldName: 'is_active',
+      defaultValue: true,
+      label: '是否启用',
+    },
+  ],
+});
+async function saveField(values: Record<string, any>) {
+  await api.addField({
+    name: values.name,
+    type: values.type,
+    description: values.description,
+    is_active: values.is_active,
+    table_id: selectedTable.value?.id || '',
+  });
+  loadField(selectedTable.value as TableItem);
+
+  // 清空表单
+  resetFieldForm();
+}
+function resetFieldForm() {
+  const fields = ['name', 'type', 'description', 'is_active'];
+  const defaultValues: Record<string, any> = {
+    name: '',
+    type: undefined,
+    description: '',
+    is_active: true, // 保持默认值
+  };
+
+  fields.forEach((field) => {
+    fieldFormApi.setFieldValue(field, defaultValues[field]);
+  });
+}
+
+// ---------------- 字段表格 ----------------
+const loading = ref(false);
+const [FieldGrid, fieldGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'name', title: '字段名' },
+      { field: 'type', title: '字段类型' },
+      { field: 'description', title: '字段描述', align: 'left' },
+      {
+        field: 'is_active',
+        title: '状态',
+        formatter: (cellValue: boolean) => (cellValue ? '已启用' : '尚未启用'),
+      },
+    ],
+    height: '720px',
+    stripe: true,
+    loading: loading.value,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return { items: fieldList.value, total: fieldList.value.length };
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    scrollY: {
+      enabled: true,
+      gt: 0,
+    },
+  },
+});
+
+// 页面加载
+onMounted(() => {
+  loadTableList();
+});
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧列表 -->
+    <div class="flex w-64 flex-col border-r bg-white p-2">
+      <Button type="primary" class="mb-2" @click="tableDrawerApi.open()">
+        新增表
+      </Button>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="table in tableList"
+          :key="table.id"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold':
+              selectedTable && selectedTable.id === table.id,
+          }"
+          @click="loadField(table)"
+        >
+          <div class="truncate font-bold">{{ table.name }}</div>
+          <div class="truncate text-sm text-gray-400">
+            {{ table.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧内容 -->
+    <div class="flex flex-1 flex-col p-4">
+      <!-- 字段表单 -->
+      <div class="mb-2" v-if="selectedTable">
+        <div class="flex w-full items-end space-x-2">
+          <FieldForm />
+        </div>
+      </div>
+      <!-- 字段表格，占满剩余高度 -->
+      <div class="flex-1">
+        <FieldGrid />
+      </div>
+    </div>
+
+    <!-- 新增表弹窗 -->
+    <TableDrawer>
+      <TableForm />
+    </TableDrawer>
+  </div>
+</template>
diff --git a/vue/apps/web-antd/src/views/llm/report/report-knowledge/index.vue b/vue/apps/web-antd/src/views/llm/report/report-knowledge/index.vue
new file mode 100644
index 0000000..03811be
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/report/report-knowledge/index.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as api from '#/api';
+
+// ---------------- 左侧知识库列表相关 ----------------
+interface KnowledgeBase {
+  id: string;
+  name: string;
+  description: string;
+}
+interface KnowledgeItem {
+  text: string;
+  is_active: boolean;
+}
+const knowledgeList = ref<KnowledgeItem[]>([]);
+const knowledgeBaseList = ref<KnowledgeBase[]>([]);
+const selectedKnowledgeBase = ref<KnowledgeBase | null>(null);
+
+async function loadKnowledgeBaseList() {
+  knowledgeBaseList.value = await api.refreshKnowledgeBaseList();
+}
+
+async function loadKnowledge(base: KnowledgeBase) {
+  loading.value = true;
+  selectedKnowledgeBase.value = base;
+  loading.value = true;
+  knowledgeList.value = await api.refreshKnowledgeList(base.id);
+  loading.value = false;
+  knowledgeGridApi.reload(); // 刷新表格
+  loading.value = false;
+}
+
+// ---------------- 新增知识库弹窗 ----------------
+const [KnowledgeBaseDrawer, knowledgeBaseDrawerApi] = useVbenDrawer({
+  title: '新增知识库',
+  onCancel() {
+    knowledgeBaseFormApi.resetForm?.();
+    knowledgeBaseDrawerApi.close();
+  },
+  onConfirm: async () => {
+    const values = await knowledgeBaseFormApi.getValues();
+    await api.addKnowledgeBase(values as { description: string; name: string });
+    loadKnowledgeBaseList();
+    knowledgeBaseFormApi.resetForm?.();
+    knowledgeBaseDrawerApi.close();
+  },
+});
+
+const [KnowledgeBaseForm, knowledgeBaseFormApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '知识库名称',
+      rules: 'required',
+      componentProps: { placeholder: '请输入知识库名称' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '描述',
+      componentProps: { placeholder: '请输入描述' },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// ---------------- 右侧新增知识表单 ----------------
+const [KnowledgeForm, knowledgeFormApi] = useVbenForm({
+  layout: 'horizontal',
+  submitOnEnter: true,
+  showDefaultActions: true,
+  resetButtonOptions: {
+    show: false,
+  },
+  wrapperClass: 'grid-cols-5 gap-2',
+  handleSubmit: saveKnowledge,
+  submitButtonOptions: {
+    content: '新增知识',
+  },
+  schema: [
+    {
+      component: 'Textarea',
+      // 占满三列空间 基线对齐
+      formItemClass: 'col-span-3 items-baseline',
+      fieldName: 'text',
+      label: '知识内容',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入知识内容',
+        rows: 3,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'Switch',
+      fieldName: 'is_active',
+      defaultValue: true,
+      label: '是否启用',
+    },
+  ],
+});
+async function saveKnowledge(values: Record<string, any>) {
+  await api.addKnowledge({
+    text: values.text,
+    is_active: values.is_active,
+    knowledge_base_id: selectedKnowledgeBase.value?.id || '',
+  });
+  loadKnowledge(selectedKnowledgeBase.value as KnowledgeBase);
+  resetKnowledgeForm();
+}
+function resetKnowledgeForm() {
+  knowledgeFormApi.setFieldValue('text', '');
+  knowledgeFormApi.setFieldValue('is_active', true);
+}
+
+// ---------------- 知识表格 ----------------
+const loading = ref(false);
+const [KnowledgeGrid, knowledgeGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'text', title: '知识内容', align: 'left' },
+      {
+        field: 'is_active',
+        title: '状态',
+        formatter: ({ cellValue }: { cellValue: boolean }) => {
+          return cellValue ? '已启用' : '尚未启用';
+        },
+      },
+    ],
+    height: '720px',
+    stripe: true,
+    loading: loading.value,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return {
+            items: knowledgeList.value,
+            total: knowledgeList.value.length,
+          };
+        },
+      },
+    },
+    pagerConfig: { enabled: false },
+    scrollY: { enabled: true, gt: 0 },
+  },
+});
+
+// 页面加载
+onMounted(() => {
+  loadKnowledgeBaseList();
+});
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧知识库列表 -->
+    <div class="flex w-64 flex-col border-r bg-white p-2">
+      <Button
+        type="primary"
+        class="mb-2"
+        @click="knowledgeBaseDrawerApi.open()"
+      >
+        新增知识库
+      </Button>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="base in knowledgeBaseList"
+          :key="base.id"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold':
+              selectedKnowledgeBase && selectedKnowledgeBase.id === base.id,
+          }"
+          @click="loadKnowledge(base)"
+        >
+          <div class="truncate font-bold">{{ base.name }}</div>
+          <div class="truncate text-sm text-gray-400">
+            {{ base.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧内容 -->
+    <div class="flex flex-1 flex-col p-4">
+      <!-- 新增知识表单 -->
+      <div class="mb-2" v-if="selectedKnowledgeBase">
+        <div class="flex w-full items-end space-x-2">
+          <KnowledgeForm />
+        </div>
+      </div>
+      <!-- 知识表格 -->
+      <div class="flex-1">
+        <KnowledgeGrid />
+      </div>
+    </div>
+
+    <!-- 新增知识库弹窗 -->
+    <KnowledgeBaseDrawer>
+      <KnowledgeBaseForm />
+    </KnowledgeBaseDrawer>
+  </div>
+</template>
diff --git a/vue/apps/web-antd/src/views/llm/service/service-bot/index.vue b/vue/apps/web-antd/src/views/llm/service/service-bot/index.vue
new file mode 100644
index 0000000..1559091
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/service/service-bot/index.vue
@@ -0,0 +1,285 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+import { useVbenDrawer } from "@vben/common-ui";
+
+import { Button, message } from "ant-design-vue";
+
+import { useVbenForm } from "#/adapter/form";
+import * as api from "#/api";
+
+// ---------------- 左侧智能体列表 ----------------
+interface AgentItem {
+  id: string;
+  title: string;
+  description: string;
+  welcome_words: string;
+  name: string;
+  role: string;
+  service: string;
+  available_kn_bases: string[];
+}
+
+const agentList = ref<AgentItem[]>([]);
+const selectedAgent = ref<AgentItem | null>(null);
+
+// 页面加载
+onMounted(() => {
+  loadAgentList();
+});
+
+async function loadAgentList() {
+  // 调用接口获取智能体列表
+  agentList.value = await api.getAIBotListForService();
+}
+
+async function loadAgent(agent: AgentItem) {
+  selectedAgent.value = agent;
+
+  if (!agentDetailFormApi) return;
+
+  // 1️⃣ 异步获取备选表格
+  const tableList = await api.refreshKnowledgeBaseListForService();
+  availableTablesOptions.value = tableList.map(
+    (t: { id: string; name: string }) => ({
+      label: t.name, // 页面显示文字
+      value: t.id // 对应值
+    })
+  );
+
+  // 2️⃣ 填充表单，同时 available_kn_bases 会对应选中项
+  agentDetailFormApi.setValues?.({
+    name: agent.name,
+    title: agent.title,
+    description: agent.description,
+    welcome_words: agent.welcome_words,
+    role: agent.role,
+    service: agent.service,
+    available_kn_bases: agent.available_kn_bases || [] // ✅ 默认选中
+  });
+}
+
+const availableTablesOptions = ref([]);
+// ---------------- 新增智能体弹窗 ----------------
+const [AgentDrawer, agentDrawerApi] = useVbenDrawer({
+  title: "新增智能体",
+  onCancel() {
+    agentFormApi.resetForm?.();
+    agentDrawerApi.close();
+  },
+  onConfirm: async () => {
+    const values = await agentFormApi.getValues();
+    // TODO: 调用新增智能体接口
+    saveAgent(values);
+    loadAgentList();
+    agentFormApi.resetForm?.();
+    agentDrawerApi.close();
+  }
+});
+
+const [AgentForm, agentFormApi] = useVbenForm({
+  schema: [
+    {
+      component: "Input",
+      fieldName: "title",
+      label: "智能体标题",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体标题" }
+    },
+    {
+      component: "Input",
+      fieldName: "description",
+      label: "描述",
+      componentProps: { placeholder: "请输入描述" }
+    },
+    {
+      component: "Input",
+      fieldName: "welcome_words",
+      label: "欢迎词",
+      rules: "required",
+      componentProps: { placeholder: "请输入欢迎词", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "name",
+      label: "智能体名字",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体名字", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "role",
+      label: "智能体性格",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体性格特点", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "service",
+      label: "工作",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体负责的业务板块", rows: 3 }
+    },
+    {
+      component: "CheckboxGroup",
+      componentProps: {
+        name: "aaa",
+        options: availableTablesOptions
+      },
+      fieldName: "available_kn_bases",
+      label: "可用知识库",
+      rules: "selectRequired"
+    }
+  ],
+  showDefaultActions: false
+});
+
+// ---------------- 右侧智能体表单 ----------------
+
+const [AgentDetailForm, agentDetailFormApi] = useVbenForm({
+  layout: "vertical",
+  submitOnEnter: true,
+  showDefaultActions: true,
+  resetButtonOptions: { show: false },
+  handleSubmit: saveAgent,
+  submitButtonOptions: { content: "保存" },
+  schema: [
+    {
+      component: "Input",
+      fieldName: "title",
+      label: "智能体标题",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体标题" }
+    },
+    {
+      component: "Input",
+      fieldName: "description",
+      label: "描述",
+      componentProps: { placeholder: "请输入描述" }
+    },
+    {
+      component: "Input",
+      fieldName: "welcome_words",
+      label: "欢迎词",
+      rules: "required",
+      componentProps: { placeholder: "请输入欢迎词", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "name",
+      label: "智能体名字",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体名字", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "role",
+      label: "智能体性格",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体性格特点", rows: 3 }
+    },
+    {
+      component: "Input",
+      fieldName: "service",
+      label: "工作",
+      rules: "required",
+      componentProps: { placeholder: "请输入智能体负责的业务板块", rows: 3 }
+    },
+    {
+      component: "CheckboxGroup",
+      componentProps: {
+        name: "available_kn_bases",
+        options: availableTablesOptions
+      },
+      fieldName: "available_kn_bases",
+      label: "可用知识库",
+      rules: "selectRequired"
+    }
+  ]
+});
+
+async function saveAgent(values: Record<string, any>) {
+  // 这里做一个类型转换，把 Record<string, any> 转成 saveReportBot 需要的结构
+  const payload: {
+    available_kn_bases: string[];
+    available_module: string;
+    available_report_tables: string[];
+    description: string;
+    id?: string;
+    name: string;
+    role: string;
+    service: string;
+    title: string;
+    welcome_words: string;
+  } = {
+    id: selectedAgent.value?.id,
+    name: values.name,
+    title: values.title,
+    description: values.description,
+    welcome_words: values.welcome_words,
+    role: values.role,
+    service: values.service,
+    available_kn_bases: values.available_kn_bases || [],
+    available_report_tables: [],
+    available_module: "service"
+  };
+
+  // 调用 API 保存
+  await api.saveBot(payload);
+  message.success("保存成功");
+  // 刷新列表
+  loadAgentList();
+}
+
+async function agentDrawerOpen() {
+  const tableList = await api.refreshKnowledgeBaseListForService();
+  availableTablesOptions.value = tableList.map(
+    (t: { id: string; name: string }) => ({
+      label: t.name, // 页面显示文字
+      value: t.id // 对应值
+    })
+  );
+  agentDrawerApi.open();
+  selectedAgent.value = null;
+}
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧智能体列表 -->
+    <div class="flex w-64 flex-col border-r bg-white p-2">
+      <Button type="primary" class="mb-2" @click="agentDrawerOpen()">
+        新增智能体
+      </Button>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="agent in agentList"
+          :key="agent.id"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold':
+              selectedAgent && selectedAgent.id === agent.id,
+          }"
+          @click="loadAgent(agent)"
+        >
+          <div class="truncate font-bold">{{ agent.title }}</div>
+          <div class="truncate text-sm text-gray-400">
+            {{ agent.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧智能体表单 -->
+    <div class="flex flex-1 flex-col p-4">
+      <div v-if="selectedAgent" class="w-2/3">
+        <AgentDetailForm />
+      </div>
+    </div>
+
+    <!-- 新增智能体弹窗 -->
+    <AgentDrawer>
+      <AgentForm />
+    </AgentDrawer>
+  </div>
+</template>
diff --git a/vue/apps/web-antd/src/views/llm/service/service-chat/index.vue b/vue/apps/web-antd/src/views/llm/service/service-chat/index.vue
new file mode 100644
index 0000000..f1a8f0c
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/service/service-chat/index.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+
+import MarkdownIt from 'markdown-it';
+import { markdownItTable } from 'markdown-it-table';
+
+import * as api from '#/api';
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+}).use(markdownItTable);
+// AI 实体
+interface AgentItem {
+  id: string;
+  title: string;
+  welcome_words: string;
+}
+// 输入框内容
+const inputMessage = ref('');
+
+// 对话列表
+const conversations = ref<AgentItem[]>([]);
+// AI列表
+const aiOptions = ref<AgentItem[]>([]);
+
+// 当前选中的AI
+const selectedAI = ref<AgentItem | null>(null);
+// 当前选中的对话
+const currentSession = ref<null | string>(null);
+
+// 聊天记录
+const messages = reactive<{ content: string; sender: 'ai' | 'user' }[]>([]);
+
+// 计算第一次聊天状态
+const isInitial = computed(() => messages.length === 0);
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.ctrlKey) {
+    // Ctrl + Enter 换行
+    const target = e.target as HTMLTextAreaElement;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    target.value = `${target.value.slice(0, Math.max(0, start))}\n${target.value.slice(Math.max(0, end))}`;
+    target.selectionStart = target.selectionEnd = start + 1;
+    inputMessage.value = target.value;
+  } else {
+    // Enter 发送
+    sendMessage();
+  }
+}
+
+function autoResize(e: Event) {
+  const target = e.target as HTMLTextAreaElement;
+  if (!target) return;
+  target.style.height = 'auto';
+  target.style.height = `${target.scrollHeight}px`;
+}
+
+// 滚动到底部
+function scrollToBottom() {
+  const container = document.querySelector('#chat-container');
+  if (container)
+    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+}
+
+// 模拟接口获取对话列表
+async function getSessions() {
+  conversations.value = await api.getSessionsForService();
+}
+
+// 模拟接口获取聊天记录
+async function fetchMessages(conversationId: string) {
+  messages.splice(0);
+  const msg = await api.getHistory(conversationId);
+  messages.push(...msg);
+}
+
+// 点击对话加载聊天记录
+async function loadConversation(id: string) {
+  currentSession.value = id;
+  await fetchMessages(id);
+  nextTick(() => scrollToBottom());
+}
+
+// 发送消息
+async function sendMessage() {
+  const content = inputMessage.value.trim();
+  if (!content) return;
+
+  messages.push({ type: 'human', content });
+  inputMessage.value = '';
+
+  nextTick(() => scrollToBottom());
+
+  // 发送消息
+  const answer = await api.chatWithService(
+    selectedAI.value?.id || '',
+    currentSession.value,
+    content,
+  );
+  currentSession.value = answer.sessionId;
+  if (answer.isNewSession) {
+    conversations.value.unshift({
+      id: answer.sessionId,
+      updatedAt: formatDate(new Date()),
+      title: answer.sessionName,
+    });
+  }
+  messages.push({ type: 'ai', content: answer.content });
+  nextTick(() => scrollToBottom());
+  // 焦点回到输入框
+  const textarea = document.querySelector(
+    'textarea[placeholder="输入消息开始聊天..."], textarea[placeholder="输入消息..."]',
+  ) as HTMLTextAreaElement;
+  if (textarea) {
+    textarea.focus();
+  }
+}
+
+// 新建聊天
+function createNewConversation() {
+  currentSession.value = null;
+  messages.splice(0);
+}
+
+// 获取AI列表
+const fetchOptions = async () => {
+  try {
+    aiOptions.value = await api.getAIBotListForService();
+    if (aiOptions.value.length > 0 && aiOptions.value[0] !== undefined) {
+      selectedAI.value = aiOptions.value[0]!;
+    }
+  } catch (error) {
+    console.error('获取下拉选项失败:', error);
+  }
+};
+function formatDate(date: Date): string {
+  const pad = (n: number) => n.toString().padStart(2, '0');
+
+  return (
+    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
+    `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+  );
+}
+// 页面加载时调用接口
+onMounted(() => {
+  fetchOptions();
+  getSessions();
+});
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧对话列表 -->
+    <div
+      class="flex h-full w-64 flex-shrink-0 flex-col border-r border-gray-200 bg-white"
+    >
+      <div class="flex items-center space-x-2 border-b border-gray-200 p-4">
+        <button
+          @click="createNewConversation"
+          class="flex items-center rounded bg-blue-500 px-3 py-1 text-white transition-colors hover:bg-blue-600"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="mr-1 h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 4v16m8-8H4"
+            />
+          </svg>
+          新聊天
+        </button>
+
+        <!-- 下拉框 -->
+        <select
+          v-model="selectedAI"
+          class="flex-1 rounded border border-gray-300 p-1"
+        >
+          <option v-for="item in aiOptions" :key="item.id" :value="item">
+            {{ item.title }}
+          </option>
+        </select>
+      </div>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="conv in conversations"
+          :key="conv.id"
+          @click="loadConversation(conv.id)"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold': currentSession === conv.id,
+          }"
+        >
+          <div class="flex items-center justify-between">
+            <span class="truncate">{{ conv.title }}</span>
+            <span class="ml-2 text-xs text-gray-400">{{ conv.updatedAt }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧聊天区 -->
+    <div class="relative flex flex-1 flex-col">
+      <!-- 聊天记录 -->
+      <div
+        id="chat-container"
+        class="flex flex-1 flex-col space-y-4 overflow-y-auto p-4 transition-all duration-300"
+        :class="{
+          'items-center justify-center': isInitial,
+          'justify-start': !isInitial,
+        }"
+      >
+        <template v-if="isInitial">
+          <div class="flex w-full flex-col items-center space-y-4">
+            <!-- 欢迎词 -->
+            <div class="text-center text-lg text-gray-700">
+              {{ selectedAI?.welcome_words }}
+            </div>
+
+            <!-- 输入框 -->
+            <textarea
+              v-model="inputMessage"
+              placeholder="输入消息开始聊天..."
+              rows="1"
+              class="w-1/2 resize-none overflow-hidden rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-blue-400"
+              @keydown.enter.prevent="handleEnter($event)"
+              @input="autoResize($event)"
+            ></textarea>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex w-full flex-col items-center space-y-4">
+            <div
+              v-for="(msg, idx) in messages"
+              :key="idx"
+              class="animate-fadeIn flex w-full transition-opacity duration-500"
+              :class="msg.type === 'ai' ? 'justify-start' : 'justify-end'"
+            >
+              <div
+                class="prose inline-block max-w-[80%] break-words rounded-lg p-3"
+                :class="
+                  msg.type === 'ai'
+                    ? 'bg-blue-100 text-gray-800'
+                    : 'bg-gray-200 text-gray-800'
+                "
+                v-html="md.render(msg.content)"
+              ></div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- 输入框固定底部 -->
+      <div v-if="!isInitial" class="flex border-t border-gray-200 bg-white p-4">
+        <textarea
+          v-model="inputMessage"
+          @keyup.enter="sendMessage"
+          rows="1"
+          placeholder="输入消息..."
+          class="flex-1 resize-none overflow-hidden rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
+          @input="
+            $event.target.style.height = 'auto';
+            $event.target.style.height = `${$event.target.scrollHeight}px`;
+          "
+        ></textarea>
+        <button
+          @click="sendMessage"
+          class="ml-2 rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+        >
+          发送
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s forwards;
+}
+</style>
diff --git a/vue/apps/web-antd/src/views/llm/service/service-knowledge/index.vue b/vue/apps/web-antd/src/views/llm/service/service-knowledge/index.vue
new file mode 100644
index 0000000..891a536
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/service/service-knowledge/index.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as api from '#/api';
+
+// ---------------- 左侧知识库列表相关 ----------------
+interface KnowledgeBase {
+  id: string;
+  name: string;
+  description: string;
+}
+interface KnowledgeItem {
+  text: string;
+  is_active: boolean;
+}
+const knowledgeList = ref<KnowledgeItem[]>([]);
+const knowledgeBaseList = ref<KnowledgeBase[]>([]);
+const selectedKnowledgeBase = ref<KnowledgeBase | null>(null);
+
+async function loadKnowledgeBaseList() {
+  knowledgeBaseList.value = await api.refreshKnowledgeBaseListForService();
+}
+
+async function loadKnowledge(base: KnowledgeBase) {
+  loading.value = true;
+  selectedKnowledgeBase.value = base;
+  loading.value = true;
+  knowledgeList.value = await api.refreshKnowledgeList(base.id);
+  loading.value = false;
+  knowledgeGridApi.reload(); // 刷新表格
+  loading.value = false;
+}
+
+// ---------------- 新增知识库弹窗 ----------------
+const [KnowledgeBaseDrawer, knowledgeBaseDrawerApi] = useVbenDrawer({
+  title: '新增知识库',
+  onCancel() {
+    knowledgeBaseFormApi.resetForm?.();
+    knowledgeBaseDrawerApi.close();
+  },
+  onConfirm: async () => {
+    const values = await knowledgeBaseFormApi.getValues();
+    await api.addKnowledgeBase(values as { description: string; name: string });
+    loadKnowledgeBaseList();
+    knowledgeBaseFormApi.resetForm?.();
+    knowledgeBaseDrawerApi.close();
+  },
+});
+
+const [KnowledgeBaseForm, knowledgeBaseFormApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '知识库名称',
+      rules: 'required',
+      componentProps: { placeholder: '请输入知识库名称' },
+    },
+    {
+      component: 'Input',
+      fieldName: 'description',
+      label: '描述',
+      componentProps: { placeholder: '请输入描述' },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// ---------------- 右侧新增知识表单 ----------------
+const [KnowledgeForm, knowledgeFormApi] = useVbenForm({
+  layout: 'horizontal',
+  submitOnEnter: true,
+  showDefaultActions: true,
+  resetButtonOptions: {
+    show: false,
+  },
+  wrapperClass: 'grid-cols-5 gap-2',
+  handleSubmit: saveKnowledge,
+  submitButtonOptions: {
+    content: '新增知识',
+  },
+  schema: [
+    {
+      component: 'Textarea',
+      // 占满三列空间 基线对齐
+      formItemClass: 'col-span-3 items-baseline',
+      fieldName: 'text',
+      label: '知识内容',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入知识内容',
+        rows: 3,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'Switch',
+      fieldName: 'is_active',
+      defaultValue: true,
+      label: '是否启用',
+    },
+  ],
+});
+async function saveKnowledge(values: Record<string, any>) {
+  await api.addKnowledge({
+    text: values.text,
+    is_active: values.is_active,
+    knowledge_base_id: selectedKnowledgeBase.value?.id || '',
+  });
+  loadKnowledge(selectedKnowledgeBase.value as KnowledgeBase);
+  resetKnowledgeForm();
+}
+function resetKnowledgeForm() {
+  knowledgeFormApi.setFieldValue('text', '');
+  knowledgeFormApi.setFieldValue('is_active', true);
+}
+
+// ---------------- 知识表格 ----------------
+const loading = ref(false);
+const [KnowledgeGrid, knowledgeGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'text', title: '知识内容', align: 'left' },
+      {
+        field: 'is_active',
+        title: '状态',
+        formatter: ({ cellValue }: { cellValue: boolean }) => {
+          return cellValue ? '已启用' : '尚未启用';
+        },
+      },
+    ],
+    height: '720px',
+    stripe: true,
+    loading: loading.value,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return {
+            items: knowledgeList.value,
+            total: knowledgeList.value.length,
+          };
+        },
+      },
+    },
+    pagerConfig: { enabled: false },
+    scrollY: { enabled: true, gt: 0 },
+  },
+});
+
+// 页面加载
+onMounted(() => {
+  loadKnowledgeBaseList();
+});
+</script>
+
+<template>
+  <div class="flex h-[90dvh] bg-gray-50">
+    <!-- 左侧知识库列表 -->
+    <div class="flex w-64 flex-col border-r bg-white p-2">
+      <Button
+        type="primary"
+        class="mb-2"
+        @click="knowledgeBaseDrawerApi.open()"
+      >
+        新增知识库
+      </Button>
+      <ul class="flex-1 divide-y divide-gray-200 overflow-y-auto">
+        <li
+          v-for="base in knowledgeBaseList"
+          :key="base.id"
+          class="cursor-pointer p-4 transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-gray-100 font-semibold':
+              selectedKnowledgeBase && selectedKnowledgeBase.id === base.id,
+          }"
+          @click="loadKnowledge(base)"
+        >
+          <div class="truncate font-bold">{{ base.name }}</div>
+          <div class="truncate text-sm text-gray-400">
+            {{ base.description }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 右侧内容 -->
+    <div class="flex flex-1 flex-col p-4">
+      <!-- 新增知识表单 -->
+      <div class="mb-2" v-if="selectedKnowledgeBase">
+        <div class="flex w-full items-end space-x-2">
+          <KnowledgeForm />
+        </div>
+      </div>
+      <!-- 知识表格 -->
+      <div class="flex-1">
+        <KnowledgeGrid />
+      </div>
+    </div>
+
+    <!-- 新增知识库弹窗 -->
+    <KnowledgeBaseDrawer>
+      <KnowledgeBaseForm />
+    </KnowledgeBaseDrawer>
+  </div>
+</template>
diff --git a/vue/apps/web-antd/src/views/llm/service/service-mem/index.vue b/vue/apps/web-antd/src/views/llm/service/service-mem/index.vue
new file mode 100644
index 0000000..6f13bf1
--- /dev/null
+++ b/vue/apps/web-antd/src/views/llm/service/service-mem/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>正在开发中，敬请期待</h1>
+  </div>
+</template>