From ee25f1d1f9cafad4f637704b4b82241f8a833fdb Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 8 Jun 2024 12:59:47 +0800
Subject: [PATCH 1/3] =?UTF-8?q?perf:=20=E9=80=82=E9=85=8D=20onlyoffice=20J?=
 =?UTF-8?q?WT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/file-api.js                        | 19 ++++++++++++++-
 src/components/office/OnlyOfficeEditor.vue | 28 ++++++++++++++++++++--
 src/components/preview/OfficePreview.vue   |  9 ++++---
 src/views/public/share/shareList.vue       |  4 +++-
 4 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/api/file-api.js b/src/api/file-api.js
index bd92775..81e5f8e 100644
--- a/src/api/file-api.js
+++ b/src/api/file-api.js
@@ -338,5 +338,22 @@ export default {
       method: 'get',
       params
     })
-  }
+  },
+  // 获取office jwt
+  getOfficeJwt: function(data) {
+    return request({
+      url: '/office/signature',
+      method: 'post',
+      data
+    })
+  },
+  // 获取office jwt
+  getPublicOfficeJwt: function(params, data) {
+    return request({
+      url: '/public/office/signature',
+      method: 'post',
+      params,
+      data
+    })
+  },
 }
diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue
index d48610c..e02d6c9 100644
--- a/src/components/office/OnlyOfficeEditor.vue
+++ b/src/components/office/OnlyOfficeEditor.vue
@@ -49,6 +49,10 @@ export default {
       type: String,
       default: ''
     },
+    sharer: {
+      type: String,
+      default: undefined
+    },
     file: {
       type: Object,
       default: function () {
@@ -221,11 +225,14 @@ export default {
         this.$refs.historyPopover.loadHistoryList(this.file.id)
       })
       this.destroyEditor()
-      this.fileUrl = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
+
+      const file_username = this.sharer ? this.sharer : this.$store.state.user.name
+      this.fileUrl = window.location.origin + fileConfig.previewUrl(file_username, this.file, this.$store.getters.token)
+      this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(this.file.id)}`
       if (this.readOnly && window.shareId) {
         this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file, window.shareId, this.$store.getters.shareToken)
+        this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(window.shareId)}`
       }
-      this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(this.file.id)}`
 
       let callbackUrl = fileConfig.officeCallBackUrl(this.$store.getters.token, this.$store.getters.name, this.file.id)
 
@@ -261,6 +268,22 @@ export default {
           callbackUrl: callbackUrl,
         }
       }
+
+      if (this.readOnly && window.shareId) {
+        const shareToken = this.$store.getters.shareToken ? this.$store.getters.shareToken : 'token'
+        this.docEditorConfig.editorConfig.callbackUrl = null
+        api.getPublicOfficeJwt({shareId: window.shareId, shareToken: shareToken}, this.docEditorConfig).then(res => {
+          this.loadOffice(res.data)
+        })
+      } else {
+        api.getOfficeJwt(this.docEditorConfig).then(res => {
+          this.loadOffice(res.data)
+        })
+      }
+
+    },
+    loadOffice(token) {
+      this.docEditorConfig.token = token
       if (!this.$pc) {
         this.docEditorConfig.type = 'mobile'
       }
@@ -277,6 +300,7 @@ export default {
           this.docEditorConfig.editorConfig.user.name = "Visitor_" + visitor
         }
       }
+
       this.docEditorConfig.events = {
         "onAppReady": this.onAppReady,
         "onDocumentReady": this.onDocumentReady,
diff --git a/src/components/preview/OfficePreview.vue b/src/components/preview/OfficePreview.vue
index 6dcc55d..7e22b90 100644
--- a/src/components/preview/OfficePreview.vue
+++ b/src/components/preview/OfficePreview.vue
@@ -19,7 +19,7 @@
             <pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
             <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
             <my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
-            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
+            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
           </div>
         </div>
     </div>
@@ -30,7 +30,6 @@
 
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
 import MessageDialog from "@/components/message/MessageDialog";
-import Bus from "@/assets/js/bus";
 import fileConfig from "@/utils/file-config";
 import PdfPreview from "@/components/office/PdfPreview";
 import Drawio from "@/components/office/Drawio";
@@ -56,6 +55,10 @@ export default {
       type: String,
       default: undefined
     },
+    sharer: {
+      type: String,
+      default: undefined
+    },
     status: {
       type: Boolean,
       default: false
@@ -207,7 +210,7 @@ export default {
       this.$message.info('请手动保存')
     },
     /**
-     * 检查要预览调文件是否为只读
+     * 检查要预览的文件是否为只读
      * @param file userId
      */
     checkReadOnly(file){
diff --git a/src/views/public/share/shareList.vue b/src/views/public/share/shareList.vue
index f708f7c..7bf5f68 100644
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@@ -255,7 +255,7 @@
     <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow"
                   :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
-    <office-preview :file="officePreviewRow" :shareId="shareId" :status.sync="officePreviewVisible"></office-preview>
+    <office-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></office-preview>
     <el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center"><i
       class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
     </el-divider>
@@ -418,6 +418,7 @@ export default {
       showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
       showSizeItem: this.$pc,// 列表模式下是否显示文件大小
       sharer: undefined,//分享者信息,
+      sharerUsername: undefined,
       loginTitle: '',
       sharerAvatarUrl: '',
       netdiskName: 'JmalCloud',
@@ -698,6 +699,7 @@ export default {
           if (this.sharer.netdiskName) {
             this.netdiskName = this.sharer.netdiskName
           }
+          this.sharerUsername = this.sharer.username
           if (this.sharer.netdiskLogo) {
             this.netdiskLogo = this.sharer.netdiskLogo
           }

From b3d631eac5df0646c6b5519c1ff6fa4114993761 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 8 Jun 2024 14:03:42 +0800
Subject: [PATCH 2/3] =?UTF-8?q?perf:=20=E9=80=82=E9=85=8D=20onlyoffice=20J?=
 =?UTF-8?q?WT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/office/OnlyOfficeEditor.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue
index e02d6c9..a88f1b5 100644
--- a/src/components/office/OnlyOfficeEditor.vue
+++ b/src/components/office/OnlyOfficeEditor.vue
@@ -192,11 +192,15 @@ export default {
       this.docEditor = new DocsAPI.DocEditor(this.id, this.docEditorConfig)
     },
     onRequestHistoryData(event, historyInfo, url) {
-      this.docEditor.setHistoryData({
+      let historyConfig = {
         "fileType": this.fileType,
         "key": `${new Date(historyInfo.metadata.time).getTime()}-${SparkMD5.hash(this.file.id)}`,
         "url":  url,
         "version": historyInfo.metadata.time,
+      }
+      api.getOfficeJwt(historyConfig).then(res => {
+        historyConfig.token = res.data
+        this.docEditor.setHistoryData(historyConfig)
       })
     },
     onRequestHistory() {
@@ -341,6 +345,7 @@ export default {
       if (this.hasHistoryVersion && !doc.getElementById('box-doc-name-history-btn')) {
         const toolbar = doc.getElementById('box-doc-name')
         toolbar.style.justifyContent = 'right'
+        toolbar.style.padding = '0'
         let versionButton = document.createElement("button")
         versionButton.classList.add('btn', 'btn-header')
         versionButton.setAttribute('id', 'box-doc-name-history-btn')

From 1ce18c8e10e6717eb003a062e588d8c4c17de7bf Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 8 Jun 2024 23:52:24 +0800
Subject: [PATCH 3/3] =?UTF-8?q?perf:=20=E9=80=82=E9=85=8D=20onlyoffice=20J?=
 =?UTF-8?q?WT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/setting-api.js                        | 15 ++++
 src/components/ShowFile/ShowFile.vue          |  2 +-
 src/components/office/OnlyOfficeEditor.vue    | 88 ++++++++++++-------
 src/utils/file-config.js                      | 28 +++---
 src/views/setting/cloudManager.vue            | 16 ++--
 .../setting/{ => cloudSetting}/ldapConfig.vue |  0
 .../setting/cloudSetting/officeConfig.vue     | 83 +++++++++++++++++
 .../{ => cloudSetting}/transcodeConfig.vue    |  6 +-
 8 files changed, 190 insertions(+), 48 deletions(-)
 rename src/views/setting/{ => cloudSetting}/ldapConfig.vue (100%)
 create mode 100644 src/views/setting/cloudSetting/officeConfig.vue
 rename src/views/setting/{ => cloudSetting}/transcodeConfig.vue (91%)

diff --git a/src/api/setting-api.js b/src/api/setting-api.js
index 2547ea1..b65f110 100644
--- a/src/api/setting-api.js
+++ b/src/api/setting-api.js
@@ -83,6 +83,21 @@ export default {
       url: '/user/setting/resetMenuAndRole',
       method: 'put',
     })
+  },
+  // 获取office配置
+  getOfficeConfig: function() {
+    return request({
+      url: '/office/config',
+      method: 'get'
+    })
+  },
+  // 更新office配置
+  updateOfficeConfig: function(data) {
+    return request({
+      url: '/office/config',
+      method: 'put',
+      data
+    })
   }
 }
 
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 8deb776..9899a23 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -2206,7 +2206,7 @@ export default {
     },
     extendedInfo(file) {
       if (!file.exif && !file.video) {
-        return
+        return ''
       }
       return "\r\n" + formatExif(file.exif) + formatVideo(file.video)
     },
diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue
index a88f1b5..14785eb 100644
--- a/src/components/office/OnlyOfficeEditor.vue
+++ b/src/components/office/OnlyOfficeEditor.vue
@@ -22,6 +22,7 @@
 <script>
 
 import api from "@/api/file-api"
+import settingApi from "@/api/setting-api"
 import fileConfig from "@/utils/file-config";
 import SparkMD5 from 'spark-md5'
 import HistoryPopover from "@/components/HistoryPopover/index.vue";
@@ -79,7 +80,12 @@ export default {
       historyPageIndex: 1,
       historyPageSize: 50,
       viewHistory: false,
-      historyOperationLoading: false
+      historyOperationLoading: false,
+      officeServerConfig: {
+        documentServer: undefined,
+        callbackServer: undefined,
+        tokenEnabled: false
+      }
     }
   },
   beforeDestroy() {
@@ -97,24 +103,9 @@ export default {
         if (!id) {
           return
         }
-        let officeApiUrl = fileConfig.officeApiUrl()
-        $J.loadScript($J.apiUrl(officeApiUrl), (e) => {
-          if (e !== null) {
-            this.$emit('onClose')
-            this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
-            return
-          }
-          if (this.shareId) {
-            api.getPublicFileInfoById({fileId: this.file.id, shareId: this.shareId}).then(res => {
-              this.file = res.data
-              this.loadFile()
-            })
-          } else {
-            api.getFileInfoById({id: this.file.id}).then(res => {
-              this.file = res.data
-              this.loadFile()
-            })
-          }
+        settingApi.getOfficeConfig().then(res => {
+          this.officeServerConfig = res.data
+          this.loadOfficeApi()
         })
       },
       immediate: true,
@@ -138,6 +129,27 @@ export default {
   destroyed() {
   },
   methods: {
+    loadOfficeApi() {
+      let officeApiUrl = fileConfig.officeApiUrl(this.officeServerConfig.documentServer)
+      $J.loadScript($J.apiUrl(officeApiUrl), (e) => {
+        if (e !== null) {
+          this.$emit('onClose')
+          this.$store.dispatch('updateMessage', { event: 'loadFileFailed'})
+          return
+        }
+        if (this.shareId) {
+          api.getPublicFileInfoById({fileId: this.file.id, shareId: this.shareId}).then(res => {
+            this.file = res.data
+            this.loadFile()
+          })
+        } else {
+          api.getFileInfoById({id: this.file.id}).then(res => {
+            this.file = res.data
+            this.loadFile()
+          })
+        }
+      })
+    },
     viewHistoryFile({historyInfo}) {
       const historyUrl = window.location.origin + fileConfig.previewHistoryUrl(historyInfo.id, this.$store.state.user.name, this.$store.state.user.token)
       this.onRequestHistoryData(null, historyInfo, historyUrl)
@@ -231,15 +243,23 @@ export default {
       this.destroyEditor()
 
       const file_username = this.sharer ? this.sharer : this.$store.state.user.name
-      this.fileUrl = window.location.origin + fileConfig.previewUrl(file_username, this.file, this.$store.getters.token)
-      this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(this.file.id)}`
-      if (this.readOnly && window.shareId) {
-        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file, window.shareId, this.$store.getters.shareToken)
-        this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(window.shareId)}`
+
+      let callbackServer = this.officeServerConfig.callbackServer
+      if (callbackServer) {
+        if (callbackServer.endsWith('/')) {
+          // 去掉最后的/
+          callbackServer = callbackServer.substring(0, this.officeServerConfig.callbackServer.length - 1)
+        }
+      } else {
+        callbackServer = window.location.origin
       }
-
-      let callbackUrl = fileConfig.officeCallBackUrl(this.$store.getters.token, this.$store.getters.name, this.file.id)
-
+      this.fileUrl = fileConfig.previewUrl(file_username, this.file, this.$store.getters.token, undefined, callbackServer)
+      this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(this.file.id + callbackServer)}`
+      if (this.readOnly && window.shareId) {
+        this.fileUrl = fileConfig.publicPreviewUrl(this.file, window.shareId, this.$store.getters.shareToken, callbackServer)
+        this.fileKey = `${new Date(this.file.updateDate).getTime()}-${SparkMD5.hash(window.shareId + callbackServer)}`
+      }
+      let callbackUrl = fileConfig.officeCallBackUrl(this.officeServerConfig.callbackServer, this.$store.getters.token, this.$store.getters.name, this.file.id)
       this.docEditorConfig = {
         document: {
           fileType: this.fileType,
@@ -280,14 +300,20 @@ export default {
           this.loadOffice(res.data)
         })
       } else {
-        api.getOfficeJwt(this.docEditorConfig).then(res => {
-          this.loadOffice(res.data)
-        })
+        if (this.officeServerConfig.tokenEnabled) {
+          api.getOfficeJwt(this.docEditorConfig).then(res => {
+            this.loadOffice(res.data)
+          })
+        } else {
+          this.loadOffice()
+        }
       }
 
     },
     loadOffice(token) {
-      this.docEditorConfig.token = token
+      if (token) {
+        this.docEditorConfig.token = token
+      }
       if (!this.$pc) {
         this.docEditorConfig.type = 'mobile'
       }
diff --git a/src/utils/file-config.js b/src/utils/file-config.js
index dde39f3..d5ee97d 100644
--- a/src/utils/file-config.js
+++ b/src/utils/file-config.js
@@ -12,17 +12,23 @@ export default {
     return window.location.origin + `/webDAV/${username}`
   },
   // office api url
-  officeApiUrl: function() {
-    const url = window._env_.API_OFFICE_URL || process.env.API_OFFICE_URL || `${window.location.origin}/office`
-    return `${url}/web-apps/apps/api/documents/api.js`
+  officeApiUrl: function(documentServer) {
+    let serverUrl = documentServer || window._env_.API_URL || process.env.API_URL || `${window.location.origin}/office`
+    if (!serverUrl.endsWith('/')) {
+      serverUrl = serverUrl + "/"
+    }
+    return serverUrl + "web-apps/apps/api/documents/api.js"
   },
   // office回调url
-  officeCallBackUrl: function(token, username, fileId) {
-    const url = window._env_.API_URL || process.env.API_URL || 'http://jmalcloud:8088'
-    return `${url}/office/track?jmal-token=${token}&name=${username}&fileId=${fileId}`
+  officeCallBackUrl: function(callbackServer, token, username, fileId) {
+    let callbackServerUrl = callbackServer || window._env_.API_URL || process.env.API_URL || 'http://jmalcloud:8088'
+    if (!callbackServerUrl.endsWith('/')) {
+      callbackServerUrl = callbackServerUrl + "/"
+    }
+    return `${callbackServerUrl}office/track?jmal-token=${token}&name=${username}&fileId=${fileId}`
   },
   // 预览文件的url
-  previewUrl: function(username, file, token, shareToken) {
+  previewUrl: function(username, file, token, shareToken, serverUrl) {
     let owner = null
     if (username !== store.getters.name || localStorage.getItem('mountFileOwner') !== null) {
       owner = localStorage.getItem('mountFileOwner')
@@ -32,7 +38,8 @@ export default {
     if (owner == null) {
       owner = store.getters.name
     }
-    let fileUrl = `${this.baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
+    let baseUrl = serverUrl || this.baseUrl
+    let fileUrl = `${baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
     fileUrl = fileUrl.replace(/%5C/g, '/')
     if (token) {
       return `${fileUrl}?jmal-token=${token}&name=${username}`
@@ -80,11 +87,12 @@ export default {
     window.open(url, '_blank')
   },
   // 共享文件预览Url
-  publicPreviewUrl: function(file, shareId, shareToken) {
+  publicPreviewUrl: function(file, shareId, shareToken, serverUrl) {
     if (!shareToken) {
       shareToken = "none"
     }
-    return `${this.baseUrl}/public/s/preview/${file.name}?fileId=${file.id}&shareId=${shareId}&shareToken=${shareToken}`
+    let baseUrl = serverUrl || this.baseUrl
+    return `${baseUrl}/public/s/preview/${file.name}?fileId=${file.id}&shareId=${shareId}&shareToken=${shareToken}`
   },
   // 共享文件打包下载
   publicPackageDownload: function(shareId, fileIds, shareToken) {
diff --git a/src/views/setting/cloudManager.vue b/src/views/setting/cloudManager.vue
index f7988cb..74154a1 100644
--- a/src/views/setting/cloudManager.vue
+++ b/src/views/setting/cloudManager.vue
@@ -65,13 +65,18 @@
 
             </div>
           </el-tab-pane>
+          <el-tab-pane label="OnlyOffice" name="2" class="setting-tab-panel">
+            <div v-if="activeName === '2'">
+              <office-config></office-config>
+            </div>
+          </el-tab-pane>
           <el-tab-pane label="视频转码" name="3" class="setting-tab-panel">
             <div v-if="activeName === '3'">
               <transcode-config></transcode-config>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="LDAP认证" name="2" class="setting-tab-panel">
-            <div v-if="activeName === '2'">
+          <el-tab-pane label="LDAP认证" name="4" class="setting-tab-panel">
+            <div v-if="activeName === '4'">
               <ldap-config></ldap-config>
             </div>
           </el-tab-pane>
@@ -91,11 +96,12 @@ import UploadImageInput from "@/components/input/UploadImageInput.vue";
 import {mapGetters, mapState} from "vuex";
 import store from "@/store";
 import TaskProgress from "@/components/TaskProgress/index.vue";
-import LdapConfig from "@/views/setting/ldapConfig.vue";
-import TranscodeConfig from "@/views/setting/transcodeConfig.vue";
+import LdapConfig from "@/views/setting/cloudSetting/ldapConfig.vue";
+import TranscodeConfig from "@/views/setting/cloudSetting/transcodeConfig.vue";
+import OfficeConfig from "@/views/setting/cloudSetting/officeConfig.vue";
 
 export default {
-  components: {TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
+  components: {OfficeConfig, TranscodeConfig, LdapConfig, TaskProgress, UploadImageInput, Logo},
   data() {
     return {
       activeName: '1',
diff --git a/src/views/setting/ldapConfig.vue b/src/views/setting/cloudSetting/ldapConfig.vue
similarity index 100%
rename from src/views/setting/ldapConfig.vue
rename to src/views/setting/cloudSetting/ldapConfig.vue
diff --git a/src/views/setting/cloudSetting/officeConfig.vue b/src/views/setting/cloudSetting/officeConfig.vue
new file mode 100644
index 0000000..ec3f558
--- /dev/null
+++ b/src/views/setting/cloudSetting/officeConfig.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="container">
+    <el-form :rules="rules" ref="officeConfigForm" :model="configFormData" label-width="150px" size="small"
+             style="width: 520px" autocomplete="off">
+      <el-form-item label="OnlyOffice地址" prop="documentServer">
+        <el-input placeholder="OnlyOffice Server 地址, 一般不用填" v-model.number="configFormData.documentServer"></el-input>
+      </el-form-item>
+      <el-form-item label="密钥" prop="secret">
+        <el-input type="password" placeholder="OnlyOffice JWT (留空为不使用密钥)" v-model="configFormData.secret"></el-input>
+      </el-form-item>
+      <el-form-item label="回调服务地址" prop="callbackServer">
+        <el-input placeholder="JmalCloud Server 地址, 一般不用填" v-model.number="configFormData.callbackServer"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import settingApi from "@/api/setting-api";
+
+export default {
+  name: 'OfficeConfig',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+  },
+  computed: {
+  },
+  data() {
+    return {
+      saveConfigLoading: false,
+      configFormData: {
+        documentServer: undefined,
+        secret: undefined,
+        tokenEnabled: false,
+        callbackServer: undefined
+      },
+      rules: {
+        // documentServer: [
+        //   {required: true, message: '请输入文档服务器地址', trigger: 'blur'}
+        // ]
+      }
+    }
+  },
+  mounted() {
+    this.getOfficeConfig()
+  },
+  methods: {
+    getOfficeConfig() {
+      settingApi.getOfficeConfig().then(res => {
+        this.configFormData = res.data
+      })
+    },
+    saveConfig() {
+      this.saveConfigLoading = true
+      if (this.configFormData.documentServer === '') {
+        this.configFormData.documentServer = undefined
+      }
+      if (this.configFormData.callbackServer === '') {
+        this.configFormData.callbackServer = undefined
+      }
+      settingApi.updateOfficeConfig(this.configFormData).then(() => {
+        this.saveConfigLoading = false
+        this.$message.success('保存成功')
+      }).catch(() => {
+        this.saveConfigLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/views/setting/transcodeConfig.vue b/src/views/setting/cloudSetting/transcodeConfig.vue
similarity index 91%
rename from src/views/setting/transcodeConfig.vue
rename to src/views/setting/cloudSetting/transcodeConfig.vue
index 60306fb..c352070 100644
--- a/src/views/setting/transcodeConfig.vue
+++ b/src/views/setting/cloudSetting/transcodeConfig.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <el-form :rules="rules" ref="transcodeConfigform" :model="configFormData" label-width="120px" size="small"
+    <el-form :rules="rules" ref="transcodeConfigForm" :model="configFormData" label-width="120px" size="small"
              style="width: 520px" autocomplete="off">
       <el-form-item label="功能状态" prop="enable">
         <el-select v-model="configFormData.enable">
@@ -74,8 +74,12 @@ export default {
       })
     },
     saveConfig() {
+      this.saveConfigLoading = true
       settingApi.setTranscodeConfig(this.configFormData).then(() => {
+        this.saveConfigLoading = false
         this.$message.success('保存成功')
+      }).catch(() => {
+        this.saveConfigLoading = false
       })
     }
   }