导航is-active完成

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -87,6 +87,7 @@
 
     & .theme-dark .is-active > .el-submenu__title {
       color: $base-menu-color-active !important;
+      // border-left: 5px solid $base-menu-color-active !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -203,6 +204,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
+      // background-color: rgba(0, 0, 0, 0.06) !important;
       background-color: rgba(0, 0, 0, 0.06) !important;
     }
   }
@@ -226,3 +228,9 @@
     }
   }
 }
+.el-menu-item.is-active{
+  border-left: 5px solid #409eff !important;
+}
+.el-scrollbar__view {
+  margin-top: 10px;
+}

ruoyi-ui/src/components/TopNav/index.vue

@@ -5,33 +5,35 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item
+        v-if="index < visibleNumber"
+        :key="index"
+        :style="{'--theme': theme}"
+        :index="item.path"
       ><svg-icon :icon-class="item.meta.icon" />
-        {{ item.meta.title }}</el-menu-item
-      >
+        {{ item.meta.title }}</el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu v-if="topMenus.length > visibleNumber" :style="{'--theme': theme}" index="more">
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
-          :index="item.path"
-          :key="index"
           v-if="index >= visibleNumber"
+          :key="index"
+          :index="item.path"
         ><svg-icon :icon-class="item.meta.icon" />
-          {{ item.meta.title }}</el-menu-item
-        >
+          {{ item.meta.title }}</el-menu-item>
       </template>
     </el-submenu>
   </el-menu>
 </template>
 
 <script>
-import { constantRoutes } from "@/router";
+import { constantRoutes } from '@/router'
 
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ['/index', '/user/profile']
 
 export default {
   data() {
@@ -40,68 +42,68 @@ export default {
       visibleNumber: 5,
       // 当前激活菜单的 index
       currentIndex: undefined
-    };
+    }
   },
   computed: {
     theme() {
-      return this.$store.state.settings.theme;
+      return this.$store.state.settings.theme
     },
     // 顶部显示菜单
     topMenus() {
-      let topMenus = [];
+      const topMenus = []
       this.routers.map((menu) => {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+          if (menu.path === '/') {
+            topMenus.push(menu.children[0])
           } else {
-              topMenus.push(menu);
+            topMenus.push(menu)
           }
         }
-      });
-      return topMenus;
+      })
+      return topMenus
     },
     // 所有的路由信息
     routers() {
-      return this.$store.state.permission.topbarRouters;
+      return this.$store.state.permission.topbarRouters
     },
     // 设置子路由
     childrenMenus() {
-      var childrenMenus = [];
+      var childrenMenus = []
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
-              router.children[item].path = "/" + router.children[item].path;
+            if (router.path === '/') {
+              router.children[item].path = '/' + router.children[item].path
             } else {
               if (!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+                router.children[item].path = router.path + '/' + router.children[item].path
               }
             }
-            router.children[item].parentPath = router.path;
+            router.children[item].parentPath = router.path
           }
-          childrenMenus.push(router.children[item]);
+          childrenMenus.push(router.children[item])
         }
-      });
-      return constantRoutes.concat(childrenMenus);
+      })
+      return constantRoutes.concat(childrenMenus)
     },
     // 默认激活的菜单
     activeMenu() {
-      const path = this.$route.path;
-      let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
-        const tmpPath = path.substring(1, path.length);
-        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+      const path = this.$route.path
+      let activePath = path
+      if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
+        const tmpPath = path.substring(1, path.length)
+        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
         if (!this.$route.meta.link) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
+          this.$store.dispatch('app/toggleSideBarHide', false)
         }
       } else if (!this.$route.children) {
-        activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        activePath = path
+        this.$store.dispatch('app/toggleSideBarHide', true)
+      }
+      this.activeRoutes(activePath)
+      return activePath
     }
-      this.activeRoutes(activePath);
-      return activePath;
-    },
   },
   beforeMount() {
     window.addEventListener('resize', this.setVisibleNumber)
@@ -110,58 +112,58 @@ export default {
     window.removeEventListener('resize', this.setVisibleNumber)
   },
   mounted() {
-    this.setVisibleNumber();
+    this.setVisibleNumber()
   },
   methods: {
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width / 3;
-      this.visibleNumber = parseInt(width / 85);
+      const width = document.body.getBoundingClientRect().width / 3
+      this.visibleNumber = parseInt(width / 85)
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
-      this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      this.currentIndex = key
+      const route = this.routers.find(item => item.path === key)
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
-        window.open(key, "_blank");
+        window.open(key, '_blank')
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
-        const routeMenu = this.childrenMenus.find(item => item.path === key);
+        const routeMenu = this.childrenMenus.find(item => item.path === key)
         if (routeMenu && routeMenu.query) {
-          let query = JSON.parse(routeMenu.query);
-          this.$router.push({ path: key, query: query });
+          const query = JSON.parse(routeMenu.query)
+          this.$router.push({ path: key, query: query })
         } else {
-          this.$router.push({ path: key });
+          this.$router.push({ path: key })
         }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch('app/toggleSideBarHide', true)
       } else {
         // 显示左侧联动菜单
-        this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.activeRoutes(key)
+        this.$store.dispatch('app/toggleSideBarHide', false)
       }
     },
     // 当前激活的路由
     activeRoutes(key) {
-      var routes = [];
+      var routes = []
       if (this.childrenMenus && this.childrenMenus.length > 0) {
         this.childrenMenus.map((item) => {
-          if (key == item.parentPath || (key == "index" && "" == item.path)) {
-            routes.push(item);
+          if (key == item.parentPath || (key == 'index' && item.path == '')) {
+            routes.push(item)
           }
-        });
+        })
       }
       if (routes.length > 0) {
-        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+        this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
       } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch('app/toggleSideBarHide', true)
       }
     },
     ishttp(url) {
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss">

ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -60,7 +60,7 @@ export default {
     hasOneShowingChild(children = [], parent) {
       // console.log(children,"parent");
       if (!children) {
-        children = [];
+        children = []
       }
 
       const showingChildren = children.filter(item => {
@@ -76,7 +76,6 @@ export default {
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-
         return true
       }
 
@@ -90,7 +89,7 @@ export default {
       return false
     },
     resolvePath(routePath, routeQuery) {
-      console.log(routePath,routeQuery,"路由");
+      console.log(routePath, routeQuery, '路由')
       if (isExternal(routePath)) {
         return routePath
       }
@@ -98,10 +97,10 @@ export default {
         return this.basePath
       }
       if (routeQuery) {
-        let query = JSON.parse(routeQuery);
+        const query = JSON.parse(routeQuery)
         return { path: path.resolve(this.basePath, routePath), query: query }
       }
-     console.log(this.basePath, routePath,"this.basePath, routePath");
+      console.log(this.basePath, routePath, 'this.basePath, routePath')
       return path.resolve(this.basePath, routePath)
     }
   }

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -61,7 +61,6 @@ export default {
     }
   },
   mounted() {
- 
     const roleid = getroleId()
     // 判断roleid全等于4就是学生,全等于3就是老师
     if (roleid == 4) {

ruoyi-ui/src/views/tool/build/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="left-board">
       <div class="logo-wrapper">
-        <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
+        <div class="logo"><img :src="logo" alt="logo"> Form Generator</div>
       </div>
       <el-scrollbar class="left-scrollbar">
         <div class="components-list">
@@ -152,38 +152,38 @@
       :show-file-name="showFileName"
       @confirm="generate"
     />
-    <input id="copyNode" type="hidden" />
+    <input id="copyNode" type="hidden">
   </div>
 </template>
 
 <script>
-import draggable from "vuedraggable";
-import beautifier from "js-beautify";
-import ClipboardJS from "clipboard";
-import render from "@/utils/generator/render";
-import RightPanel from "./RightPanel";
+import draggable from 'vuedraggable'
+import beautifier from 'js-beautify'
+import ClipboardJS from 'clipboard'
+import render from '@/utils/generator/render'
+import RightPanel from './RightPanel'
 import {
   inputComponents,
   selectComponents,
   layoutComponents,
-  formConf,
-} from "@/utils/generator/config";
-import { beautifierConf, titleCase } from "@/utils/index";
+  formConf
+} from '@/utils/generator/config'
+import { beautifierConf, titleCase } from '@/utils/index'
 import {
   makeUpHtml,
   vueTemplate,
   vueScript,
-  cssStyle,
-} from "@/utils/generator/html";
-import { makeUpJs } from "@/utils/generator/js";
-import { makeUpCss } from "@/utils/generator/css";
-import drawingDefault from "@/utils/generator/drawingDefault";
-import logo from "@/assets/logo/logo.png";
-import CodeTypeDialog from "./CodeTypeDialog";
-import DraggableItem from "./DraggableItem";
+  cssStyle
+} from '@/utils/generator/html'
+import { makeUpJs } from '@/utils/generator/js'
+import { makeUpCss } from '@/utils/generator/css'
+import drawingDefault from '@/utils/generator/drawingDefault'
+import logo from '@/assets/logo/logo.png'
+import CodeTypeDialog from './CodeTypeDialog'
+import DraggableItem from './DraggableItem'
 
-let oldActiveId;
-let tempActiveData;
+let oldActiveId
+let tempActiveData
 
 export default {
   components: {
@@ -191,7 +191,7 @@ export default {
     render,
     RightPanel,
     CodeTypeDialog,
-    DraggableItem,
+    DraggableItem
   },
   data() {
     return {
@@ -210,201 +210,200 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0],
-    };
-  },
-  created() {
-    // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
+      activeData: drawingDefault[0]
+    }
   },
   watch: {
     // eslint-disable-next-line func-names
-    "activeData.label": function (val, oldVal) {
+    'activeData.label': function(val, oldVal) {
       if (
         this.activeData.placeholder === undefined ||
         !this.activeData.tag ||
         oldActiveId !== this.activeId
       ) {
-        return;
+        return
       }
       this.activeData.placeholder =
-        this.activeData.placeholder.replace(oldVal, "") + val;
+        this.activeData.placeholder.replace(oldVal, '') + val
     },
     activeId: {
       handler(val) {
-        oldActiveId = val;
+        oldActiveId = val
       },
-      immediate: true,
+      immediate: true
+    }
   },
+  created() {
+    // 防止 firefox 下 拖拽 会新打卡一个选项卡
+    document.body.ondrop = (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+    }
   },
   mounted() {
-    const clipboard = new ClipboardJS("#copyNode", {
+    const clipboard = new ClipboardJS('#copyNode', {
       text: (trigger) => {
-        const codeStr = this.generateCode();
+        const codeStr = this.generateCode()
         this.$notify({
-          title: "成功",
-          message: "代码已复制到剪切板，可粘贴。",
-          type: "success",
-        });
-        return codeStr;
-      },
-    });
-    clipboard.on("error", (e) => {
-      this.$message.error("代码复制失败");
-    });
+          title: '成功',
+          message: '代码已复制到剪切板，可粘贴。',
+          type: 'success'
+        })
+        return codeStr
+      }
+    })
+    clipboard.on('error', (e) => {
+      this.$message.error('代码复制失败')
+    })
   },
   methods: {
     activeFormItem(element) {
-      this.activeData = element;
-      this.activeId = element.formId;
+      this.activeData = element
+      this.activeId = element.formId
     },
     onEnd(obj, a) {
       if (obj.from !== obj.to) {
-        this.activeData = tempActiveData;
-        this.activeId = this.idGlobal;
+        this.activeData = tempActiveData
+        this.activeId = this.idGlobal
       }
     },
     addComponent(item) {
-      const clone = this.cloneComponent(item);
-      this.drawingList.push(clone);
-      this.activeFormItem(clone);
+      const clone = this.cloneComponent(item)
+      this.drawingList.push(clone)
+      this.activeFormItem(clone)
     },
     cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin));
-      clone.formId = ++this.idGlobal;
-      clone.span = formConf.span;
-      clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = "colFormItem";
-      if (clone.layout === "colFormItem") {
-        clone.vModel = `field${this.idGlobal}`;
-        clone.placeholder !== undefined && (clone.placeholder += clone.label);
-        tempActiveData = clone;
-      } else if (clone.layout === "rowFormItem") {
-        delete clone.label;
-        clone.componentName = `row${this.idGlobal}`;
-        clone.gutter = this.formConf.gutter;
-        tempActiveData = clone;
-      }
-      return tempActiveData;
+      const clone = JSON.parse(JSON.stringify(origin))
+      clone.formId = ++this.idGlobal
+      clone.span = formConf.span
+      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      if (!clone.layout) clone.layout = 'colFormItem'
+      if (clone.layout === 'colFormItem') {
+        clone.vModel = `field${this.idGlobal}`
+        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        tempActiveData = clone
+      } else if (clone.layout === 'rowFormItem') {
+        delete clone.label
+        clone.componentName = `row${this.idGlobal}`
+        clone.gutter = this.formConf.gutter
+        tempActiveData = clone
+      }
+      return tempActiveData
     },
     AssembleFormData() {
       this.formData = {
         fields: JSON.parse(JSON.stringify(this.drawingList)),
-        ...this.formConf,
-      };
+        ...this.formConf
+      }
     },
     generate(data) {
-      const func = this[`exec${titleCase(this.operationType)}`];
-      this.generateConf = data;
-      func && func(data);
+      const func = this[`exec${titleCase(this.operationType)}`]
+      this.generateConf = data
+      func && func(data)
     },
     execRun(data) {
-      this.AssembleFormData();
-      this.drawerVisible = true;
+      this.AssembleFormData()
+      this.drawerVisible = true
     },
     execDownload(data) {
-      const codeStr = this.generateCode();
-      const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
-      this.$download.saveAs(blob, data.fileName);
+      const codeStr = this.generateCode()
+      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      this.$download.saveAs(blob, data.fileName)
     },
     execCopy(data) {
-      document.getElementById("copyNode").click();
+      document.getElementById('copyNode').click()
     },
     empty() {
-      this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
+      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
         () => {
-          this.drawingList = [];
+          this.drawingList = []
         }
-      );
+      )
     },
     drawingItemCopy(item, parent) {
-      let clone = JSON.parse(JSON.stringify(item));
-      clone = this.createIdAndKey(clone);
-      parent.push(clone);
-      this.activeFormItem(clone);
+      let clone = JSON.parse(JSON.stringify(item))
+      clone = this.createIdAndKey(clone)
+      parent.push(clone)
+      this.activeFormItem(clone)
     },
     createIdAndKey(item) {
-      item.formId = ++this.idGlobal;
-      item.renderKey = +new Date();
-      if (item.layout === "colFormItem") {
-        item.vModel = `field${this.idGlobal}`;
-      } else if (item.layout === "rowFormItem") {
-        item.componentName = `row${this.idGlobal}`;
+      item.formId = ++this.idGlobal
+      item.renderKey = +new Date()
+      if (item.layout === 'colFormItem') {
+        item.vModel = `field${this.idGlobal}`
+      } else if (item.layout === 'rowFormItem') {
+        item.componentName = `row${this.idGlobal}`
       }
       if (Array.isArray(item.children)) {
         item.children = item.children.map((childItem) =>
           this.createIdAndKey(childItem)
-        );
+        )
       }
-      return item;
+      return item
     },
     drawingItemDelete(index, parent) {
-      parent.splice(index, 1);
+      parent.splice(index, 1)
       this.$nextTick(() => {
-        const len = this.drawingList.length;
+        const len = this.drawingList.length
         if (len) {
-          this.activeFormItem(this.drawingList[len - 1]);
+          this.activeFormItem(this.drawingList[len - 1])
         }
-      });
+      })
     },
     generateCode() {
-      const { type } = this.generateConf;
-      this.AssembleFormData();
-      const script = vueScript(makeUpJs(this.formData, type));
-      const html = vueTemplate(makeUpHtml(this.formData, type));
-      const css = cssStyle(makeUpCss(this.formData));
-      return beautifier.html(html + script + css, beautifierConf.html);
+      const { type } = this.generateConf
+      this.AssembleFormData()
+      const script = vueScript(makeUpJs(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const css = cssStyle(makeUpCss(this.formData))
+      return beautifier.html(html + script + css, beautifierConf.html)
     },
     download() {
-      this.dialogVisible = true;
-      this.showFileName = true;
-      this.operationType = "download";
+      this.dialogVisible = true
+      this.showFileName = true
+      this.operationType = 'download'
     },
     run() {
-      this.dialogVisible = true;
-      this.showFileName = false;
-      this.operationType = "run";
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'run'
     },
     copy() {
-      this.dialogVisible = true;
-      this.showFileName = false;
-      this.operationType = "copy";
+      this.dialogVisible = true
+      this.showFileName = false
+      this.operationType = 'copy'
     },
     tagChange(newTag) {
-      newTag = this.cloneComponent(newTag);
-      newTag.vModel = this.activeData.vModel;
-      newTag.formId = this.activeId;
-      newTag.span = this.activeData.span;
-      delete this.activeData.tag;
-      delete this.activeData.tagIcon;
-      delete this.activeData.document;
+      newTag = this.cloneComponent(newTag)
+      newTag.vModel = this.activeData.vModel
+      newTag.formId = this.activeId
+      newTag.span = this.activeData.span
+      delete this.activeData.tag
+      delete this.activeData.tagIcon
+      delete this.activeData.document
       Object.keys(newTag).forEach((key) => {
         if (
           this.activeData[key] !== undefined &&
           typeof this.activeData[key] === typeof newTag[key]
         ) {
-          newTag[key] = this.activeData[key];
+          newTag[key] = this.activeData[key]
         }
-      });
-      this.activeData = newTag;
-      this.updateDrawingList(newTag, this.drawingList);
+      })
+      this.activeData = newTag
+      this.updateDrawingList(newTag, this.drawingList)
     },
     updateDrawingList(newTag, list) {
-      const index = list.findIndex((item) => item.formId === this.activeId);
+      const index = list.findIndex((item) => item.formId === this.activeId)
       if (index > -1) {
-        list.splice(index, 1, newTag);
+        list.splice(index, 1, newTag)
       } else {
         list.forEach((item) => {
-          if (Array.isArray(item.children))
-            this.updateDrawingList(newTag, item.children);
-        });
+          if (Array.isArray(item.children)) { this.updateDrawingList(newTag, item.children) }
+        })
+      }
+    }
+  }
 }
-    },
-  },
-};
 </script>
 
 <style lang='scss'>
@@ -443,6 +442,7 @@ export default {
 .right-scrollbar {
   .el-scrollbar__view {
     padding: 12px 18px 15px 15px;
+
   }
 }
 .left-scrollbar .el-scrollbar__wrap {