timi-server/src/router/index.ts

import { createRouter, createWebHistory, type RouteLocationNormalized } from "vue-router";
import RootLayout from "@/layout/RootLayout.vue";
import MainLayout from "@/layout/MainLayout.vue";
import tabs from "@/router/tabs";
import { DEFAULT_BODY_BACKGROUND, useGlobalUIStore } from "@/store/globalUIStore";
import { useSettingStore } from "@/store/settingStore";
import NotFoundPage from "@/pages/system/NotFoundPage.vue";
import ServerIndexPage from "@/pages/system/ServerIndexPage.vue";
import FileTab from "@/pages/tabs/FileTab.vue";
import ConnectSetting from "@/pages/setting/ConnectSetting.vue";
import DashboardSetting from "@/pages/setting/DashboardSetting.vue";
import ThemeSetting from "@/pages/setting/ThemeSetting.vue";
import ServerDetail from "@/pages/dashboard/ServerDashboard/ServerDetail.vue";
import ServerPerformanceDetail from "@/pages/dashboard/ServerDashboard/ServerPerformanceDetail.vue";
import ServerPartitionsDetail from "@/pages/dashboard/ServerDashboard/ServerPartitionsDetail.vue";
import DockerContainerDetail from "@/pages/dashboard/DockerDashboard/DockerContainerDetail.vue";

const router = createRouter({
	history: createWebHistory("/"),
	scrollBehavior(_to, _from, savedPosition) {
		if (savedPosition) {
			return savedPosition;
		}

		return {
			left: 0,
			top: 0
		};
	},
	routes: [
		{
			path: "/",
			name: "RootLayout",
			component: RootLayout,
			children: [
				{
					path: "/server-index",
					name: "ServerIndexPage",
					component: ServerIndexPage,
					meta: {
						depth: 1,
						ignoreConnectCheck: true,
						navBarVisible: false,
						tabBarVisible: false,
						bodyBackground: "#FFF"
					}
				},
				{
					path: "/",
					name: "MainLayout",
					component: MainLayout,
					meta: {
						depth: 2,
						bodyBackground: "#FFF"
					},
					children: [
						...tabs,
						{
							path: "/files/:pathMatch(.*)+",
							name: "FileExplorerPage",
							meta: {
								dynamicDepth: true,
								baseDepth: 2,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "文件",
								tabBarVisible: true,
								tabBarPadding: false,
								contentFixedHeight: true,
								bodyBackground: "#F4F4F4"
							},
							component: FileTab
						},
						{
							path: "/server/system-detail",
							name: "ServerDetail",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "系统详情",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: ServerDetail
						},
						{
							path: "/server/performance-detail",
							name: "ServerPerformanceDetail",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "资源详情",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: ServerPerformanceDetail
						},
						{
							path: "/server/partitions-detail",
							name: "ServerPartitionsDetail",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "磁盘详情",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: ServerPartitionsDetail
						},
						{
							path: "/server/docker-container-detail",
							name: "DockerContainerDetail",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "容器详情",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: DockerContainerDetail
						},
						{
							path: "/settings/connect",
							name: "ConnectSetting",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "连接配置",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: ConnectSetting
						},
						{
							path: "/settings/dashboard",
							name: "DashboardSetting",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "仪表板设置",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: DashboardSetting
						},
						{
							path: "/settings/theme",
							name: "ThemeSetting",
							meta: {
								depth: 3,
								navBarVisible: true,
								navBarCanBack: true,
								navBarTitle: "主题设置",
								tabBarVisible: false,
								bodyBackground: "#F4F4F4"
							},
							component: ThemeSetting
						}
					]
				}
			]
		},
		{
			path: "/:pathMatch(.*)*",
			name: "NotFoundPage",
			meta: {
				depth: 1,
				ignoreConnectCheck: true,
				navBarVisible: false,
				tabBarVisible: false
			},
			component: NotFoundPage
		}
	]
});

router.beforeEach((to: RouteLocationNormalized) => {
	const settingStore = useSettingStore();

	if (to.meta.ignoreConnectCheck) {
		return true;
	}

	if (settingStore.hasConnectConfig) {
		return true;
	}

	return {
		name: "ServerIndexPage",
		query: {
			redirect: to.fullPath
		}
	};
});

router.afterEach((to: RouteLocationNormalized) => {
	const globalUIStore = useGlobalUIStore();
	const targetBackground = typeof to.meta.bodyBackground === "string" ? to.meta.bodyBackground : DEFAULT_BODY_BACKGROUND;
	globalUIStore.setBodyBackground(targetBackground);
});

export default router;