优化：优化一些界面细节

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmal-cloud-view",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "jmal cloud",
   "author": "Jmal <zhushilun084@163.com>",
   "license": "MIT",

src/layout/components/Navbar.vue

@@ -4,16 +4,17 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-content">
-        <router-link v-if="isShow" to="/setting/website/manager-blog">
+      <app-link
-          <div class="right-content-button">
+       v-for="route in routes.topRouters"
-            <svg-icon icon-class="wangzhanguanli"></svg-icon>网站管理
+       :key="route.path"
-          </div>
+       :to="resolvePath(route.path)"
-        </router-link>
+       v-if="!route.children[0].hidden"
-        <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>网站
+          <svg-icon :icon-class="route.children[0].meta.icon"></svg-icon>
-          </div>
+          {{route.children[0].name}}
-        </router-link>
+        </div>
+      </app-link>
       <div class="right-username">{{showName}}</div>
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
@@ -22,16 +23,16 @@
             <i class="el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
-            <router-link to="/setting/user">
+            <app-link
+              v-for="route in routes.rightTopRoutes"
+              :key="route.path"
+              :to="resolvePath(route.path)"
+            >
               <el-dropdown-item>
-                <svg-icon icon-class="shezhi"></svg-icon>基本设置
+                <svg-icon :icon-class="route.children[0].meta.icon"></svg-icon>
+                {{route.children[0].name}}
               </el-dropdown-item>
-            </router-link>
+            </app-link>
-            <router-link to="/setting/website/manager-blog">
-              <el-dropdown-item>
-                <svg-icon icon-class="wangzhanguanli"></svg-icon>网站管理
-              </el-dropdown-item>
-            </router-link>
             <el-dropdown-item divided @click.native="logout">
               <svg-icon icon-class="tuichudenglu"></svg-icon>退出登录
             </el-dropdown-item>
@@ -49,6 +50,10 @@ import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import Icon from '@/components/Icon/Icon.vue'
+import AppLink from './Sidebar/Link'
+import store from "@/store"
+import {isExternal} from "@/utils/validate";
+import path from "path";
 
 export default {
   data() {
@@ -62,14 +67,31 @@ export default {
   components: {
     Icon,
     Breadcrumb,
-    Hamburger
+    Hamburger,
+    AppLink
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
       'showName'
-    ])
+    ]),
+    routes() {
+      let routes = {}
+      let topRouters = []
+      let rightTopRoutes = []
+      this.$router.options.routes.forEach(route => {
+        if(route.menuType === 3){
+          topRouters.push(route)
+        }
+        if(route.menuType === 4){
+          rightTopRoutes.push(route)
+        }
+      })
+      routes.topRouters = topRouters
+      routes.rightTopRoutes = rightTopRoutes
+      return routes
+    },
   },
   mounted() {
     this.isShow = this.$pc;
@@ -83,6 +105,15 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
     }
   }
 }

src/layout/components/Sidebar/index.vue

@@ -32,15 +32,15 @@ export default {
     ]),
     routes() {
       let routes = []
-      if(this.$route.path.startsWith("/setting")){
+      if(this.$route.meta.menuType === 0){
         this.$router.options.routes.forEach(route => {
-          if(route.path.startsWith("/setting")){
+          if(route.menuType === 0){
             routes.push(route)
           }
         })
       } else {
         this.$router.options.routes.forEach(route => {
-          if(!route.path.startsWith("/setting")){
+          if(route.menuType === 2){
             routes.push(route)
           }
         })

src/permission.js

@@ -84,7 +84,7 @@ function setMenuList(next, to){
 function findPath(menuList, to, parentPath){
   for( let i = 0; i < menuList.length; i++) {
     const menu = menuList[i]
-    if(menu.menuType > 0){
+    if(menu.menuType === 1){
       continue
     }
     if(menu.children && menu.children.length > 0){

src/store/modules/user.js

@@ -134,12 +134,14 @@ const actions = {
 }
 
 function getMenuTree(menuList) {
-  menuList = menuList.filter(menu => menu.menuType === 0)
+  menuList = menuList.filter(menu => menu.menuType !== 1)
   return menuList.map(menu => {
     let router = {}
     if(menu.children && menu.children.length){
-      router.meta = {title: menu.name, icon: menu.icon}
+      router.meta = {title: menu.name, icon: menu.icon, menuType: menu.menuType}
+      router.hidden = menu.hide
       router.children = findChildren(menu.children)
+      router.menuType = menu.menuType
     }
     if(menu.component && menu.component.length > 0) {
       router.children = [
@@ -147,25 +149,29 @@ function getMenuTree(menuList) {
           path: '',
           name: menu.name,
           component: loadView(menu.component),
-          meta: {title: menu.name, icon: menu.icon}
+          meta: {title: menu.name, icon: menu.icon, menuType: menu.menuType},
+          hidden: menu.hide
         }
       ]
     }
     router.path = menu.path
     router.component = Layout
+    router.menuType = menu.menuType
     return router
   })
 }
 
 function findChildren(childrenMenu){
   let children = []
-  childrenMenu = childrenMenu.filter(menu => menu.menuType === 0)
+  childrenMenu = childrenMenu.filter(menu => menu.menuType !== 1)
   childrenMenu.forEach(menu => {
     let router = {
       path: menu.path,
       name: menu.name,
       component: !menu.component || menu.component.length === 0 ? ParentView : loadView(menu.component),
-      meta: {title: menu.name, icon: menu.icon}
+      meta: {title: menu.name, icon: menu.icon, menuType: menu.menuType},
+      hidden: menu.hide,
+      menuType: menu.menuType
     }
     if(menu.children && menu.children.length){
       if(!menu.component || menu.component.length === 0){

src/styles/setting.scss

@@ -71,7 +71,7 @@ a:hover {
   float: right;
   margin-top: -32px;
 }
-/deep/ .el-collapse-item__content {
+/deep/ .el-collapse-item__content, /deep/.el-tab-pane {
   background-color: #fafafa;
   padding: 0 30px 20px;
 }
@@ -171,6 +171,9 @@ a:hover {
 .text-align-right {
   text-align: right;
 }
+.input-none-width {
+  width: unset;
+}
 @media screen and (max-width: 768px) {
   .query-item {
     margin-bottom: 10px;

src/views/markdown/index.vue

@@ -172,7 +172,6 @@
         activeNames: ['1'],
         file: {},
         editStatus: false,
-        html:'',    // 及时转的html
         filename: '',
         clientHeight: document.documentElement.clientHeight - 150,
         updating: false,
@@ -355,11 +354,6 @@
           upload: this.markdownImageUplaod()
         })
       },
-      // 所有操作都会被解析重新渲染
-      change(value, render){
-        // render 为 markdown 解析后的结果[html]
-        this.html = render;
-      },
       markdownImageUplaod(){
         return {
           accept: 'image/*,.mp3, .wav, .rar',

src/views/setting/articles/articleManager.vue

@@ -249,7 +249,7 @@ export default {
   },
   methods: {
     setMaxHeight(){
-      this.tableMaxHeight = document.documentElement.clientHeight - 285
+      this.tableMaxHeight = document.documentElement.clientHeight - 265
     },
     //行拖拽
     rowDrop() {

src/views/setting/articles/blogManager.vue

@@ -9,8 +9,9 @@
           </div>
         </div>
       </a-affix>
-      <el-collapse v-model="activeNames">
+
-        <el-collapse-item title="网站首页背景" name="1">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="网站首页背景" name="1">
           <div class="config-itme-label">站点背景大图：
           </div>
           <upload-image-input v-model="form.backgroundSite"/>
@@ -21,8 +22,8 @@
           <div class="config-itme-label">首页大图内描述：</div>
           <el-input autosize type="textarea" v-model="form.backgroundDescSite"></el-input>
           <span class="instruction">显示在博客首页大图内的描述。</span>
-        </el-collapse-item>
+        </el-tab-pane>
-        <el-collapse-item title="导航栏" name="2">
+        <el-tab-pane label="导航栏" name="2">
           <div class="config-itme-label">导航栏顶部 - 网站 Logo / 站点名称：</div>
           <el-input autosize type="textarea" width="100%" v-model="form.siteName"></el-input>
           <span class="instruction">配置网站的 Logo，该选项仅作用于顶部导航条</span>
@@ -47,10 +48,8 @@
               </li>
             </ul>
           </div>
-
+        </el-tab-pane>
-        </el-collapse-item>
+        <el-tab-pane label="归档、分类、标签" name="3">
-        <el-collapse-item title="归档、分类、标签" name="3">
-
           <div class="config-itme-label">页面显示与否：</div>
           <el-checkbox-group v-model="form.alonePages">
             <el-checkbox label="archives">归档</el-checkbox>
@@ -68,14 +67,14 @@
           <div class="config-itme-label">标签界面背景大图：</div>
           <upload-image-input v-model="form.tagBackground"/>
           <span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
-        </el-collapse-item>
+        </el-tab-pane>
-        <el-collapse-item title="网站页脚" name="4">
+        <el-tab-pane label="网站页脚" name="4">
           <div class="config-itme-label">版权信息：</div>
           <el-input autosize type="textarea" width="100%" v-model="form.copyright"></el-input>
           <div class="config-itme-label">备案许可号：</div>
           <el-input autosize type="textarea" width="100%" v-model="form.recordPermissionNum"></el-input>
-        </el-collapse-item>
+        </el-tab-pane>
-      </el-collapse>
+      </el-tabs>
     </el-card>
   </div>
 </template>
@@ -93,7 +92,7 @@ export default {
   },
   data() {
     return {
-      activeNames: ['1'],
+      activeName: '1',
       example: '<i class="fab fa-github">github</i>',
       form: {
         backgroundSite: '',
@@ -114,8 +113,14 @@ export default {
   computed: {},
   mounted() {
     this.getSetting()
+    if(this.$route.query.tab){
+      this.activeName = this.$route.query.tab
+    }
   },
   methods: {
+    handleClick(tab, event) {
+      this.$router.push({query: {tab: tab.name}})
+    },
     preview(){
       this.operatingButtons = []
       if(this.form.operatingButtons) {
@@ -213,5 +218,15 @@ export default {
     color: #fff;
   }
 }
-
+/deep/ .el-tabs__header {
+  margin: 0;
+  @media screen and (min-width: 768px) {
+    .el-tabs__nav {
+      padding: 0 20px;
+    }
+    .el-tabs__active-bar {
+      left: 20px;
+    }
+  }
+}
 </style>

src/views/setting/articles/tagManager.vue

@@ -257,9 +257,9 @@ export default {
 /deep/ .el-checkbox.is-bordered {
   background-color: #f4f4f5;
   border-color: #e9e9eb;
-  color: #909399;
+  color: #646568;
   font-weight: 400;
-  padding: 5px 5px 5px 10px;
+  padding: 6px 5px 5px 10px;
 }
 /deep/ .el-checkbox.is-bordered.is-checked {
   background-color: #ecf5ff;

src/views/setting/cloudManager.vue

@@ -9,10 +9,6 @@
         </div>
       </div>
       <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>
         <div class="config-itme-label">启用webp：
           <el-switch
             v-model="webpEnabled"
@@ -26,6 +22,10 @@
           将图片转换为webp格式存储，在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
           <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
         </span>
+        <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>
       </div>
     </el-card>
   </div>

src/views/setting/sys/cusomerInfo.vue

@@ -29,7 +29,7 @@
         <el-button size="small" :loading="userUpdateLoading" type="primary" @click="onSavePassword">确 定</el-button>
       </div>
     </el-dialog>
-    <el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
+    <el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="80px">
       <el-form-item label="头像" class="form-item-avatar">
         <div style="height: 100px; width: 100px;">
           <el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage"  ></el-avatar>
@@ -44,13 +44,13 @@
         <el-button size="mini" round @click="changePassword">修改密码</el-button>
       </el-form-item>
       <el-form-item label="用户名">
-        <el-input v-model="cusomerInfoForm.showName" />
+        <el-input v-model="cusomerInfoForm.showName" class="input-none-width"/>
       </el-form-item>
       <el-form-item label="标语">
         <el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
       </el-form-item>
       <el-form-item label="个人简介">
-        <el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
+        <el-input class="form-slogan" type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
       </el-form-item>
       <el-form-item v-show="percentage > 0" label="使用情况">
         <el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
@@ -262,6 +262,8 @@
             }
           }
         }
+        data.delete("createTime")
+        data.delete("updateTime")
         return data
       },
       // 保存头像

src/views/setting/sys/menuManager.vue

@@ -47,13 +47,20 @@
             <el-form-item label="排序号:" prop="sortNumber">
               <el-input-number v-model="form.sortNumber" controls-position="right" :min="0"></el-input-number>
             </el-form-item>
+            <el-form-item label="是否隐藏:" prop="hide">
+              <el-radio v-model="form.hide" :label="false">显示</el-radio>
+              <el-radio v-model="form.hide" :label="true">隐藏</el-radio>
+            </el-form-item>
             <el-form-item label="菜单类型:" prop="menuType">
               <el-radio v-model="form.menuType" :label="0">菜单</el-radio>
               <el-radio v-model="form.menuType" :label="1">按钮</el-radio>
             </el-form-item>
-            <el-form-item label="是否隐藏:" prop="hide">
+            <el-form-item v-if="form.menuType !== 1" label="菜单位置:" prop="menuType">
-              <el-radio v-model="form.hide" :label="false">显示</el-radio>
+              <el-radio-group v-model="form.menuType" size="mini">
-              <el-radio v-model="form.hide" :label="true">影藏</el-radio>
+                <el-radio-button :label="2">设置</el-radio-button>
+                <el-radio-button :label="3">顶部</el-radio-button>
+                <el-radio-button :label="4">右上</el-radio-button>
+              </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
@@ -131,7 +138,7 @@ export default {
         dialogTitle: '',
         updateLoading: false,
         valid: true,
-        isExpand: true,
+        isExpand: false,
         form: {
           name: '',
           parentId: '',
@@ -173,16 +180,23 @@ export default {
               }
             }
           },
-          {prop: 'menuType', label: '类型', width: 75, tag: true,
+          {prop: 'menuType', label: '类型', width: 100, tag: true,
             formatData: (menuType)=> {
-              if(menuType === 0){
+              switch (menuType) {
-                return ['菜单']
+                  case 0:
-              }else{
+                   return ['首页菜单']
-                return ['按钮']
+                  case 1:
+                    return ['按钮']
+                  case 2:
+                    return ['设置菜单']
+                  case 3:
+                    return ['顶部菜单']
+                  case 4:
+                    return ['右上角菜单']
               }
             }
           },
-          {prop: 'createTime', label: '创建时间'},
+          // {prop: 'createTime', label: '创建时间'},
           {label: '操作', minWidth: this.$pc ? 0 : 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])},

src/views/setting/sys/roleManager.vue

@@ -51,12 +51,12 @@
                   <el-input clearable placeholder="请输入" v-model="queryCondition.code" />
                 </el-form-item>
               </el-col>
-              <el-col :sm="12" :md="6">
+              <el-col :sm="12" :md="5" :xl="6">
-                <el-form-item label="备注:">
+                <el-form-item label="备注:" label-width="50px">
                   <el-input clearable placeholder="请输入" v-model="queryCondition.remarks" />
                 </el-form-item>
               </el-col>
-              <el-col :sm="12" :md="6">
+              <el-col :sm="12" :md="7" :xl="6">
                 <div class="el-form-actions">
                   <el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary" @click="getRoleList()">查询</el-button>
                   <el-button class="card-btn-icon" size="medium" icon="el-icon-plus" type="primary" @click="add()">添加</el-button>
@@ -68,7 +68,7 @@
         </div>
       </div>
       <table-list
-        :less-client-height="290"
+        :less-client-height="280"
         :tableData="dataList"
         :loading="loading"
         :tableHeader="tableHeader"