'admin-21.03.03:新增自动载入element-plus图标、优化主layout样式'

README.md

@@ -114,6 +114,8 @@ cnpm run build
 - <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
 - <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
 
+#### 特别感谢
+
 #### 其他事项
 
 - <a href="https://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login" target="_blank">vue3.x vue-admin-wonderful-next 版本</a>，基于 vue3.x + CompositionAPI + typescript + vite + element plus。

src/api/menu/index.ts

@@ -1,13 +1,13 @@
 import request from '/@/utils/request.ts'
 
 /**
- * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-admin-wonderful-images/tree/master/next/menu
+ * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-admin-wonderful-images/tree/master/next-admin/menu
  * 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
  */
 // 获取后端动态路由菜单(admin)
 export function getMenuAdmin(params?: object) {
     return request({
-        url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next/menu/adminMenu.json',
+        url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next-admin/menu/adminMenu.json',
         method: 'get',
         params,
     });
@@ -16,7 +16,7 @@ export function getMenuAdmin(params?: object) {
 // 获取后端动态路由菜单(test)
 export function getMenuTest(params?: object) {
     return request({
-        url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next/menu/testMenu.json',
+        url: '/gitee/lyt-top/vue-admin-wonderful-images/raw/master/next-admin/menu/testMenu.json',
         method: 'get',
         params,
     });

src/router/index.ts

@@ -384,7 +384,7 @@ export const dynamicRoutes = [
                     name: 'filtering',
                     component: () => import('/@/views/pages/filtering/index.vue'),
                     meta: {
-                        title: '过滤筛选',
+                        title: '过滤筛选组件',
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,

src/theme/app.scss

@@ -29,7 +29,7 @@ body,
 .layout-container {
   width: 100%;
   height: 100%;
-  .el-aside {
+  .layout-aside {
     background: var(--bg-menuBar);
     box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
     height: inherit;
@@ -42,11 +42,11 @@ body,
       overflow: hidden;
     }
   }
-  .el-header {
+  .layout-header {
     box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
     padding: 0 !important;
   }
-  .el-main {
+  .layout-main {
     padding: 0 !important;
     overflow: hidden;
     width: 100%;

src/views/layout/component/aside.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-aside :class="setCollapseWidth" v-if="clientWidth > 1000">
+  <el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
     <Logo v-if="setShowLogo" />
     <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
       <Vertical :menuList="menuList" :class="setCollapseWidth" />
     </el-scrollbar>
   </el-aside>
   <el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
-    <el-aside class="w100 h100">
+    <el-aside class="layout-aside w100 h100">
       <Logo v-if="setShowLogo" />
       <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
         <Vertical :menuList="menuList" />

src/views/layout/component/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-header :height="setHeaderHeight">
+  <el-header class="layout-header" :height="setHeaderHeight">
     <NavBarsIndex />
   </el-header>
 </template>

src/views/layout/component/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-main>
+  <el-main class="layout-main">
     <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
       v-show="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
       :style="{minHeight: `calc(100vh - ${headerHeight}`}">

src/views/pages/element/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="element-container">
-    <el-card shadow="hover" header="element 字体图标(自动载入)">
+    <el-card shadow="hover" header="element plus 字体图标(自动载入)">
       <el-row class="iconfont-row">
-        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v,k) in sheetsIconList" :key="k">
+        <template v-for="(v,k) in sheetsIconList" :key="k">
-          <div class="iconfont-warp">
+          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2">
-            <div class="flex-margin">
+            <div class="iconfont-warp">
-              <div class="iconfont-warp-value">
+              <div class="flex-margin">
-                <i :class="v" class="iconfont"></i>
+                <div class="iconfont-warp-value">
+                  <i :class="v"></i>
+                </div>
+                <div class="iconfont-warp-label mt10">{{v}}</div>
               </div>
-              <div class="iconfont-warp-label mt10">{{v}}</div>
             </div>
-          </div>
+          </el-col>
-        </el-col>
+        </template>
       </el-row>
     </el-card>
   </div>
@@ -29,24 +31,15 @@ export default {
     const initGetStyleSheets = () => {
       nextTick(() => {
         const styles = document.styleSheets;
-        let sheetsList = [];
         for (let i = 0; i < styles.length; i++) {
-          if (
+          for (let j = 0; j < styles[i].cssRules.length; j++) {
-            styles[i].href &&
-            styles[i].href.indexOf("http://at.alicdn.com") > -1
-          ) {
-            sheetsList.push(styles[i]);
-          }
-        }
-        for (let i = 0; i < sheetsList.length; i++) {
-          for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
             if (
-              sheetsList[i].cssRules[j].selectorText &&
+              styles[i].cssRules[j].selectorText &&
-              sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
+              styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
             ) {
               state.sheetsIconList.push(
-                `${sheetsList[i].cssRules[j].selectorText
+                `${styles[i].cssRules[j].selectorText
-                  .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+                  .substring(1, styles[i].cssRules[j].selectorText.length)
                   .replace(/\:\:before/gi, "")}`
               );
             }
@@ -70,6 +63,10 @@ export default {
   .iconfont-row {
     border-top: 1px solid #ebeef5;
     border-left: 1px solid #ebeef5;
+    .el-col:nth-last-child(1),
+    .el-col:nth-last-child(2) {
+      display: none;
+    }
     .iconfont-warp {
       text-align: center;
       border-right: 1px solid #ebeef5;

src/views/pages/iocnfont/index.vue

@@ -31,10 +31,7 @@ export default {
         const styles = document.styleSheets;
         let sheetsList = [];
         for (let i = 0; i < styles.length; i++) {
-          if (
+          if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
-            styles[i].href &&
-            styles[i].href.indexOf("http://at.alicdn.com") > -1
-          ) {
             sheetsList.push(styles[i]);
           }
         }