修改：网盘设置界面，添加webp选项

src/api/setting-api.js

@@ -3,9 +3,39 @@ import request from '@/utils/request'
 export default {
   sync(params) {
     return request({
-      url: 'setting/sync',
+      url: '/user/setting/sync',
       method: 'get',
       params
     })
+  },
+  getWebp(params) {
+    return request({
+      url: '/user/setting/get/webp',
+      method: 'get',
+      params
+    })
+  },
+  disabledWebp(params) {
+    return request({
+      url: '/user/setting/disabled/webp',
+      method: 'put',
+      params
+    })
   }
 }
+
+export function getSetting(params) {
+  return request({
+    url: '/public/website/setting',
+    method: 'get',
+    params
+  })
+}
+
+export function updateSetting(data) {
+  return request({
+    url: '/website/setting/update',
+    method: 'put',
+    data
+  })
+}

src/api/user.js

@@ -94,20 +94,4 @@ export function initialization(data) {
   })
 }
 
-export function getSetting(params) {
-  return request({
-    url: '/public/website/setting',
-    method: 'get',
-    params
-  })
-}
-
-export function updateSetting(data) {
-  return request({
-    url: '/setting/update',
-    method: 'put',
-    data
-  })
-}
-
 

src/components/ShowFile/ShowFile.vue

@@ -401,7 +401,7 @@
           <span> {{ rowContextData.size }}字节 {{ rowContextData.size > 0 ? '(' + formatSize(rowContextData.size) + ')' : '' }}</span>
         </el-form-item>
         <el-form-item label="位置:" class="details-position">
-          <a :href="'?path='+rowContextData.path">{{ rowContextData.path }}</a>
+          <a :href="'/?path='+rowContextData.path">{{ rowContextData.path }}</a>
         </el-form-item>
         <el-form-item label="创建时间:">
           <span>{{ rowContextData.uploadDate }}</span>

src/router/index.js

@@ -234,7 +234,7 @@ export const constantRoutes = [
         path: '',
         name: 'manager-cloud',
         component: () => import('@/views/setting/cloudManager'),
-        meta: { title: '网盘管理', icon: 'yunshezhi' }
+        meta: { title: '网盘设置', icon: 'yunshezhi' }
       }
     ]
   },

src/styles/setting.scss

@@ -49,7 +49,15 @@ a:hover {
   float: right;
   margin-top: -32px;
 }
-
+/deep/ .el-collapse-item__content {
+  background-color: #fafafa;
+  padding: 0 30px 20px;
+}
+.config-itme-label {
+  padding-top: 15px;
+  font-size: 14px;
+  font-weight: 500;
+}
 .img-dialog {
 
 }

src/views/setting/articles/blogManager.vue

@@ -102,7 +102,7 @@
 <script>
 
 import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
-import {getSetting, updateSetting} from '@/api/user'
+import {getSetting, updateSetting} from '@/api/setting-api'
 import JInput from "@/components/input/JInput";
 
 export default {
@@ -202,15 +202,6 @@ export default {
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
 }
-/deep/ .el-collapse-item__content {
-  background-color: #fafafa;
-  padding: 0 30px 20px;
-  .config-itme-label {
-    padding-top: 15px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
 /deep/ .el-divider__text {
   background-color: #fafafa;
 }

src/views/setting/articles/tagManager.vue

@@ -224,6 +224,7 @@ export default {
 }
 /deep/ .el-checkbox {
   margin-right: 0;
+  margin-bottom: 16px;
 }
 /deep/ .el-checkbox.is-bordered {
   background-color: #f4f4f5;

src/views/setting/cloudManager.vue

@@ -1,12 +1,31 @@
 <template>
   <div class="app-container" v-wechat-title="title">
     <el-card class="box-card">
-      <div class="box-card-header">
+      <div slot="header">
-        <div class="clearfix card-header-back">
+        <div class="box-card-header">
-          <span>同步网盘</span>
+          <div class="clearfix card-header-back">
-          <el-button class="card-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-upload el-icon--right"></i></el-button>
+            <span>网盘设置</span>
+          </div>
         </div>
       </div>
+      <div>
+        <div class="config-itme-label">网盘同步：</div>
+        <span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
+        <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
+        <div class="config-itme-label">启用webp：
+          <el-switch
+            v-model="webpEnabled"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="webpChange"
+          >
+          </el-switch>
+        </div>
+        <span class="instruction">
+          在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
+          <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
+        </span>
+      </div>
     </el-card>
   </div>
 </template>
@@ -16,21 +35,32 @@
 import settingApi from "@/api/setting-api";
 
 export default {
-
-
-
   data() {
     return {
       title: '网盘管理',
-      syncLoading: false
+      syncLoading: false,
+      webpEnabled: false
     }
   },
+  mounted() {
+    this.getInfo()
+  },
   methods: {
+    getInfo(){
+      settingApi.getWebp({userId: this.$store.state.user.userId}).then((res) => {
+        this.webpEnabled = !res.data
+      })
+    },
     sync() {
       this.syncLoading = true
       settingApi.sync({username: this.$store.state.user.name}).then(() => {
         this.syncLoading = false
       })
+    },
+    webpChange(webpEnabled) {
+      settingApi.disabledWebp({userId: this.$store.state.user.userId, disabled: !webpEnabled}).then(() => {
+        webpEnabled ? this.$message.success('webp 以启用') : this.$message.warning('webp 以禁用')
+      })
     }
   }
 }
@@ -38,4 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "src/styles/setting";
+/deep/ .el-textarea {
+  max-width: 1080px;
+}
 </style>