feat: 额外图标（比如这个是新加的页面，路由菜单右上角显示个新图标）

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1632557807050") format("woff2"),
+  src: url("iconfont.woff2?t=1634092870259") format("woff2"),
-    url("iconfont.woff?t=1632557807050") format("woff"),
+    url("iconfont.woff?t=1634092870259") format("woff"),
-    url("iconfont.ttf?t=1632557807050") format("truetype");
+    url("iconfont.ttf?t=1634092870259") format("truetype");
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-iconzuixinlianzai::before {
+  content: "\e6da";
+}
+
+.team-iconxinpin::before {
+  content: "\e614";
+}
+
+.team-iconxinpinrenqiwang::before {
+  content: "\e615";
+}
+
 .team-iconinternationality::before {
   content: "\e67a";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "team-icon",
   "description": "pure-admin",
   "glyphs": [
+    {
+      "icon_id": "2508809",
+      "name": "最新连载",
+      "font_class": "zuixinlianzai",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "7795613",
+      "name": "新品",
+      "font_class": "xinpin",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "7795615",
+      "name": "新品人气王",
+      "font_class": "xinpinrenqiwang",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
     {
       "icon_id": "18367956",
       "name": "中英文2 中文",

src/components/ReIcon/index.ts

@@ -0,0 +1,12 @@
+import { App } from "vue";
+import icon from "./src/Icon.vue";
+
+export const Icon = Object.assign(icon, {
+  install(app: App) {
+    app.component(icon.name, icon);
+  }
+});
+
+export default {
+  Icon
+};

src/components/ReIcon/src/Icon.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+export default {
+  name: "Icon"
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: Number,
+    default: 18
+  },
+  width: {
+    type: Number,
+    default: 20
+  },
+  height: {
+    type: Number,
+    default: 20
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  svg: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
+
+let text = ref("");
+
+let className = computed(() => {
+  if (props.content.indexOf("fa-") > -1) {
+    return props.content.indexOf("fa ") === 0
+      ? props.content
+      : ["fa", props.content];
+  } else if (props.content.indexOf("el-icon-") > -1) {
+    return props.content;
+  } else if (props.content.indexOf("#") > -1) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    text.value = props.content;
+    return "iconfont";
+  } else {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    text.value = props.content;
+    return "";
+  }
+});
+
+let iconStyle = computed(() => {
+  return (
+    "font-size: " +
+    props.size +
+    "px; color: " +
+    props.color +
+    "; width: " +
+    props.width +
+    "px; height: " +
+    props.height +
+    "px; font-style: normal;"
+  );
+});
+
+const clickHandle = () => {
+  emit("click");
+};
+</script>
+
+<template>
+  <i
+    v-if="!props.svg"
+    :class="className"
+    :style="iconStyle"
+    v-html="text"
+    @click="clickHandle"
+  ></i>
+  <svg
+    class="icon-svg"
+    v-if="props.svg"
+    aria-hidden="true"
+    :style="iconStyle"
+    @click="clickHandle"
+  >
+    <use :xlink:href="`#${props.content}`" />
+  </svg>
+</template>

src/layout/components/sidebar/sidebarItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import path from "path";
 import { PropType, ref } from "vue";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { RouteRecordRaw } from "vue-router";
 
 const props = defineProps({
@@ -34,13 +35,8 @@ function hasOneShowingChild(
   parent: RouteRecordRaw
 ) {
   const showingChildren = children.filter((item: any) => {
-    if (item.hidden) {
+    onlyOneChild.value = item;
-      // 不显示hidden属性为true的菜单
+    return true;
-      return false;
-    } else {
-      onlyOneChild.value = item;
-      return true;
-    }
   });
 
   if (showingChildren.length === 1) {
@@ -78,6 +74,11 @@ function resolvePath(routePath) {
       />
       <template #title>
         <span>{{ $t(onlyOneChild.meta.title) }}</span>
+        <Icon
+          v-if="onlyOneChild.meta.extraIcon"
+          :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
+          :content="`${onlyOneChild.meta.extraIcon.name}`"
+        />
       </template>
     </el-menu-item>
   </template>
@@ -91,6 +92,11 @@ function resolvePath(routePath) {
     <template #title>
       <i :class="props.item.meta.icon"></i>
       <span>{{ $t(props.item.meta.title) }}</span>
+      <Icon
+        v-if="props.item.meta.extraIcon"
+        :svg="props.item.meta.extraIcon.svg ? true : false"
+        :content="`${props.item.meta.extraIcon.name}`"
+      />
     </template>
     <sidebar-item
       v-for="child in props.item.children"

src/router/modules/components.ts

@@ -59,6 +59,10 @@ const componentsRouter = {
       meta: {
         title: "message.hssplitPane",
         showLink: true,
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpinrenqiwang"
+        },
         savedPosition: true
       }
     },

src/router/modules/editor.ts

@@ -21,6 +21,10 @@ const editorRouter = {
         title: "message.hseditor",
         showLink: true,
         keepAlive: true,
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpin"
+        },
         savedPosition: true
       }
     }

src/router/modules/nested.ts

@@ -69,6 +69,10 @@ const nestedRouter = {
                 title: "message.hsmenu1-2-2",
                 showLink: true,
                 keepAlive: true,
+                extraIcon: {
+                  svg: true,
+                  name: "team-iconxinpinrenqiwang"
+                },
                 savedPosition: false
               }
             }