新增面包屑的显隐逻辑，完善菜单栏的图标使用、说明文档更新

README.md

@@ -121,19 +121,12 @@ windows.request(config)/get/post/...
 | 过滤方法名            | 功能                                                         | 示例       |
 | :-------------------- | :----------------------------------------------------------- | :--------- |
 | formatDateTime        | 格式化日期+时间                                              | date\      |
-| formatDateTime        |
 | formatDate            | 格式化日期                                                   | date\      |
-| formatDate            |
 | formatMoney           | 格式化金额（除以 100 并保留 2 位小数），不带单位             | money\     |
-| formatMoney           |
 | formatMoneyWithSymbol | 格式化金额（除以 100 并保留 2 位小数），不带单位，带符号：￥ | money\     |
-| formatMoneyWithSymbol |
 | formatDuration        | 格式化时长                                                   | durition\  |
-| formatDuration        |
 | formatSex             | 格式化性别，1：男；2：女                                     | sex\       |
-| formatSex             |
 | formatAge             | 格式化年龄显示                                               | age\       |
-| formatAge             |
 | formatMobileHidden    | 电话号码隐藏中间几位                                         |
 
 #### 3.开发时是否使用数据库中的菜单
@@ -144,5 +137,25 @@ windows.request(config)/get/post/...
 
 - 全局样式都在`@/styles/`目录下。
 - `frame`目录下是框架的样式，除了框架修改一般不建议修改；
-- `components`目录下的`index.less`则是开发时各组件使用得共通样式。
-- `common`目录下的`vant.less`是用来全局覆盖 vant-ui 中的样式，会影响所有对应的 vant-ui 组件，慎改。`variables.less`是定义需要的 css 变量；`index.less`用来写一些通用的样式。
+- `components`目录下的`index.less`则是开发时各组件使用的共通样式。
+- `common`目录下的`vant.less`是用来全局覆盖 antDesign-ui 中的样式，会影响所有对应的 antDesign-ui 组件，慎改。`variables.less`是定义需要的 css 变量；`index.less`用来写一些通用的样式。
+
+#### 5.使用图标组件
+
+- 若有新的阿里的`iconfont更新`，需要重新获取`在线链接`，更新`@/styles/index.js`中的`scriptUrl`值
+- 若是`antDesignUi中的图标`，使用<a-icon type="iconName"/>
+- 若是`阿里的iconfont`，使用<icon-font class="iconFont" type="iconName" />
+- 若需要修改图标颜色，需要加`!important`
+
+#### 6.使用变量样式
+
+- 变量样式文件位于`@/styles/common/variable.less`
+
+```css
+<style>
+  @import '~@/styles/common/variable.less';
+  .className {
+    color: @mainColorBlue;
+  }
+</style>
+```

package.json

@@ -27,7 +27,7 @@
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "css-loader": "^5.2.6",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
     "style-loader": "^2.0.0",
     "vue-template-compiler": "^2.6.11"

src/components/layout/components/AppMain.vue

@@ -1,5 +1,7 @@
 <template>
-  <section class="app-main">
+  <section
+    :class="{ 'app-main': true, 'app-main-hasBreadcrumb': isHaveBreadcrumb }"
+  >
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view v-if="active" :key="key" />
@@ -18,6 +20,11 @@ export default {
         return true;
       },
     },
+    // 是否需要面包屑
+    isHaveBreadcrumb: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   computed: {
     cachedViews() {
@@ -34,34 +41,17 @@ export default {
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';
 .app-main {
-  height: calc(
-    100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal -
-      @breadcrumbHeight
-  );
+  height: calc(100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal);
   width: calc(100% - @paddingMarginVal - @paddingMarginVal);
   position: relative;
   overflow: hidden;
-  // background-color: #fff;
   margin: @paddingMarginVal;
 }
 
-// .fixed-header + .app-main {
-//   // padding-top: 50px;
-//   height: 100vh;
-//   overflow: auto;
-// }
-
-.hasTagsView {
-  .app-main {
-    /* 98 = navbar + tags-view = @navTopHight + 34 */
-    height: calc(
-      100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal -
-        @breadcrumbHeight
-    );
-  }
-
-  // .fixed-header + .app-main {
-  //   padding-top: 98px;
-  // }
+.app-main-hasBreadcrumb {
+  height: calc(
+    100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal -
+      @breadcrumbHeight
+  );
 }
 </style>

src/components/layout/components/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumb-box">
+  <div v-if="isHaveBreadcrumb" class="breadcrumb-box">
     <div class="breadcrumb-list">
       <a-breadcrumb>
         <a-breadcrumb-item
@@ -17,7 +17,13 @@
 import { mapGetters } from 'vuex';
 import { optionalCopy } from '@/utils/tools';
 export default {
-  props: {},
+  props: {
+    // 是否需要面包屑
+    isHaveBreadcrumb: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
   components: {},
   data() {
     return {
@@ -87,6 +93,11 @@ export default {
         } else {
           this.breadcrumbPageTitle = first.meta.title;
         }
+        if (first.meta.title === this.routes[0].meta.title) {
+          this.$emit('update:isHaveBreadcrumb', false);
+        } else {
+          this.$emit('update:isHaveBreadcrumb', true);
+        }
       }
     },
   },

src/components/layout/components/Sider.vue

@@ -17,7 +17,7 @@
           :key="item.path"
           @click="handleMenuRouterFun(item)"
         >
-          <a-icon :type="item.meta.icon" />
+          <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
           <span>{{ item.meta.title }}</span>
         </a-menu-item>
         <SubMenu
@@ -28,56 +28,6 @@
         />
       </template>
     </a-menu>
-    <!-- <a-menu
-      ref="menuListRef"
-      class="ant-menu-ul"
-      theme="dark"
-      mode="inline"
-      :defaultSelectedKeys="[activeMenu]"
-      :defaultOpenKeys="[defaultOpenKeys]"
-    >
-      <template v-for="route in routes">
-        <a-menu-item
-          v-if="!route.children"
-          :key="route.path"
-          @click="handleMenuRouterFun(route)"
-        >
-          <a-icon :type="route.meta.icon" />
-          <span>{{ route.meta.title }}</span>
-        </a-menu-item>
-        <a-sub-menu v-else :key="route.path">
-          <span slot="title">
-            <a-icon :type="route.meta.icon" />
-            <span>{{ route.meta.title }}</span>
-          </span>
-
-          <template v-for="routeChild in route.children">
-            <a-menu-item
-              v-if="!routeChild.children"
-              :key="routeChild.path"
-              @click="handleMenuRouterFun(routeChild)"
-            >
-              <a-icon :type="routeChild.meta.icon" />
-              <span>{{ routeChild.meta.title }}</span>
-            </a-menu-item>
-            <a-sub-menu v-else :key="routeChild.path">
-              <span slot="title">
-                <a-icon :type="routeChild.meta.icon" />
-                <span>{{ routeChild.meta.title }}</span>
-              </span>
-              <a-menu-item
-                v-for="routeChildren in routeChild.children"
-                :key="routeChildren.path"
-                @click="handleMenuRouterFun(routeChildren)"
-              >
-                <a-icon :type="routeChildren.meta.icon" />
-                <span>{{ routeChildren.meta.title }}</span>
-              </a-menu-item>
-            </a-sub-menu>
-          </template>
-        </a-sub-menu>
-      </template>
-    </a-menu> -->
   </div>
 </template>
 
@@ -90,11 +40,11 @@ const SubMenu = {
   template: `
       <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
         <span slot="title">
-          <a-icon :type="menuInfo.meta.icon" /><span>{{ menuInfo.meta.title }}</span>
+          <icon-font v-if="menuInfo.meta.icon" :type="menuInfo.meta.icon" />
+          <span>{{ menuInfo.meta.title }}</span>
         </span>
         <template v-for="item in menuInfo.children">
           <a-menu-item v-if="!item.children" :key="item.path" @click="handleMenuRouter(item)">
-            <a-icon :type="item.meta.icon" />
             <span>{{ item.meta.title }}</span>
           </a-menu-item>
           <sub-menu v-else :key="item.path" :menu-info="item" @handleBackFun="handleMenuRouter"/>
@@ -138,6 +88,7 @@ export default {
   watch: {},
   computed: {
     ...mapGetters(['routes', 'sidebar']),
+    // 菜单选择变化时，需要刷新值
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
@@ -150,7 +101,7 @@ export default {
     },
   },
   methods: {
-    //初始化数据
+    // 初始化菜单展开状态
     initDataFun() {
       let defaultPath = [];
       let routeInfo = optionalCopy(this.$route, 'matched');
@@ -184,7 +135,6 @@ export default {
     },
     // 操作：点击了某个路由菜单
     handleMenuRouterFun(item) {
-      // console.log(item);
       this.$router.push({ path: item.path });
     },
   },

src/components/layout/index.vue

@@ -8,8 +8,8 @@
         <NavTop :collapsed.sync="collapsed" />
       </a-layout-header>
       <a-layout-content>
-        <Breadcrumb />
-        <AppMain :active="active" />
+        <Breadcrumb :isHaveBreadcrumb.sync="isHaveBreadcrumb" />
+        <AppMain :active="active" :isHaveBreadcrumb.sync="isHaveBreadcrumb" />
       </a-layout-content>
     </a-layout>
   </a-layout>
@@ -38,6 +38,7 @@ export default {
     return {
       active: true,
       collapsed: false,
+      isHaveBreadcrumb: false, // 是否需要面包屑
     };
   },
   methods: {

src/router/menu.js

@@ -1,79 +1,79 @@
 export default [
   {
     path: '/home',
-    meta: { title: '首页', icon: 'home' },
+    meta: { title: '统计数据', icon: 'icon-tongji' },
   },
   {
-    meta: { title: '题目管理', icon: 'user' },
+    meta: { title: '题目管理', icon: 'icon-lunwentimu' },
     path: '/examQuestionManagement',
     children: [
       {
         path: '/examQuestionManagement/list',
-        meta: { title: '题目列表', icon: 'user' },
+        meta: { title: '题目列表' },
       },
       {
-        meta: { title: '新建题目', icon: 'user' },
+        meta: { title: '新建题目' },
         path: '/examQuestionManagement/create',
         children: [
           {
             path: '/examQuestionManagement/create/singleChoice',
-            meta: { title: '单选题', icon: 'user' },
+            meta: { title: '单选题' },
           },
           {
             path: '/examQuestionManagement/create/multipleChoice',
-            meta: { title: '多选题', icon: 'user' },
+            meta: { title: '多选题' },
           },
           {
             path: '/examQuestionManagement/create/trueOrFalse',
-            meta: { title: '判断题', icon: 'user' },
+            meta: { title: '判断题' },
           },
           {
             path: '/examQuestionManagement/create/gapFilling',
-            meta: { title: '填空题', icon: 'user' },
+            meta: { title: '填空题' },
           },
         ],
       },
     ],
   },
   {
-    meta: { title: '考试管理', icon: 'user' },
+    meta: { title: '考试管理', icon: 'icon-bianji' },
     path: '/examManagement',
     children: [
       {
         path: '/examManagement/list',
-        meta: { title: '考试列表', icon: 'user' },
+        meta: { title: '考试列表' },
       },
       {
         path: '/examManagement/detail',
-        meta: { title: '考试详情', icon: 'user' },
+        meta: { title: '考试详情' },
       },
       {
-        meta: { title: '新建考试', icon: 'user' },
+        meta: { title: '新建考试' },
         path: '/examManagement/create',
         children: [
           {
             path: '/examManagement/manualVolumeFormation',
-            meta: { title: '手动组卷', icon: 'user' },
+            meta: { title: '手动组卷' },
           },
           {
             path: '/examManagement/automaticVolumeFormation',
-            meta: { title: '自动组卷', icon: 'user' },
+            meta: { title: '自动组卷' },
           },
         ],
       },
     ],
   },
   {
-    meta: { title: '文章管理', icon: 'user' },
+    meta: { title: '文章管理', icon: 'icon-wenzhangfenlei' },
     path: '/articleManagement',
     children: [
       {
         path: '/articleManagement/list',
-        meta: { title: '文章列表', icon: 'user' },
+        meta: { title: '文章列表' },
       },
       {
         path: '/articleManagement/create',
-        meta: { title: '新建文章', icon: 'user' },
+        meta: { title: '新建文章' },
       }
     ],
   },

src/styles/common/vant.less

@@ -0,0 +1,5 @@
+// 修改menu菜单栏的icon图标
+.ant-menu-item .anticon, .ant-menu-submenu-title .anticon,
+.ant-menu-dark .ant-menu-item-selected .anticon {
+  font-size: 16px !important;
+}

src/styles/components/index.less

@@ -8,8 +8,10 @@
 .box-card {
   margin-top: 16px !important;
 }
+
 .iconFont {
-  font-size: 20px;
+  font-size: 16px;
+  font-weight: bold;
 }
 // 用于form表单中的必填红色星号：*，实际非必填，但视觉显示为必填项
 // .form-required > .el-form-item__label:before {

src/styles/index.js

@@ -12,7 +12,7 @@ import 'ant-design-vue/dist/antd.css';
 import { Icon } from 'ant-design-vue';
 import Vue from 'vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2596755_ixspw19jz6q.js',
+  scriptUrl: '//at.alicdn.com/t/font_2605334_qamxqkm0r2.js',
 });
 
 Vue.use(less);

src/views/Home.vue

@@ -4,7 +4,7 @@
       <span>欢迎 【{{ userInfo.name || 'undefind' }}】 进入管理系统</span>
 
       <!-- 阿里巴巴云的新增图标使用 -->
-      <icon-font class="iconFont" type="icon-img2461162036f7d48" />
+      <icon-font class="iconFont" type="icon-lunwentimu" />
     </div>
   </div>
 </template>