add: route icon

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/apps/web/src/shims-vue-routes.d.ts

@@ -1,9 +1,9 @@
 import 'vue-router'
-
+import { Component } from 'vue'
 declare module 'vue-router' {
   interface RouteMeta {
     // 是可选的
-    icon?: string,
+    icon?: Component,
     comingSoon?: boolean
 
     // 每个路由都必须声明

contact-frontend/packages/modules/services/enterprise/src/routes/index.ts

@@ -2,6 +2,11 @@ import { RouteRecordRaw } from 'vue-router'
 import { ROUTE_NAME } from '@cskefu/models'
 
 import Layout from '../layouts/MenusLayout.vue'
+import {
+  BusinessOutline,
+  GitNetworkOutline,
+  LibraryOutline,
+} from '@vicons/ionicons5'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -17,7 +22,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '企业服务',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: BusinessOutline,
         },
       },
       {
@@ -27,7 +32,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '渠道接入',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: GitNetworkOutline,
         },
       },
       {
@@ -37,7 +42,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '知识库',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: LibraryOutline,
         },
       },
       {

contact-frontend/packages/modules/services/seats/src/routes/index.ts

@@ -2,6 +2,16 @@ import { RouteRecordRaw } from 'vue-router'
 import { ROUTE_NAME } from '@cskefu/models'
 
 import Layout from '../layouts/MenusLayout.vue'
+import {
+  AlbumsOutline,
+  AnalyticsOutline,
+  ChatbubblesOutline,
+  DocumentAttachOutline,
+  BarChartOutline,
+  SettingsOutline,
+  HardwareChip,
+  GridOutline,
+} from '@vicons/ionicons5'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -17,7 +27,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '坐席看板',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: AnalyticsOutline,
         },
       },
       {
@@ -27,7 +37,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '会话管理',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: ChatbubblesOutline,
         },
       },
       {
@@ -37,7 +47,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '留言管理',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: DocumentAttachOutline,
         },
       },
       {
@@ -47,7 +57,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '坐席管理',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: AlbumsOutline,
         },
       },
       {
@@ -55,6 +65,7 @@ const routes: RouteRecordRaw[] = [
         name: ROUTE_NAME.SEATS_ROBOT_INDEX,
         meta: {
           title: '机器人管理',
+          icon: HardwareChip,
         },
         children: [
           {
@@ -64,7 +75,7 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '数据统计',
               requiresAuth: true,
-              icon: 'el-icon-setting',
+              icon: BarChartOutline,
             },
           },
           {
@@ -74,7 +85,7 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '机器人管理',
               requiresAuth: true,
-              icon: 'el-icon-setting',
+              icon: GridOutline,
             },
           },
           {
@@ -84,7 +95,7 @@ const routes: RouteRecordRaw[] = [
             meta: {
               title: '机器人设置',
               requiresAuth: true,
-              icon: 'el-icon-setting',
+              icon: SettingsOutline,
             },
           },
         ],

contact-frontend/packages/modules/services/system/src/routes/index.ts

@@ -2,6 +2,18 @@ import { RouteRecordRaw } from 'vue-router'
 import { ROUTE_NAME } from '@cskefu/models'
 
 import Layout from '../layouts/MenusLayout.vue'
+import {
+  BeakerOutline,
+  CallOutline,
+  ChatboxEllipsesOutline,
+  ClipboardOutline,
+  FootballOutline,
+  IdCardOutline,
+  InfiniteSharp,
+  LayersOutline,
+  NotificationsOutline,
+  PlanetOutline,
+} from '@vicons/ionicons5'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -17,7 +29,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '系统信息',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: InfiniteSharp,
         },
       },
       {
@@ -27,7 +39,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '认证登录',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: IdCardOutline,
         },
       },
       {
@@ -37,7 +49,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '对象存储设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: LayersOutline,
         },
       },
       {
@@ -47,7 +59,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: 'CDN 设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: PlanetOutline,
         },
       },
       {
@@ -57,7 +69,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '短信平台设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: ChatboxEllipsesOutline,
           comingSoon: true,
           disabled: true,
         },
@@ -69,7 +81,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '呼叫平台设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: CallOutline,
           comingSoon: true,
           disabled: true,
         },
@@ -81,7 +93,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: 'GPT 设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: BeakerOutline,
           comingSoon: true,
           disabled: true,
         },
@@ -93,7 +105,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '元数据',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: FootballOutline,
         },
       },
       {
@@ -103,7 +115,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '通知设置',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: NotificationsOutline,
         },
       },
       {
@@ -113,7 +125,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '日志查看',
           requiresAuth: true,
-          icon: 'el-icon-setting',
+          icon: ClipboardOutline,
         },
       },
     ],

contact-frontend/packages/shared/utils/src/routes.ts

@@ -1,6 +1,13 @@
-import { MenuOption } from 'naive-ui'
+import { MenuOption, NIcon } from 'naive-ui'
+import { Component, h } from 'vue'
 import { RouteRecordRaw } from 'vue-router'
 
+function renderIcon(icon?: Component) {
+  if (icon) {
+    return () => h(NIcon, null, { default: () => h(icon) })
+  }
+}
+
 export function routesToMenus(
   routes: RouteRecordRaw[],
   isNotRoot?: boolean
@@ -13,12 +20,14 @@ export function routesToMenus(
         result.push({
           label: route.meta?.title,
           key: route.path,
+          icon: renderIcon(route.meta?.icon),
           children: routesToMenus(route.children, true),
         })
       } else {
         result.push({
           label: route.meta?.title,
           key: route.name as string,
+          icon: renderIcon(route.meta?.icon),
           disabled: route.meta?.disabled as boolean,
           comingSoon: route.meta?.comingSoon,
         })