对onlyoffice的参数base64编码

src/assets/icons/img-icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_image</title><path d="M30,5.851Q30,16,30,26.149H2Q2,16,2,5.851H30" style="fill:#2dcc9f"/><path d="M24.232,8.541a2.2,2.2,0,1,0,1.127.623,2.212,2.212,0,0,0-1.127-.623" style="fill:#fff"/><path d="M18.111,20.1q-2.724-3.788-5.45-7.575Q8.619,18.147,4.579,23.766q5.449,0,10.9,0,1.316-1.832,2.634-3.663" style="fill:#fff"/><path d="M22.057,16q-2.793,3.882-5.584,7.765,5.584,0,11.169,0Q24.851,19.882,22.057,16Z" style="fill:#fff"/></svg>

src/views/doc/manage.vue

@@ -440,7 +440,7 @@ function onPrivateView(row:matterInfo){
     const info =btoa(encodeURIComponent(`${row.name}`)) //预览模式不需要绝对路径，只核对一下文件名即可
     const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}`
     //前半部分内容是为了校验信息，主要内容是fileurl
-    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank")
     return
   }
 
@@ -453,6 +453,33 @@ function onPrivateView(row:matterInfo){
   })
 }
 
+//onlyoffice在线编辑
+async function onlyOfficeEdit(row:matterInfo){
+  const _type=fileType(row.name!)
+  if(_type===""){
+    alert("暂不支持该类型编辑")
+    return 
+  }
+  
+  let _token=document.cookie.match(/hxpan=([\w-]*)/)
+  if (_token&&_token.length>1){
+    _token=_token[1]
+  }
+
+  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${row.path}`)) //编辑模式必须要全路径
+    const _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}`
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank") 
+  })
+}
+
 //--------------UPGRADE: multy file upload section----------------
 
 //自定义上传，目的是支持多文件上传, 使用html原生组件，是为了解决并发问题
@@ -756,7 +783,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="onlyOfficeEdit(scope.row)"></el-button>
               <el-button size="small" :icon="Delete" circle @click="onDelMatter(scope.row)"></el-button>
             </div>
           </template>
@@ -772,7 +799,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
       <div class="table-grid" v-else>
         <div class="grid-item" v-for="row in matterList">
           <div class="grid">
-            <div class="grid-box"  @mouseover="handleMouseEnter(row)">
+            <div class="grid-box"  @click="handleMouseEnter(row)">
               <svg-icon v-if="row.dir" icon-class="folder-icon" size="80px"/>
               <el-image v-else-if="getFileIcon(row.name)==='img'" style="width: 80px;" :preview-src-list="[getImageDownloadURL(row.uuid,row.name)]"  :src="getImagePreivewURL(row.uuid,row.name)" />
               <svg-icon v-else :icon-class="getFileIcon(row.name)+'-icon'" size="80px"/>
@@ -783,6 +810,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
             <el-button v-if="getFileIcon(row.name)!='img'" size="small" :icon="View" circle @click="onPrivateView(row)"></el-button>
             <el-button size="small" :icon="Share"  circle @click="onShareMatter(row)"></el-button>
             <el-button size="small" :icon="Download" circle @click="onDownload(row)"></el-button>
+            <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(row)"></el-button>
             <el-button size="small" :icon="Delete" circle @click="onDelMatter(row)"></el-button>
           </div>
         </div>
@@ -862,6 +890,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
   display: flex;
   flex-wrap: wrap; /* 关键属性，允许子元素自动换行 */
   .grid-item{
+    position: relative;
     height: 134px;
     width: 134px;
     margin: 5px;
@@ -872,6 +901,14 @@ const handleSelectionChange = (val:matterInfo[]) => {
       align-items: center;
       text-align:center;
     }
+    .grid-menus{
+      position: absolute;
+      top: 10px;
+      button{
+        color: #000000;
+        margin: 4px;
+      }
+    }
     .grid{
       :hover {
         background-color: #c4c4c4; /* 悬停时的背景色 */

src/views/doc/onlyoffice.vue

@@ -50,7 +50,7 @@ onMounted(()=>{
   if (query.fileurl){
     const info=query.info?.toString()??"error"
     const _info=decodeURIComponent(atob(info))
-    const _url=decodeURIComponent(query.fileurl)
+    const _url=decodeURIComponent(window.atob(query.fileurl))
     const name=query.name?.toString()??""
     const dtype=query.dtype?.toString()??"word"
     //验证一下文件名是否合规

src/views/doc/recentVisited.vue

@@ -141,7 +141,7 @@ onUnmounted(()=>{
           <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="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button> -->
               <el-button size="small" :icon="Delete" circle @click="onClearHistory(scope.row)"></el-button>  
             </div>
           </template>

src/views/doc/share.vue

@@ -119,7 +119,7 @@ function onShareView(row:matterInfo){
   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")
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank")
   }else{
     //by kkFilePreview
     let a = row.name ?? '';
@@ -145,7 +145,7 @@ function onShareView(row:matterInfo){
   }
 }
 
-//onlyoffice在线编辑
+//onlyoffice在线编辑,现在看来分享的不适合编辑，只保留预览
 async function onlyOfficeEdit(row:matterInfo){
   const _type=fileType(row.name!)
   if(_type===""){
@@ -166,7 +166,7 @@ async function onlyOfficeEdit(row:matterInfo){
     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") 
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank") 
   })
 }
 
@@ -232,10 +232,8 @@ onMounted(() => {
         <el-table-column style="width: 80%;" property="name" label="我的文件分享">
           <template #default="scope">
             <div style="display: flex; align-items: center">
-              <el-icon :size="26">
+              <svg-icon v-if="scope.row.dir" icon-class="folder-icon"  :size="26"/>
-                <component v-if="scope.row.dir" :is="Folder" />
+              <svg-icon v-else :icon-class="getFileIcon(scope.row.name)+'-icon'" :size="26" />
-                <component v-else :is="getFileIcon(scope.row.name)" />
-              </el-icon>
               <span style="margin-left: 10px">{{ checkExpirTime(scope.row)?scope.row.name+' (已过期)':scope.row.name }}</span>
             </div>
           </template>
@@ -243,7 +241,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="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>

src/views/doc/space.vue

@@ -403,7 +403,7 @@ function onPrivateView(row:matterInfo){
     const info =btoa(encodeURIComponent(`${row.name}`)) //预览模式不需要绝对路径，只核对一下文件名即可
     const _url=`${props.siteHost}${props.apiURL}/space/download/${row.uuid}/${row.name}?space=${props.spaceid}`
     //前半部分内容是为了校验信息，主要内容是fileurl
-    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank")
   }else{
     alert("暂不支持该类型预览")
   }
@@ -427,7 +427,7 @@ async function onlyOfficeEdit(row:matterInfo){
     const _verify = btoa(row.uuid.match(/(\w+-\w+)/)![0]+"true") //增加一个权限验证的标记
     const info =btoa(encodeURIComponent(`${row.userUuid}/root${row.path}`)) //编辑模式必须要全路径
     const _url=`${props.siteHost}${props.apiURL}/space/download/${row.uuid}/${row.name}?space=${props.spaceid}`
-    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+encodeURIComponent(_url),"_blank") 
+    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+window.btoa(encodeURIComponent(_url)),"_blank") 
   })
 }
 
@@ -548,7 +548,7 @@ function isOwner(){
       <div class="table-grid" v-else>
         <div class="grid-item" v-for="row in matterList">
           <div class="grid">
-            <div class="grid-box"  @mouseover="handleMouseEnter(row)">
+            <div class="grid-box"  @click="handleMouseEnter(row)">
               <svg-icon v-if="row.dir" icon-class="folder-icon" size="80px"/>
               <el-image v-else-if="getFileIcon(row.name)==='img'" style="width: 80px;" :preview-src-list="[getSpaceImageDURL(row.uuid,row.name)]"  :src="getSpaceImageViewURL(row.uuid,row.name)" />
               <svg-icon v-else :icon-class="getFileIcon(row.name)+'-icon'" size="80px"/>
@@ -591,6 +591,7 @@ function isOwner(){
   display: flex;
   flex-wrap: wrap; /* 关键属性，允许子元素自动换行 */
   .grid-item{
+    position: relative;
     height: 134px;
     width: 134px;
     margin: 5px;
@@ -601,6 +602,14 @@ function isOwner(){
       align-items: center;
       text-align:center;
     }
+    .grid-menus{
+      position: absolute;
+      top: 10px;
+      button{
+        color: black;
+        margin: 4px;
+      }
+    }
     .grid{
       :hover {
         background-color: #c4c4c4; /* 悬停时的背景色 */