'admin-21.03.04:新增fontawesome字体图标，其它页面细节优化等'

src/router/index.ts

@@ -440,6 +440,21 @@ export const dynamicRoutes = [
                         icon: 'el-icon-platform-eleme'
                     }
                 },
+                {
+                    path: '/pages/awesome',
+                    name: 'awesome',
+                    component: () => import('/@/views/pages/awesome/index.vue'),
+                    meta: {
+                        title: 'awesome 字体图标',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'el-icon-set-up'
+                    }
+                },
             ]
         },
         {

src/utils/setIconfont.ts

@@ -1,5 +1,8 @@
 // 字体图标 url
-const cssCdnUrlList: Array<string> = ['//at.alicdn.com/t/font_2298093_xviws8fx96h.css']
+const cssCdnUrlList: Array<string> = [
+    '//at.alicdn.com/t/font_2298093_xviws8fx96h.css',
+    '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
+]
 // 第三方 js url
 const jsCdnUrlList: Array<string> = []
 

src/views/layout/navBars/breadcrumb/user.vue

@@ -6,14 +6,17 @@
     <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
       <i class="icon-skin iconfont" title="布局配置"></i>
     </div>
-    <div class="layout-navbars-breadcrumb-user-icon" @click="onUserNewsPopoverClick">
+    <div class="layout-navbars-breadcrumb-user-icon">
-      <el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300">
+      <el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300"
+        popper-class="el-popover-pupop-user-news">
         <template #reference>
           <el-badge :is-dot="true">
             <i class="el-icon-bell" title="消息"></i>
           </el-badge>
         </template>
-        <UserNews />
+        <transition name="el-zoom-in-top">
+          <UserNews v-show="isShowUserNewsPopover" />
+        </transition>
       </el-popover>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"><i class="iconfont"
@@ -137,10 +140,6 @@ export default {
     const onSearchClick = () => {
       searchRef.value.openSearch();
     };
-    // 我的消息点击
-    const onUserNewsPopoverClick = () => {
-      state.isShowUserNewsPopover = !state.isShowUserNewsPopover;
-    };
     return {
       setFlexAutoStyle,
       getUserInfos,
@@ -148,7 +147,6 @@ export default {
       onHandleCommandClick,
       onScreenfullClick,
       onSearchClick,
-      onUserNewsPopoverClick,
       searchRef,
       ...toRefs(state),
     };

src/views/pages/awesome/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="awesome-container">
+    <el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${sheetsIconList.length - 24}个`">
+      <el-row class="iconfont-row">
+        <template v-for="(v,k) in sheetsIconList" :key="k">
+          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2">
+            <div class="iconfont-warp">
+              <div class="flex-margin">
+                <div class="iconfont-warp-value">
+                  <i :class="v" class="fa"></i>
+                </div>
+                <div class="iconfont-warp-label mt10">{{v}}</div>
+              </div>
+            </div>
+          </el-col>
+        </template>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, nextTick, onMounted } from "vue";
+export default {
+  name: "awesome",
+  setup() {
+    const state = reactive({
+      sheetsIconList: [],
+    });
+    // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+    const initGetStyleSheets = () => {
+      nextTick(() => {
+        const styles = document.styleSheets;
+        let sheetsList = [];
+        for (let i = 0; i < styles.length; i++) {
+          if (
+            styles[i].href &&
+            styles[i].href.indexOf("netdna.bootstrapcdn.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 &&
+              sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
+              sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
+            ) {
+              state.sheetsIconList.push(
+                `${sheetsList[i].cssRules[j].selectorText
+                  .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+                  .replace(/\:\:before/gi, "")}`
+              );
+            }
+          }
+        }
+      });
+    };
+    // 页面加载时
+    onMounted(() => {
+      initGetStyleSheets();
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.awesome-container {
+  .iconfont-row {
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    .el-col:nth-child(-n + 24) {
+      display: none;
+    }
+    .iconfont-warp {
+      text-align: center;
+      border-right: 1px solid #ebeef5;
+      border-bottom: 1px solid #ebeef5;
+      height: 120px;
+      overflow: hidden;
+      display: flex;
+      &:hover {
+        .iconfont-warp-value {
+          i {
+            color: var(--color-primary);
+            transition: all 0.3s ease;
+          }
+        }
+        .iconfont-warp-label {
+          color: var(--color-primary);
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-value {
+        i {
+          color: #606266;
+          font-size: 32px;
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-label {
+        color: #99a9bf;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+}
+</style>

src/views/pages/element/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="element-container">
-    <el-card shadow="hover" header="element plus 字体图标(自动载入)">
+    <el-card shadow="hover" :header="`element plus 字体图标(自动载入)：${sheetsIconList.length - 2}个`">
       <el-row class="iconfont-row">
         <template v-for="(v,k) in sheetsIconList" :key="k">
           <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2">

src/views/pages/filtering/index.vue

@@ -16,7 +16,8 @@
       </div>
       <div class="flex-warp mt15 mb15" v-if="tableData.data.length > 0">
         <el-row :gutter="15">
-          <el-col :sm="6" class="mb15" v-for="(v,k) in tableData.data" :key="k" @click="onTableItemClick(v)">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v,k) in tableData.data" :key="k"
+            @click="onTableItemClick(v)">
             <div class="flex-warp-item">
               <div class="flex-warp-item-box">
                 <div class="item-img">

src/views/pages/iocnfont/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="iconfont-container">
-    <el-card shadow="hover" header="iconfont 字体图标(自动载入)">
+    <el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
       <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">
           <div class="iconfont-warp">