🔥 大版本迭代：（之前精力过多的集中在了pro，忽略了开源用户的感受，抱歉）

1.重构多标签页
2.优化菜单布局
3.主题配置代码全部开源，不再需要加群获取
4.husky变更为gitHooks
5.重构代码生成机

README.md

@@ -137,7 +137,7 @@ module.exports = {
   //是否开启主题配置按钮
   themeBar: true,
   //是否显示多标签页
-  tagsBar: true,
+  tabsBar: true,
   //是否显示骨架屏
   skeleton: false,
   //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
@@ -235,14 +235,14 @@ $base-logo-height: 75px;
 //顶部nav-bar的高度
 $base-nav-bar-height: 60px;
 //顶部多标签页tags-bar的高度
-$base-tags-bar-height: 55px;
+$base-tabs-bar-height: 55px;
 //顶部多标签页tags-bar中每一个item的高度
 $base-tag-item-height: 34px;
 //菜单li标签的高度
 $base-menu-item-height: 50px;
 //app-main的高度
 $base-app-main-height: calc(
-  100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} -
+  100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} -
     #{$base-padding} - #{$base-padding} - 55px - 30px
 );
 //纵向布局时左侧导航未折叠时的宽度

mock/controller/changeLog.js

@@ -98,7 +98,7 @@ const data = [
     timestamp: "2020-05-16",
   },
   {
-    content: "又被人骂了 挺好的 让我下定决心重写了tagsBar",
+    content: "又被人骂了 挺好的 让我下定决心重写了tabsBar",
     timestamp: "2020-05-20",
   },
   {
@@ -122,7 +122,7 @@ const data = [
     timestamp: "2020-06-19",
   },
   {
-    content: "彻底完成了tagsbar多标签页的重构",
+    content: "彻底完成了tabsBar多标签页的重构",
     timestamp: "2020-06-22",
   },
   {
@@ -186,6 +186,10 @@ const data = [
     content: "完善路由后端渲染方案，弃用之前写法",
     timestamp: "2020-09-30",
   },
+  {
+    content: "大版本迭代，请关注github tag",
+    timestamp: "2020-09-30",
+  },
 ];
 
 module.exports = [

package.json

@@ -30,14 +30,12 @@
     "type": "git",
     "url": "git+https://github.com/chuzhixin/vue-admin-beautiful.git"
   },
-  "husky": {
+  "gitHooks": {
-    "hooks": {
+    "pre-commit": "lint-staged"
-      "pre-commit": "lint-staged"
-    }
   },
   "lint-staged": {
-    "src/**/*.{js,vue}": [
+    "*.{js,scss,vue}": [
-      "eslint --fix",
+      "vue-cli-service lint",
       "git add"
     ]
   },
@@ -47,7 +45,7 @@
     "clipboard": "^2.0.6",
     "codemirror": "^5.58.1",
     "core-js": "^3.6.5",
-    "dayjs": "^1.9.0",
+    "dayjs": "^1.9.1",
     "echarts": "^4.9.0",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.13.2",
@@ -72,12 +70,12 @@
     "zx-count": "^0.3.7",
     "zx-icon": "^1.1.9",
     "zx-keel": "^0.9.4",
-    "zx-layouts": "^0.6.13",
+    "zx-layouts": "^0.6.14",
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^1.0.1",
     "zx-quill": "^0.0.2",
-    "zx-templates": "^0.0.22",
+    "zx-templates": "^0.0.23",
     "zx-verify": "^0.0.2"
   },
   "devDependencies": {
@@ -94,9 +92,8 @@
     "compression-webpack-plugin": "^6.0.2",
     "eslint": "^7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.0",
     "filemanager-webpack-plugin": "^2.0.5",
-    "husky": "^4.3.0",
     "image-webpack-loader": "^7.0.1",
     "increase-memory-limit": "^1.0.7",
     "lint-staged": "^10.4.0",

src/colorfulIcon/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { ColorfullIcon } from "@/layouts/components";
 
-Vue.component("vab-colorful-icon", ColorfullIcon);
+Vue.component("VabColorfulIcon", ColorfullIcon);
 const req = require.context("./svg", false, /\.svg$/),
   requireAll = (requireContext) => {
     /*let a = requireContext.keys().map(requireContext);

src/components/VabImage/index.vue

@@ -41,10 +41,10 @@
     mounted() {},
     methods: {
       clickBig() {
-        this.$emit("clickBig");
+        this.$emit("click-big");
       },
       clickSmall() {
-        this.$emit("clickSmall");
+        this.$emit("click-small");
       },
     },
   };

src/components/VabUpload/index.vue

@@ -161,7 +161,7 @@
         this.imgSuccessNum = this.imgSuccessNum + 1;
         if (fileList.length === this.imgNum) {
           setTimeout(() => {
-            this.$emit("fetchDatas");
+            this.$emit("fetch-datas");
             this.$baseMessage(
               `上传完成! 共上传${fileList.length}张图片`,
               "success"

src/config/settings.js

@@ -59,7 +59,7 @@ module.exports = {
   //是否开启主题配置按钮
   themeBar: true,
   //是否显示多标签页
-  tagsBar: true,
+  tabsBar: true,
   //是否显示骨架屏
   skeleton: false,
   //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8

src/layouts/components/index.js

@@ -11,7 +11,7 @@ export { default as Logo } from "zx-layouts/Logo";
 export { default as Avatar } from "zx-layouts/Avatar";
 export { default as Ad } from "./Ad";
 export { default as AppMain } from "zx-layouts/AppMain";
-export { default as TagsBar } from "zx-layouts/TagsBar";
+export { default as TabsBar } from "zx-layouts/TabsBar";
 export { default as SideBar } from "zx-layouts/SideBar";
 export { default as Breadcrumb } from "zx-layouts/Breadcrumb";
 export { default as FullScreenBar } from "zx-layouts/FullScreenBar";

src/layouts/index.vue

@@ -5,17 +5,17 @@
       class="layout-container-horizontal"
       :class="{
         fixed: header === 'fixed',
-        'no-tags-bar': tagsBar === 'false' || tagsBar === false,
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
       }"
     >
       <div :class="header === 'fixed' ? 'fixed-header' : ''">
         <top-bar></top-bar>
         <div
-          v-if="tagsBar === 'true' || tagsBar === true"
+          v-if="tabsBar === 'true' || tabsBar === true"
-          :class="{ 'tag-view-show': tagsBar }"
+          :class="{ 'tag-view-show': tabsBar }"
         >
           <div class="vab-main">
-            <tags-bar></tags-bar>
+            <tabs-bar></tabs-bar>
           </div>
         </div>
       </div>
@@ -29,7 +29,7 @@
       class="layout-container-vertical"
       :class="{
         fixed: header === 'fixed',
-        'no-tags-bar': tagsBar === 'false' || tagsBar === false,
+        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
       }"
     >
       <div
@@ -41,7 +41,7 @@
       <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
         <div :class="header === 'fixed' ? 'fixed-header' : ''">
           <nav-bar></nav-bar>
-          <tags-bar v-if="tagsBar === 'true' || tagsBar === true" />
+          <tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />
         </div>
         <ad></ad>
         <app-main></app-main>
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-  import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
+  import { Ad, AppMain, NavBar, SideBar, TabsBar, TopBar } from "./components";
   import { mapActions, mapGetters } from "vuex";
   import { tokenName } from "@/config/settings";
   export default {
@@ -63,7 +63,7 @@
       NavBar,
       SideBar,
       AppMain,
-      TagsBar,
+      TabsBar,
     },
     data() {
       return { oldLayout: "" };
@@ -71,7 +71,7 @@
     computed: {
       ...mapGetters({
         layout: "settings/layout",
-        tagsBar: "settings/tagsBar",
+        tabsBar: "settings/tabsBar",
         collapse: "settings/collapse",
         header: "settings/header",
         device: "settings/device",
@@ -170,10 +170,10 @@
       position: relative;
 
       &.fixed {
-        padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
+        padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
       }
 
-      &.fixed.no-tags-bar {
+      &.fixed.no-tabs-bar {
         padding-top: $base-top-bar-height;
       }
 
@@ -226,10 +226,10 @@
       }
 
       &.fixed {
-        padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
+        padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
       }
 
-      &.fixed.no-tags-bar {
+      &.fixed.no-tabs-bar {
         padding-top: $base-nav-bar-height;
       }
 
@@ -255,7 +255,7 @@
             box-sizing: border-box;
           }
 
-          .tags-bar-container {
+          .tabs-bar-container {
             box-sizing: border-box;
           }
 

src/plugins/vabIcon.js

@@ -1,4 +1,4 @@
 import Vue from "vue";
 import VabIcon from "zx-icon";
 
-Vue.component("vab-icon", VabIcon);
+Vue.component("VabIcon", VabIcon);

src/remixIcon/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { RemixIcon } from "@/layouts/components";
 
-Vue.component("vab-remix-icon", RemixIcon);
+Vue.component("VabRemixIcon", RemixIcon);
 const req = require.context("./svg", false, /\.svg$/),
   requireAll = (requireContext) => {
     /*let a = requireContext.keys().map(requireContext);

src/store/modules/settings.js

@@ -5,11 +5,11 @@
 
 import defaultSettings from "@/config/settings";
 
-const { tagsBar, logo, layout, header, themeBar, skeleton } = defaultSettings;
+const { tabsBar, logo, layout, header, themeBar, skeleton } = defaultSettings;
 const theme =
   JSON.parse(localStorage.getItem("vue-admin-beautiful-theme")) || "";
 const state = {
-  tagsBar: theme.tagsBar || tagsBar,
+  tabsBar: theme.tabsBar || tabsBar,
   logo,
   collapse: false,
   layout: theme.layout || layout,
@@ -24,7 +24,7 @@ const getters = {
   header: (state) => state.header,
   layout: (state) => state.layout,
   logo: (state) => state.logo,
-  tagsBar: (state) => state.tagsBar,
+  tabsBar: (state) => state.tabsBar,
   themeBar: (state) => state.themeBar,
   skeleton: (state) => state.skeleton,
 };
@@ -35,8 +35,8 @@ const mutations = {
   changeHeader: (state, header) => {
     if (header) state.header = header;
   },
-  changeTagsBar: (state, tagsBar) => {
+  changeTabsBar: (state, tabsBar) => {
-    if (tagsBar) state.tagsBar = tagsBar;
+    if (tabsBar) state.tabsBar = tabsBar;
   },
   changeCollapse: (state) => {
     state.collapse = !state.collapse;
@@ -58,8 +58,8 @@ const actions = {
   changeHeader({ commit }, header) {
     commit("changeHeader", header);
   },
-  changeTagsBar({ commit }, tagsBar) {
+  changeTabsBar({ commit }, tabsBar) {
-    commit("changeTagsBar", tagsBar);
+    commit("changeTabsBar", tabsBar);
   },
   changeCollapse({ commit }) {
     commit("changeCollapse");

src/store/modules/tabsBar.js

@@ -1,6 +1,6 @@
 /**
  * @copyright chuzhixin 1204505056@qq.com
- * @description tagsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户cyea的启发下完成了重构，请勿修改
+ * @description tabsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户cyea的启发下完成了重构，请勿修改
  */
 
 const state = {
@@ -11,36 +11,34 @@ const getters = {
 };
 const mutations = {
   addVisitedRoute(state, route) {
-    if (state.visitedRoutes.some((item) => item.path === route.path)) return;
+    let target = state.visitedRoutes.find((item) => item.path === route.path);
+    if (target) {
+      if (route.fullPath !== target.fullPath) Object.assign(target, route);
+      return;
+    }
     state.visitedRoutes.push(Object.assign({}, route));
   },
   delVisitedRoute(state, route) {
     state.visitedRoutes.forEach((item, index) => {
-      if (item.path === route.path) {
+      if (item.path === route.path) state.visitedRoutes.splice(index, 1);
-        state.visitedRoutes.splice(index, 1);
-      }
     });
   },
   delOthersVisitedRoute(state, route) {
-    state.visitedRoutes = state.visitedRoutes.filter((item) => {
+    state.visitedRoutes = state.visitedRoutes.filter(
-      return item.meta.affix || item.path === route.path;
+      (item) => item.meta.affix || item.path === route.path
-    });
+    );
   },
   delLeftVisitedRoute(state, route) {
     let index = state.visitedRoutes.length;
     state.visitedRoutes = state.visitedRoutes.filter((item) => {
-      if (item.name === route.name) {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item);
-        index = state.visitedRoutes.indexOf(item);
-      }
       return item.meta.affix || index <= state.visitedRoutes.indexOf(item);
     });
   },
   delRightVisitedRoute(state, route) {
     let index = state.visitedRoutes.length;
     state.visitedRoutes = state.visitedRoutes.filter((item) => {
-      if (item.name === route.name) {
+      if (item.name === route.name) index = state.visitedRoutes.indexOf(item);
-        index = state.visitedRoutes.indexOf(item);
-      }
       return item.meta.affix || index >= state.visitedRoutes.indexOf(item);
     });
   },
@@ -49,9 +47,7 @@ const mutations = {
   },
   updateVisitedRoute(state, route) {
     state.visitedRoutes.forEach((item) => {
-      if (item.path === route.path) {
+      if (item.path === route.path) item = Object.assign(item, route);
-        item = Object.assign(item, route);
-      }
     });
   },
 };

src/styles/themes/dark.scss

@@ -102,7 +102,7 @@
     }
   }
 
-  .tags-bar-container {
+  .tabs-bar-container {
     background: $base-color-white;
     border-top: 1px solid #f6f6f6;
 

src/styles/themes/glory.scss

@@ -76,7 +76,7 @@
     }
   }
 
-  .tags-bar-container {
+  .tabs-bar-container {
     background: $base-color-white;
     border-top: 1px solid #f6f6f6;
 

src/styles/themes/green.scss

@@ -76,7 +76,7 @@
     }
   }
 
-  .tags-bar-container {
+  .tabs-bar-container {
     background: $base-color-white;
     border-top: 1px solid #f6f6f6;
 

src/styles/themes/ocean.scss

@@ -76,7 +76,7 @@
     }
   }
 
-  .tags-bar-container {
+  .tabs-bar-container {
     background: $base-color-white;
     border-top: 1px solid #f6f6f6;
 

src/styles/variables.scss

@@ -49,14 +49,14 @@ $base-logo-height: 75px;
 //顶部nav-bar的高度
 $base-nav-bar-height: 60px;
 //顶部多标签页tags-bar的高度
-$base-tags-bar-height: 55px;
+$base-tabs-bar-height: 55px;
 //顶部多标签页tags-bar中每一个item的高度
 $base-tag-item-height: 34px;
 //菜单li标签的高度
 $base-menu-item-height: 50px;
 //app-main的高度
 $base-app-main-height: calc(
-  100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} - #{$base-padding} -
+  100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} -
     #{$base-padding} - 55px - 30px
 );
 //纵向布局时左侧导航未折叠时的宽度

src/views/401.vue

@@ -68,7 +68,7 @@
             this.jumpTime--;
           } else {
             this.$router.push({ path: "/" });
-            this.$store.dispatch("tagsBar/delOthersRoutes", {
+            this.$store.dispatch("tabsBar/delOthersRoutes", {
               path: "/",
             });
             clearInterval(this.timer);

src/views/404.vue

@@ -68,7 +68,7 @@
             this.jumpTime--;
           } else {
             this.$router.push({ path: "/" });
-            this.$store.dispatch("tagsBar/delOthersRoutes", {
+            this.$store.dispatch("tabsBar/delOthersRoutes", {
               path: "/",
             });
             clearInterval(this.timer);

src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue

@@ -59,7 +59,7 @@
           if (valid) {
             const { msg } = await doEdit(this.form);
             this.$baseMessage(msg, "success");
-            this.$emit("fetchData");
+            this.$emit("fetch-data");
             this.close();
           } else {
             return false;

src/views/personnelManagement/menuManagement/index.vue

@@ -106,7 +106,7 @@
             label="操作"
             width="200"
           >
-            <template v-slot="scope">
+            <template #default="scope">
               <el-button type="text" @click="handleEdit(scope.row)">
                 编辑
               </el-button>
@@ -119,7 +119,7 @@
       </el-col>
     </el-row>
 
-    <edit ref="edit" @fetchData="fetchData"></edit>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
   </div>
 </template>
 

src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue

@@ -57,7 +57,7 @@
           if (valid) {
             const { msg } = await doEdit(this.form);
             this.$baseMessage(msg, "success");
-            this.$emit("fetchData");
+            this.$emit("fetch-data");
             this.close();
           } else {
             return false;

src/views/personnelManagement/roleManagement/index.vue

@@ -53,7 +53,7 @@
         label="操作"
         width="200"
       >
-        <template v-slot="scope">
+        <template #default="scope">
           <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(scope.row)">
             删除
@@ -70,7 +70,7 @@
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     ></el-pagination>
-    <edit ref="edit" @fetchData="fetchData"></edit>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
   </div>
 </template>
 

src/views/personnelManagement/userManagement/components/UserManagementEdit.vue

@@ -83,7 +83,7 @@
           if (valid) {
             const { msg } = await doEdit(this.form);
             this.$baseMessage(msg, "success");
-            this.$emit("fetchData");
+            this.$emit("fetch-data");
             this.close();
           } else {
             return false;

src/views/personnelManagement/userManagement/index.vue

@@ -51,7 +51,7 @@
       ></el-table-column>
 
       <el-table-column show-overflow-tooltip label="权限">
-        <template v-slot="{ row }">
+        <template #default="{ row }">
           <el-tag v-for="(item, index) in row.permissions" :key="index">
             {{ item }}
           </el-tag>
@@ -69,7 +69,7 @@
         label="操作"
         width="200"
       >
-        <template v-slot="scope">
+        <template #default="scope">
           <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(scope.row)">
             删除
@@ -86,7 +86,7 @@
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     ></el-pagination>
-    <edit ref="edit" @fetchData="fetchData"></edit>
+    <edit ref="edit" @fetch-data="fetchData"></edit>
   </div>
 </template>
 

src/views/vab/table/components/TableEdit.vue

@@ -54,7 +54,7 @@
         this.$refs["form"].resetFields();
         this.form = this.$options.data().form;
         this.dialogFormVisible = false;
-        this.$emit("fetchData");
+        this.$emit("fetch-data");
       },
       save() {
         this.$refs["form"].validate(async (valid) => {
@@ -63,7 +63,7 @@
             this.$baseMessage(msg, "success");
             this.$refs["form"].resetFields();
             this.dialogFormVisible = false;
-            this.$emit("fetchData");
+            this.$emit("fetch-data");
             this.form = this.$options.data().form;
           } else {
             return false;