修改：设置界面适配移动端

src/components/ShowFile/SelectFile.vue

@@ -95,4 +95,9 @@ export default {
     background: linear-gradient(rgba(255,255,255,0), #fff);
   }
 }
+@media screen and (max-width: 768px) {
+  /deep/ .el-dialog {
+    width: 100% !important;
+  }
+}
 </style>

src/components/ShowFile/ShowFile.vue

@@ -1067,6 +1067,9 @@ export default {
         this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 5) : Math.round(clientWidth / 100 - 4)
       } else {
         this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 3) : Math.round(clientWidth / 100 - 2)
+        if(clientWidth < 768){
+          this.gridColumnNum = 2
+        }
       }
       if(clientWidth < 900){
         this.showUpdateDateItem = false

src/components/table/TableList.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="table-temp">
     <el-table
+      ref="tableData"
       :data="tableData"
       :max-height="tableMaxHeight"
       row-key="id"
@@ -9,7 +10,7 @@
       size="medium"
       fit
       highlight-current-row
-      default-expand-all
+      :default-expand-all="isExpand"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       v-loading="loading"
       @selection-change="handleSelectionChange"
@@ -27,7 +28,7 @@
         :label="item.label"
         :fixed="item.fixed"
         :width="item.width"
-        :min-widitem="item.minWidth"
+        :min-width="item.minWidth"
         :align="item.align || 'center'"
         :sort-orders="['ascending', 'descending']"
         :sortable="item.sortable"
@@ -103,6 +104,10 @@ export default {
       type: Boolean,
       default: true
     },
+    isExpand: {
+      type: Boolean,
+      default: true
+    },
     pagination: {
       type: Object,
       default: {
@@ -120,7 +125,7 @@ export default {
         pageIndex: 0,
         pageSize: 15,
         pageTotal: 0
-      }
+      },
     };
   },
   mounted() {
@@ -159,6 +164,22 @@ export default {
       //调用父组件方法
       this.$emit('sortChange', { backData: column });
     },
+    // 是否展开table(展开与折叠切换)
+    handleExpand() {
+      this.$nextTick(() => {
+        this.forArr(this.tableData, this.isExpand)
+      })
+    },
+    // 遍历
+    forArr(arr, isExpand) {
+      arr.forEach(i => {
+        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+        this.$refs.tableData.toggleRowExpansion(i, isExpand)
+        if (i.children) {
+          this.forArr(i.children, isExpand)
+        }
+      })
+    },
   }
 }
 </script>
@@ -187,6 +208,12 @@ export default {
     .el-button {
       padding: 0;
     }
+    .el-table__body-wrapper{
+      //&::-webkit-scrollbar {
+      //  width: 10px;
+      //  height: 10px;
+      //}
+    }
   }
   /deep/.el-pagination {
     margin-top: 15px;

src/layout/components/Navbar.vue

@@ -4,16 +4,16 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-content">
-      <router-link to="/setting/website/manager-blog">
+        <router-link v-if="isShow" to="/setting/website/manager-blog">
-        <div class="right-content-button">
+          <div class="right-content-button">
             <svg-icon icon-class="wangzhanguanli"></svg-icon>网站管理
-        </div>
+          </div>
-      </router-link>
+        </router-link>
-      <router-link target="_blank" to="/articles">
+        <router-link v-if="isShow" target="_blank" to="/articles">
-        <div class="right-content-button">
+          <div class="right-content-button">
             <svg-icon icon-class="WEBSITE"></svg-icon>网站
-        </div>
+          </div>
-      </router-link>
+        </router-link>
       <div class="right-username">{{showName}}</div>
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
@@ -53,6 +53,7 @@ import Icon from '@/components/Icon/Icon.vue'
 export default {
   data() {
     return {
+      isShow: true,
       activeIndex: '1',
       imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
       defaultAvatar: require('../../assets/img/default-avatar.png')
@@ -70,6 +71,9 @@ export default {
       'showName'
     ])
   },
+  mounted() {
+    this.isShow = this.$pc;
+  },
   methods: {
     handleSelect(key, keyPath) {
     },
@@ -119,7 +123,7 @@ export default {
 
     .right-username {
       line-height: 50px;
-      margin-right: 10px;
+      margin: 0 10px;
     }
 
   }
@@ -194,7 +198,6 @@ export default {
 
 .right-content-button {
   line-height: 50px;
-  margin-right: 10px;
   padding: 0 10px;
   &:hover {
     background-color: #00000006;

src/layout/index.vue

@@ -67,8 +67,8 @@ export default {
       if(!ws.isConnected){
         toConnection(this.$store.state.user.name,this.$store.state.user.token);
       }
-      if(this.$route.path.startsWith('/articles')){
+      if(this.$route.path.startsWith('/setting')){
-        this.isShow = false
+        this.isShow = true
       }
     }else{
       this.isShow = false

src/styles/home-index.scss

@@ -385,3 +385,11 @@
     padding: 10px;
   }
 }
+@media screen and (max-width: 768px) {
+  .dashboard-container {
+    min-width: 100px !important;
+  }
+  .info-statistics {
+    width: 100% !important;
+  }
+}

src/styles/index.scss

@@ -13,11 +13,11 @@ body {
   font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
 }
 
-/deep/::-webkit-scrollbar {
+///deep/::-webkit-scrollbar {
-  /*滚动条整体样式*/
+//  /*滚动条整体样式*/
-  width: 10px;
+//  width: 10px;
-  height: 10px;
+//  height: 10px;
-}
+//}
 /deep/::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   height: 30px;
@@ -107,9 +107,6 @@ div:focus {
   padding: 4px 3px 15px 15px;
 }
 .al-icon-picker-popper {
-  .popper__arrow {
-    left: 35px!important;
-  }
   .el-card {
     margin: 10px 12px 0 0;
   }
@@ -162,6 +159,7 @@ div:focus {
 .al-file-sort-item {
   .al-file-sort-item-icon {
     font-weight: 600;
+    margin-right: 0;
   }
 }
 .al-file-sort-item.active {

src/styles/setting.scss

@@ -18,7 +18,6 @@ a:hover {
 /deep/.box-card {
   margin: 0 auto;
   max-width: 1240px;
-  min-width: 640px;
   .clearfix {
     font-size: 16px;
     font-weight: 600;
@@ -180,5 +179,20 @@ a:hover {
   .search-form .el-form-actions {
     text-align: right;
   }
+  /deep/ .el-dialog {
+    margin-top: 10vh!important;
+  }
+  .dialog-avatar {
+    /deep/.el-dialog {
+      min-width: 100px;
+      width: 100%;
+      .container {
+        display: block;
+        .img-container {
+          width: unset;
+        }
+      }
+    }
+  }
 }
 

src/utils/iconfont-find.js

@@ -1,9 +1,9 @@
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
 
-const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
+// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
- const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
+//  const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
- console.log(iconNames.slice(0,80))
+//  console.log(iconNames.slice(0,80))
-console.log(iconNames.slice(80,130))
+// console.log(iconNames.slice(80,130))
 
 export const icon = {
   list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",

src/views/setting/cloudManager.vue

@@ -9,9 +9,10 @@
         </div>
       </div>
       <div>
-        <div class="config-itme-label">网盘同步：</div>
+        <div class="config-itme-label">网盘同步：
+          <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
+        </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"
@@ -22,7 +23,7 @@
           </el-switch>
         </div>
         <span class="instruction">
-          在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
+          将图片转换为webp格式存储，在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
           <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
         </span>
       </div>

src/views/setting/sys/cusomerInfo.vue

@@ -322,5 +322,16 @@
         padding: 30px 12px;
       }
     }
+    .el-button+.el-button {
+      margin-left: 0;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    /deep/ .el-divider--vertical {
+      display: none;
+    }
+    .avatar-preview {
+      display: none;
+    }
   }
 </style>

src/views/setting/sys/cusomerManager.vue

@@ -135,9 +135,9 @@ export default {
           sortOrder: ''
         },
         tableHeader: [
-          {prop: 'username',label: '用户账号',sortable: 'custom'},
+          {prop: 'username', minWidth: 110, label: '用户账号',sortable: 'custom'},
-          {prop: 'showName',label: '用户名',sortable: 'custom'},
+          {prop: 'showName', minWidth: 100, label: '用户名',sortable: 'custom'},
-          {prop: 'roles',label: '角色', tag: true,
+          {prop: 'roles', minWidth: 120, label: '角色', tag: true,
             formatData: (roles)=> {
                 if(roles){
                   let tagNames = this.roleList.map(role => {
@@ -152,7 +152,7 @@ export default {
           },
           {prop: 'quota',label: '配额(G)',sortable: 'custom'},
           {prop: 'createTime',label: '创建时间',sortable: 'custom'},
-          {label: '操作',active: [
+          {label: '操作', minWidth: 130, active: [
               {name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id,row.username)},
               {name: '删除', icon: 'el-icon-delete', color: '#ff4d4f', handle: (row) => this.handleDelete([row.id])},
               ],
@@ -188,7 +188,6 @@ export default {
       resize(){
         let clientWidth = document.querySelector(".container").clientWidth
         const monbile = clientWidth <= 768;
-        this.tableHeader[2].disabled = monbile
         this.tableHeader[3].disabled = monbile
         this.tableHeader[4].disabled = monbile
       },

src/views/setting/sys/menuManager.vue

@@ -17,9 +17,6 @@
             <el-form-item label="菜单名称:" prop="name">
               <el-input placeholder="请输入菜单名称" v-model="form.name" />
             </el-form-item>
-<!--            <el-form-item label="菜单图标:" prop="icon">-->
-<!--              <el-input placeholder="请输入菜单图标" v-model="form.icon" />-->
-<!--            </el-form-item>-->
             <el-form-item label="菜单图标:" prop="icon">
               <icon-select v-model="form.icon"></icon-select>
             </el-form-item>
@@ -85,6 +82,7 @@
                 <div class="el-form-actions">
                   <el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary" @click="getMenuTree()">查询</el-button>
                   <el-button class="card-btn-icon" size="medium" icon="el-icon-plus" type="primary" @click="add()">添加</el-button>
+                  <el-button class="card-btn-icon" size="medium" :icon="isExpand ? 'el-icon-remove-outline': 'el-icon-circle-plus-outline'" type="primary" @click="handleExpand()">{{isExpand ? "折叠" : "展开"}}</el-button>
                 </div>
               </el-col>
             </el-row>
@@ -92,12 +90,14 @@
         </div>
       </div>
       <table-list
+        ref="tableMenu"
         :has-selection="false"
         :tableData="dataList"
         :less-client-height="210"
         :loading="loading"
         :tableHeader="tableHeader"
         :pagination="pagination"
+        :is-expand.sync="isExpand"
         @pageChange="pageChange"
         @selectFun="selectFun"
         @sortChange="sortChange"
@@ -131,6 +131,7 @@ export default {
         dialogTitle: '',
         updateLoading: false,
         valid: true,
+        isExpand: true,
         form: {
           name: '',
           parentId: '',
@@ -182,7 +183,7 @@ export default {
             }
           },
           {prop: 'createTime', label: '创建时间'},
-          {label: '操作',active: [
+          {label: '操作', minWidth: 130, active: [
               {name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id)},
               {name: '删除', icon: 'el-icon-delete', color: '#ff4d4f', handle: (row) => this.handleDelete([row.id])},
               ],
@@ -253,6 +254,11 @@ export default {
         this.$refs.managerForm.resetFields()
         this.$refs.selectTree.clearHandle()
       },
+      // 展开与折叠table
+      handleExpand() {
+        this.isExpand = !this.isExpand
+        this.$refs.tableMenu.handleExpand()
+      },
       // 设置formData
       setFormData() {
         let data = new FormData();

src/views/setting/sys/roleManager.vue

@@ -127,11 +127,11 @@ export default {
           sortOrder: ''
         },
         tableHeader: [
-          {prop: 'name',label: '角色名称',sortable: 'custom'},
+          {prop: 'name',label: '角色名称', minWidth: 110, sortable: 'custom'},
-          {prop: 'code',label: '角色标识',sortable: 'custom'},
+          {prop: 'code',label: '角色标识', minWidth: 110, sortable: 'custom'},
-          {prop: 'remarks',label: '备注',sortable: 'custom'},
+          {prop: 'remarks',label: '备注', minWidth: 110, sortable: 'custom'},
           {prop: 'createTime',label: '创建时间',sortable: 'custom'},
-          {label: '操作',active: [
+          {label: '操作', minWidth: 160, active: [
               {name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id)},
               {name: '分配权限', icon: 'el-icon-finished', handle: (row) => this.authorization(row.id)},
               ],