From 79e524044be6f86f660dabf1e19d7aeda61187e4 Mon Sep 17 00:00:00 2001
From: han2015 <1019850453@qq.com>
Date: Fri, 27 Jun 2025 13:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E6=88=90onlyoffice=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                |   1 +
 .env.production                 |   3 +-
 package.json                    |   1 +
 src/api/doc/type.ts             |  13 +++
 src/router/index.ts             |   6 ++
 src/views/doc/manage.vue        |   2 +-
 src/views/doc/onlyoffice.vue    |  89 ++++++++++++++++++
 src/views/doc/recentVisited.vue | 160 ++++++++++++++++++++++++++++++++
 src/views/doc/share.vue         |  90 +++++++++++++-----
 src/views/doc/tools.ts          |  19 +++-
 10 files changed, 359 insertions(+), 25 deletions(-)
 create mode 100644 src/views/doc/onlyoffice.vue
 create mode 100644 src/views/doc/recentVisited.vue

diff --git a/.env.development b/.env.development
index 67ca1ac..97d26e7 100644
--- a/.env.development
+++ b/.env.development
@@ -10,3 +10,4 @@ VITE_APP_BASE_URL = 'http://myvuetest.net'
 VITE_APP_TOKEN_KEY = 'offlineAccessSystemAppToken'
 VITE_APP_SJZT_URL = 'http://172.20.5.86/prod-api'
 VITE_OFFICE_HOST='http://myvuetest.net/kkapi'
+VITE_ONLYOFFICE_HOST = 'http://myvuetest.net/onlyoffice'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index a4dfe4b..1acc738 100644
--- a/.env.production
+++ b/.env.production
@@ -5,4 +5,5 @@ VITE_APP_PORT = 17777
 VITE_APP_BASE_API = ''
 VITE_APP_TOKEN_KEY = 'onlineAccessSystemAppToken'
 VITE_APP_SJZT_URL = 'http://120.224.6.6:29911/prod-api'
-VITE_OFFICE_HOST='https://gyhlw.hxgk.group/kkapi'
\ No newline at end of file
+VITE_OFFICE_HOST='https://gyhlw.hxgk.group/kkapi'
+VITE_ONLYOFFICE_HOST = 'https://gyhlw.hxgk.group/onlyoffice'
\ No newline at end of file
diff --git a/package.json b/package.json
index 72fd21a..e567a88 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@element-plus/icons-vue": "^2.3.1",
+    "@onlyoffice/document-editor-vue": "^1.5.0",
     "@tinymce/tinymce-vue": "^5.1.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueup/vue-quill": "^1.2.0",
diff --git a/src/api/doc/type.ts b/src/api/doc/type.ts
index 7472d70..a423475 100644
--- a/src/api/doc/type.ts
+++ b/src/api/doc/type.ts
@@ -31,6 +31,19 @@ export interface matterInfo{
     expireTime?:string;
 }
 
+export interface shareItem{
+    name?:string;
+    updateTime?:string;
+    uuid:string; //文件uuid
+    code:string;
+    userUuid?:string; //owner uuid
+    puuid?:string; // parent dir uuid
+    path?:string;
+    expireInfinity?:boolean;
+    expireTime?:string;
+    permitList?:string;
+}
+
 export interface  matterTree extends matterInfo {
    children:matterTree[]
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index d068ba1..6267e9b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,6 +33,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
   },
 
+  {
+    path: "/onlyoffice",
+    component: () => import("@/views/doc/onlyoffice.vue"),
+    meta: { hidden: true },
+  },
+  
   {
     path: "/",
     component: Layout,
diff --git a/src/views/doc/manage.vue b/src/views/doc/manage.vue
index 5f61901..d98c36b 100644
--- a/src/views/doc/manage.vue
+++ b/src/views/doc/manage.vue
@@ -503,7 +503,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
               <el-button size="small" :icon="View" circle @click="onPrivateView(scope.row)"></el-button>
               <el-button size="small" :icon="Share" circle @click="onShareMatter(scope.row)"></el-button>
               <el-button size="small" :icon="Download" circle @click="onDownload(scope.row)"></el-button>
-              <el-button size="small" :icon="Edit" circle @click="onMatterRename(scope.row)"></el-button>
+              <!-- <el-button size="small" :icon="Edit" circle @click="onMatterRename(scope.row)"></el-button> -->
               <el-button size="small" :icon="Delete" circle @click="onDelMatter(scope.row)"></el-button>
             </div>
           </template>
diff --git a/src/views/doc/onlyoffice.vue b/src/views/doc/onlyoffice.vue
new file mode 100644
index 0000000..5520fbf
--- /dev/null
+++ b/src/views/doc/onlyoffice.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import { DocumentEditor } from "@onlyoffice/document-editor-vue";
+import { useUserStore } from "@/store/modules/user";
+
+const route = useRoute()
+const userStore = useUserStore();
+const siteHost=document.location.origin; 
+const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
+const onlyOfficeHost= import.meta.env.VITE_ONLYOFFICE_HOST
+const props = withDefaults(defineProps<{
+  fileurl:string
+}>(),{})
+
+const config=ref({
+  document: {
+    title: "Example Document Title.docx",
+    url:"", //云盘服务文件地址
+    key:""
+  },
+  
+  documentType: "word",
+  editorConfig: {
+    "lang": "zh-CN",//"en-US",
+    mode: "view",//设置编辑模式，view, edit，review
+    callbackUrl: `${siteHost}${apiURL}/matter/save`,    //当前网站的域名
+    user: {
+      id: userStore.userInfoCont.number,
+      name: userStore.userInfoCont.nickname,
+    },
+  }
+})
+
+function onLoadComponentError (errorCode:number, errorDescription:string) {
+  switch(errorCode) {
+    case -1: // Unknown error loading component
+      alert(errorDescription);
+      break;
+    case -2: // Error load DocsAPI from http://documentserver/
+      alert(errorDescription);
+      break;
+    case -3: // DocsAPI is not defined
+      alert(errorDescription);
+      break;
+  }
+}
+
+onMounted(()=>{
+  const query = route.query
+  if (query.fileurl){
+    const info=query.info?.toString()??"error"
+    const _info=decodeURIComponent(atob(info))
+    const _url=decodeURIComponent(query.fileurl)
+    const name=query.name?.toString()??""
+    const dtype=query.dtype?.toString()??"word"
+    //验证一下文件名是否合规
+    if (_info.includes(name)){
+      config.value.document.url=_url
+      config.value.document.title=name
+      const _key=_url.match(/(\w+-\w+-\w+)/)![0]
+      if(_key) config.value.document.key=_key  //合作编辑必须要有一个unique key
+      config.value.documentType=dtype
+      config.value.editorConfig.callbackUrl+=`?info=${_info}`
+      //设置编辑模式
+      if(!query.verify) return;
+      const _verify = atob(query.verify)
+      //1：必须是验证通过，以true结尾  2：校验uuid是否匹配
+      if(_verify.endsWith("true") &&  _key.includes(_verify.replace("true",""))){
+        config.value.editorConfig.mode="edit"
+      }
+    }
+  }
+})
+  
+</script>
+
+<template>
+  <DocumentEditor 
+    id="docEditor"
+    style="height: inherit;"
+    :documentServerUrl="onlyOfficeHost"
+    :config="config"
+    :onLoadComponentError="onLoadComponentError"
+  /> 
+</template>
+<style>
+
+    
+</style>
\ No newline at end of file
diff --git a/src/views/doc/recentVisited.vue b/src/views/doc/recentVisited.vue
new file mode 100644
index 0000000..031a1ff
--- /dev/null
+++ b/src/views/doc/recentVisited.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import {
+    Document,
+    Delete,
+    Edit,
+    View,
+  } from '@element-plus/icons-vue'
+import { shareItem} from "@/api/doc/type"
+import {fileType } from "./tools"
+
+const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
+const siteHost=document.location.origin;
+const officeHost=import.meta.env.VITE_OFFICE_HOST
+const currentHoverRow=ref("")  //当前选择的table行
+const visitList=ref<shareItem[]>([])
+let _db:Object; //indexedDB
+
+const props = withDefaults(defineProps<{
+  uid:string,
+  udprt:string,
+}>(),{})
+
+//在线预览
+function onlyOfficeView(row:shareItem){
+  const _type=fileType(row.name!)
+  if(_type!==""){ //office file
+    const info =btoa(encodeURIComponent(`${row.userUuid}/root${row.matters[0].path}`))
+    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root`
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
+  }else{
+    //by kkFilePreview
+    let a = row.name ?? '';
+    if(a.endsWith('...')){
+      a=`${row.uuid}-${row.code}.zip`
+    }
+    
+    //由于预览服务在缓存文件时，直接按文件名缓存，所以同名文件就会出现覆盖错乱的问题
+    a=a.match("(\.[a-zA-Z]+)$")
+    if (a && a.length>0) {
+      a=`${row.uuid}-${row.code}${a[0]}`
+    }else{
+      a=`${row.uuid}${row.name}`
+    }
+
+    let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root&fullfilename=${a}`
+    window.open(`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(encodeURIComponent(_url)),"_blank")
+  }
+}
+
+//在线编辑
+function onlyOfficeEdit(row:shareItem){
+  const _type=fileType(row.name!)
+  if(_type===""){
+    alert("暂不支持该类型编辑")
+    return 
+  }
+  
+  const pstate=(row.permitList?.includes(props.uid)|| row.userUuid===atob(props.uid))
+  if (!pstate){
+    alert("你没有权限编辑")
+    return
+  }
+
+  ElMessageBox.confirm("线上资源有限，确定继续线上编辑吗", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(()=>{
+    //office file
+    //base64 encode for MASK
+    const _verify = btoa(row.uuid.match(/(\w+-\w+)/)[0]+`${pstate}`) //增加一个权限验证的标记
+    const info =btoa(encodeURIComponent(`${row.userUuid}/root${row.matters[0].path}`))
+    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root`
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+encodeURIComponent(_url),"_blank") 
+  })
+}
+
+//前端indexedDB的记录删除操作
+function onClearHistory(row:shareItem){
+  _db.transaction('vlist','readwrite').objectStore("vlist").delete(row.uuid);
+  visitList.value=visitList.value.filter((item)=>{
+    return item.uuid!==row.uuid
+  })
+}
+
+function handleMouseEnter(row:any){
+  currentHoverRow.value=row.uuid
+}
+
+onMounted(()=>{
+  const request = indexedDB.open('visitList')
+  request.onupgradeneeded = (event) => {
+    // 首次创建或升级版本时触发
+    _db = event.target.result;
+    if (!_db.objectStoreNames.contains('vlist')) {
+      // 创建对象仓库（类似表）
+      const store = _db.createObjectStore('vlist', { 
+        keyPath: 'uuid', // 主键
+      });
+    }
+  };
+  request.onsuccess = (e) => {
+    if (!_db) _db= e.target.result;
+    const store = _db.transaction('vlist', 'readonly').objectStore("vlist");
+
+    store.openCursor().onsuccess = (event) => {
+      const cursor = event.target.result;
+      if (cursor) {
+        visitList.value.push(cursor.value);
+        cursor.continue();
+      }
+    };
+  };
+})
+
+onUnmounted(()=>{
+  if (_db) _db.close()
+})
+
+</script>
+
+<template>
+  <el-row :gutter="24">
+      <el-table
+        stripe
+        :data="visitList"
+        :header-cell-style="{ background: '#f5f8fd' }"
+        style="width: 100%"
+        row-key="uuid"
+        :row-style ="() => ({ height: '30px' })"
+        @cell-mouse-enter="handleMouseEnter">
+        <el-table-column style="width: 70%;" property="name" label="最近访问">
+          <template #default="scope">
+            <div style="display: flex; align-items: center">
+              <el-icon :size="20"><component :is="Document" /></el-icon>
+              <span style="margin-left: 10px">{{scope.row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column width="250" align="center">
+          <template #default="scope">
+            <div v-show="currentHoverRow === scope.row.uuid">
+              <el-button size="small" :icon="View" circle @click="onlyOfficeView(scope.row)"></el-button>
+              <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button>
+              <el-button size="small" :icon="Delete" circle @click="onClearHistory(scope.row)"></el-button>  
+            </div>
+          </template>
+        </el-table-column>
+  
+        <el-table-column width="100" prop="expireTime" label="失效日期">
+          <template #default="scope">
+            <span v-if="scope.row.expireTime">{{ scope.row.expireInfinity? '永久有效': scope.row.expireTime.slice(0,16) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+</template>
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/src/views/doc/share.vue b/src/views/doc/share.vue
index b1f46c1..e80c42c 100644
--- a/src/views/doc/share.vue
+++ b/src/views/doc/share.vue
@@ -14,14 +14,16 @@ import { h } from 'vue'
 import {
   Delete,
   Folder,
+  Edit,
   Share,
   Avatar,
   View,
 } from '@element-plus/icons-vue'
-import {ElText } from "element-plus";
-import {getFileIcon,checkExpirTime } from "./tools"
+import {ElText,ElButton } from "element-plus";
+import {getFileIcon,checkExpirTime,fileType } from "./tools"
 import sharePermission from './sharePermission.vue';
 import preview from './preview.vue';
+import recentVisited from './recentVisited.vue';
 
 const route = useRoute()
 const userStore = useUserStore();
@@ -40,7 +42,6 @@ import type { VNode } from 'vue'
 const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
 
 
-
 function showShareMessage(row:{uuid:string,code:string,name:string,expireTime:string}){
   let _shareURL=`${siteHost}/#/doc/share?uuid=${row.uuid}&code=${row.code}`
   ElMessageBox({
@@ -71,6 +72,7 @@ function showShareMessage(row:{uuid:string,code:string,name:string,expireTime:st
     confirmButtonText: '复制分享链接',
     showCancelButton: true
   }).then(()=>{
+    if(!navigator.clipboard) alert("clipboard 不可用")
     navigator.clipboard.writeText(_shareURL)
   }).catch(() => {
     if (browerMode.value){
@@ -113,23 +115,59 @@ function onShareMember(row:matterInfo){
 
 //文件预览
 function onShareView(row:matterInfo){
-  let a = row.name ?? '';
-  if(a.endsWith('...')){
-    a=`${row.uuid}-${row.code}.zip`
-  }
-  
-  //由于预览服务在缓存文件时，直接按文件名缓存，所以同名文件就会出现覆盖错乱的问题
-  a=a.match("(\.[a-zA-Z]+)$")
-  if (a && a.length>0) {
-    a=`${row.uuid}-${row.code}${a[0]}`
+  const _type=fileType(row.name!)
+  if(_type!==""){ //office file
+    const info =btoa(encodeURIComponent(`${row.name}`)) //预览模式不需要绝对路径，只核对一下文件名即可
+    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${uid}&dprt=${udprt}&puuid=root&rootUuid=root`
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
   }else{
-    a=`${row.uuid}${row.name}`
+    //by kkFilePreview
+    let a = row.name ?? '';
+    if(a.endsWith('...')){
+      a=`${row.uuid}-${row.code}.zip`
+    }
+    
+    //由于预览服务在缓存文件时，直接按文件名缓存，所以同名文件就会出现覆盖错乱的问题
+    a=a.match("(\.[a-zA-Z]+)$")
+    if (a && a.length>0) {
+      a=`${row.uuid}-${row.code}${a[0]}`
+    }else{
+      a=`${row.uuid}${row.name}`
+    }
+
+    let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${uid}&dprt=${udprt}&puuid=root&rootUuid=root&fullfilename=${a}`
+    //window.open(`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(encodeURIComponent(_url)),"_blank")
+    dynamicVNode.value=h(preview,{
+      url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(encodeURIComponent(_url)),
+      closeFunc:()=>dynamicVNode.value=null
+    })
+    
   }
+}
 
-  let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${uid}&dprt=${udprt}&puuid=root&rootUuid=root&fullfilename=${a}`
-  dynamicVNode.value=h(preview,{
-    url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))),
-    closeFunc:()=>dynamicVNode.value=null
+//onlyoffice在线编辑
+async function onlyOfficeEdit(row:matterInfo){
+  const _type=fileType(row.name!)
+  if(_type===""){
+    alert("暂不支持该类型编辑")
+    return 
+  }
+  let filepath=""
+  await getShareBrowse("",{shareUuid:row.uuid,code:row.code,puuid:'root',rootUuid:'root',dprt:udprt}).then((resp)=>{ 
+    console.log(resp.data,"<<<<<<<<<<<")
+    filepath= resp.data.matters[0].path
+  })
+  ElMessageBox.confirm("线上资源有限，确定继续线上编辑吗", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(()=>{
+    //office file
+    //base64 encode for MASK
+    const _verify = btoa(row.uuid.match(/(\w+-\w+)/)![0]+"true") //增加一个权限验证的标记
+    const info =btoa(encodeURIComponent(`${row.userUuid}/root${filepath}`)) //编辑模式必须要全路径
+    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${uid}&dprt=${udprt}&puuid=root&rootUuid=root`
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+encodeURIComponent(_url),"_blank") 
   })
 }
 
@@ -164,9 +202,17 @@ onMounted(() => {
     browerMode.value=true
     getShareBrowse("",{shareUuid:query.uuid,code:query.code,puuid:'root',rootUuid:'root',dprt:udprt}).then((resp)=>{ 
       showShareMessage(resp.data) 
-      return
+      const request = indexedDB.open('visitList')
+      request.onsuccess = (e) => {
+        const db = e.target.result;
+        const store = db.transaction('vlist','readwrite').objectStore("vlist");
+        store.put(resp.data)
+        db.close()
+      }
     })
+    return
   }
+
   browerMode.value=false
   onLoadShareList()
 })
@@ -175,6 +221,7 @@ onMounted(() => {
 <template>
   <div class="app_container">
     <el-row :gutter="24" v-if="!browerMode">
+      <recentVisited :uid="uid" :udprt="udprt" style="margin-left:0;width: 100%;margin-bottom: 10px;"></recentVisited>
       <el-table
         stripe
         :data="matterList"
@@ -183,7 +230,7 @@ onMounted(() => {
         row-key="uuid"
         :row-style ="() => ({ height: '55px' })"
         @cell-mouse-enter="handleMouseEnter">
-        <el-table-column style="width: 70%;" property="name" label="文件名">
+        <el-table-column style="width: 80%;" property="name" label="我的文件分享">
           <template #default="scope">
             <div style="display: flex; align-items: center">
               <el-icon :size="26">
@@ -197,6 +244,7 @@ onMounted(() => {
         <el-table-column width="250" align="center">
           <template #default="scope">
             <div v-show="currentHoverRow === scope.row.uuid">
+              <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button>
               <el-button size="small" :icon="Avatar" circle @click="()=>{drawerModel=true; permitListRef=scope.row.permitInfos}"></el-button>
               <el-button size="small" :icon="View" circle @click="onShareView(scope.row)"></el-button>
               <el-button size="small" :icon="Share" circle @click="showShareMessage(scope.row)"></el-button>
@@ -205,7 +253,7 @@ onMounted(() => {
           </template>
         </el-table-column>
   
-        <el-table-column prop="expireTime" label="失效日期">
+        <el-table-column width="100" prop="expireTime" label="失效日期">
           <template #default="scope">
             <span v-if="scope.row.expireTime">{{ scope.row.expireInfinity? '永久有效': scope.row.expireTime.slice(0,16) }}</span>
           </template>
@@ -234,7 +282,7 @@ onMounted(() => {
     </ul>
     <span v-else-if="permitListRef==''"> 所有人员都可访问</span>
   </el-drawer>
-  <div v-if="dynamicVNode">
+  <div v-if="dynamicVNode" style="height: inherit;">
     <component :is="dynamicVNode" />
   </div>
 </template>
diff --git a/src/views/doc/tools.ts b/src/views/doc/tools.ts
index a983a59..32abeae 100644
--- a/src/views/doc/tools.ts
+++ b/src/views/doc/tools.ts
@@ -78,7 +78,7 @@ export const getFileIcon = (fileName:string) => {
     }
   }
 
- export function readableSize(val:matterInfo){
+export function readableSize(val:matterInfo){
     if(val.size<1024) return "1 Kb"
     //1024*1024
     if(val.size<1048576) return (val.size/1024).toFixed(1)+"Kb"
@@ -88,4 +88,19 @@ export const getFileIcon = (fileName:string) => {
     if(val.size<1099511627776) return (val.size/1073741824).toFixed(1)+"Gb"
     
     return  "BIG"
-  }
\ No newline at end of file
+  }
+
+
+export function fileType(name:string){
+  const suffix=name.match(/(\.[a-zA-Z]+$)/)[0]
+  if (".doc, .docx, .html, .md, .txt, .wps, .xml".includes(suffix)){
+    return "word"
+  } else if(".csv, .xls, .xlsb, .xlsm, .xlsx".includes(suffix)){
+    return "cell"
+  }else if(".ppt, .pptm, .pptx".includes(suffix)){
+    return "slide "
+  }else if (suffix===".pdf"){
+    return "pdf"
+  }
+  return ""
+}
\ No newline at end of file