feat：【antd】【ai】知识库的 knowledge segment、document 优化

2025-12-30 10:32:25 +00:00 · 2025-11-14 09:07:26 +08:00
parent 4452de0677
commit 132ce52e36
9 changed files with 142 additions and 90 deletions
--- a/apps/web-antd/src/api/ai/knowledge/document/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/document/index.ts
@@ -26,10 +26,12 @@ export function getKnowledgeDocumentPage(params: PageParam) {
 export function getKnowledgeDocument(id: number) {
  return requestClient.get(`/ai/knowledge/document/get?id=${id}`);
 }
+
 // 新增知识库文档（单个）
 export function createKnowledge(data: any) {
  return requestClient.post('/ai/knowledge/document/create', data);
 }
+
 // 新增知识库文档（多个）
 export function createKnowledgeDocumentList(data: any) {
  return requestClient.post('/ai/knowledge/document/create-list', data);
@@ -44,6 +46,7 @@ export function updateKnowledgeDocument(data: any) {
 export function updateKnowledgeDocumentStatus(data: any) {
  return requestClient.put('/ai/knowledge/document/update-status', data);
 }
+
 // 删除知识库文档
 export function deleteKnowledgeDocument(id: number) {
  return requestClient.delete(`/ai/knowledge/document/delete?id=${id}`);
--- a/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts
@@ -27,6 +27,7 @@ export function getKnowledge(id: number) {
    `/ai/knowledge/get?id=${id}`,
  );
 }
+
 // 新增知识库
 export function createKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
  return requestClient.post('/ai/knowledge/create', data);
--- a/apps/web-antd/src/api/ai/knowledge/segment/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/segment/index.ts
@@ -32,6 +32,7 @@ export function getKnowledgeSegment(id: number) {
    `/ai/knowledge/segment/get?id=${id}`,
  );
 }
+
 // 新增知识库分段
 export function createKnowledgeSegment(
  data: AiKnowledgeSegmentApi.KnowledgeSegment,
@@ -47,9 +48,13 @@ export function updateKnowledgeSegment(
 }

 // 修改知识库分段状态
-export function updateKnowledgeSegmentStatus(data: any) {
-  return requestClient.put('/ai/knowledge/segment/update-status', data);
+export function updateKnowledgeSegmentStatus(id: number, status: number) {
+  return requestClient.put('/ai/knowledge/segment/update-status', {
+    id,
+    status,
+  });
 }
+
 // 删除知识库分段
 export function deleteKnowledgeSegment(id: number) {
  return requestClient.delete(`/ai/knowledge/segment/delete?id=${id}`);
--- a/apps/web-antd/src/views/ai/knowledge/document/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/document/data.ts
@@ -1,11 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';

 import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 import { z } from '#/adapter/form';
 import { getModelSimpleList } from '#/api/ai/model/model';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
@@ -92,12 +94,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'name',
      label: '文件名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '是否启用',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择是否启用',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
@@ -106,45 +113,66 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeDocumentApi.KnowledgeDocument,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
      title: '文档编号',
+      minWidth: 100,
    },
    {
      field: 'name',
      title: '文件名称',
+      minWidth: 200,
    },
    {
      field: 'contentLength',
      title: '字符数',
+      minWidth: 100,
    },
    {
      field: 'tokens',
      title: 'Token 数',
+      minWidth: 100,
    },
    {
      field: 'segmentMaxTokens',
      title: '分片最大 Token 数',
+      minWidth: 150,
    },
    {
      field: 'retrievalCount',
      title: '召回次数',
+      minWidth: 100,
    },
    {
      field: 'status',
      title: '是否启用',
-      slots: { default: 'status' },
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
    },
    {
      field: 'createTime',
      title: '上传时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 150,
+      minWidth: 150,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue
@@ -9,7 +9,6 @@ import type { AxiosProgressEvent } from '#/api/infra/file';
 import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';

 import { IconifyIcon } from '@vben/icons';
-import { $t } from '@vben/locales';
 import { generateAcceptedFileTypes } from '@vben/utils';

 import { Button, Form, message, UploadDragger } from 'ant-design-vue';
@@ -124,7 +123,7 @@ async function customRequest(info: UploadRequestOption<any>) {
    };
    const res = await httpRequest(info.file as File, progressEvent);
    info.onSuccess!(res);
-    message.success($t('ui.upload.uploadSuccess'));
+    message.success('上传成功');
    ensureListExists();
    emit('update:modelValue', {
      ...props.modelValue,
--- a/apps/web-antd/src/views/ai/knowledge/document/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/index.vue
@@ -5,11 +5,11 @@ import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

-import { useAccess } from '@vben/access';
 import { confirm, Page } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';

-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -21,18 +21,18 @@ import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';

-/** AI 知识库文档 列表 */
+/** AI 知识库文档列表 */
 defineOptions({ name: 'AiKnowledgeDocument' });
-const { hasAccessByCodes } = useAccess();

 const route = useRoute();
 const router = useRouter();
+
 /** 刷新表格 */
 function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建知识库文档 */
 function handleCreate() {
  router.push({
    name: 'AiKnowledgeDocumentCreate',
@@ -40,7 +40,7 @@ function handleCreate() {
  });
 }

-/** 编辑 */
+/** 编辑知识库文档 */
 function handleEdit(id: number) {
  router.push({
    name: 'AiKnowledgeDocumentUpdate',
@@ -48,7 +48,7 @@ function handleEdit(id: number) {
  });
 }

-/** 删除 */
+/** 删除知识库文档 */
 async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
@@ -56,14 +56,13 @@ async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
  });
  try {
    await deleteKnowledgeDocument(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }
+
 /** 跳转到知识库分段页面 */
 function handleSegment(id: number) {
  router.push({
@@ -71,33 +70,38 @@ function handleSegment(id: number) {
    query: { documentId: id },
  });
 }
-/** 修改是否发布 */
+
+/** 更新文档状态 */
 async function handleStatusChange(
+  newStatus: number,
  row: AiKnowledgeDocumentApi.KnowledgeDocument,
-) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"${row.name}文档吗?`).then(async () => {
-      await updateKnowledgeDocumentStatus({
-        id: row.id,
-        status: row.status,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.name}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新文档状态
+        await updateKnowledgeDocumentStatus({
+          id: row.id,
+          status: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
      });
-      handleRefresh();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
+  });
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -114,6 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -121,6 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
  } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
 });
+
 /** 初始化 */
 onMounted(() => {
  // 如果知识库 ID 不存在，显示错误提示并关闭页面
@@ -148,15 +154,6 @@ onMounted(() => {
          ]"
        />
      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
@@ -178,6 +175,8 @@ onMounted(() => {
            {
              label: $t('common.delete'),
              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
              auth: ['ai:knowledge:delete'],
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
--- a/apps/web-antd/src/views/ai/knowledge/segment/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/segment/data.ts
@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';

-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 /** 新增/修改的表单 */
@@ -43,12 +44,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'documentId',
      label: '文档编号',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文档编号',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '是否启用',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择是否启用',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
@@ -57,11 +63,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeSegmentApi.KnowledgeSegment,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
      title: '分段编号',
+      minWidth: 100,
    },
    {
      type: 'expand',
@@ -76,23 +88,36 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'contentLength',
      title: '字符数',
+      minWidth: 100,
    },
    {
      field: 'tokens',
      title: 'token 数量',
+      minWidth: 120,
    },
    {
      field: 'retrievalCount',
      title: '召回次数',
+      minWidth: 100,
    },
    {
      field: 'status',
-      title: '是否启用',
-      slots: { default: 'status' },
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
    },
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -5,11 +5,11 @@ import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
 import { onMounted } from 'vue';
 import { useRoute } from 'vue-router';

-import { useAccess } from '@vben/access';
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';

-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -23,7 +23,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';

 const route = useRoute();
-const { hasAccessByCodes } = useAccess();
+
 const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
@@ -34,17 +34,17 @@ function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建知识库片段 */
 function handleCreate() {
  formModalApi.setData({ documentId: route.query.documentId }).open();
 }

-/** 编辑 */
+/** 编辑知识库片段 */
 function handleEdit(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
  formModalApi.setData(row).open();
 }

-/** 删除 */
+/** 删除知识库片段 */
 async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.id]),
@@ -52,21 +52,41 @@ async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
  });
  try {
    await deleteKnowledgeSegment(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }

+/** 更新知识库片段状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: AiKnowledgeSegmentApi.KnowledgeSegment,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将片段 ${row.id} 的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新片段状态
+        await updateKnowledgeSegmentStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -82,6 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -90,26 +111,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
 });

-/** 修改是否发布 */
-async function handleStatusChange(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"该分段吗?`).then(async () => {
-      await updateKnowledgeSegmentStatus({
-        id: row.id,
-        status: row.status,
-      });
-      gridApi.reload();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
-}
-
+/** 初始化 */
 onMounted(() => {
  gridApi.formApi.setFieldValue('documentId', route.query.documentId);
 });
@@ -132,15 +134,6 @@ onMounted(() => {
          ]"
        />
      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
      <template #expand_content="{ row }">
        <div
          class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"
--- a/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
@@ -68,7 +68,6 @@ const [Modal, modalApi] = useVbenModal({
    // 加载数据
    const data = modalApi.getData<AiKnowledgeSegmentApi.KnowledgeSegment>();
    if (!data || !data.id) {
-      await formApi.setValues(data);
      return;
    }
    modalApi.lock();