jcloud/dashboard/src2/components/NavigationItems.vue

<template>
	<div>
		<slot :navigation="navigation" />
	</div>
</template>
<script>
import { h } from 'vue';
import DoorOpen from '~icons/lucide/door-open';
import PanelTopInactive from '~icons/lucide/panel-top-inactive';
import Package from '~icons/lucide/package';
import Boxes from '~icons/lucide/boxes';
import Server from '~icons/lucide/server';
import WalletCards from '~icons/lucide/wallet-cards';
import Settings from '~icons/lucide/settings';
import App from '~icons/lucide/layout-grid';
import DatabaseZap from '~icons/lucide/database-zap';
import Activity from '~icons/lucide/activity';
import Logs from '~icons/lucide/scroll-text';
import Globe from '~icons/lucide/globe';
import Notification from '~icons/lucide/inbox';
import Code from '~icons/lucide/code';
import CreditCard from '~icons/lucide/credit-card';
import { unreadNotificationsCount } from '../data/notifications';

export default {
	name: 'NavigationItems',
	computed: {
		navigation() {
			if (!this.$team?.pg) return [];

			const routeName = this.$route?.name || '';
			const onboardingComplete = this.$team.pg.onboarding.complete;
			const isSaasUser = this.$team.pg.is_saas_user;
			const enforce2FA = Boolean(
				!this.$team.pg.is_desk_user &&
					this.$team.pg.enforce_2fa &&
					!this.$team.pg.user_info?.is_2fa_enabled,
			);

			return [
				{
					name: '欢迎',
					icon: () => h(DoorOpen),
					route: '/welcome',
					isActive: routeName === 'Welcome',
					condition: !onboardingComplete,
				},
				{
					name: '通知',
					icon: () => h(Notification),
					route: '/notifications',
					isActive: routeName === 'Jcloud Notification List',
					condition: onboardingComplete && !isSaasUser,
					badge: () => {
						if (unreadNotificationsCount.data > 0) {
							return h(
								'span',
								{
									class: '!ml-auto px-1.5 py-0.5 text-xs text-gray-600',
								},
								unreadNotificationsCount.data > 99
									? '99+'
									: unreadNotificationsCount.data,
							);
						}
					},
					disabled: enforce2FA,
				},
				{
					name: '站点',
					icon: () => h(PanelTopInactive),
					route: '/sites',
					isActive:
						['Site List', 'Site Detail', 'New Site'].includes(routeName) ||
						routeName.startsWith('Site Detail'),
					disabled: enforce2FA,
				},
				{
					name: '工作台',
					icon: () => h(Package),
					route: '/benches',
					isActive: routeName.startsWith('Bench'),
					condition: this.$team.pg?.is_desk_user,
					disabled: !onboardingComplete || enforce2FA,
				},
				{
					name: '站点分组',
					icon: () => h(Boxes),
					route: '/groups',
					isActive:
						[
							'Release Group List',
							'Release Group Detail',
							'New Release Group',
							'Release Group New Site',
							'Deploy Candidate',
						].includes(routeName) ||
						routeName.startsWith('Release Group Detail'),
					condition: onboardingComplete && !isSaasUser && this.$team.pg.is_pro,
					disabled: enforce2FA,
				},
				{
					name: '服务器',
					icon: () => h(Server),
					route: '/servers',
					isActive:
						['New Server'].includes(routeName) ||
						routeName.startsWith('Server'),
					condition: onboardingComplete && !isSaasUser && this.$team.pg.is_pro,
					disabled: enforce2FA,
				},
				{
					name: '应用市场',
					icon: () => h(App),
					route: '/apps',
					isActive: routeName.startsWith('Marketplace'),
					condition:
						this.$team.pg?.is_desk_user ||
						(!!this.$team.pg.is_developer && this.$team.pg.is_pro && this.$session.hasAppsAccess),
					disabled: enforce2FA,
				},
				{
					name: '开发工具',
					icon: () => h(Code),
					route: '/devtools',
					condition: onboardingComplete && !isSaasUser && this.$team.pg.is_developer  && this.$team.pg.is_pro,
					disabled: enforce2FA,
					children: [
						{
							name: 'SQL 实验室',
							icon: () => h(DatabaseZap),
							route: '/sql-playground',
							isActive: routeName === 'SQL Playground',
						},
						{
							name: '日志浏览器',
							icon: () => h(Logs),
							route: '/log-browser',
							isActive: routeName === 'Log Browser',
						},
						{
							name: '数据库分析器',
							icon: () => h(Activity),
							route: '/database-analyzer',
							isActive: routeName === 'DB Analyzer',
						},
					].filter((item) => item.condition ?? true),
					isActive: ['SQL Playground', 'DB Analyzer', 'Log Browser'].includes(
						routeName,
					),
					disabled: enforce2FA,
				},
				{
					name: '充值',
					icon: () => h(CreditCard),
					route: '/recharge',
					isActive: routeName.startsWith('RechargeCredits'),
					condition:
						this.$team.pg?.is_desk_user || this.$session.hasBillingAccess,
					disabled: enforce2FA,
				},				
				{
					name: '账单',
					icon: () => h(WalletCards),
					route: '/billing',
					isActive: routeName.startsWith('Billing'),
					condition:
						this.$team.pg?.is_desk_user || this.$session.hasBillingAccess,
					disabled: enforce2FA,
				},
				{
					name: '合作伙伴门户',
					icon: () => h(Globe),
					route: '/partners',
					isActive: routeName.startsWith('Partner'),
					condition: Boolean(this.$team.pg.jerp_partner),
					disabled: enforce2FA,
				},
				{
					name: '设置',
					icon: () => h(Settings),
					route: '/settings',
					isActive: routeName.startsWith('Settings'),
					disabled: enforce2FA,
				},
			].filter((item) => item.condition ?? true);
		},
	},
	mounted() {
		this.$socket.emit('pagetype_subscribe', 'Jcloud Notification');
		this.$socket.on('jcloud_notification', (data) => {
			if (data.team === this.$team.pg.name) {
				unreadNotificationsCount.setData((data) => data + 1);
			}
		});
	},
	unmounted() {
		this.$socket.off('jcloud_notification');
	},
};
</script>