From a819c5f7d24cd4b50d484b304f29aff610d6c868 Mon Sep 17 00:00:00 2001 From: Kaifuny Date: Mon, 24 Jul 2023 20:58:56 +0800 Subject: [PATCH] add: route icon Signed-off-by: Kaifuny --- .../apps/web/src/shims-vue-routes.d.ts | 4 +-- .../services/enterprise/src/routes/index.ts | 11 +++++-- .../services/seats/src/routes/index.ts | 25 +++++++++++---- .../services/system/src/routes/index.ts | 32 +++++++++++++------ .../packages/shared/utils/src/routes.ts | 11 ++++++- 5 files changed, 60 insertions(+), 23 deletions(-) diff --git a/contact-frontend/packages/apps/web/src/shims-vue-routes.d.ts b/contact-frontend/packages/apps/web/src/shims-vue-routes.d.ts index 476fb3d5..f5805652 100644 --- a/contact-frontend/packages/apps/web/src/shims-vue-routes.d.ts +++ b/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 // 每个路由都必须声明 diff --git a/contact-frontend/packages/modules/services/enterprise/src/routes/index.ts b/contact-frontend/packages/modules/services/enterprise/src/routes/index.ts index a36cbe41..d0963107 100644 --- a/contact-frontend/packages/modules/services/enterprise/src/routes/index.ts +++ b/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, }, }, { diff --git a/contact-frontend/packages/modules/services/seats/src/routes/index.ts b/contact-frontend/packages/modules/services/seats/src/routes/index.ts index b771aa28..7a4dea68 100644 --- a/contact-frontend/packages/modules/services/seats/src/routes/index.ts +++ b/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, }, }, ], diff --git a/contact-frontend/packages/modules/services/system/src/routes/index.ts b/contact-frontend/packages/modules/services/system/src/routes/index.ts index 5c94232c..e8e42c78 100644 --- a/contact-frontend/packages/modules/services/system/src/routes/index.ts +++ b/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, }, }, ], diff --git a/contact-frontend/packages/shared/utils/src/routes.ts b/contact-frontend/packages/shared/utils/src/routes.ts index 2d63cb57..972ae841 100644 --- a/contact-frontend/packages/shared/utils/src/routes.ts +++ b/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, })