perf: menu svg图标替换

src/assets/svg/icon-intelligentSolution.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M11.4165 8.97559C12.8259 8.97562 13.969 10.118 13.9693 11.5273L13.9556 11.7891C13.9073 12.2634 13.7275 12.6982 13.4556 13.0596L14.0542 13.6582C14.2495 13.8535 14.2495 14.17 14.0542 14.3652C13.8589 14.5603 13.5424 14.5604 13.3472 14.3652L12.7085 13.7256C12.3292 13.949 11.8886 14.0801 11.4165 14.0801L11.1558 14.0664C9.86908 13.9356 8.86497 12.8485 8.86477 11.5273C8.86501 10.1182 10.0073 8.97583 11.4165 8.97559ZM8.74074 3.80469C8.74092 4.35682 9.18857 4.80469 9.74074 4.80469L11.8862 4.80469V7.85937C11.7712 7.84857 11.6545 7.84278 11.5366 7.84277C9.49559 7.84277 7.84035 9.49802 7.84035 11.5391C7.84042 12.5835 8.27458 13.5262 8.97121 14.1982H2.79934C2.24716 14.1981 1.79934 13.7504 1.79934 13.1982L1.79934 2.48828C1.79934 1.93608 2.24716 1.48841 2.79934 1.48828L8.74074 1.48828V3.80469ZM11.4165 9.97559C10.5596 9.97583 9.86501 10.6704 9.86477 11.5273C9.86498 12.3843 10.5596 13.0798 11.4165 13.0801C12.2736 13.08 12.969 12.3844 12.9693 11.5273C12.969 10.6703 12.2736 9.97562 11.4165 9.97559ZM3.48879 6.35156C3.37847 6.35156 3.28882 6.44051 3.28859 6.55078V7.0498C3.28868 7.16018 3.37839 7.25 3.48879 7.25L7.14211 7.25C7.25238 7.24984 7.34221 7.16009 7.3423 7.0498V6.55078C7.34208 6.44061 7.25229 6.35172 7.14211 6.35156L3.48879 6.35156ZM3.48879 4.04395C3.37837 4.04395 3.28866 4.13374 3.28859 4.24414V4.74316C3.28884 4.85341 3.37848 4.94238 3.48879 4.94238H7.14211C7.25228 4.94222 7.34206 4.85332 7.3423 4.74316V4.24414C7.34223 4.13384 7.25239 4.0441 7.14211 4.04395H3.48879ZM11.978 3.91895L10.0474 3.91895C9.77124 3.91895 9.54738 3.69509 9.54738 3.41895V1.48828L11.978 3.91895Z" fill="currentColor"/>
+</svg>

src/assets/svg/icon-mediaAccount.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.0492 9.03058C12.2731 9.03059 14.0867 10.8117 14.1273 13.0352C14.1439 13.9477 13.4092 14.6964 12.4966 14.6966L3.50042 14.6966C2.59261 14.6965 1.86034 13.9541 1.87254 13.0463C1.90255 10.8197 3.71631 9.03058 5.94319 9.03058H10.0492ZM7.87154 1.30322C9.93387 1.30328 11.6061 2.88101 11.6064 4.8269C11.6064 6.773 9.93402 8.35146 7.87154 8.35151C5.809 8.35151 4.1367 6.77303 4.1367 4.8269C4.13695 2.88097 5.80916 1.30322 7.87154 1.30322Z" fill="currentColor"/>
+</svg>

src/assets/svg/icon-putAccount.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.434 6.4018C13.7387 6.4018 13.9863 6.64936 13.9863 6.95409L13.9863 13.4136C13.9863 13.9214 13.5744 14.333 13.0667 14.3332L2.94324 14.3332C2.4355 14.333 2.02367 13.9214 2.02367 13.4136L2.02367 6.95409C2.02367 6.64938 2.27125 6.40182 2.57595 6.4018L13.434 6.4018ZM3.6482 9.82418C3.49585 9.8242 3.3725 9.94752 3.3725 10.0999L3.3725 12.6521C3.37274 12.8042 3.496 12.9277 3.6482 12.9278H5.6948C5.84701 12.9278 5.97025 12.8042 5.97049 12.6521L5.97049 10.0999C5.97049 9.94751 5.84716 9.82418 5.6948 9.82418H3.6482ZM7.55192 5.66362L2.38198 5.66362C2.1291 5.66334 1.95132 5.41309 2.03444 5.1742L3.04113 2.28345C3.16976 1.9142 3.51856 1.66682 3.90952 1.6665L7.55192 1.6665L7.55192 5.66362ZM12.0537 1.6665C12.4421 1.66658 12.7886 1.91054 12.9194 2.27626L13.9549 5.1715C14.0405 5.41104 13.8626 5.66357 13.6082 5.66362L8.44276 5.66362V1.6665L12.0537 1.6665Z" fill="currentColor"/>
+</svg>

src/assets/svg/icon-repository.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M2.97785 10.8532C3.06071 10.71 3.24367 10.6612 3.38703 10.7438L6.48859 12.5348C6.63203 12.6176 6.68168 12.8005 6.59894 12.944L5.44757 14.9371C5.34178 15.1204 5.08511 15.1398 4.95343 14.9743L3.88214 13.6256C3.83419 13.5653 3.76511 13.5259 3.68878 13.5153L2.04816 13.2897C1.83724 13.2606 1.72302 13.0269 1.82941 12.8424L2.97785 10.8532ZM12.6126 10.7438C12.7561 10.661 12.9399 10.7097 13.0228 10.8532L14.1712 12.8424C14.2775 13.0269 14.1625 13.2607 13.9515 13.2897L12.3118 13.5153C12.2353 13.5258 12.1655 13.5651 12.1175 13.6256L11.0472 14.9743C10.9155 15.14 10.6579 15.1205 10.5521 14.9371L9.40167 12.944C9.31889 12.8006 9.36778 12.6177 9.51105 12.5348L12.6126 10.7438ZM7.55304 0.954723C7.82985 0.795119 8.17083 0.794962 8.44757 0.954723L12.7542 3.44105C13.0311 3.60091 13.2015 3.89674 13.2015 4.21644L13.2015 9.1891C13.2015 9.50881 13.0311 9.80462 12.7542 9.96449L8.44757 12.4508C8.17085 12.6105 7.82982 12.6104 7.55304 12.4508L3.2464 9.96449C2.96951 9.80462 2.79816 9.50883 2.79816 9.1891L2.79816 4.21644C2.79817 3.89673 2.96952 3.60091 3.2464 3.44105L7.55304 0.954723ZM10.8304 4.61488C10.5246 4.42717 10.1247 4.52313 9.93683 4.82875L8.0921 7.8307L6.04914 4.80433L5.96417 4.70375C5.74823 4.49246 5.406 4.45398 5.14582 4.62953C4.88559 4.80537 4.79393 5.1373 4.90949 5.41664L4.97101 5.53285L7.58039 9.39418C7.70405 9.57726 7.91224 9.6851 8.13312 9.68031C8.35384 9.67538 8.55762 9.5589 8.67316 9.37074L11.0443 5.50843C11.2316 5.20262 11.136 4.80263 10.8304 4.61488Z" fill="currentColor"/>
+</svg>

src/components/_base/menu/index.vue

@@ -87,7 +87,31 @@ export default defineComponent({
           // 跳过没有 name 的菜单项，防止 key 报错
           if (!element?.name) return;
 
-          const icon = element?.meta?.icon ? () => h(element?.meta?.icon as object) : null;
+          console.log({ icon: element?.meta?.icon });
+          // const icon element?.meta?.icon
+          const icon = element?.meta?.icon
+            ? (() => {
+                if (typeof element.meta.icon === 'string') {
+                  return h(
+                    'svg',
+                    {
+                      style: {
+                        width: '16px',
+                        height: '16px',
+                      },
+                    },
+                    [
+                      h('use', {
+                        'xlink:href': element.meta.icon,
+                      }),
+                    ],
+                  );
+                } else {
+                  // 如果是对象，按原来的方式渲染
+                  return h(element.meta.icon as object);
+                }
+              })()
+            : null;
           if (element.children && element.children.length > 0) {
             nodes.push(
               <a-sub-menu

src/router/routes/modules/propertyMarketing.ts

@@ -2,10 +2,14 @@
  * 资产营销平台
  */
 
-import { IconBookmark } from '@arco-design/web-vue/es/icon';
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
 
+import IconRepository from '@/assets/svg/icon-repository.svg';
+import IconMediaAccount from '@/assets/svg/icon-mediaAccount.svg';
+import IconPutAccount from '@/assets/svg/icon-putAccount.svg';
+import IconIntelligentSolution from '@/assets/svg/icon-intelligentSolution.svg';
+
 const COMPONENTS: AppRouteRecordRaw[] = [
   {
     path: '/repository',
@@ -13,7 +17,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     redirect: 'repository/brandMaterials',
     meta: {
       locale: '品牌资产管理',
-      icon: IconBookmark,
+      icon: IconRepository,
       requiresAuth: true,
       roles: ['*'],
       requiresSidebar: true,
@@ -39,7 +43,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     redirect: 'media-account/accountManagement',
     meta: {
       locale: '账号资源中心',
-      icon: IconBookmark,
+      icon: IconMediaAccount,
       requiresAuth: true,
       roles: ['*'],
       requiresSidebar: true,
@@ -87,7 +91,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     redirect: 'put-account/accountManagement',
     meta: {
       locale: '投放资源中心',
-      icon: IconBookmark,
+      icon: IconPutAccount,
       requiresAuth: true,
       roles: ['*'],
       requiresSidebar: true,
@@ -143,7 +147,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     redirect: 'intelligent-solution/businessAnalysisReport',
     meta: {
       locale: '智能方案管理',
-      icon: IconBookmark,
+      icon: IconIntelligentSolution,
       requiresAuth: true,
       roles: ['*'],
       requiresSidebar: true,

src/router/typeings.d.ts

@@ -4,7 +4,7 @@ declare module 'vue-router' {
   interface RouteMeta {
     roles?: string[]; // Controls roles that have access to the page
     requiresAuth?: boolean; // Whether login is required to access the current page (every route must declare)
-    icon?: RouteComponent; // The icon show in the side menu
+    icon?: RouteComponent | string; // The icon show in the side menu
     locale?: string; // The locale name show in side menu and breadcrumb
     needNavigate?: boolean; // if set true, the breadcrumb will support navigate
     hideInMenu?: boolean; // If true, it is not displayed in the side menu