From 33d8241ce46252bcc486a217a54408c19d92bd14 Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Tue, 6 May 2025 12:28:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/common-ui):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=A2=84=E8=A7=88=E5=92=8C=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-ui/src/ui/word/word-preview.vue    | 10 +++--
 .../common-ui/src/ui/word/word-work-view.vue  | 45 ++++++++++++++++---
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/effects/common-ui/src/ui/word/word-preview.vue b/packages/effects/common-ui/src/ui/word/word-preview.vue
index 70f44c2..e326e1c 100644
--- a/packages/effects/common-ui/src/ui/word/word-preview.vue
+++ b/packages/effects/common-ui/src/ui/word/word-preview.vue
@@ -7,8 +7,8 @@ import VueOfficeDocx from '@vue-office/docx';
 
 import '@vue-office/docx/lib/index.css';
 
-const url = ref('');
-const docx = ref<any>('/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx');
+// const url = ref('');
+const docx = ref<any>(`/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx`);
 const pptStyle = ref({
   height: 'calc(100vh - 100px)',
   width: '100%',
@@ -29,7 +29,11 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      url.value = drawerApi.getData<Record<string, any>>();
+      const data = drawerApi.getData<Record<string, any>>();
+      if (data) {
+        docx.value = `/docx/${data}`; // 更新 docx 的值
+      }
+      // url.value = drawerApi.getData<Record<string, any>>();
     }
   },
 });
diff --git a/packages/effects/common-ui/src/ui/word/word-work-view.vue b/packages/effects/common-ui/src/ui/word/word-work-view.vue
index ffc360c..b24583b 100644
--- a/packages/effects/common-ui/src/ui/word/word-work-view.vue
+++ b/packages/effects/common-ui/src/ui/word/word-work-view.vue
@@ -67,9 +67,12 @@ const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   connectedComponent: WordPreview,
   // placement: 'left',
 });
-
-function openPreviewDrawer(placement: DrawerPlacement = 'right') {
-  previewDrawerApi.setState({ placement }).open();
+function openPreviewDrawer(
+  placement: DrawerPlacement = 'right',
+  filename?: string,
+) {
+  const fileData = filename.value;
+  previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
 const startFetching = async () => {
@@ -111,7 +114,29 @@ const startFetching = async () => {
         content: value.value || '',
       },
     );
-    fetchResult.value = '/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx';
+    const { answer } = res;
+
+    // 判断是否是以 .docx 结尾的 URL
+    function isDocxURL(str: string): boolean {
+      return str.endsWith('.docx');
+    }
+
+    // 使用正则提取 /static/ 后面的文件名部分
+    function extractDocxFilename(url: string): null | string {
+      const match = url.match(/\/static\/([a-f0-9-]+\.docx)$/i);
+      if (match) {
+        return match[1]; // 返回类似：9e1c421e-991c-411f-8176-6350a97e70f3.docx
+      }
+      return null;
+    }
+
+    const filename = ref('');
+
+    if (answer && isDocxURL(answer)) {
+      filename.value = extractDocxFilename(answer);
+    }
+
+    fetchResult.value = `/static/${filename.value}`;
     resultItems.value.push({
       key: resultItems.value.length + 1,
       role: 'ai',
@@ -123,7 +148,7 @@ const startFetching = async () => {
             size: 'nomarl',
             type: 'primary',
             onClick: () => {
-              openPreviewDrawer('right');
+              openPreviewDrawer('right', filename);
             },
           },
           '文档预览',
@@ -136,7 +161,15 @@ const startFetching = async () => {
             style: {
               marginLeft: '10px',
             },
-            onClick: () => {},
+            onClick: () => {
+              // 创建隐藏的 <a> 标签用于触发下载
+              const link = document.createElement('a');
+              link.href = answer; // 设置下载链接
+              link.download = filename; // 设置下载文件名
+              document.body.append(link); // 将 <a> 标签添加到页面中
+              link.click(); // 触发点击事件开始下载
+              link.remove(); // 下载完成后移除 <a> 标签
+            },
           },
           '文档下载',
         ),