From c238078f07ca88cc49ad280f9c51a13a15df9819 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sun, 14 Apr 2024 16:51:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E5=BC=95=E5=85=A5ico?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SvgIcon/index.vue           | 124 ++++++++++-----------
 src/icons/about.svg                        |   1 +
 src/icons/classify.svg                     |   1 +
 src/icons/github.svg                       |   1 +
 src/layout/components/Menu/icon-common.vue |  21 ++++
 src/layout/components/Menu/index.vue       |  14 ++-
 src/layout/components/Menu/menu-item.vue   |  10 +-
 src/main.ts                                |  41 +++----
 src/router/route.ts                        |  29 +++--
 src/views/about-project/about-project.vue  |   7 ++
 10 files changed, 156 insertions(+), 93 deletions(-)
 create mode 100644 src/icons/about.svg
 create mode 100644 src/icons/classify.svg
 create mode 100644 src/icons/github.svg
 create mode 100644 src/layout/components/Menu/icon-common.vue
 create mode 100644 src/views/about-project/about-project.vue

diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 2d53927..fa458b5 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,62 +1,62 @@
-<template>
-  <svg
-    aria-hidden="true"
-    :class="svgClass"
-    :style="{
-      color: color,
-      fill: color,
-      width: iconSize,
-      height: iconSize
-    }"
-    v-bind="$attrs"
-  >
-    <use :xlink:href="iconName" :fill="color" />
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-defineOptions({ name: "SvgIcon" });
-const props = defineProps({
-  name: {
-    type: String,
-    default: ""
-  },
-  color: {
-    type: String,
-    default: ""
-  },
-  size: {
-    type: [Number, String],
-    default: 15
-  }
-});
-
-// 判断传入的值，是否带有单位，如果没有，就默认用px单位
-const getUnitValue = (value: string | number): string | number => {
-  return /(px|em|rem|%)$/.test(value.toString()) ? value : value + "px";
-};
-
-// svg大小
-const iconSize = computed<string | number>(() => {
-  return getUnitValue(props.size);
-});
-
-// svg名称-对应资源文件夹的svg名称
-const iconName = computed<string>(() => `#icon-${props.name}`);
-
-// svg动态类名
-const svgClass = computed<string>(() => {
-  if (props.name) return `svg-icon icon-${props.name}`;
-  return "svg-icon";
-});
-</script>
-
-<style lang="scss" scope>
-.svg-icon {
-  width: auto;
-  height: auto;
-  vertical-align: middle;
-  flex-shrink: 0;
-}
-</style>
+<template>
+  <svg
+    aria-hidden="true"
+    :class="svgClass"
+    :style="{
+      color: color,
+      fill: color,
+      width: iconSize,
+      height: iconSize
+    }"
+    v-bind="$attrs"
+  >
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+defineOptions({ name: "SvgIcon" });
+const props = defineProps({
+  name: {
+    type: String,
+    default: ""
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: [Number, String],
+    default: 15
+  }
+});
+
+// 判断传入的值，是否带有单位，如果没有，就默认用px单位
+const getUnitValue = (value: string | number): string | number => {
+  return /(px|em|rem|%)$/.test(value.toString()) ? value : value + "px";
+};
+
+// svg大小
+const iconSize = computed<string | number>(() => {
+  return getUnitValue(props.size);
+});
+
+// svg名称-对应资源文件夹的svg名称
+const iconName = computed<string>(() => `#icon-${props.name}`);
+
+// svg动态类名
+const svgClass = computed<string>(() => {
+  if (props.name) return `svg-icon icon-${props.name}`;
+  return "svg-icon";
+});
+</script>
+
+<style lang="scss" scope>
+.svg-icon {
+  width: auto;
+  height: auto;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/icons/about.svg b/src/icons/about.svg
new file mode 100644
index 0000000..f1898d8
--- /dev/null
+++ b/src/icons/about.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020573889" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15777" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M505.448517 0.043084a511.978458 511.978458 0 1 0 518.441019 502.643647A511.978458 511.978458 0 0 0 505.448517 0.043084z m56.726926 170.180778a58.881113 58.881113 0 0 1 67.497861 67.497861 86.167482 86.167482 0 0 1-89.039732 80.422983c-49.546302 0-71.806235-25.132182-71.806235-67.497861A87.603607 87.603607 0 0 1 562.893505 170.223862z m-134.995722 660.617365c-35.903118 0-61.753362-21.541871-36.62118-116.326101L433.642282 546.488535c6.462561-27.286369 7.898686-38.057305 0-38.057305a270.709507 270.709507 0 0 0-84.013296 37.339242l-17.233496-28.722494a473.203091 473.203091 0 0 1 229.779953-114.889976c35.903118 0 40.929554 41.647617 23.696058 106.99129l-46.674053 176.643339c-7.898686 30.876681-5.026436 41.647617 0 41.647617a183.823963 183.823963 0 0 0 79.704921-40.211492l20.105746 27.28637A371.238237 371.238237 0 0 1 433.642282 830.841227z" fill="#00b42a" p-id="15778"></path></svg>
\ No newline at end of file
diff --git a/src/icons/classify.svg b/src/icons/classify.svg
new file mode 100644
index 0000000..688fe9f
--- /dev/null
+++ b/src/icons/classify.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020953397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m349.206261 0l325.587478 0q349.206261 0 349.206261 349.206261l0 325.587478q0 349.206261-349.206261 349.206261l-325.587478 0q-349.206261 0-349.206261-349.206261l0-325.587478q0-349.206261 349.206261-349.206261Z" fill="#3271FD" p-id="7919"></path><path d="M442.189913 298.284522c9.728 0 18.053565 3.372522 24.976696 10.128695 6.912 6.745043 10.373565 14.981565 10.373565 24.731826v140.566261c0 9.750261-3.450435 18.086957-10.373565 25.021218a34.003478 34.003478 0 0 1-24.976696 10.395826H301.924174a33.090783 33.090783 0 0 1-24.698435-10.395826A34.626783 34.626783 0 0 1 267.130435 473.711304V333.145043c0-9.750261 3.361391-17.986783 10.095304-24.742956 6.733913-6.745043 14.970435-10.117565 24.698435-10.117565h140.265739zM442.189913 579.417043c9.728 0 18.053565 3.372522 24.976696 10.128696 6.912 6.733913 10.373565 14.981565 10.373565 24.731826v141.133913c0 9.73913-3.450435 17.986783-10.373565 24.731826-6.92313 6.745043-15.248696 10.128696-24.976696 10.128696H301.924174c-9.728 0-17.964522-3.383652-24.698435-10.128696C270.491826 773.398261 267.130435 765.150609 267.130435 755.400348V614.266435c0-9.73913 3.361391-17.986783 10.095304-24.731826 6.733913-6.745043 14.970435-10.128696 24.698435-10.128696h140.265739zM723.311304 579.417043c9.71687 0 17.953391 3.372522 24.687305 10.128696 6.733913 6.733913 10.095304 14.981565 10.095304 24.731826v141.133913c0 9.73913-3.361391 17.986783-10.095304 24.731826-6.733913 6.745043-14.970435 10.128696-24.687305 10.128696H583.034435a34.482087 34.482087 0 0 1-24.976696-10.128696 33.224348 33.224348 0 0 1-10.373565-24.742956V614.266435c0-9.73913 3.450435-17.986783 10.373565-24.731826a34.482087 34.482087 0 0 1 24.976696-10.128696h140.276869z" fill="#FFFFFF" p-id="7920"></path><path d="M667.826087 243.287534m23.611218 23.611218l110.185682 110.185682q23.611218 23.611218 0 47.222436l-110.185682 110.185683q-23.611218 23.611218-47.222436 0l-110.185683-110.185683q-23.611218-23.611218 0-47.222436l110.185683-110.185682q23.611218-23.611218 47.222436 0Z" fill="#FFFFFF" fill-opacity=".7" p-id="7921"></path></svg>
\ No newline at end of file
diff --git a/src/icons/github.svg b/src/icons/github.svg
new file mode 100644
index 0000000..6a17f49
--- /dev/null
+++ b/src/icons/github.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020459632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.416 15.072C229.056 15.072 0 242.848 0 524.608 0 749.856 146.784 940.512 350.368 1008c25.44 5.056 34.784-10.976 34.784-24.48 0-11.808-0.864-52.288-0.864-94.496-142.528 30.368-172.224-60.736-172.224-60.736-22.912-59.04-56.832-74.24-56.832-74.24-46.656-31.2 3.392-31.2 3.392-31.2 51.744 3.36 78.912 52.288 78.912 52.288 45.824 77.6 119.616 55.68 149.312 42.176 4.256-32.896 17.824-55.68 32.224-68.32-113.696-11.808-233.312-55.68-233.312-251.392 0-55.68 20.352-101.248 52.608-136.672-5.088-12.64-22.912-64.96 5.088-134.976 0 0 43.264-13.504 140.832 52.32 40.736-10.976 84.832-16.864 128.096-16.864s87.392 5.92 128.096 16.864c97.568-65.792 140.832-52.32 140.832-52.32 28 70.016 10.176 122.336 5.088 134.976 33.088 35.424 52.608 80.992 52.608 136.672 0 195.712-119.616 238.752-234.144 251.392 18.656 16.032 34.784 46.4 34.784 94.496 0 68.32-0.832 123.168-0.832 140.032 0 13.504 9.344 29.536 34.784 24.48 203.616-67.488 350.368-258.144 350.368-483.392C1024.8 242.848 794.912 15.072 512.384 15.072z" fill="#00b42a" p-id="11990"></path><path d="M192.64 746.656c-0.768 2.624-4.576 3.488-7.648 1.76s-5.344-5.248-3.808-7.84c0.768-2.624 4.576-3.488 7.648-1.76s4.576 5.248 3.808 7.84z m18.304 23.552c-2.304 2.624-6.88 0.864-9.152-2.624-3.04-3.488-3.808-8.736-1.536-11.36s6.112-0.864 9.152 2.624c3.04 4.352 3.808 9.6 1.536 11.36z m18.336 30.56c-3.04 2.624-7.648 0-9.92-4.352-3.04-4.352-3.04-10.464 0-12.224 3.04-2.624 7.648 0 9.92 4.352 3.04 4.352 3.04 9.6 0 12.224z m25.184 29.664c-2.304 3.488-7.648 2.624-12.224-1.76-3.808-4.352-5.344-10.464-2.304-13.088 2.304-3.488 7.648-2.624 12.224 1.76 3.808 3.488 4.576 9.6 2.304 13.088z m34.336 16.576c-0.768 4.352-6.112 6.112-11.456 4.352s-8.384-6.976-7.648-10.464c0.768-4.352 6.112-6.112 11.456-4.352s8.384 6.112 7.648 10.464z m37.408 3.488c0 4.352-4.576 7.84-9.92 7.84s-9.92-3.488-9.92-7.84 4.576-7.84 9.92-7.84 9.92 3.488 9.92 7.84z m35.104-6.976c0.768 4.352-3.04 8.736-8.384 9.6s-9.92-1.76-10.688-6.112c-0.768-4.352 3.04-8.736 8.384-9.6s9.92 1.76 10.688 6.112z" fill="#00b42a" p-id="11991"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/Menu/icon-common.vue b/src/layout/components/Menu/icon-common.vue
new file mode 100644
index 0000000..e93ce3f
--- /dev/null
+++ b/src/layout/components/Menu/icon-common.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <SvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="25" />
+    <component v-else-if="props.icon" :is="props.icon"></component>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  svgIcon: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 014ea08..0bee8a3 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/route-list";
 import { useThemeConfig } from "@/store/theme-config";
+import { useRoutesListStore } from "@/store/route-list";
 
 const routerStore = useRoutesListStore();
 const { routeTree } = storeToRefs(routerStore);
@@ -18,4 +18,14 @@ const { collapsed } = storeToRefs(themeStore);
 console.log("路由树", routeTree.value);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+:deep(.arco-menu-pop .arco-menu-pop-header .arco-menu-has-icon) {
+  padding: 0 !important;
+}
+:deep(.arco-menu-vertical .arco-menu-pop-header) {
+  padding: 0 !important;
+}
+:deep(.arco-menu-vertical .arco-menu-item) {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/layout/components/Menu/menu-item.vue b/src/layout/components/Menu/menu-item.vue
index f9055bc..e8a51ac 100644
--- a/src/layout/components/Menu/menu-item.vue
+++ b/src/layout/components/Menu/menu-item.vue
@@ -1,20 +1,24 @@
 <template>
   <template v-for="item in props.routeTree" :key="item.name">
     <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
-      <template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
+      <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+        <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+      </template>
       <template #title>{{ item.meta.title }}</template>
       <MenuItem :route-tree="item.children" />
     </a-sub-menu>
     <a-menu-item v-else :key="item.name">
-      <template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
+      <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+        <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+      </template>
       <div>{{ item.meta.title }}</div>
     </a-menu-item>
   </template>
 </template>
 
 <script setup lang="ts">
+import IconCommon from "@/layout/components/Menu/icon-common.vue";
 defineOptions({ name: "MenuItem" });
-// 通过defineProps接收父组件的值
 const props = defineProps({
   routeTree: {
     type: Array,
diff --git a/src/main.ts b/src/main.ts
index 5d2d174..b5f337d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,19 +1,22 @@
-import { createApp } from "vue";
-import "@/style.css";
-import App from "@/App.vue";
-import ArcoVue from "@arco-design/web-vue";
-import router from "@/router/index";
-import pinia from "@/store/index";
-import piniaPluginPersist from "pinia-plugin-persist";
-import "virtual:svg-icons-register";
-import "@arco-design/web-vue/dist/arco.css";
-
-pinia.use(piniaPluginPersist);
-const app = createApp(App);
-app.use(ArcoVue, {
-  // 用于改变使用组件时的前缀名称
-  componentPrefix: "arco"
-});
-app.use(pinia);
-app.use(router);
-app.mount("#app");
+import { createApp } from "vue";
+import "@/style.css";
+import App from "@/App.vue";
+import ArcoVue from "@arco-design/web-vue";
+import router from "@/router/index";
+import pinia from "@/store/index";
+import piniaPluginPersist from "pinia-plugin-persist";
+import "virtual:svg-icons-register";
+import "@arco-design/web-vue/dist/arco.css";
+// 额外引入图标库
+import ArcoVueIcon from "@arco-design/web-vue/es/icon";
+
+pinia.use(piniaPluginPersist);
+const app = createApp(App);
+app.use(ArcoVue, {
+  // 用于改变使用组件时的前缀名称
+  componentPrefix: "arco"
+});
+app.use(ArcoVueIcon);
+app.use(pinia);
+app.use(router);
+app.mount("#app");
diff --git a/src/router/route.ts b/src/router/route.ts
index 5679967..1d32bb9 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -44,7 +44,7 @@ export const dynamicRoutes = [
           isLink: "", // 是否外链
           isIframe: false, // 是否内嵌窗口
           roles: ["admin", "common"], // 路由权限
-          icon: "home" // 菜单图标
+          svgIcon: "home" // 菜单图标
         }
       },
       {
@@ -59,7 +59,7 @@ export const dynamicRoutes = [
           isLink: "", // 是否外链
           isIframe: false, // 是否内嵌窗口
           roles: ["common"], // 路由权限
-          icon: "home" // 菜单图标
+          svgIcon: "home" // 菜单图标
         }
       },
       {
@@ -75,7 +75,7 @@ export const dynamicRoutes = [
           isAffix: true,
           isIframe: false,
           roles: ["admin"],
-          icon: "set"
+          svgIcon: "set"
         },
         children: [
           {
@@ -90,7 +90,7 @@ export const dynamicRoutes = [
               isAffix: false,
               isIframe: false,
               roles: ["admin"],
-              icon: "common"
+              icon: "icon-menu"
             }
           }
         ]
@@ -108,7 +108,7 @@ export const dynamicRoutes = [
           isAffix: true,
           isIframe: false,
           roles: ["admin"],
-          icon: "switch"
+          svgIcon: "switch"
         },
         children: [
           {
@@ -123,7 +123,7 @@ export const dynamicRoutes = [
               isAffix: false,
               isIframe: false,
               roles: ["admin"],
-              icon: "common"
+              icon: "icon-menu"
             },
             children: [
               {
@@ -138,12 +138,27 @@ export const dynamicRoutes = [
                   isAffix: false,
                   isIframe: false,
                   roles: ["admin"],
-                  icon: "common"
+                  icon: "icon-menu"
                 }
               }
             ]
           }
         ]
+      },
+      {
+        path: "/about-project",
+        name: "about-project",
+        component: () => import("@/views/about-project/about-project.vue"),
+        meta: {
+          title: "about-project",
+          isHide: false,
+          isKeepAlive: true,
+          isAffix: true,
+          isLink: "",
+          isIframe: false,
+          roles: ["admin", "common"],
+          svgIcon: "about"
+        }
       }
     ]
   }
diff --git a/src/views/about-project/about-project.vue b/src/views/about-project/about-project.vue
new file mode 100644
index 0000000..58c1110
--- /dev/null
+++ b/src/views/about-project/about-project.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>关于项目</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>