主页框架

src/router/index.ts

@@ -10,22 +10,37 @@ const router = createRouter({
 	history: createWebHistory('/'),
 	//   history: createWebHistory(import.meta.env.VITE_APP_URL),
 	routes: [
-		// {
-		//   path: '/',
-		//   redirect: '/welcome'
-		// },
-		// {
-		//   path: '/asistant',
-		//   name: 'asistant',
-		//   component: () => import('../views/asistant/index.vue'),
-		//   meta: { cache: true, verify: () => VerifyIDs(2) }
-		// },
-
+		{
+			path: '/',
+			redirect: '/home'
+		},
+		{
+			path: '/',
+			name: 'index',
+			component: () => import('../views/login/index.vue'),
+		},
+		{
+			path: '/login',
+			name: 'login',
+			component: () => import('../views/login/login.vue'),
+		},
+		{
+			path: '/home',
+			name: 'home',
+			component: () => import('../views/home/index.vue'),
+			children: [
+				{
+					path: '',
+					name: 'test',
+					component: () => import('../views/home/test.vue')
+				}
+			]
+		},
 		{
 			path: '/:pathMatch(.*)',
 			name: '404',
 			component: () => import('../views/404.vue'),
-		},
+		}
 	]
 })
 

src/views/home/index.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="home">
+		<div class="left-nav"></div>
+		<div class="right-main">
+			<div class="top-nav"></div>
+			<div class="bottom-view"><router-view></router-view></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+	.home {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		display: flex;
+		> .left-nav {
+			width: 29.5rem;
+			height: 100%;
+			background-color: #a12828;
+		}
+		> .right-main {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			> .top-nav {
+				height: 8rem;
+				background-color: #ea5050;
+			}
+			> .bottom-view {
+				flex: 1;
+				background-color: #fff;
+				overflow: hidden;
+				display: flex;
+			}
+		}
+	}
+</style>

src/views/home/test.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="test">
+		<p>老八秘制小汉堡</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+</script>
+
+<style lang="less" scoped>
+	.test {
+		flex: 1;
+		margin: 10px;
+		border-radius: 10px;
+		background-color: rgb(242, 130, 90);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 10rem;
+	}
+</style>

src/views/login/index.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="index"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/login/login.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="login"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	const globalStore = useGlobalStore()
+	const loading = computed(() => globalStore.state.loading)
+</script>
+
+<style lang="less" scoped>
+</style>