feat(@vben/common-ui): 优化文档处理功能

- 添加 markdown 解析功能
- 优化文档预览和工作视图组件
- 添加文档生成相关功能
- 修复一些与文档处理相关的问题

apps/web-antd/.env.production

@@ -1,7 +1,7 @@
 VITE_BASE=/
 
 # 接口地址
-VITE_GLOB_API_URL=http://dify.vertoryao.xyz/api
+VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
 
 # 是否开启压缩，可以设置为 none, brotli, gzip
 VITE_COMPRESS=none

apps/web-antd/src/views/dept/list.vue

@@ -138,7 +138,11 @@ function refreshGrid() {
     <FormModal @success="refreshGrid" />
     <Grid table-title="部门列表">
       <template #toolbar-tools>
-        <Button type="primary" @click="onCreate">
+        <Button
+          type="primary"
+          @click="onCreate"
+          v-access:code="'system:dept:create'"
+        >
           <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['部门']) }}
         </Button>

apps/web-antd/src/views/ppt/index.vue

@@ -56,6 +56,10 @@ async function handleClick(item: PPTTempItem) {
   }
 }
 
+async function handleClickMode(item: PPTTempItem) {
+  temp = item;
+}
+
 onMounted(() => {
   getLogs(temp.id);
 });
@@ -71,7 +75,7 @@ onMounted(() => {
           title="运行历史"
           @click="handleClick"
         />
-        <PptListView title="选择模板" @click="handleClick" />
+        <PptListView title="选择模板" @click="handleClickMode" />
       </div>
       <div class="w-full lg:w-3/4">
         <PptWorkView

apps/web-antd/src/views/role/data.ts

@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
         optionType: 'button',
       },
       defaultValue: true,
-      fieldName: 'enable',
+      fieldName: 'enabled',
       label: '状态',
     },
     {

apps/web-antd/src/views/user/data.ts

@@ -87,6 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       component: 'Select',
+      rules: 'required',
       componentProps: {
         allowClear: true,
         mode: 'multiple',

apps/web-antd/vite.config.mts

@@ -12,6 +12,7 @@ export default defineConfig(async () => {
             // mock代理目标地址
             // target: 'http://localhost:8081/api',
             target: 'http://43.139.10.64:8082/api',
+            // target: 'http://192.168.3.238:8081/api',
             ws: true,
           },
           '/docx': {
@@ -29,6 +30,7 @@ export default defineConfig(async () => {
             rewrite: (path) => path.replace(/^\/v1/, ''),
             // target: 'http://localhost:8081/v1',
             target: 'http://43.139.10.64:8082/v1',
+            // target: 'http://192.168.3.238:8081/v1',
           },
         },
       },

packages/effects/common-ui/package.json

@@ -45,6 +45,7 @@
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
     "ant-design-x-vue": "^1.1.2",
+    "markdown-it": "^14.1.0",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",

packages/effects/common-ui/src/ui/ppt/ppt-perview.vue

@@ -4,10 +4,12 @@ import { ref } from 'vue';
 import { useVbenDrawer } from '@vben/common-ui';
 
 import VueOfficePptx from '@vue-office/pptx';
+import { message } from 'ant-design-vue';
 
 // import '@vue-office/pptx/lib/index.css';
 // http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
 // const url = ref('');
+const isLoading = ref(false); // 新增：加载状态变量
 const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
 const pptStyle = ref({
   height: 'calc(100vh - 100px)',
@@ -16,10 +18,12 @@ const pptStyle = ref({
   background: '#ffffff',
 });
 const renderedHandler = () => {
-  console.warn('渲染完成');
+  isLoading.value = false; // 文档渲染完成，关闭加载状态
+  message.success('渲染完成');
 };
-const errorHandler = (err) => {
+const errorHandler = () => {
-  console.error(`渲染失败:${err}`);
+  isLoading.value = false; // 出错时也关闭加载状态
+  message.error('渲染失败');
 };
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
@@ -32,6 +36,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
     if (isOpen) {
       const data = drawerApi.getData<Record<string, any>>();
       if (data) {
+        isLoading.value = true; // 开始加载文档，开启加载状态
         pptx.value = `/pptx/${data}`; // 更新 docx 的值
       }
       // url.value = drawerApi.getData<Record<string, any>>();
@@ -41,6 +46,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 </script>
 <template>
   <Drawer title="文档预览" :footer="false">
+    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
     <VueOfficePptx
       :src="pptx"
       :style="pptStyle"

packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue

@@ -12,8 +12,9 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { Card } from '@vben-core/shadcn-ui';
 
 import { UserOutlined } from '@ant-design/icons-vue';
-import { Button, Flex } from 'ant-design-vue';
+import { Button, Flex, Typography } from 'ant-design-vue';
 import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
+import markdownit from 'markdown-it';
 
 import PptPreview from './ppt-perview.vue';
 
@@ -68,6 +69,24 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
+// 初始化 markdown 解析器
+const md = markdownit({ html: true, breaks: true });
+
+const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
+  content: string,
+) => {
+  return h(Typography, [
+    h('div', {
+      innerHTML: content,
+      style: {
+        padding: '8px',
+        lineHeight: '1.6',
+        whiteSpace: 'break-spaces',
+      },
+    }),
+  ]);
+};
+
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: PptPreview,
@@ -162,7 +181,6 @@ const startFetching = async () => {
         ),
       ]),
     });
-    value.value = '';
   } catch (error) {
     console.error(error);
   }
@@ -191,6 +209,17 @@ const roles: BubbleListProps['roles'] = {
       },
     },
     avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
+    messageRender: (content) =>
+      h(Typography, [
+        h('div', {
+          innerHTML: md.render(content),
+          style: {
+            padding: '8px',
+            lineHeight: '1.6',
+            whiteSpace: 'break-spaces',
+          },
+        }),
+      ]),
   },
   file: {
     placement: 'start',
@@ -287,17 +316,21 @@ watch(
 </script>
 
 <template>
-  <PreviewDrawer />
+  <div>
-  <div class="flex h-[765px] flex-col">
+    <PreviewDrawer />
-    <div class="flex-1 overflow-y-auto">
+    <div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto">
-      <div style="margin: 20px; overflow-y: auto">
+      <BubbleList
-        <BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
+        :roles="roles"
-      </div>
+        :typing="true"
+        :items="resultItems"
+        :message-render="renderMarkdown"
+      />
     </div>
     <Card class="w-full">
       <Sender
         v-model:value="value"
         :loading="isFetching"
+        :disabled="isFetching"
         :auto-size="{ minRows: 6, maxRows: 12 }"
         @submit="startFetching"
       />

packages/effects/common-ui/src/ui/spider/spider-work-view.vue

@@ -12,6 +12,8 @@ import {
   CardTitle,
 } from '@vben-core/shadcn-ui';
 
+import { RangePicker } from 'ant-design-vue';
+
 interface SpiderParams {
   appid: string;
 }
@@ -57,11 +59,21 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
+const selectedDateRange = ref<string[]>([]);
+
 const startFetching = async () => {
   // 更新状态为“抓取中”
   isFetching.value = true;
   fetchStatus.value = 'fetching';
 
+  let publishStartTime = ''; // 默认值
+  let publishEndTime = ''; // 默认值
+
+  if (selectedDateRange.value && selectedDateRange.value.length === 2) {
+    publishStartTime = selectedDateRange.value[0] || '';
+    publishEndTime = selectedDateRange.value[1] || '';
+  }
+
   try {
     const res = await props.runSpider(
       {
@@ -71,7 +83,10 @@ const startFetching = async () => {
         userId: '1562',
         conversationId: '',
         files: [],
-        inputs: {},
+        inputs: {
+          publishStartTime,
+          publishEndTime,
+        },
       },
     );
     // 保存抓取结果
@@ -123,6 +138,11 @@ const fetchStatus = ref('');
         {{ item ? item.name : '请选择右侧爬虫' }}
       </CardContent>
       <CardFooter class="flex justify-end">
+        <RangePicker
+          class="mx-2"
+          v-model:value="selectedDateRange"
+          format="YYYY-MM-DD"
+        />
         <Button :disabled="!item" @click="startFetching">
           {{ isFetching ? '抓取中...' : '开始抓取' }}
         </Button>

packages/effects/common-ui/src/ui/word/word-preview.vue

@@ -4,10 +4,12 @@ import { ref } from 'vue';
 import { useVbenDrawer } from '@vben/common-ui';
 
 import VueOfficeDocx from '@vue-office/docx';
+import { message } from 'ant-design-vue';
 
 import '@vue-office/docx/lib/index.css';
 
 // const url = ref('');
+const isLoading = ref(false); // 新增：加载状态变量
 const docx = ref<any>(`/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx`);
 const pptStyle = ref({
   height: 'calc(100vh - 100px)',
@@ -15,10 +17,12 @@ const pptStyle = ref({
   margin: 'auto',
 });
 const renderedHandler = () => {
-  console.warn('渲染完成');
+  isLoading.value = false; // 文档渲染完成，关闭加载状态
+  message.success('渲染完成');
 };
-const errorHandler = (err) => {
+const errorHandler = () => {
-  console.error(`渲染失败:${err}`);
+  isLoading.value = false; // 出错时也关闭加载状态
+  message.error('渲染失败');
 };
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
@@ -31,6 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
     if (isOpen) {
       const data = drawerApi.getData<Record<string, any>>();
       if (data) {
+        isLoading.value = false; // 出错时也关闭加载状态
         docx.value = `/docx/${data}`; // 更新 docx 的值
       }
       // url.value = drawerApi.getData<Record<string, any>>();
@@ -40,6 +45,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 </script>
 <template>
   <Drawer class="w-[880px]" title="文档预览" :footer="false">
+    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
     <VueOfficeDocx
       :src="docx"
       :style="pptStyle"

packages/effects/common-ui/src/ui/word/word-work-view.vue

@@ -12,8 +12,9 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { Card } from '@vben-core/shadcn-ui';
 
 import { UserOutlined } from '@ant-design/icons-vue';
-import { Button, Flex, notification } from 'ant-design-vue';
+import { Button, Flex, Typography } from 'ant-design-vue';
 import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
+import markdownit from 'markdown-it';
 
 import WordPreview from './word-preview.vue';
 
@@ -62,6 +63,24 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
+// 初始化 markdown 解析器
+const md = markdownit({ html: true, breaks: true });
+
+const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
+  content,
+) => {
+  return h(Typography, [
+    h('div', {
+      innerHTML: content,
+      style: {
+        padding: '8px',
+        lineHeight: '1.6',
+        whiteSpace: 'break-spaces',
+      },
+    }),
+  ]);
+};
+
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: WordPreview,
@@ -75,16 +94,7 @@ function openPreviewDrawer(
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
-const inputStatus = ref<string>('');
 const startFetching = async () => {
-  if (!projectName.value) {
-    inputStatus.value = 'error';
-    notification.error({
-      duration: 3,
-      message: '请填写项目名称',
-    });
-    return;
-  }
   isFetching.value = true;
   fetchStatus.value = 'fetching';
   resultItems.value.push({
@@ -185,12 +195,41 @@ const startFetching = async () => {
       resultItems.value.push({
         key: resultItems.value.length + 1,
         role: 'ai',
-        content: res.answer,
+        content: res.answer.trim(),
       });
     }
 
     fetchResult.value = `/static/${filename.value}`;
-    value.value = '';
+    // resultItems.value.push({
+    //   key: resultItems.value.length + 1,
+    //   role: 'ai',
+    //   content: '文档已生成',
+    //   footer: h(Flex, null, [
+    //     h(
+    //       Button,
+    //       {
+    //         size: 'nomarl',
+    //         type: 'primary',
+    //         onClick: () => {
+    //           openPreviewDrawer('right');
+    //         },
+    //       },
+    //       '文档预览',
+    //     ),
+    //     h(
+    //       Button,
+    //       {
+    //         size: 'nomarl',
+    //         type: 'primary',
+    //         style: {
+    //           marginLeft: '10px',
+    //         },
+    //         onClick: () => {},
+    //       },
+    //       '文档下载',
+    //     ),
+    //   ]),
+    // });
   } catch (error) {
     console.error(error);
   }
@@ -219,6 +258,17 @@ const roles: BubbleListProps['roles'] = {
       },
     },
     avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
+    messageRender: (content) =>
+      h(Typography, [
+        h('div', {
+          innerHTML: md.render(content),
+          style: {
+            padding: '8px',
+            lineHeight: '1.6',
+            whiteSpace: 'break-spaces',
+          },
+        }),
+      ]),
   },
   file: {
     placement: 'start',
@@ -248,33 +298,56 @@ interface ResultItem {
   footer?: any;
 }
 
+const insertTextToInput = (text: string) => {
+  value.value = text + value.value;
+};
+
 const resultItems = ref<ResultItem[]>([]);
 </script>
 
 <template>
-  <PreviewDrawer />
+  <div>
-  <div class="flex h-[765px] flex-col">
+    <PreviewDrawer />
-    <div class="flex-1 overflow-y-auto">
+    <a-space class="w-full" direction="vertical">
-      <a-space class="w-full" direction="vertical">
+      <a-input v-model:value="projectName" required placeholder="项目名称" />
-        <a-input
+    </a-space>
-          size="large"
+    <div style="height: calc(67vh - 180px); margin: 20px; overflow-y: auto">
-          v-model:value="projectName"
+      <BubbleList
-          :status="inputStatus"
+        :roles="roles"
-          required
+        :typing="true"
-          placeholder="项目名称(必填)"
+        :items="resultItems"
-        />
+        :message-render="renderMarkdown"
-      </a-space>
-      <div style="margin: 20px; overflow-y: auto">
-        <BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
-      </div>
-    </div>
-    <Card class="w-full">
-      <Sender
-        v-model:value="value"
-        :loading="isFetching"
-        :auto-size="{ minRows: 6, maxRows: 12 }"
-        @submit="startFetching"
       />
-    </Card>
+    </div>
+    <Flex wrap="wrap" :gap="12">
+      <Button @click="insertTextToInput('生成项目摘要')">生成项目摘要</Button>
+      <Button @click="insertTextToInput('生成目前存在问题')">
+        生成目前存在问题
+      </Button>
+      <Button @click="insertTextToInput('生成项目采用的技术原理')">
+        生成项目采用的技术原理
+      </Button>
+      <Button @click="insertTextToInput('生成能解决的主要问题')">
+        生成能解决的主要问题
+      </Button>
+      <Button @click="insertTextToInput('生成技术关键点和创新点')">
+        生成技术关键点和创新点
+      </Button>
+      <Button @click="insertTextToInput('生成应用前景')">生成应用前景</Button>
+      <Button @click="insertTextToInput('生成项目实施及效益预测')">
+        生成项目实施及效益预测
+      </Button>
+      <Button @click="insertTextToInput('生成预期成果')">生成预期成果</Button>
+      <Button @click="insertTextToInput('生成导出doc')">生成导出doc</Button>
+      <Card class="w-full">
+        <Sender
+          v-model:value="value"
+          :loading="isFetching"
+          :disabled="isFetching"
+          :auto-size="{ minRows: 6, maxRows: 12 }"
+          @submit="startFetching"
+        />
+      </Card>
+    </Flex>
   </div>
 </template>

pnpm-lock.yaml

@@ -1344,6 +1344,9 @@ importers:
       ant-design-x-vue:
         specifier: ^1.1.2
         version: 1.1.2(ant-design-vue@4.2.6(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       qrcode:
         specifier: 'catalog:'
         version: 1.5.4
@@ -7053,6 +7056,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lint-staged@15.5.1:
     resolution: {integrity: sha512-6m7u8mue4Xn6wK6gZvSCQwBvMBR36xfY24nF5bMTf2MHDYG6S3yhJuOgdYVw99hsjyDt2d4z168b3naI8+NWtQ==}
     engines: {node: '>=18.12.0'}
@@ -7220,6 +7226,10 @@ packages:
     resolution: {integrity: sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==}
     engines: {node: '>= 10'}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -7239,6 +7249,9 @@ packages:
   mdn-data@2.21.0:
     resolution: {integrity: sha512-+ZKPQezM5vYJIkCxaC+4DTnRrVZR1CgsKLu5zsQERQx6Tea8Y+wMx5A24rq8A8NepCeatIQufVAekKNgiBMsGQ==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -8489,6 +8502,10 @@ packages:
   pump@3.0.2:
     resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -9520,6 +9537,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
@@ -16276,6 +16296,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@15.5.1:
     dependencies:
       chalk: 5.4.1
@@ -16480,6 +16504,15 @@ snapshots:
       - bluebird
       - supports-color
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
@@ -16492,6 +16525,8 @@ snapshots:
 
   mdn-data@2.21.0: {}
 
+  mdurl@2.0.0: {}
+
   meow@12.1.1: {}
 
   meow@13.2.0: {}
@@ -17753,6 +17788,8 @@ snapshots:
       end-of-stream: 1.4.4
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   pupa@3.1.0:
@@ -18916,6 +18953,8 @@ snapshots:
 
   typescript@5.8.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.6.1: {}
 
   ultrahtml@1.6.0: {}