Merge pull request #174 from jamebal/dev

style: 优化一些界面细节
jamebal · Jun 9, 2024 · 7bcb6f5 · 7bcb6f5
2 parents 7b38d16 + 81ddba8
commit 7bcb6f5
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 23 deletions.
diff --git a/src/components/ShareDialog/index.vue b/src/components/ShareDialog/index.vue
@@ -86,7 +86,7 @@
                   <el-collapse-item title="操作权限" name="1">
                     <el-checkbox-group v-model="shareOption.operationPermissionList" @change="permissionActionChange">
                       <el-checkbox label="UPLOAD">上传</el-checkbox>
-                      <el-checkbox label="PUT">修改</el-checkbox>
+                      <el-checkbox label="PUT">编辑</el-checkbox>
                       <el-checkbox label="DELETE">删除</el-checkbox>
                     </el-checkbox-group>
                   </el-collapse-item>

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
@@ -89,7 +89,8 @@
         <div class="search-content">
           <div class="search-class">
             <el-popover
-              v-show="showUploadButton"
+              v-if="showUploadButton"
+              v-show="!(pathList.length < 2 && homeHidden)"
               v-model="isShowNewFolder"
               placement="bottom"
               trigger="hover"
@@ -869,6 +870,10 @@ export default {
       type: Number,
       default: 106,
     },
+    homeHidden: {
+      type: Boolean,
+      default: false,
+    },
     showUploadButton: {
       type: Boolean,
       default: true,
@@ -1199,6 +1204,7 @@ export default {
     $route(to) {
       if (to.query.tagId && this.queryCondition.tagId !== this.$route.query.tagId) {
         this.queryCondition.tagId = this.$route.query.tagId
+        this.pathList = [{ folder: "" }]
         this.getFileList()
       }
     },

diff --git a/src/styles/setting.scss b/src/styles/setting.scss
@@ -197,4 +197,21 @@ a:hover {
     }
   }
 }
+.setting-title-desc {
+  .setting-title-desc-text {
+    padding: 5px 0 20px 0;
+  }
+  >>>.el-divider--horizontal {
+    margin: 0;
+  }
+}
+>>> .el-form {
+  .form-instruction {
+    color: #9a9a9a;
+    font-size: .8125rem;
+    a {
+      color: #1890ff;
+    }
+  }
+}
 
diff --git a/src/views/favorite/index.vue b/src/views/favorite/index.vue
@@ -8,6 +8,7 @@
       :defaultSort="sortable"
       :queryCondition="queryCondition"
       :contextMenus="contextMenus"
+      homeHidden
     >
     </show-file>
   </div>

diff --git a/src/views/fileType/audio.vue b/src/views/fileType/audio.vue
@@ -8,6 +8,8 @@
       :queryCondition="queryCondition"
       singleFileType="音乐"
       emptyStatus="还没有音乐呢~"
+      :showUploadButton="false"
+      :contextMenus="contextMenus"
     ></show-file>
   </div>
 </template>
@@ -24,7 +26,36 @@ export default {
       },
       queryCondition: {
         isFolder:false
-      }
+      },
+      contextMenus: [
+        { label: '查看', operation: 'viewMode' ,child: [
+            { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+            { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+            { label: '显示文件夹大小', operation: 'show-folder-size'},
+          ]
+        },
+        { label: '排列方式', operation: 'arrangement' ,child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name'},
+            { label: '大小', operation: 'orderSize', orderProp: 'size'},
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+          ]
+        },
+        { label: '刷新', operation: 'refresh'},
+        { divider: true, operation: 'divider' },
+        { label: '新建', operation: 'create' , homeDisable: true, child: [
+            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+            { divider: true, operation: 'divider' },
+            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+          ]
+        },
+        { divider: true, operation: 'divider' },
+        { label: '写文章', operation: 'createMarkdownFile'},
+      ]
     }
   },
 }

diff --git a/src/views/fileType/document.vue b/src/views/fileType/document.vue
@@ -7,6 +7,8 @@
       :sortable="sortable"
       :queryCondition="queryCondition"
       emptyStatus="还没有文档呢~"
+      :showUploadButton="false"
+      :contextMenus="contextMenus"
     >
     </show-file>
   </div>
@@ -24,7 +26,36 @@ export default {
       },
       queryCondition: {
         isFolder: false
-      }
+      },
+      contextMenus: [
+        { label: '查看', operation: 'viewMode' ,child: [
+            { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+            { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+            { label: '显示文件夹大小', operation: 'show-folder-size'},
+          ]
+        },
+        { label: '排列方式', operation: 'arrangement' ,child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name'},
+            { label: '大小', operation: 'orderSize', orderProp: 'size'},
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+          ]
+        },
+        { label: '刷新', operation: 'refresh'},
+        { divider: true, operation: 'divider' },
+        { label: '新建', operation: 'create' , homeDisable: true, child: [
+            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+            { divider: true, operation: 'divider' },
+            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+          ]
+        },
+        { divider: true, operation: 'divider' },
+        { label: '写文章', operation: 'createMarkdownFile'},
+      ]
     }
   },
 }

diff --git a/src/views/fileType/image.vue b/src/views/fileType/image.vue
@@ -6,6 +6,8 @@
       :sortable="sortable"
       :queryCondition="queryCondition"
       emptyStatus="还没有图片呢~"
+      :showUploadButton="false"
+      :contextMenus="contextMenus"
     >
     </show-file>
   </div>
@@ -23,7 +25,36 @@ export default {
       },
       queryCondition: {
         isFolder: false
-      }
+      },
+      contextMenus: [
+        { label: '查看', operation: 'viewMode' ,child: [
+            { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+            { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+            { label: '显示文件夹大小', operation: 'show-folder-size'},
+          ]
+        },
+        { label: '排列方式', operation: 'arrangement' ,child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name'},
+            { label: '大小', operation: 'orderSize', orderProp: 'size'},
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+          ]
+        },
+        { label: '刷新', operation: 'refresh'},
+        { divider: true, operation: 'divider' },
+        { label: '新建', operation: 'create' , homeDisable: true, child: [
+            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+            { divider: true, operation: 'divider' },
+            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+          ]
+        },
+        { divider: true, operation: 'divider' },
+        { label: '写文章', operation: 'createMarkdownFile'},
+      ]
     }
   },
 }

diff --git a/src/views/fileType/video.vue b/src/views/fileType/video.vue
@@ -7,6 +7,8 @@
       :sortable="sortable"
       :queryCondition="queryCondition"
       emptyStatus="还没有视频呢~"
+      :showUploadButton="false"
+      :contextMenus="contextMenus"
     >
     </show-file>
   </div>
@@ -24,7 +26,36 @@ export default {
       },
       queryCondition: {
         isFolder: false
-      }
+      },
+      contextMenus: [
+        { label: '查看', operation: 'viewMode' ,child: [
+            { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+            { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+            { label: '显示文件夹大小', operation: 'show-folder-size'},
+          ]
+        },
+        { label: '排列方式', operation: 'arrangement' ,child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name'},
+            { label: '大小', operation: 'orderSize', orderProp: 'size'},
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+          ]
+        },
+        { label: '刷新', operation: 'refresh'},
+        { divider: true, operation: 'divider' },
+        { label: '新建', operation: 'create' , homeDisable: true, child: [
+            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+            { divider: true, operation: 'divider' },
+            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+          ]
+        },
+        { divider: true, operation: 'divider' },
+        { label: '写文章', operation: 'createMarkdownFile'},
+      ]
     }
   },
 }

diff --git a/src/views/recently/index.vue b/src/views/recently/index.vue
@@ -6,6 +6,8 @@
       :sortable="sortable"
       :queryCondition="queryCondition"
       :showNavigation="true"
+      :contextMenus="contextMenus"
+      :showUploadButton="false"
     ></show-file>
   </div>
 </template>
@@ -22,7 +24,36 @@
         },
         queryCondition: {
           isFolder:false
-        }
+        },
+        contextMenus: [
+          { label: '查看', operation: 'viewMode' ,child: [
+              { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+              { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+              { label: '显示文件夹大小', operation: 'show-folder-size'},
+            ]
+          },
+          { label: '排列方式', operation: 'arrangement' ,child: [
+              { label: '名称', operation: 'orderName', orderProp: 'name'},
+              { label: '大小', operation: 'orderSize', orderProp: 'size'},
+              { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+            ]
+          },
+          { label: '刷新', operation: 'refresh'},
+          { divider: true, operation: 'divider' },
+          { label: '新建', operation: 'create' , homeDisable: true, child: [
+              { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+              { divider: true, operation: 'divider' },
+              { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+              { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+              { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+              { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+              { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+              { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+            ]
+          },
+          { divider: true, operation: 'divider' },
+          { label: '写文章', operation: 'createMarkdownFile'},
+        ]
       }
     },
   }

diff --git a/src/views/setting/authAPP.vue b/src/views/setting/authAPP.vue
@@ -37,8 +37,10 @@
         </div>
       </div>
       <div>
-        <div class="token-title-desc">您可以使用这些以生成的令牌来操作 JmalCloud API。</div>
-        <el-divider></el-divider>
+        <div class="setting-title-desc">
+          <div class="setting-title-desc-text">您可以使用这些以生成的令牌来操作 JmalCloud API。</div>
+          <el-divider></el-divider>
+        </div>
         <div>
           <ul v-if="accessTokenList.length > 0">
             <li v-for="token in accessTokenList" :key="token.id">
@@ -144,9 +146,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
->>>.el-divider--horizontal {
-  margin: 0;
-}
 >>>.el-alert {
   margin-bottom: 15px;
   .el-alert__content {
@@ -156,9 +155,6 @@ export default {
     font-size: 1rem;
   }
 }
-.token-title-desc {
-  padding: 5px 0 20px 0;
-}
 .token-item {
   display: flex;
   height: 80px;

diff --git a/src/views/setting/cloudSetting/officeConfig.vue b/src/views/setting/cloudSetting/officeConfig.vue
@@ -1,15 +1,18 @@
 <template>
   <div class="container">
-    <el-form :rules="rules" ref="officeConfigForm" :model="configFormData" label-width="150px" size="small"
+    <el-form 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>
+        <span class="form-instruction">使用外部OnlyOffice服务时需要填写</span>
       </el-form-item>
       <el-form-item label="密钥" prop="secret">
         <el-input type="password" placeholder="OnlyOffice JWT (留空为不使用密钥)" v-model="configFormData.secret"></el-input>
+        <span class="form-instruction">建议使用密钥,防止office服务被白嫖。<a href="https://helpcenter.onlyoffice.com/installation/docs-configure-jwt.aspx" target="_blank">查看OnlyOffice文档</a></span>
       </el-form-item>
       <el-form-item label="回调服务地址" prop="callbackServer">
         <el-input placeholder="JmalCloud Server 地址, 一般不用填" v-model.number="configFormData.callbackServer"></el-input>
+        <span class="form-instruction">使用外部OnlyOffice服务时需要填写</span>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
@@ -41,11 +44,6 @@ export default {
         tokenEnabled: false,
         callbackServer: undefined
       },
-      rules: {
-        // documentServer: [
-        //   {required: true, message: '请输入文档服务器地址', trigger: 'blur'}
-        // ]
-      }
     }
   },
   mounted() {

diff --git a/src/views/setting/cloudSetting/transcodeConfig.vue b/src/views/setting/cloudSetting/transcodeConfig.vue
@@ -13,10 +13,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="目标码率(kbps)" prop="bitrate">
-        <el-input placeholder="默认2500 kbps,小于该值则不转码" v-model.number="configFormData.bitrate"></el-input>
+        <el-input placeholder="2500" v-model.number="configFormData.bitrate"></el-input>
+        <span class="form-instruction">默认2500 kbps,小于该值则不转码</span>
       </el-form-item>
       <el-form-item label="目标高度" prop="height">
-        <el-input placeholder="默认720,小于该值则不转码(视频宽度则默认随高度等比例缩放)" v-model.number="configFormData.height"></el-input>
+        <el-input placeholder="720" v-model.number="configFormData.height"></el-input>
+        <span class="form-instruction">默认720,小于该值则不转码(视频宽度则默认随高度等比例缩放)</span>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>

diff --git a/src/views/setting/taskProgress.vue b/src/views/setting/taskProgress.vue
@@ -9,6 +9,10 @@
         </div>
       </div>
       <div>
+        <div class="setting-title-desc">
+          <div class="setting-title-desc-text">OCR识别任务和视频转码任务</div>
+          <el-divider></el-divider>
+        </div>
         <task-progress :data="taskProgressDataList"></task-progress>
       </div>
     </el-card>