Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into reform-mp

apps/web-antd/src/views/ai/chat/index/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @gjd：https://t.zsxq.com/pmNb1 AI 对话、绘图底部没对齐，特别是样式方面
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
 import type { AiChatMessageApi } from '#/api/ai/chat/message';
 
@@ -18,12 +17,13 @@ import {
   sendChatMessageStream,
 } from '#/api/ai/chat/message';
 
-import ConversationList from './components/conversation/ConversationList.vue';
-import ConversationUpdateForm from './components/conversation/ConversationUpdateForm.vue';
-import MessageList from './components/message/MessageList.vue';
-import MessageListEmpty from './components/message/MessageListEmpty.vue';
-import MessageLoading from './components/message/MessageLoading.vue';
-import MessageNewConversation from './components/message/MessageNewConversation.vue';
+import ConversationList from './modules/conversation/list.vue';
+import ConversationUpdateForm from './modules/conversation/update-form.vue';
+import MessageFileUpload from './modules/message/file-upload.vue';
+import MessageListEmpty from './modules/message/list-empty.vue';
+import MessageList from './modules/message/list.vue';
+import MessageLoading from './modules/message/loading.vue';
+import MessageNewConversation from './modules/message/new-conversation.vue';
 
 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' });
@@ -33,6 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: ConversationUpdateForm,
   destroyOnClose: true,
 });
+
 // 聊天对话
 const conversationListRef = ref();
 const activeConversationId = ref<null | number>(null); // 选中的对话编号
@@ -56,6 +57,8 @@ const conversationInAbortController = ref<any>(); // 对话进行中 abort 控
 const inputTimeout = ref<any>(); // 处理输入中回车的定时器
 const prompt = ref<string>(); // prompt
 const enableContext = ref<boolean>(true); // 是否开启上下文
+const enableWebSearch = ref<boolean>(false); // 是否开启联网搜索
+const uploadFiles = ref<string[]>([]); // 上传的文件 URL 列表
 // 接收 Stream 消息
 const receiveMessageFullText = ref('');
 const receiveMessageDisplayedText = ref('');
@@ -87,7 +90,7 @@ async function handleConversationClick(
 ) {
   // 对话进行中，不允许切换
   if (conversationInProgress.value) {
-    alert('对话中，不允许切换!');
+    await alert('对话中，不允许切换!');
     return false;
   }
 
@@ -97,9 +100,12 @@ async function handleConversationClick(
   // 刷新 message 列表
   await getMessageList();
   // 滚动底部
-  scrollToBottom(true);
+  await scrollToBottom(true);
+  prompt.value = '';
   // 清空输入框
   prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
   return true;
 }
 
@@ -117,19 +123,23 @@ async function handlerConversationDelete(
 async function handleConversationClear() {
   // 对话进行中，不允许切换
   if (conversationInProgress.value) {
-    alert('对话中，不允许切换!');
+    await alert('对话中，不允许切换!');
     return false;
   }
   activeConversationId.value = null;
   activeConversation.value = null;
   activeMessageList.value = [];
+  // 清空输入框和文件列表
+  prompt.value = '';
+  uploadFiles.value = [];
 }
 
 async function openChatConversationUpdateForm() {
   formModalApi.setData({ id: activeConversationId.value }).open();
 }
+
+/** 对话更新成功，刷新最新信息 */
 async function handleConversationUpdateSuccess() {
-  // 对话更新成功，刷新最新信息
   await getConversation(activeConversationId.value);
 }
 
@@ -138,10 +148,13 @@ async function handleConversationCreate() {
   // 创建对话
   await conversationListRef.value.createConversation();
 }
+
 /** 处理聊天对话的创建成功 */
 async function handleConversationCreateSuccess() {
   // 创建新的对话，清空输入框
   prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
 }
 
 // =========== 【消息列表】相关 ===========
@@ -228,6 +241,7 @@ function handleGoTopMessage() {
 }
 
 // =========== 【发送消息】相关 ===========
+
 /** 处理来自 keydown 的发送消息 */
 async function handleSendByKeydown(event: any) {
   // 判断用户是否在输入
@@ -282,7 +296,6 @@ function onCompositionstart() {
 }
 
 function onCompositionend() {
-  // console.log('输入结束...')
   setTimeout(() => {
     isComposing.value = false;
   }, 200);
@@ -299,12 +312,19 @@ async function doSendMessage(content: string) {
     message.error('还没创建对话，不能发送!');
     return;
   }
-  // 清空输入框
+
+  // 准备附件 URL 数组
+  const attachmentUrls = [...uploadFiles.value];
+
+  // 清空输入框和文件列表
   prompt.value = '';
+  uploadFiles.value = [];
+
   // 执行发送
   await doSendMessageStream({
     conversationId: activeConversationId.value,
     content,
+    attachmentUrls,
   } as AiChatMessageApi.ChatMessage);
 }
 
@@ -325,6 +345,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
         conversationId: activeConversationId.value,
         type: 'user',
         content: userMessage.content,
+        attachmentUrls: userMessage.attachmentUrls || [],
         createTime: new Date(),
       } as AiChatMessageApi.ChatMessage,
       {
@@ -332,6 +353,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
         conversationId: activeConversationId.value,
         type: 'assistant',
         content: '思考中...',
+        reasoningContent: '',
         createTime: new Date(),
       } as AiChatMessageApi.ChatMessage,
     );
@@ -339,7 +361,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
     await nextTick();
     await scrollToBottom(); // 底部
     // 1.3 开始滚动
-    textRoll();
+    textRoll().then();
 
     // 2. 发送 event stream
     let isFirstChunk = true; // 是否是第一个 chunk 消息段
@@ -348,17 +370,23 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
       userMessage.content,
       conversationInAbortController.value,
       enableContext.value,
+      enableWebSearch.value,
       async (res: any) => {
         const { code, data, msg } = JSON.parse(res.data);
         if (code !== 0) {
-          alert(`对话异常! ${msg}`);
+          await alert(`对话异常! ${msg}`);
+          // 如果未接收到消息，则进行删除
+          if (receiveMessageFullText.value === '') {
+            activeMessageList.value.pop();
+          }
           return;
         }
 
-        // 如果内容为空，就不处理。
-        if (data.receive.content === '') {
+        // 如果内容和推理内容都为空，就不处理
+        if (data.receive.content === '' && !data.receive.reasoningContent) {
           return;
         }
+
         // 首次返回需要添加一个 message 到页面，后面的都是更新
         if (isFirstChunk) {
           isFirstChunk = false;
@@ -367,15 +395,31 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
           activeMessageList.value.pop();
           // 更新返回的数据
           activeMessageList.value.push(data.send, data.receive);
+          data.send.attachmentUrls = userMessage.attachmentUrls;
         }
-        // debugger
-        receiveMessageFullText.value =
-          receiveMessageFullText.value + data.receive.content;
+
+        // 处理 reasoningContent
+        if (data.receive.reasoningContent) {
+          const lastMessage =
+            activeMessageList.value[activeMessageList.value.length - 1];
+          // 累加推理内容
+          lastMessage.reasoningContent =
+            (lastMessage.reasoningContent || '') +
+            data.receive.reasoningContent;
+        }
+
+        // 处理正常内容
+        if (data.receive.content !== '') {
+          receiveMessageFullText.value =
+            receiveMessageFullText.value + data.receive.content;
+        }
+
         // 滚动到最下面
         await scrollToBottom();
       },
       (error: any) => {
-        alert(`对话异常! ${error}`);
+        // 异常提示，并停止流
+        alert(`对话异常!`);
         stopStream();
         // 需要抛出异常，禁止重试
         throw error;
@@ -383,6 +427,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
       () => {
         stopStream();
       },
+      userMessage.attachmentUrls,
     );
   } catch {}
 }
@@ -490,11 +535,6 @@ onMounted(async () => {
   activeMessageListLoading.value = true;
   await getMessageList();
 });
-// TODO @芋艿：深度思考
-// TODO @芋艿：联网搜索
-// TODO @芋艿：附件支持
-// TODO @芋艿：mcp 相关
-// TODO @芋艿：异常消息的处理
 </script>
 
 <template>
@@ -514,7 +554,7 @@ onMounted(async () => {
       <!-- 右侧：详情部分 -->
       <Layout class="bg-card mx-4">
         <Layout.Header
-          class="!bg-card border-border flex !h-12 items-center justify-between border-b"
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b !px-4"
         >
           <div class="text-lg font-bold">
             {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -573,8 +613,10 @@ onMounted(async () => {
           </div>
         </Layout.Content>
 
-        <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-          <form class="border-border m-2 flex flex-col rounded-xl border p-2">
+        <Layout.Footer class="!bg-card flex flex-col !p-0">
+          <form
+            class="border-border mx-4 mb-8 mt-2 flex flex-col rounded-xl border p-2"
+          >
             <textarea
               class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
               v-model="prompt"
@@ -585,9 +627,19 @@ onMounted(async () => {
               placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
             ></textarea>
             <div class="flex justify-between pb-0 pt-1">
-              <div class="flex items-center">
-                <Switch v-model:checked="enableContext" />
-                <span class="ml-1 text-sm text-gray-400">上下文</span>
+              <div class="flex items-center gap-3">
+                <MessageFileUpload
+                  v-model="uploadFiles"
+                  :disabled="conversationInProgress"
+                />
+                <div class="flex items-center">
+                  <Switch v-model:checked="enableContext" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">上下文</span>
+                </div>
+                <div class="flex items-center">
+                  <Switch v-model:checked="enableWebSearch" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">联网搜索</span>
+                </div>
               </div>
               <Button
                 type="primary"

apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue

@@ -19,9 +19,8 @@ import {
 } from '#/api/ai/chat/conversation';
 import { $t } from '#/locales';
 
-import RoleRepository from '../role/RoleRepository.vue';
+import RoleRepository from '../role/repository.vue';
 
-// 定义组件 props
 const props = defineProps({
   activeId: {
     type: [Number, null] as PropType<null | number>,
@@ -29,7 +28,6 @@ const props = defineProps({
   },
 });
 
-// 定义钩子
 const emits = defineEmits([
   'onConversationCreate',
   'onConversationClick',
@@ -41,7 +39,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   connectedComponent: RoleRepository,
 });
 
-// 定义属性
 const searchName = ref<string>(''); // 对话搜索
 const activeConversationId = ref<null | number>(null); // 选中的对话，默认为 null
 const hoverConversationId = ref<null | number>(null); // 悬浮上去的对话
@@ -180,7 +177,7 @@ async function updateConversationTitle(
   conversation: AiChatConversationApi.ChatConversation,
 ) {
   // 1. 二次确认
-  prompt({
+  await prompt({
     async beforeClose(scope) {
       if (scope.isConfirm) {
         if (scope.value) {
@@ -202,8 +199,7 @@ async function updateConversationTitle(
             if (
               filterConversationList.length > 0 &&
               filterConversationList[0] && // tip：避免切换对话
-              activeConversationId.value ===
-                (filterConversationList[0].id as number)
+              activeConversationId.value === filterConversationList[0].id!
             ) {
               emits('onConversationClick', filterConversationList[0]);
             }
@@ -252,9 +248,9 @@ async function handleClearConversation() {
     await confirm('确认后对话会全部清空，置顶的对话除外。');
     await deleteChatConversationMyByUnpinned();
     message.success($t('ui.actionMessage.operationSuccess'));
-    // 清空 对话 和 对话内容
+    // 清空对话、对话内容
     activeConversationId.value = null;
-    // 获取 对话列表
+    // 获取对话列表
     await getChatConversationList();
     // 回调 方法
     emits('onConversationClear');
@@ -283,7 +279,6 @@ watch(activeId, async (newValue) => {
   activeConversationId.value = newValue;
 });
 
-// 定义 public 方法
 defineExpose({ createConversation });
 
 /** 初始化 */
@@ -298,7 +293,7 @@ onMounted(async () => {
     if (conversationList.value.length > 0 && conversationList.value[0]) {
       activeConversationId.value = conversationList.value[0].id;
       // 回调 onConversationClick
-      await emits('onConversationClick', conversationList.value[0]);
+      emits('onConversationClick', conversationList.value[0]);
     }
   }
 });
@@ -357,17 +352,20 @@ onMounted(async () => {
             class="mt-1"
           >
             <div
-              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
               :class="[
-                conversation.id === activeConversationId ? 'bg-success' : '',
+                conversation.id === activeConversationId
+                  ? 'bg-primary/10 dark:bg-primary/20'
+                  : '',
               ]"
             >
               <div class="flex items-center">
                 <Avatar
                   v-if="conversation.roleAvatar"
                   :src="conversation.roleAvatar"
+                  :size="28"
                 />
-                <SvgGptIcon v-else class="size-8" />
+                <SvgGptIcon v-else class="size-6" />
                 <span
                   class="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap p-2 text-sm font-normal"
                 >

apps/web-antd/src/views/ai/chat/index/modules/conversation/update-form.vue

@@ -25,7 +25,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 140,
+    labelWidth: 110,
   },
   layout: 'horizontal',
   schema: useFormSchema(),

apps/web-antd/src/views/ai/chat/index/modules/message/file-upload.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatFileSize, getFileIcon } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+export interface FileItem {
+  name: string;
+  size: number;
+  url?: string;
+  uploading?: boolean;
+  progress?: number;
+  raw?: File;
+}
+
+const props = withDefaults(
+  defineProps<{
+    acceptTypes?: string;
+    disabled?: boolean;
+    limit?: number;
+    maxSize?: number;
+    modelValue?: string[];
+  }>(),
+  {
+    modelValue: () => [],
+    limit: 5,
+    maxSize: 10,
+    acceptTypes:
+      '.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md',
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+  uploadError: [error: any];
+  uploadSuccess: [file: FileItem];
+}>();
+
+const fileInputRef = ref<HTMLInputElement>();
+const fileList = ref<FileItem[]>([]);
+const uploadedUrls = ref<string[]>([]);
+const showTooltip = ref(false);
+const hideTimer = ref<NodeJS.Timeout | null>(null);
+const { httpRequest } = useUpload();
+
+/** 监听 v-model 变化 */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    uploadedUrls.value = [...newVal];
+    if (newVal.length === 0) {
+      fileList.value = [];
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+/** 是否有文件 */
+const hasFiles = computed(() => fileList.value.length > 0);
+
+/** 是否达到上传限制 */
+const isLimitReached = computed(() => fileList.value.length >= props.limit);
+
+/** 触发文件选择 */
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+/** 显示 tooltip */
+function showTooltipHandler() {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+    hideTimer.value = null;
+  }
+  showTooltip.value = true;
+}
+
+/** 隐藏 tooltip */
+function hideTooltipHandler() {
+  hideTimer.value = setTimeout(() => {
+    showTooltip.value = false;
+    hideTimer.value = null;
+  }, 300);
+}
+
+/** 处理文件选择 */
+async function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = [...(target.files || [])];
+  if (files.length === 0) {
+    return;
+  }
+
+  if (files.length + fileList.value.length > props.limit) {
+    message.error(`最多只能上传 ${props.limit} 个文件`);
+    target.value = '';
+    return;
+  }
+
+  for (const file of files) {
+    if (file.size > props.maxSize * 1024 * 1024) {
+      message.error(`文件 ${file.name} 大小超过 ${props.maxSize}MB`);
+      continue;
+    }
+
+    const fileItem: FileItem = {
+      name: file.name,
+      size: file.size,
+      uploading: true,
+      progress: 0,
+      raw: file,
+    };
+    fileList.value.push(fileItem);
+    await uploadFile(fileItem);
+  }
+
+  target.value = '';
+}
+
+/** 上传文件 */
+async function uploadFile(fileItem: FileItem) {
+  try {
+    const progressInterval = setInterval(() => {
+      if (fileItem.progress! < 90) {
+        fileItem.progress = (fileItem.progress || 0) + Math.random() * 10;
+      }
+    }, 100);
+
+    const response = await httpRequest(fileItem.raw!);
+    clearInterval(progressInterval);
+
+    fileItem.uploading = false;
+    fileItem.progress = 100;
+
+    // 调试日志
+    console.log('上传响应:', response);
+
+    // 兼容不同的返回格式：{ url: '...' } 或 { data: '...' } 或直接是字符串
+    const fileUrl =
+      (response as any)?.url || (response as any)?.data || response;
+    fileItem.url = fileUrl;
+
+    console.log('提取的文件 URL:', fileUrl);
+
+    // 只有当 URL 有效时才添加到列表
+    if (fileUrl && typeof fileUrl === 'string') {
+      uploadedUrls.value.push(fileUrl);
+      emit('uploadSuccess', fileItem);
+      updateModelValue();
+    } else {
+      throw new Error('上传返回的 URL 无效');
+    }
+  } catch (error) {
+    fileItem.uploading = false;
+    message.error(`文件 ${fileItem.name} 上传失败`);
+    emit('uploadError', error);
+
+    const index = fileList.value.indexOf(fileItem);
+    if (index !== -1) {
+      removeFile(index);
+    }
+  }
+}
+
+/** 删除文件 */
+function removeFile(index: number) {
+  const removedFile = fileList.value[index];
+  fileList.value.splice(index, 1);
+  if (removedFile?.url) {
+    const urlIndex = uploadedUrls.value.indexOf(removedFile.url);
+    if (urlIndex !== -1) {
+      uploadedUrls.value.splice(urlIndex, 1);
+    }
+  }
+  updateModelValue();
+}
+
+/** 更新 v-model */
+function updateModelValue() {
+  emit('update:modelValue', [...uploadedUrls.value]);
+}
+
+/** 清空文件 */
+function clearFiles() {
+  fileList.value = [];
+  uploadedUrls.value = [];
+  updateModelValue();
+}
+
+defineExpose({
+  triggerFileInput,
+  clearFiles,
+});
+
+onUnmounted(() => {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    v-if="!disabled"
+    class="relative inline-block"
+    @mouseenter="showTooltipHandler"
+    @mouseleave="hideTooltipHandler"
+  >
+    <!-- 文件上传按钮 -->
+    <button
+      type="button"
+      class="relative flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-gray-600 transition-all duration-200 hover:bg-gray-100"
+      :class="{ 'text-blue-500 hover:bg-blue-50': hasFiles }"
+      :disabled="isLimitReached"
+      @click="triggerFileInput"
+    >
+      <IconifyIcon icon="lucide:paperclip" :size="16" />
+      <!-- 文件数量徽章 -->
+      <span
+        v-if="hasFiles"
+        class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
+      >
+        {{ fileList.length }}
+      </span>
+    </button>
+
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      style="display: none"
+      :accept="acceptTypes"
+      @change="handleFileSelect"
+    />
+
+    <!-- Hover 显示的文件列表 -->
+    <div
+      v-if="hasFiles && showTooltip"
+      class="animate-in fade-in slide-in-from-bottom-1 absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200"
+      @mouseenter="showTooltipHandler"
+      @mouseleave="hideTooltipHandler"
+    >
+      <!-- Tooltip 箭头 -->
+      <div
+        class="absolute -bottom-[5px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-200"
+      >
+        <div
+          class="absolute bottom-[1px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-white"
+        ></div>
+      </div>
+      <!-- 文件列表 -->
+      <div
+        class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400 scrollbar-thumb-rounded-sm max-h-[200px] overflow-y-auto"
+      >
+        <div
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="mb-1 flex items-center justify-between rounded-md bg-gray-50 p-2 text-xs transition-all duration-200 last:mb-0 hover:bg-gray-100"
+          :class="{ 'opacity-70': file.uploading }"
+        >
+          <div class="flex min-w-0 flex-1 items-center">
+            <IconifyIcon
+              :icon="getFileIcon(file.name)"
+              class="mr-2 flex-shrink-0 text-blue-500"
+            />
+            <span
+              class="mr-1 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium text-gray-900"
+            >
+              {{ file.name }}
+            </span>
+            <span class="flex-shrink-0 text-[11px] text-gray-500">
+              ({{ formatFileSize(file.size) }})
+            </span>
+          </div>
+          <div class="ml-2 flex flex-shrink-0 items-center gap-1">
+            <div
+              v-if="file.uploading"
+              class="h-1 w-[60px] overflow-hidden rounded-full bg-gray-200"
+            >
+              <div
+                class="h-full bg-blue-500 transition-all duration-300"
+                :style="{ width: `${file.progress || 0}%` }"
+              ></div>
+            </div>
+            <button
+              v-else-if="!disabled"
+              type="button"
+              class="flex h-5 w-5 items-center justify-center rounded text-red-500 hover:bg-red-50"
+              @click="removeFile(index)"
+            >
+              <IconifyIcon icon="lucide:x" :size="12" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/ai/chat/index/modules/message/files.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { getFileIcon, getFileNameFromUrl, getFileTypeClass } from '@vben/utils';
+
+const props = defineProps<{
+  attachmentUrls?: string[];
+}>();
+
+/** 过滤掉空值的附件列表 */
+const validAttachmentUrls = computed(() => {
+  return (props.attachmentUrls || []).filter((url) => url && url.trim());
+});
+
+/** 点击文件 */
+function handleFileClick(url: string) {
+  window.open(url, '_blank');
+}
+</script>
+
+<template>
+  <div v-if="validAttachmentUrls.length > 0" class="mt-2">
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(url, index) in validAttachmentUrls"
+        :key="index"
+        class="max-w-70 flex min-w-40 cursor-pointer items-center rounded-lg border border-transparent bg-gray-100 p-3 transition-all duration-200 hover:-translate-y-1 hover:bg-gray-200 hover:shadow-lg"
+        @click="handleFileClick(url)"
+      >
+        <div class="mr-3 flex-shrink-0">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br font-bold text-white"
+            :class="getFileTypeClass(getFileNameFromUrl(url))"
+          >
+            <IconifyIcon
+              :icon="getFileIcon(getFileNameFromUrl(url))"
+              :size="20"
+            />
+          </div>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="mb-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-tight text-gray-800"
+            :title="getFileNameFromUrl(url)"
+          >
+            {{ getFileNameFromUrl(url) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.vue

@@ -1,8 +1,7 @@
 <!-- 消息列表为空时，展示 prompt 列表 -->
 <script setup lang="ts">
-// prompt 列表
-
 const emits = defineEmits(['onPrompt']);
+
 const promptList = [
   {
     prompt: '今天气怎么样?',
@@ -10,7 +9,9 @@ const promptList = [
   {
     prompt: '写一首好听的诗歌?',
   },
-]; /** 选中 prompt 点击 */
+]; // prompt 列表
+
+/** 选中 prompt 点击 */
 async function handlerPromptClick(prompt: any) {
   emits('onPrompt', prompt.prompt);
 }

apps/web-antd/src/views/ai/chat/index/modules/message/list.vue

@@ -9,7 +9,7 @@ import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
 import { IconifyIcon, SvgGptIcon } from '@vben/icons';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import { useClipboard } from '@vueuse/core';
 import { Avatar, Button, message } from 'ant-design-vue';
@@ -17,8 +17,11 @@ import { Avatar, Button, message } from 'ant-design-vue';
 import { deleteChatMessage } from '#/api/ai/chat/message';
 import { MarkdownView } from '#/components/markdown-view';
 
-import MessageKnowledge from './MessageKnowledge.vue';
-// 定义 props
+import MessageFiles from './files.vue';
+import MessageKnowledge from './knowledge.vue';
+import MessageReasoning from './reasoning.vue';
+import MessageWebSearch from './web-search.vue';
+
 const props = defineProps({
   conversation: {
     type: Object as PropType<AiChatConversationApi.ChatConversation>,
@@ -29,7 +32,6 @@ const props = defineProps({
     required: true,
   },
 });
-// 消息列表
 
 const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']);
 const { copy } = useClipboard(); // 初始化 copy 到粘贴板
@@ -48,14 +50,15 @@ const { list } = toRefs(props); // 定义 emits
 // ============ 处理对话滚动 ==============
 
 /** 滚动到底部 */
-const scrollToBottom = async (isIgnore?: boolean) => {
+async function scrollToBottom(isIgnore?: boolean) {
   // 注意要使用 nextTick 以免获取不到 dom
   await nextTick();
   if (isIgnore || !isScrolling.value) {
     messageContainer.value.scrollTop =
       messageContainer.value.scrollHeight - messageContainer.value.offsetHeight;
   }
-};
+}
+
 function handleScroll() {
   const scrollContainer = messageContainer.value;
   const scrollTop = scrollContainer.scrollTop;
@@ -122,21 +125,31 @@ onMounted(async () => {
           <Avatar
             v-if="conversation.roleAvatar"
             :src="conversation.roleAvatar"
+            :size="28"
           />
-          <SvgGptIcon v-else class="size-8" />
+          <SvgGptIcon v-else class="size-7" />
         </div>
         <div class="mx-4 flex flex-col text-left">
           <div class="text-left leading-10">
-            {{ formatDate(item.createTime) }}
+            {{ formatDateTime(item.createTime) }}
           </div>
           <div
             class="relative flex flex-col break-words rounded-lg bg-gray-100 p-2.5 pb-1 pt-2.5 shadow-sm"
           >
+            <MessageReasoning
+              :reasoning-content="item.reasoningContent || ''"
+              :content="item.content || ''"
+            />
             <MarkdownView
               class="text-sm text-gray-600"
               :content="item.content"
             />
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
             <MessageKnowledge v-if="item.segments" :segments="item.segments" />
+            <MessageWebSearch
+              v-if="item.webSearchPages"
+              :web-search-pages="item.webSearchPages"
+            />
           </div>
           <div class="mt-2 flex flex-row">
             <Button
@@ -161,14 +174,21 @@ onMounted(async () => {
       <!-- 右侧消息：user -->
       <div v-else class="flex flex-row-reverse justify-start">
         <div class="avatar">
-          <Avatar :src="userAvatar" />
+          <Avatar :src="userAvatar" :size="28" />
         </div>
         <div class="mx-4 flex flex-col text-left">
           <div class="text-left leading-8">
-            {{ formatDate(item.createTime) }}
+            {{ formatDateTime(item.createTime) }}
+          </div>
+          <div
+            v-if="item.attachmentUrls && item.attachmentUrls.length > 0"
+            class="mb-2 flex flex-row-reverse"
+          >
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
           </div>
           <div class="flex flex-row-reverse">
             <div
+              v-if="item.content && item.content.trim()"
               class="inline w-auto whitespace-pre-wrap break-words rounded-lg bg-blue-500 p-2.5 text-sm text-white shadow-sm"
             >
               {{ item.content }}

apps/web-antd/src/views/ai/chat/index/modules/message/reasoning.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { MarkdownView } from '#/components/markdown-view';
+
+const props = defineProps<{
+  content?: string;
+  reasoningContent?: string;
+}>();
+
+const isExpanded = ref(true); // 默认展开
+
+/** 判断是否应该显示组件 */
+const shouldShowComponent = computed(() => {
+  return props.reasoningContent && props.reasoningContent.trim() !== '';
+});
+
+/** 标题文本 */
+const titleText = computed(() => {
+  const hasReasoningContent =
+    props.reasoningContent && props.reasoningContent.trim() !== '';
+  const hasContent = props.content && props.content.trim() !== '';
+  if (hasReasoningContent && !hasContent) {
+    return '深度思考中';
+  }
+  return '已深度思考';
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<template>
+  <div v-if="shouldShowComponent" class="mt-2.5">
+    <!-- 标题栏 -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-t-lg border border-b-0 border-gray-200/60 bg-gradient-to-r from-blue-50 to-purple-50 p-2 transition-all duration-200 hover:from-blue-100 hover:to-purple-100"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5 text-sm font-medium text-gray-700">
+        <IconifyIcon icon="lucide:brain" class="text-blue-600" :size="16" />
+        <span>{{ titleText }}</span>
+      </div>
+      <IconifyIcon
+        icon="lucide:chevron-down"
+        class="text-gray-500 transition-transform duration-200"
+        :class="{ 'rotate-180': isExpanded }"
+        :size="14"
+      />
+    </div>
+    <!-- 内容区 -->
+    <div
+      v-show="isExpanded"
+      class="scrollbar-thin max-h-[300px] overflow-y-auto rounded-b-lg border border-t-0 border-gray-200/60 bg-white/70 p-3 shadow-sm backdrop-blur-sm"
+    >
+      <MarkdownView
+        v-if="props.reasoningContent"
+        class="text-sm leading-relaxed text-gray-700"
+        :content="props.reasoningContent"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滚动条 */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply rounded-sm bg-gray-400/40;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400/60;
+}
+</style>

apps/web-antd/src/views/ai/chat/index/modules/message/web-search.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { AiChatMessageApi } from '#/api/ai/chat/message';
+
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+defineProps<{
+  webSearchPages?: AiChatMessageApi.WebSearchPage[];
+}>();
+
+const isExpanded = ref(false); // 默认收起
+const selectedResult = ref<AiChatMessageApi.WebSearchPage | null>(null); // 选中的搜索结果
+const iconLoadError = ref<Record<number, boolean>>({}); // 记录图标加载失败
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: '联网搜索详情',
+  closable: true,
+  footer: true,
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    if (selectedResult.value?.url) {
+      window.open(selectedResult.value.url, '_blank');
+    }
+    drawerApi.close();
+  },
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+
+/** 点击搜索结果 */
+function handleClick(result: AiChatMessageApi.WebSearchPage) {
+  selectedResult.value = result;
+  drawerApi.open();
+}
+
+/** 图标加载失败处理 */
+function handleIconError(index: number) {
+  iconLoadError.value[index] = true;
+}
+</script>
+
+<template>
+  <div v-if="webSearchPages && webSearchPages.length > 0" class="mt-2.5">
+    <!-- 标题栏：可点击展开/收起 -->
+    <div
+      class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray-600 transition-colors hover:text-blue-500"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5">
+        <IconifyIcon icon="lucide:search" :size="14" />
+        <span>联网搜索结果 ({{ webSearchPages.length }} 条)</span>
+      </div>
+      <IconifyIcon
+        :icon="isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+        class="text-xs transition-transform duration-200"
+        :size="12"
+      />
+    </div>
+
+    <!-- 可展开的搜索结果列表 -->
+    <div
+      v-show="isExpanded"
+      class="flex flex-col gap-2 transition-all duration-200 ease-in-out"
+    >
+      <div
+        v-for="(page, index) in webSearchPages"
+        :key="index"
+        class="cursor-pointer rounded-md bg-white p-2.5 transition-all hover:bg-blue-50"
+        @click="handleClick(page)"
+      >
+        <div class="flex items-start gap-2">
+          <!-- 网站图标 -->
+          <div class="mt-0.5 h-4 w-4 flex-shrink-0">
+            <img
+              v-if="page.icon && !iconLoadError[index]"
+              :src="page.icon"
+              :alt="page.name"
+              class="h-full w-full rounded-sm object-contain"
+              @error="handleIconError(index)"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <!-- 内容区域 -->
+          <div class="min-w-0 flex-1">
+            <!-- 网站名称 -->
+            <div class="mb-1 truncate text-xs text-gray-400">
+              {{ page.name }}
+            </div>
+            <!-- 主标题 -->
+            <div
+              class="mb-1 line-clamp-2 text-sm font-medium leading-snug text-blue-600"
+            >
+              {{ page.title }}
+            </div>
+            <!-- 描述 -->
+            <div class="mb-1 line-clamp-2 text-xs leading-snug text-gray-600">
+              {{ page.snippet }}
+            </div>
+            <!-- URL -->
+            <div class="truncate text-xs text-green-700">
+              {{ page.url }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 联网搜索详情 Drawer -->
+    <Drawer class="w-[600px]" cancel-text="关闭" confirm-text="访问原文">
+      <div v-if="selectedResult">
+        <!-- 标题区域 -->
+        <div class="mb-4 flex items-start gap-3">
+          <div class="mt-0.5 h-6 w-6 flex-shrink-0">
+            <img
+              v-if="selectedResult.icon"
+              :src="selectedResult.icon"
+              :alt="selectedResult.name"
+              class="h-full w-full rounded-sm object-contain"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="mb-2 text-lg font-bold text-gray-900">
+              {{ selectedResult.title }}
+            </div>
+            <div class="mb-1 text-sm text-gray-500">
+              {{ selectedResult.name }}
+            </div>
+            <div class="break-all text-sm text-green-700">
+              {{ selectedResult.url }}
+            </div>
+          </div>
+        </div>
+        <!-- 内容区域 -->
+        <div class="space-y-4">
+          <!-- 简短描述 -->
+          <div>
+            <div class="mb-2 text-sm font-semibold text-gray-900">简短描述</div>
+            <div
+              class="rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-700"
+            >
+              {{ selectedResult.snippet }}
+            </div>
+          </div>
+          <!-- 内容摘要 -->
+          <div v-if="selectedResult.summary">
+            <div class="mb-2 text-sm font-semibold text-gray-900">内容摘要</div>
+            <div
+              class="max-h-[50vh] overflow-y-auto whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-900"
+            >
+              {{ selectedResult.summary }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>

apps/web-antd/src/views/ai/chat/index/modules/role/category-list.vue

@@ -2,7 +2,7 @@
 import type { PropType } from 'vue';
 
 import { Button } from 'ant-design-vue';
-// 定义属性
+
 defineProps({
   categoryList: {
     type: Array as PropType<string[]>,
@@ -15,8 +15,7 @@ defineProps({
   },
 });
 
-// 定义回调
-const emits = defineEmits(['onCategoryClick']);
+const emits = defineEmits(['onCategoryClick']); // 定义回调
 
 /** 处理分类点击事件 */
 async function handleCategoryClick(category: string) {

apps/web-antd/src/views/ai/chat/index/modules/role/list.vue

@@ -9,9 +9,6 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Avatar, Button, Card, Dropdown, Menu } from 'ant-design-vue';
 
-// tabs ref
-
-// 定义属性
 const props = defineProps({
   loading: {
     type: Boolean,
@@ -28,8 +25,8 @@ const props = defineProps({
   },
 });
 
-// 定义钩子
 const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage']);
+
 const tabsRef = ref<any>();
 
 /** 操作：编辑、删除 */
@@ -53,7 +50,7 @@ async function handleTabsScroll() {
   if (tabsRef.value) {
     const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
     if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
-      await emits('onPage');
+      emits('onPage');
     }
   }
 }

apps/web-antd/src/views/ai/chat/index/modules/role/repository.vue

@@ -14,10 +14,11 @@ import { createChatConversationMy } from '#/api/ai/chat/conversation';
 import { deleteMy, getCategoryList, getMyPage } from '#/api/ai/model/chatRole';
 
 import Form from '../../../../model/chatRole/modules/form.vue';
-import RoleCategoryList from './RoleCategoryList.vue';
-import RoleList from './RoleList.vue';
+import RoleCategoryList from './category-list.vue';
+import RoleList from './list.vue';
 
 const router = useRouter();
+
 const [Drawer] = useVbenDrawer({
   title: '角色管理',
   footer: false,
@@ -28,7 +29,7 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
-// 属性定义
+
 const loading = ref<boolean>(false); // 加载中
 const activeTab = ref<string>('my-role'); // 选中的角色 Tab
 const search = ref<string>(''); // 加载中

apps/web-antd/src/views/ai/image/index/index.vue

@@ -11,11 +11,11 @@ import { Segmented } from 'ant-design-vue';
 
 import { getModelSimpleList } from '#/api/ai/model/model';
 
-import Common from './components/common/index.vue';
-import Dall3 from './components/dall3/index.vue';
-import ImageList from './components/ImageList.vue';
-import Midjourney from './components/midjourney/index.vue';
-import StableDiffusion from './components/stableDiffusion/index.vue';
+import Common from './modules/common/index.vue';
+import Dall3 from './modules/dall3/index.vue';
+import ImageList from './modules/list.vue';
+import Midjourney from './modules/midjourney/index.vue';
+import StableDiffusion from './modules/stable-diffusion/index.vue';
 
 const imageListRef = ref<any>(); // image 列表 ref
 const dall3Ref = ref<any>(); // dall3(openai) ref
@@ -23,7 +23,6 @@ const midjourneyRef = ref<any>(); // midjourney ref
 const stableDiffusionRef = ref<any>(); // stable diffusion ref
 const commonRef = ref<any>(); // stable diffusion ref
 
-// 定义属性
 const selectPlatform = ref('common'); // 选中的平台
 const platformOptions = [
   {
@@ -43,7 +42,6 @@ const platformOptions = [
     value: AiPlatformEnum.STABLE_DIFFUSION,
   },
 ];
-
 const models = ref<AiModelModelApi.Model[]>([]); // 模型列表
 
 /** 绘画 start  */

apps/web-antd/src/views/ai/image/index/modules/card.vue

@@ -11,8 +11,6 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Button, Card, Image, message } from 'ant-design-vue';
 
-// 消息
-
 const props = defineProps({
   detail: {
     type: Object as PropType<AiImageApi.Image>,
@@ -32,7 +30,6 @@ async function handleButtonClick(type: string, detail: AiImageApi.Image) {
 async function handleMidjourneyBtnClick(
   button: AiImageApi.ImageMidjourneyButtons,
 ) {
-  // 确认窗体
   await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
   emits('onMjBtnClick', button, props.detail);
 }
@@ -43,6 +40,7 @@ watch(detail, async (newVal) => {
   await handleLoading(newVal.status);
 });
 const loading = ref();
+
 /** 处理加载状态 */
 async function handleLoading(status: number) {
   // 情况一：如果是生成中，则设置加载中的 loading
@@ -50,10 +48,11 @@ async function handleLoading(status: number) {
     loading.value = message.loading({
       content: `生成中...`,
     });
-
-    // 情况二：如果已经生成结束，则移除 loading
   } else {
-    if (loading.value) setTimeout(loading.value, 100);
+    // 情况二：如果已经生成结束，则移除 loading
+    if (loading.value) {
+      setTimeout(loading.value, 100);
+    }
   }
 }
 
@@ -78,6 +77,7 @@ onMounted(async () => {
         </Button>
       </div>
       <div class="flex">
+        <!-- TODO @AI：居右对齐 -->
         <Button
           class="m-0 p-2"
           type="text"

apps/web-antd/src/views/ai/image/index/modules/common/index.vue

@@ -16,21 +16,17 @@ import { Button, InputNumber, Select, Space, Textarea } from 'ant-design-vue';
 
 import { drawImage } from '#/api/ai/image';
 
-// 消息弹窗
-
-// 接收父组件传入的模型列表
 const props = defineProps({
   models: {
     type: Array<AiModelModelApi.Model>,
     default: () => [] as AiModelModelApi.Model[],
   },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
 
-// 定义属性
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
-// 表单
+
 const prompt = ref<string>(''); // 提示词
 const width = ref<number>(512); // 图片宽度
 const height = ref<number>(512); // 图片高度
@@ -45,7 +41,6 @@ async function handleHotWordClick(hotWord: string) {
     selectHotWord.value = '';
     return;
   }
-
   // 情况二：选中
   selectHotWord.value = hotWord; // 选中
   prompt.value = hotWord; // 替换提示词
@@ -91,11 +86,11 @@ async function handlerPlatformChange(platform: any) {
   platformModels.value = props.models.filter(
     (item: AiModelModelApi.Model) => item.platform === platform,
   );
+  // 切换平台，默认选择一个模型
   modelId.value =
     platformModels.value.length > 0 && platformModels.value[0]
       ? platformModels.value[0].id
       : undefined;
-  // 切换平台，默认选择一个模型
 }
 
 /** 监听 models 变化 */
@@ -106,7 +101,7 @@ watch(
   },
   { immediate: true, deep: true },
 );
-/** 暴露组件方法 */
+
 defineExpose({ settingValues });
 </script>
 <template>

apps/web-antd/src/views/ai/image/index/modules/dall3/index.vue

@@ -20,16 +20,14 @@ import { Button, Image, message, Space, Textarea } from 'ant-design-vue';
 
 import { drawImage } from '#/api/ai/image';
 
-// 接收父组件传入的模型列表
 const props = defineProps({
   models: {
     type: Array<AiModelModelApi.Model>,
     default: () => [] as AiModelModelApi.Model[],
   },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
 
-// 定义属性
 const prompt = ref<string>(''); // 提示词
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
@@ -44,7 +42,6 @@ async function handleHotWordClick(hotWord: string) {
     selectHotWord.value = '';
     return;
   }
-
   // 情况二：选中
   selectHotWord.value = hotWord;
   prompt.value = hotWord;
@@ -141,7 +138,6 @@ async function settingValues(detail: AiImageApi.Image) {
   await handleSizeClick(imageSize);
 }
 
-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>

apps/web-antd/src/views/ai/image/index/modules/detail.vue

@@ -10,22 +10,22 @@ import {
   StableDiffusionSamplers,
   StableDiffusionStylePresets,
 } from '@vben/constants';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
 import { getImageMy } from '#/api/ai/image';
 
-// 图片详细信息
 const props = defineProps({
   id: {
     type: Number,
     required: true,
   },
 });
-const detail = ref<AiImageApi.Image>({} as AiImageApi.Image);
 
-/**  获取图片详情  */
+const detail = ref<AiImageApi.Image>({} as AiImageApi.Image); // 图片详细信息
+
+/** 获取图片详情  */
 async function getImageDetail(id: number) {
   detail.value = await getImageMy(id);
 }
@@ -53,12 +53,8 @@ watch(
   <div class="mb-5 w-full overflow-hidden break-words">
     <div class="text-lg font-bold">时间</div>
     <div class="mt-2">
-      <div>
-        提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
-      </div>
-      <div>
-        生成时间：{{ formatDate(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
-      </div>
+      <div>提交时间：{{ formatDateTime(detail.createTime) }}</div>
+      <div>生成时间：{{ formatDateTime(detail.finishTime) }}</div>
     </div>
   </div>
 

apps/web-antd/src/views/ai/image/index/modules/list.vue

@@ -18,10 +18,8 @@ import {
   midjourneyAction,
 } from '#/api/ai/image';
 
-import ImageCard from './ImageCard.vue';
-import ImageDetail from './ImageDetail.vue';
-
-// 暴露组件方法
+import ImageCard from './card.vue';
+import ImageDetail from './detail.vue';
 
 const emits = defineEmits(['onRegeneration']);
 const router = useRouter();
@@ -29,15 +27,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
   title: '图片详情',
   footer: false,
 });
-// 图片分页相关的参数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-});
+}); // 图片分页相关的参数
 const pageTotal = ref<number>(0); // page size
 const imageList = ref<AiImageApi.Image[]>([]); // image 列表
 const imageListRef = ref<any>(); // ref
-// 图片轮询相关的参数（正在生成中的）
+
 const inProgressImageMap = ref<{}>({}); // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
 const inProgressTimer = ref<any>(); // 生成中的 image 定时器，轮询生成进展
 const showImageDetailId = ref<number>(0); // 图片详情的图片编号
@@ -60,7 +57,6 @@ async function getImageList() {
   });
   try {
     // 1. 加载图片列表
-
     const { list, total } = await getImagePageMy(queryParams);
     imageList.value = list;
     pageTotal.value = total;
@@ -78,6 +74,7 @@ async function getImageList() {
     loading();
   }
 }
+
 const debounceGetImageList = useDebounceFn(getImageList, 80);
 /** 轮询生成中的 image 列表 */
 async function refreshWatchImages() {
@@ -132,7 +129,7 @@ async function handleImageButtonClick(
   }
   // 重新生成
   if (type === 'regeneration') {
-    await emits('onRegeneration', imageDetail);
+    emits('onRegeneration', imageDetail);
   }
 }
 
@@ -152,7 +149,9 @@ async function handleImageMidjourneyButtonClick(
   await getImageList();
 }
 
-defineExpose({ getImageList }); /** 组件挂在的时候 */
+defineExpose({ getImageList });
+
+/** 组件挂在的时候 */
 onMounted(async () => {
   // 获取 image 列表
   await getImageList();
@@ -190,7 +189,7 @@ onUnmounted(async () => {
     </template>
 
     <div
-      class="flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-28 pt-5"
+      class="flex flex-1 flex-wrap content-start overflow-y-auto p-3 pb-28 pt-5"
       ref="imageListRef"
     >
       <ImageCard
@@ -199,7 +198,7 @@ onUnmounted(async () => {
         :detail="image"
         @on-btn-click="handleImageButtonClick"
         @on-mj-btn-click="handleImageMidjourneyButtonClick"
-        class="mb-5 mr-5"
+        class="mb-3 mr-3"
       />
     </div>
 

apps/web-antd/src/views/ai/image/index/modules/midjourney/index.vue

@@ -29,21 +29,17 @@ import {
 import { midjourneyImagine } from '#/api/ai/image';
 import { ImageUpload } from '#/components/upload';
 
-// 消息弹窗
-
-// 接收父组件传入的模型列表
 const props = defineProps({
   models: {
     type: Array<AiModelModelApi.Model>,
     default: () => [] as AiModelModelApi.Model[],
   },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
 
-// 定义属性
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
-// 表单
+
 const prompt = ref<string>(''); // 提示词
 const referImageUrl = ref<any>(); // 参考图
 const selectModel = ref<string>('midjourney'); // 选中的模型
@@ -58,7 +54,6 @@ async function handleHotWordClick(hotWord: string) {
     selectHotWord.value = '';
     return;
   }
-
   // 情况二：选中
   selectHotWord.value = hotWord; // 选中
   prompt.value = hotWord; // 设置提示次
@@ -140,7 +135,6 @@ async function settingValues(detail: AiImageApi.Image) {
   referImageUrl.value = detail.options.referImageUrl;
 }
 
-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>

apps/web-antd/src/views/ai/image/index/modules/stable-diffusion/index.vue

@@ -25,14 +25,12 @@ import {
 
 import { drawImage } from '#/api/ai/image';
 
-// 接收父组件传入的模型列表
 const props = defineProps({
   models: {
     type: Array<AiModelModelApi.Model>,
     default: () => [] as AiModelModelApi.Model[],
   },
-});
-
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
 
 function hasChinese(str: string) {
@@ -60,7 +58,6 @@ async function handleHotWordClick(hotWord: string) {
     selectHotWord.value = '';
     return;
   }
-
   // 情况二：选中
   selectHotWord.value = hotWord; // 选中
   prompt.value = hotWord; // 替换提示词
@@ -82,7 +79,7 @@ async function handleGenerateImage() {
 
   // 二次确认
   if (hasChinese(prompt.value)) {
-    alert('暂不支持中文！');
+    await alert('暂不支持中文！');
     return;
   }
   await confirm(`确认生成内容?`);
@@ -129,7 +126,6 @@ async function settingValues(detail: AiImageApi.Image) {
   stylePreset.value = detail.options?.stylePreset;
 }
 
-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>
@@ -228,6 +224,7 @@ defineExpose({ settingValues });
   </div>
 
   <!-- 图片尺寸 -->
+  <!-- TODO @AI：同 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/ai/image/index/modules/common/index.vue 的问题 -->
   <div class="mt-8">
     <div><b>图片尺寸</b></div>
     <Space wrap class="mt-4 w-full">

apps/web-antd/src/views/ai/image/manager/index.vue

@@ -24,7 +24,7 @@ async function handleDelete(row: AiImageApi.Image) {
     duration: 0,
   });
   try {
-    await deleteImage(row.id as number);
+    await deleteImage(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {

apps/web-antd/src/views/ai/image/square/index.vue

@@ -31,7 +31,9 @@ async function getList() {
     loading.value = false;
   }
 }
+
 const debounceGetList = useDebounceFn(getList, 80);
+
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.pageNo = 1;

apps/web-antd/src/views/ai/knowledge/document/data.ts

@@ -53,7 +53,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入检索 topK',
-        class: 'w-full',
         min: 0,
         max: 10,
       },
@@ -65,7 +64,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入检索相似度阈值',
-        class: 'w-full',
         min: 0,
         max: 1,
         step: 0.01,

apps/web-antd/src/views/ai/knowledge/document/index.vue

@@ -55,7 +55,7 @@ async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
     duration: 0,
   });
   try {
-    await deleteKnowledgeDocument(row.id as number);
+    await deleteKnowledgeDocument(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -164,11 +164,10 @@ onMounted(() => {
               auth: ['ai:knowledge:update'],
               onClick: handleEdit.bind(null, row.id),
             },
-          ]"
-          :drop-down-actions="[
             {
               label: '分段',
               type: 'link',
+              icon: ACTION_ICON.BOOK,
               auth: ['ai:knowledge:query'],
               onClick: handleSegment.bind(null, row.id),
             },

apps/web-antd/src/views/ai/knowledge/knowledge/index.vue

@@ -45,7 +45,7 @@ async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
     duration: 0,
   });
   try {
-    await deleteKnowledge(row.id as number);
+    await deleteKnowledge(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {

apps/web-antd/src/views/ai/knowledge/segment/index.vue

@@ -51,7 +51,7 @@ async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
     duration: 0,
   });
   try {
-    await deleteKnowledgeSegment(row.id as number);
+    await deleteKnowledgeSegment(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {

apps/web-antd/src/views/ai/mindmap/manager/index.vue

@@ -31,7 +31,7 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
     duration: 0,
   });
   try {
-    await deleteMindMap(row.id as number);
+    await deleteMindMap(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {

apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue

@@ -11,7 +11,6 @@ defineOptions({ name: 'AiMusicAudioBarIndex' });
 const currentSong = inject<any>('currentSong', {});
 
 const audioRef = ref<HTMLAudioElement | null>(null);
-// 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
 const audioProps = reactive<any>({
   autoplay: true,
   paused: false,
@@ -19,7 +18,7 @@ const audioProps = reactive<any>({
   duration: '00:00',
   muted: false,
   volume: 50,
-});
+}); // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
 
 function toggleStatus(type: string) {
   audioProps[type] = !audioProps[type];
@@ -32,7 +31,7 @@ function toggleStatus(type: string) {
   }
 }
 
-// 更新播放位置
+/** 更新播放位置 */
 function audioTimeUpdate(args: any) {
   audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
 }

apps/web-antd/src/views/ai/music/index/list/index.vue

@@ -12,19 +12,11 @@ import songInfo from './songInfo/index.vue';
 defineOptions({ name: 'AiMusicListIndex' });
 
 const currentType = ref('mine');
-// loading 状态
-const loading = ref(false);
-// 当前音乐
-const currentSong = ref({});
-
+const loading = ref(false); // loading 状态
+const currentSong = ref({}); // 当前音乐
 const mySongList = ref<Recordable<any>[]>([]);
 const squareSongList = ref<Recordable<any>[]>([]);
 
-/*
- *@Description: 调接口生成音乐列表
- *@MethodAuthor: xiaohong
- *@Date: 2024-06-27 17:06:44
- */
 function generateMusic(formData: Recordable<any>) {
   loading.value = true;
   setTimeout(() => {
@@ -53,11 +45,6 @@ function generateMusic(formData: Recordable<any>) {
   }, 3000);
 }
 
-/*
- *@Description: 设置当前播放的音乐
- *@MethodAuthor: xiaohong
- *@Date: 2024-07-19 11:22:33
- */
 function setCurrentSong(music: Recordable<any>) {
   currentSong.value = music;
 }

apps/web-antd/src/views/ai/music/index/mode/index.vue

@@ -16,11 +16,6 @@ const generateMode = ref('lyric');
 
 const modeRef = ref<Nullable<{ formData: Recordable<any> }>>(null);
 
-/*
- *@Description: 根据信息生成音乐
- *@MethodAuthor: xiaohong
- *@Date: 2024-06-27 16:40:16
- */
 function generateMusic() {
   emits('generateMusic', { formData: unref(modeRef)?.formData });
 }

apps/web-antd/src/views/ai/music/manager/index.vue

@@ -24,7 +24,7 @@ async function handleDelete(row: AiMusicApi.Music) {
     duration: 0,
   });
   try {
-    await deleteMusic(row.id as number);
+    await deleteMusic(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {

apps/web-antd/src/views/ai/workflow/data.ts

@@ -13,19 +13,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'code',
       label: '流程标识',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程标识',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'name',
       label: '流程名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '状态',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
       },
     },
     {
@@ -46,27 +55,33 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
+      minWidth: 100,
     },
     {
       field: 'code',
       title: '流程标识',
+      minWidth: 150,
     },
     {
       field: 'name',
       title: '流程名称',
+      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'remark',
       title: '备注',
+      minWidth: 200,
     },
     {
       field: 'status',
       title: '状态',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },

apps/web-antd/src/views/ai/workflow/form/index.vue

@@ -25,10 +25,27 @@ const route = useRoute();
 const workflowId = ref<string>('');
 const actionType = ref<string>('');
 
-// 基础信息组件引用
-const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
-// 工作流设计组件引用
-const workflowDesignRef = ref<InstanceType<typeof WorkflowDesign>>();
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const workflowDesignRef = ref<InstanceType<typeof WorkflowDesign>>(); // 工作流设计组件引用
+
+const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+const steps = [
+  { title: '基本信息', validator: validateBasic },
+  { title: '工作流设计', validator: validateWorkflow },
+];
+
+const formData: any = ref({
+  id: undefined,
+  name: '',
+  code: '',
+  remark: '',
+  graph: '',
+  status: CommonStatusEnum.ENABLE,
+}); // 表单数据
+
+const llmProvider = ref<any>([]);
+const workflowData = ref<any>({});
+provide('workflowData', workflowData);
 
 /** 步骤校验函数 */
 async function validateBasic() {
@@ -40,30 +57,9 @@ async function validateWorkflow() {
   await workflowDesignRef.value?.validate();
 }
 
-const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
-
-const steps = [
-  { title: '基本信息', validator: validateBasic },
-  { title: '工作流设计', validator: validateWorkflow },
-];
-
-// 表单数据
-const formData: any = ref({
-  id: undefined,
-  name: '',
-  code: '',
-  remark: '',
-  graph: '',
-  status: CommonStatusEnum.ENABLE,
-});
-
-const llmProvider = ref<any>([]);
-const workflowData = ref<any>({});
-provide('workflowData', workflowData);
-
 async function initData() {
   if (actionType.value === 'update' && workflowId.value) {
-    formData.value = await getWorkflow(workflowId.value);
+    formData.value = await getWorkflow(workflowId.value as any);
     workflowData.value = JSON.parse(formData.value.graph);
   }
   const models = await getModelSimpleList(AiModelTypeEnum.CHAT);

apps/web-antd/src/views/ai/workflow/form/modules/basic-info.vue

@@ -8,10 +8,8 @@ import { getDictOptions } from '@vben/hooks';
 
 import { Form, Input, Select } from 'ant-design-vue';
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-// 表单引用
-const formRef = ref();
+const modelData = defineModel<any>(); // 创建本地数据副本
+const formRef = ref(); // 表单引用
 const rules: Record<string, Rule[]> = {
   code: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],

apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue

@@ -28,43 +28,52 @@ const [Drawer, drawerApi] = useVbenDrawer({
   footer: false,
   closeOnClickModal: false,
   modal: false,
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      // 查找 start 节点
+      const startNode = getStartNode();
+      // 获取参数定义
+      const parameters: any[] = (startNode.data?.parameters as any[]) || [];
+      const paramDefinitions: Record<string, any> = {};
+      // 加入参数选项方便用户添加非必须参数
+      parameters.forEach((param: any) => {
+        paramDefinitions[param.name] = param;
+      });
+      // 自动装载需必填的参数
+      function mergeIfRequiredButNotSet(target: any[]) {
+        const needPushList = [];
+        for (const key in paramDefinitions) {
+          const param = paramDefinitions[key];
+
+          if (param.required) {
+            const item = target.find((item: any) => item.key === key);
+
+            if (!item) {
+              needPushList.push({
+                key: param.name,
+                value: param.defaultValue || '',
+              });
+            }
+          }
+        }
+        target.push(...needPushList);
+      }
+      mergeIfRequiredButNotSet(params4Test.value);
+
+      // 设置参数
+      paramsOfStartNode.value = paramDefinitions;
+    } catch (error) {
+      console.error('加载参数失败:', error);
+    }
+  },
 });
+
 /** 展示工作流测试抽屉 */
 function testWorkflowModel() {
   drawerApi.open();
-  const startNode = getStartNode();
-
-  // 获取参数定义
-  const parameters: any[] = (startNode.data?.parameters as any[]) || [];
-  const paramDefinitions: Record<string, any> = {};
-
-  // 加入参数选项方便用户添加非必须参数
-  parameters.forEach((param: any) => {
-    paramDefinitions[param.name] = param;
-  });
-
-  function mergeIfRequiredButNotSet(target: any) {
-    const needPushList = [];
-    for (const key in paramDefinitions) {
-      const param = paramDefinitions[key];
-
-      if (param.required) {
-        const item = target.find((item: any) => item.key === key);
-
-        if (!item) {
-          needPushList.push({
-            key: param.name,
-            value: param.defaultValue || '',
-          });
-        }
-      }
-    }
-    target.push(...needPushList);
-  }
-  // 自动装载需必填的参数
-  mergeIfRequiredButNotSet(params4Test.value);
-
-  paramsOfStartNode.value = paramDefinitions;
 }
 
 /** 运行流程 */
@@ -74,27 +83,26 @@ async function goRun() {
     loading.value = true;
     error.value = null;
     testResult.value = null;
-    // / 查找start节点
-    const startNode = getStartNode();
 
+    // 查找start节点
+    const startNode = getStartNode();
     // 获取参数定义
     const parameters: any[] = (startNode.data?.parameters as any[]) || [];
     const paramDefinitions: Record<string, any> = {};
     parameters.forEach((param: any) => {
       paramDefinitions[param.name] = param.dataType;
     });
-
     // 参数类型转换
     const convertedParams: Record<string, any> = {};
     for (const { key, value } of params4Test.value) {
       const paramKey = key.trim();
-      if (!paramKey) continue;
-
+      if (!paramKey) {
+        continue;
+      }
       let dataType = paramDefinitions[paramKey];
       if (!dataType) {
         dataType = 'String';
       }
-
       try {
         convertedParams[paramKey] = convertParamValue(value, dataType);
       } catch (error: any) {
@@ -102,13 +110,11 @@ async function goRun() {
       }
     }
 
-    const data = {
+    // 执行测试请求
+    testResult.value = await testWorkflow({
       graph: JSON.stringify(val),
       params: convertedParams,
-    };
-
-    const response = await testWorkflow(data);
-    testResult.value = response;
+    });
   } catch (error: any) {
     error.value =
       error.response?.data?.message || '运行失败，请检查参数和网络连接';
@@ -120,6 +126,7 @@ async function goRun() {
 /** 获取开始节点 */
 function getStartNode() {
   if (tinyflowRef.value) {
+    // TODO @xingyu：不确定是不是这里封装了 Tinyflow，现在 .getData() 会报错；
     const val = tinyflowRef.value.getData();
     const startNode = val!.nodes.find((node: any) => node.type === 'startNode');
     if (!startNode) {
@@ -142,8 +149,9 @@ function removeParam(index: number) {
 
 /** 类型转换函数 */
 function convertParamValue(value: string, dataType: string) {
-  if (value === '') return null; // 空值处理
-
+  if (value === '') {
+    return null;
+  }
   switch (dataType) {
     case 'Number': {
       const num = Number(value);
@@ -154,8 +162,12 @@ function convertParamValue(value: string, dataType: string) {
       return String(value);
     }
     case 'Boolean': {
-      if (value.toLowerCase() === 'true') return true;
-      if (value.toLowerCase() === 'false') return false;
+      if (value.toLowerCase() === 'true') {
+        return true;
+      }
+      if (value.toLowerCase() === 'false') {
+        return false;
+      }
       throw new Error('必须为 true/false');
     }
     case 'Array':
@@ -171,9 +183,9 @@ function convertParamValue(value: string, dataType: string) {
     }
   }
 }
+
 /** 表单校验 */
 async function validate() {
-  // 获取最新的流程数据
   if (!workflowData.value || !tinyflowRef.value) {
     throw new Error('请设计流程');
   }

apps/web-antd/src/views/ai/workflow/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiWorkflowApi } from '#/api/ai/workflow';
 
 import { Page } from '@vben/common-ui';
 
@@ -17,14 +18,14 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建工作流 */
 function handleCreate() {
   router.push({
     name: 'AiWorkflowCreate',
   });
 }
 
-/** 编辑 */
+/** 编辑工作流 */
 function handleEdit(row: any) {
   router.push({
     name: 'AiWorkflowCreate',
@@ -32,17 +33,15 @@ function handleEdit(row: any) {
   });
 }
 
-/** 删除 */
+/** 删除工作流 */
 async function handleDelete(row: any) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteWorkflow(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteWorkflow(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -70,12 +69,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<AiWorkflowApi.Workflow>,
 });
 </script>
 

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts

@@ -9,5 +9,3 @@ export { default as MyProcessDesigner } from './designer';
 // TODO @puhui999：流程发起时，预览相关的，需要使用；
 export { default as MyProcessViewer } from './designer/index2';
 export { default as MyProcessPenal } from './penal';
-
-// TODO @jason：【有个迁移的打印】【新增】流程打印，由 [@Lesan](https://gitee.com/LesanOuO) 贡献 [#816](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/816/)、[#1418](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1418/)、[#817](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/817/)、[#1419](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1419/)、[#1424](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1424)、[#819](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/819)、[#821](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/821/)

apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type { MentionItem } from '../modules/tinymce-plugin';
+
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import Editor from '@tinymce/tinymce-vue';
+import { Alert, Button } from 'ant-design-vue';
+
+import { setupTinyPlugins } from './tinymce-plugin';
+
+const props = withDefaults(
+  defineProps<{
+    formFields?: Array<{ field: string; title: string }>;
+  }>(),
+  {
+    formFields: () => [],
+  },
+);
+
+/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const { template } = modalApi.getData<{
+        template: string;
+      }>();
+      if (template !== undefined) {
+        valueHtml.value = template;
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+const handleConfirm = () => {
+  /** 通过 setData 传递确认的数据，在父组件的 onConfirm 中获取 */
+  modalApi.setData({ confirmedTemplate: valueHtml.value as string });
+  modalApi.onConfirm();
+  modalApi.close();
+};
+
+const mentionList = computed<MentionItem[]>(() => {
+  const base: MentionItem[] = [
+    { id: 'startUser', name: '发起人' },
+    { id: 'startUserDept', name: '发起人部门' },
+    { id: 'processName', name: '流程名称' },
+    { id: 'processNum', name: '流程编号' },
+    { id: 'startTime', name: '发起时间' },
+    { id: 'endTime', name: '结束时间' },
+    { id: 'processStatus', name: '流程状态' },
+    { id: 'printUser', name: '打印人' },
+    { id: 'printTime', name: '打印时间' },
+  ];
+
+  const extras: MentionItem[] = (props.formFields || []).map((it: any) => ({
+    id: it.field,
+    name: `[表单]${it.title}`,
+  }));
+  return [...base, ...extras];
+}); // 提供给 @ 自动补全的字段（默认 + 表单字段）
+
+const valueHtml = ref<string>('');
+const editorRef = shallowRef<any>(); // 编辑器
+
+const tinyInit = {
+  height: 400,
+  width: 'auto',
+  menubar: false,
+  plugins: 'link importcss table code preview autoresize lists ',
+  toolbar:
+    'undo redo | styles fontsize | bold italic underline | alignleft aligncenter alignright | link table | processrecord code preview',
+  language: 'zh_CN',
+  branding: false,
+  statusbar: true,
+  content_style:
+    'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+  setup(editor: any) {
+    editorRef.value = editor;
+    // 在编辑器 setup 时注册自定义插件
+    setupTinyPlugins(editor, () => mentionList.value);
+  },
+};
+
+onBeforeUnmount(() => {
+  if (editorRef.value) {
+    editorRef.value.destroy?.();
+  }
+});
+</script>
+
+<template>
+  <!-- TODO @jason：a-button 改成 Modal 自带的 onConfirm 替代；= = 我貌似试着改了下，有点问题，略奇怪 -->
+  <Modal class="w-3/4" title="自定义模板">
+    <div class="mb-3">
+      <Alert
+        message="输入 @ 可选择插入流程选项和表单选项"
+        type="info"
+        show-icon
+      />
+    </div>
+    <Editor
+      v-model="valueHtml"
+      :init="tinyInit"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button @click="modalApi.onCancel()">取 消</Button>
+        <Button type="primary" @click="handleConfirm">确 定</Button>
+      </div>
+    </template>
+  </Modal>
+</template>

apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, ref, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import {
   BpmAutoApproveType,
   BpmModelFormType,
@@ -9,6 +10,7 @@ import {
 import { IconifyIcon } from '@vben/icons';
 
 import {
+  Button,
   Checkbox,
   Col,
   Form,
@@ -32,6 +34,8 @@ import {
   parseFormFields,
 } from '#/views/bpm/components/simple-process-design';
 
+import PrintTemplate from './custom-print-template.vue';
+
 const modelData = defineModel<any>();
 
 /** 自定义 ID 流程编码 */
@@ -147,9 +151,9 @@ function handleTaskAfterTriggerEnableChange(val: boolean | number | string) {
 }
 
 /** 表单字段 */
-const formField = ref<Array<{ field: string; title: string }>>([]);
+const formFields = ref<Array<{ field: string; title: string }>>([]);
 const formFieldOptions4Title = computed(() => {
-  const cloneFormField = formField.value.map((item) => {
+  const cloneFormField = formFields.value.map((item) => {
     return {
       label: item.title,
       value: item.field,
@@ -171,7 +175,7 @@ const formFieldOptions4Title = computed(() => {
   return cloneFormField;
 });
 const formFieldOptions4Summary = computed(() => {
-  return formField.value.map((item) => {
+  return formFields.value.map((item) => {
     return {
       label: item.title,
       value: item.field,
@@ -192,6 +196,12 @@ function initData() {
       length: 5,
     };
   }
+  if (!modelData.value.printTemplateSetting) {
+    modelData.value.printTemplateSetting = {
+      enable: false,
+      template: '',
+    };
+  }
   if (!modelData.value.autoApprovalType) {
     modelData.value.autoApprovalType = BpmAutoApproveType.NONE;
   }
@@ -237,9 +247,9 @@ watch(
           parseFormFields(JSON.parse(fieldStr), result);
         });
       }
-      formField.value = result;
+      formFields.value = result;
     } else {
-      formField.value = [];
+      formFields.value = [];
       unParsedFormFields.value = [];
     }
   },
@@ -252,6 +262,85 @@ async function validate() {
   await formRef.value?.validate();
 }
 
+/** 自定义打印模板模态框 */
+const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
+  connectedComponent: PrintTemplate,
+  destroyOnClose: true,
+  onConfirm() {
+    // 会在内部模态框中设置数据，这里获取数据， 内部模态框中不能有 onConfirm 方法
+    const { confirmedTemplate } = printTemplateModalApi.getData<{
+      confirmedTemplate: string;
+    }>();
+    if (confirmedTemplate !== undefined) {
+      modelData.value.printTemplateSetting.template = confirmedTemplate;
+    }
+  },
+});
+
+/** 弹出自定义打印模板弹窗 */
+const openPrintTemplateModal = () => {
+  printTemplateModalApi
+    .setData({ template: modelData.value.printTemplateSetting.template })
+    .open();
+};
+
+/** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
+const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
+<p style="text-align: right;">打印人员：<span data-w-e-type="mention" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p>
+<p style="text-align: left;">流程编号：<span data-w-e-type="mention" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span></p>
+<p>&nbsp;</p>
+<table style="width: 100%; height: 72.2159px;">
+<tbody>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起人</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起时间</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td>
+</tr>
+<tr style="height: 36.108px;">
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">所属部门</td>
+<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td>
+<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">流程状态</td>
+<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td>
+</tr>
+</tbody>
+</table>
+<p>&nbsp;</p>
+<div contenteditable="false" data-w-e-type="process-record" data-w-e-is-void="">
+<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">
+<tr>
+	<td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td>
+</tr>
+<tr>
+	<td style="width: 25%; border: 1px solid;">节点</td>
+	<td style="width: 75%; border: 1px solid;">操作</td>
+</tr>
+</table>
+</div>
+<p>&nbsp;</p>`;
+
+const printTemplateEnable = computed<boolean>({
+  get() {
+    return !!modelData.value?.printTemplateSetting?.enable;
+  },
+  set(val: boolean) {
+    if (!modelData.value.printTemplateSetting) {
+      modelData.value.printTemplateSetting = {
+        enable: false,
+        template: '',
+      };
+    }
+    modelData.value.printTemplateSetting.enable = val;
+  },
+}); // 自定义打印模板开关
+
+function handlePrintTemplateEnableChange(checked: any) {
+  const val = !!checked;
+  if (val && !modelData.value.printTemplateSetting.template) {
+    modelData.value.printTemplateSetting.template = defaultTemplate;
+  }
+}
+
 defineExpose({ initData, validate });
 </script>
 <template>
@@ -515,6 +604,27 @@ defineExpose({ initData, validate });
         </Col>
       </Row>
     </FormItem>
-    <!-- TODO @jason：这里有个 “自定义打印模板” -->
+    <FormItem class="mb-5" label="自定义打印模板">
+      <div class="flex w-full flex-col">
+        <div class="flex items-center">
+          <Switch
+            v-model:checked="printTemplateEnable"
+            @change="handlePrintTemplateEnableChange"
+          />
+          <Button
+            v-if="printTemplateEnable"
+            class="ml-2 flex items-center"
+            type="link"
+            @click="openPrintTemplateModal"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:pencil" />
+            </template>
+            编辑模板
+          </Button>
+        </div>
+      </div>
+    </FormItem>
+    <PrintTemplateModal :form-fields="formFields" />
   </Form>
 </template>

apps/web-antd/src/views/bpm/model/form/modules/tinymce-plugin.ts

@@ -0,0 +1,78 @@
+/** TinyMCE 自定义功能：
+ * - processrecord 按钮：插入流程记录占位元素
+ * - @ 自动补全：插入 mention 占位元素
+ */
+
+// @ts-ignore TinyMCE 全局或通过打包器提供
+import type { Editor } from 'tinymce';
+
+export interface MentionItem {
+  id: string;
+  name: string;
+}
+
+/** 在编辑器 setup 回调中注册流程记录按钮和 @ 自动补全 */
+export function setupTinyPlugins(
+  editor: Editor,
+  getMentionList: () => MentionItem[],
+) {
+  // 按钮：流程记录
+  editor.ui.registry.addButton('processrecord', {
+    text: '流程记录',
+    tooltip: '插入流程记录占位',
+    onAction: () => {
+      // 流程记录占位显示， 仅用于显示。process-print.vue 组件中会替换掉
+      editor.insertContent(
+        [
+          '<div data-w-e-type="process-record" data-w-e-is-void contenteditable="false">',
+          '<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">',
+          '<tr><td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td></tr>',
+          '<tr>',
+          '<td style="width: 25%; border: 1px solid;">节点</td>',
+          '<td style="width: 75%; border: 1px solid;">操作</td>',
+          '</tr>',
+          '</table>',
+          '</div>',
+        ].join(''),
+      );
+    },
+  });
+
+  // @ 自动补全
+  editor.ui.registry.addAutocompleter('bpmMention', {
+    trigger: '@',
+    minChars: 0,
+    columns: 1,
+    fetch: (
+      pattern: string,
+      _maxResults: number,
+      _fetchOptions: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const keyword = (pattern || '').toLowerCase().trim();
+      const data = list
+        .filter((i) => i.name.toLowerCase().includes(keyword))
+        .map((i) => ({
+          value: i.id,
+          text: i.name,
+        }));
+      return Promise.resolve(data);
+    },
+    onAction: (
+      autocompleteApi: any,
+      rng: Range,
+      value: string,
+      _meta: Record<string, any>,
+    ) => {
+      const list = getMentionList();
+      const item = list.find((i) => i.id === value);
+      const name = item ? item.name : value;
+      const info = encodeURIComponent(JSON.stringify({ id: value }));
+      editor.selection.setRng(rng);
+      editor.insertContent(
+        `<span data-w-e-type="mention" data-info="${info}">@${name}</span>`,
+      );
+      autocompleteApi.hide();
+    },
+  });
+}

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -34,7 +34,7 @@ import { registerComponent } from '#/utils';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
-import ProcessssPrint from './modules/processs-print.vue';
+import ProcessssPrint from './modules/process-print.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';

apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue

@@ -143,7 +143,7 @@ function initPrintDataMap() {
   printDataMap.value.printTime = printTime.value;
 }
 
-/** 获取打印模板 HTML （TODO 需求实现配置打印模板） */
+/** 获取打印模板 HTML  */
 function getPrintTemplateHTML() {
   if (!printData.value?.printTemplateHtml) return '';
 
@@ -153,16 +153,6 @@ function getPrintTemplateHTML() {
     'text/html',
   );
 
-  // table 添加 border
-  const tables = doc.querySelectorAll('table');
-  tables.forEach((item) => {
-    item.setAttribute('border', '1');
-    item.setAttribute(
-      'style',
-      `${item.getAttribute('style') || ''}border-collapse:collapse;`,
-    );
-  });
-
   // 替换 mentions
   const mentions = doc.querySelectorAll('[data-w-e-type="mention"]');
   mentions.forEach((item) => {
@@ -181,26 +171,23 @@ function getPrintTemplateHTML() {
 
   if (processRecords.length > 0) {
     // 构建流程记录 html
-    processRecordTable.setAttribute('border', '1');
-    processRecordTable.setAttribute(
-      'style',
-      'width:100%;border-collapse:collapse;',
-    );
+    processRecordTable.setAttribute('class', 'w-full border-collapse');
 
     const headTr = document.createElement('tr');
     const headTd = document.createElement('td');
     headTd.setAttribute('colspan', '2');
-    headTd.setAttribute('width', 'auto');
-    headTd.setAttribute('style', 'text-align: center;');
-    headTd.innerHTML = '流程节点';
+    headTd.setAttribute('class', 'border border-black p-1.5 text-center');
+    headTd.innerHTML = '流程记录';
     headTr.append(headTd);
     processRecordTable.append(headTr);
 
     printData.value?.tasks.forEach((item) => {
       const tr = document.createElement('tr');
       const td1 = document.createElement('td');
+      td1.setAttribute('class', 'border border-black p-1.5');
       td1.innerHTML = item.name;
       const td2 = document.createElement('td');
+      td2.setAttribute('class', 'border border-black p-1.5');
       td2.innerHTML = item.description;
       tr.append(td1);
       tr.append(td2);
@@ -229,35 +216,34 @@ function getPrintTemplateHTML() {
         <h2 class="mb-3 text-center text-xl font-bold">
           {{ printData.processInstance.name }}
         </h2>
-        <div class="mb-2 text-right text-sm">
-          {{ `打印人员: ${userName}` }}
-        </div>
         <div class="mb-2 flex justify-between text-sm">
           <div>
             {{ `流程编号: ${printData.processInstance.id}` }}
           </div>
-          <div>{{ `打印时间: ${printTime}` }}</div>
+          <div>
+            {{ `打印人员: ${userName}` }}
+          </div>
         </div>
-        <table class="mt-3 w-full border-collapse border border-gray-400">
+        <table class="mt-3 w-full border-collapse">
           <tbody>
             <tr>
-              <td class="w-1/4 border border-gray-400 p-1.5">发起人</td>
-              <td class="w-1/4 border border-gray-400 p-1.5">
+              <td class="w-1/4 border border-black p-1.5">发起人</td>
+              <td class="w-1/4 border border-black p-1.5">
                 {{ printData.processInstance.startUser?.nickname }}
               </td>
-              <td class="w-1/4 border border-gray-400 p-1.5">发起时间</td>
-              <td class="w-1/4 border border-gray-400 p-1.5">
-                <!-- TODO @jason：这里会告警呢 -->
+              <td class="w-1/4 border border-black p-1.5">发起时间</td>
+              <td class="w-1/4 border border-black p-1.5">
+                <!-- TODO @jason：这里会告警呢 TODO @芋艿 我这边不会有警告呀 -->
                 {{ formatDate(printData.processInstance.startTime) }}
               </td>
             </tr>
             <tr>
-              <td class="w-1/4 border border-gray-400 p-1.5">所属部门</td>
-              <td class="w-1/4 border border-gray-400 p-1.5">
+              <td class="w-1/4 border border-black p-1.5">所属部门</td>
+              <td class="w-1/4 border border-black p-1.5">
                 {{ printData.processInstance.startUser?.deptName }}
               </td>
-              <td class="w-1/4 border border-gray-400 p-1.5">流程状态</td>
-              <td class="w-1/4 border border-gray-400 p-1.5">
+              <td class="w-1/4 border border-black p-1.5">流程状态</td>
+              <td class="w-1/4 border border-black p-1.5">
                 {{
                   getDictLabel(
                     DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
@@ -268,33 +254,33 @@ function getPrintTemplateHTML() {
             </tr>
             <tr>
               <td
-                class="w-full border border-gray-400 p-1.5 text-center"
+                class="w-full border border-black p-1.5 text-center"
                 colspan="4"
               >
                 <h4>表单内容</h4>
               </td>
             </tr>
             <tr v-for="item in formFields" :key="item.id">
-              <td class="w-1/5 border border-gray-400 p-1.5">
+              <td class="w-1/5 border border-black p-1.5">
                 {{ item.name }}
               </td>
-              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+              <td class="w-4/5 border border-black p-1.5" colspan="3">
                 <div v-html="item.html"></div>
               </td>
             </tr>
             <tr>
               <td
-                class="w-full border border-gray-400 p-1.5 text-center"
+                class="w-full border border-black p-1.5 text-center"
                 colspan="4"
               >
-                <h4>流程节点</h4>
+                <h4>流程记录</h4>
               </td>
             </tr>
             <tr v-for="item in printData.tasks" :key="item.id">
-              <td class="w-1/5 border border-gray-400 p-1.5">
+              <td class="w-1/5 border border-black p-1.5">
                 {{ item.name }}
               </td>
-              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+              <td class="w-4/5 border border-black p-1.5" colspan="3">
                 {{ item.description }}
                 <div v-if="item.signPicUrl && item.signPicUrl.length > 0">
                   <img class="h-10 w-[90px]" :src="item.signPicUrl" alt="" />

apps/web-antd/src/views/crm/business/components/detail-list.vue

@@ -113,7 +113,7 @@ async function handleCreateContactBusinessList(businessIds: number[]) {
   const data = {
     contactId: props.bizId,
     businessIds,
-  } as CrmContactApi.ContactBusinessReq;
+  } as CrmContactApi.ContactBusinessReqVO;
   await createContactBusinessList(data);
   handleRefresh();
 }

apps/web-antd/src/views/crm/clue/detail/index.vue

@@ -36,7 +36,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
 const [Descriptions] = useDescription({
   bordered: false,
   column: 4,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 

apps/web-antd/src/views/crm/clue/detail/modules/info.vue

@@ -30,7 +30,7 @@ const [SystemDescriptions] = useDescription({
 </script>
 
 <template>
-  <div class="p-4">
+  <div>
     <BaseDescriptions :data="clue" />
     <Divider />
     <SystemDescriptions :data="clue" />

apps/web-antd/src/views/crm/contact/components/detail-list.vue

@@ -100,7 +100,7 @@ async function handleCreateBusinessContactList(contactIds: number[]) {
   const data = {
     businessId: props.bizId,
     contactIds,
-  } as CrmContactApi.BusinessContactReq;
+  } as CrmContactApi.BusinessContactReqVO;
   await createBusinessContactList(data);
   handleRefresh();
 }

apps/web-antd/src/views/crm/permission/modules/transfer-form.vue

@@ -66,7 +66,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    const data = (await formApi.getValues()) as CrmPermissionApi.BusinessTransferReqVO;
     try {
       switch (bizType.value) {
         case BizTypeEnum.CRM_BUSINESS: {

apps/web-antd/src/views/crm/product/category/data.ts

@@ -85,7 +85,7 @@ export function useGridColumns(): VxeTableGridOptions<CrmProductCategoryApi.Prod
     {
       field: 'actions',
       title: '操作',
-      width: 200,
+      width: 250,
       fixed: 'right',
       slots: {
         default: 'actions',

apps/web-antd/src/views/crm/product/category/modules/form.vue

@@ -68,6 +68,8 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     let data = modalApi.getData<CrmProductCategoryApi.ProductCategory>();
     if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
       return;
     }
     modalApi.lock();

apps/web-antd/src/views/crm/product/detail/index.vue

@@ -31,7 +31,6 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const [Descriptions] = useDescription({
   bordered: false,
   column: 4,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 

apps/web-antd/src/views/crm/product/detail/modules/info.vue

@@ -6,20 +6,18 @@ import { useDescription } from '#/components/description';
 import { useDetailBaseSchema } from '../data';
 
 defineProps<{
-  product: CrmProductApi.Product; // 产品信息
+  product: CrmProductApi.Product;
 }>();
 
 const [ProductDescriptions] = useDescription({
-  title: '基本信息',
   bordered: false,
   column: 4,
-  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 </script>
 
 <template>
-  <div class="p-4">
+  <div>
     <ProductDescriptions :data="product" />
   </div>
 </template>

apps/web-antd/src/views/crm/receivable/detail/index.vue

@@ -40,7 +40,6 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
 const [Descriptions] = useDescription({
   bordered: false,
   column: 4,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 

apps/web-antd/src/views/crm/receivable/detail/modules/info.vue

@@ -29,7 +29,7 @@ const [SystemDescriptions] = useDescription({
 </script>
 
 <template>
-  <div class="p-4">
+  <div>
     <BaseDescriptions :data="receivable" />
     <Divider />
     <SystemDescriptions :data="receivable" />

apps/web-antd/src/views/crm/receivable/index.vue

@@ -161,7 +161,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template toolbar-actions>
+      <template #toolbar-actions>
         <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />

apps/web-antd/src/views/crm/receivable/plan/detail/index.vue

@@ -34,14 +34,11 @@ const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
 );
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
-
-// 校验编辑权限
-const validateWrite = () => permissionListRef.value?.validateWrite;
+const validateWrite = () => permissionListRef.value?.validateWrite; // 校验编辑权限
 
 const [Descriptions] = useDescription({
   bordered: false,
   column: 4,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 

apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue

@@ -29,7 +29,7 @@ const [SystemDescriptions] = useDescription({
 </script>
 
 <template>
-  <div class="p-4">
+  <div>
     <BaseDescriptions :data="receivablePlan" />
     <Divider />
     <SystemDescriptions :data="receivablePlan" />

apps/web-antd/src/views/crm/statistics/customer/index.vue

@@ -57,7 +57,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
+  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO>,
 });
 
 /** tab 切换 */

apps/web-antd/src/views/crm/statistics/funnel/index.vue

@@ -74,7 +74,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<CrmStatisticsFunnelApi.BusinessSummaryByDate>,
+  } as VxeTableGridOptions<CrmStatisticsFunnelApi.BusinessSummaryByDateRespVO>,
 });
 
 /** tab 切换 */

apps/web-antd/src/views/crm/statistics/performance/index.vue

@@ -63,7 +63,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
+  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO>,
 });
 
 /** tab 切换 */

apps/web-antd/src/views/crm/statistics/portrait/index.vue

@@ -58,7 +58,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
+  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO>,
 });
 
 /** tab 切换 */

apps/web-antd/src/views/crm/statistics/rank/index.vue

@@ -66,7 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
+  } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO>,
 });
 
 /** tab 切换 */

apps/web-antd/src/views/erp/finance/account/index.vue

@@ -75,6 +75,7 @@ async function handleDefaultStatusChange(
         await updateAccountDefaultStatus(row.id!, newStatus);
         // 提示并返回成功
         message.success(`${text}默认成功`);
+        handleRefresh();
         resolve(true);
       })
       .catch(() => {

apps/web-antd/src/views/erp/finance/payment/data.ts

@@ -170,7 +170,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -208,6 +210,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -385,7 +388,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/finance/payment/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:finance-payment:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:finance-payment:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/finance/payment/modules/form.vue

@@ -187,6 +187,7 @@ const [Modal, modalApi] = useVbenModal({
           @update:items="handleUpdateItems"
           @update:total-price="handleUpdateTotalPrice"
           @update:payment-price="handleUpdatePaymentPrice"
+          class="w-full"
         />
       </template>
     </Form>

apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue

@@ -59,7 +59,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -234,7 +234,6 @@ defineExpose({ validate });
       </template>
       <template #actions="{ row }">
         <TableAction
-          v-if="!disabled"
           :actions="[
             {
               label: '删除',

apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{
   success: [rows: ErpPurchaseInApi.PurchaseIn[]];
 }>();
 
-const supplierId = ref<number>(); // 供应商ID
+const supplierId = ref<number>(); // 供应商 ID
 const open = ref<boolean>(false); // 弹窗是否打开
 const selectedRows = ref<ErpPurchaseInApi.PurchaseIn[]>([]); // 选中的行
 

apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{
   success: [rows: ErpPurchaseReturnApi.PurchaseReturn[]];
 }>();
 
-const supplierId = ref<number>(); // 供应商ID
+const supplierId = ref<number>(); // 供应商 ID
 const open = ref<boolean>(false); // 弹窗是否打开
 const selectedRows = ref<ErpPurchaseReturnApi.PurchaseReturn[]>([]); // 选中的行
 

apps/web-antd/src/views/erp/finance/receipt/data.ts

@@ -170,7 +170,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -208,6 +210,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -385,7 +388,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/finance/receipt/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:finance-receipt:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:finance-receipt:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/finance/receipt/modules/form.vue

@@ -201,6 +201,7 @@ const [Modal, modalApi] = useVbenModal({
           @update:items="handleUpdateItems"
           @update:total-price="handleUpdateTotalPrice"
           @update:receipt-price="handleUpdateReceiptPrice"
+          class="w-full"
         />
       </template>
     </Form>

apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue

@@ -59,7 +59,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -234,7 +234,6 @@ defineExpose({ validate });
       </template>
       <template #actions="{ row }">
         <TableAction
-          v-if="!disabled"
           :actions="[
             {
               label: '删除',

apps/web-antd/src/views/erp/home/index.vue

@@ -5,10 +5,10 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { Col, Row, Spin } from 'ant-design-vue';
 
-import SummaryCard from './modules/SummaryCard.vue';
-import TimeSummaryChart from './modules/TimeSummaryChart.vue';
+import SummaryCard from './modules/summary-card.vue';
+import TimeSummaryChart from './modules/time-summary-chart.vue';
 
-/** ERP首页 */
+/** ERP 首页 */
 defineOptions({ name: 'ErpHome' });
 
 const loading = ref(false); // 加载中

apps/web-antd/src/views/erp/home/modules/time-summary-chart.vue

@@ -26,17 +26,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 /** 销售统计数据 */
-const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
-const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummaryRespVO>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummaryRespVO[]>(); // 销售时段统计
 const getSaleStatistics = async () => {
   saleSummary.value = await getSaleSummary();
   saleTimeSummaryList.value = await getSaleTimeSummary();
 };
 
 /** 采购统计数据 */
-const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummaryRespVO>(); // 采购概况统计
 const purchaseTimeSummaryList =
-  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummaryRespVO[]>(); // 采购时段统计
 const getPurchaseStatistics = async () => {
   purchaseSummary.value = await getPurchaseSummary();
   purchaseTimeSummaryList.value = await getPurchaseTimeSummary();

apps/web-antd/src/views/erp/purchase/in/data.ts

@@ -196,6 +196,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -295,6 +296,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -503,7 +505,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/purchase/in/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-in:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-in:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue

@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已入库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/purchase/order/data.ts

@@ -160,7 +160,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -237,6 +239,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -434,7 +437,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/purchase/order/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-order:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-order:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue

@@ -61,7 +61,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -270,7 +270,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/purchase/return/data.ts

@@ -195,6 +195,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -295,6 +296,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -490,12 +492,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
 /** 列表的搜索表单 */
 export function useOrderGridFormSchema(): VbenFormSchema[] {
   return [

apps/web-antd/src/views/erp/purchase/return/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:purchase-return:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-return:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue

@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已入库、已退货动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -260,7 +260,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/purchase/supplier/index.vue

@@ -124,7 +124,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/erp/sale/order/data.ts

@@ -173,7 +173,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -251,6 +253,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -448,7 +451,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/sale/order/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-order:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-order:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/sale/order/modules/item-form.vue

@@ -61,7 +61,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -270,7 +270,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/sale/out/data.ts

@@ -216,6 +216,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -316,6 +317,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -517,7 +519,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/sale/out/index.vue

@@ -193,6 +193,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-out:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -207,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-out:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/sale/out/modules/item-form.vue

@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已出库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/sale/return/data.ts

@@ -209,6 +209,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 /** 表单的明细表格列 */
 export function useFormItemColumns(
   formData?: any[],
+  disabled?: boolean,
 ): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
@@ -309,6 +310,7 @@ export function useFormItemColumns(
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -504,7 +506,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/sale/return/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:sale-return:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:sale-return:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/sale/return/modules/item-form.vue

@@ -65,7 +65,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(tableData.value),
+    columns: useFormItemColumns(tableData.value, props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -95,7 +95,7 @@ watch(
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已出库、已出库动态列）
-    const columns = useFormItemColumns(tableData.value);
+    const columns = useFormItemColumns(tableData.value, props.disabled);
     await gridApi.grid.reloadColumn(columns || []);
   },
   {
@@ -258,7 +258,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',

apps/web-antd/src/views/erp/stock/check/data.ts

@@ -85,7 +85,9 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
 }
 
 /** 表单的明细表格列 */
-export function useFormItemColumns(): VxeTableGridOptions['columns'] {
+export function useFormItemColumns(
+  disabled: boolean,
+): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -156,6 +158,7 @@ export function useFormItemColumns(): VxeTableGridOptions['columns'] {
       width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
+      visible: !disabled,
     },
   ];
 }
@@ -296,7 +299,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 220,
+      width: 260,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/stock/check/index.vue

@@ -196,6 +196,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
+              icon: ACTION_ICON.AUDIT,
               auth: ['erp:stock-check:update-status'],
               popConfirm: {
                 title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
@@ -210,7 +211,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.delete'),
               type: 'link',
               danger: true,
-              color: 'error',
+              icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-check:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.no]),

apps/web-antd/src/views/erp/stock/check/modules/item-form.vue

@@ -49,7 +49,7 @@ const summaries = computed(() => {
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useFormItemColumns(),
+    columns: useFormItemColumns(props.disabled),
     data: tableData.value,
     minHeight: 250,
     autoResize: true,
@@ -265,7 +265,6 @@ onMounted(async () => {
     </template>
     <template #actions="{ row }">
       <TableAction
-        v-if="!disabled"
         :actions="[
           {
             label: '删除',