优化目录结构，以及插件

src/views/404.vue

@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <h2>404</h2>
+    <p>
+      <strong>Page Not Found</strong>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/AboutView.vue

@@ -1,15 +1,8 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div>
+    <strong>This is an about page</strong>
   </div>
 </template>
 
 <style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
 </style>

src/views/HomeView.vue

@@ -1,17 +1,6 @@
 <script setup>
 import LeftMenu from '@/layout/LeftMenu.vue'
 import TopNav from '@/layout/TopNav.vue'
-import { ref } from 'vue'
-import dayjs from 'dayjs'
-
-const collapseLeft = ref(false)
-
-const value1 = ref(new Date())
-
-const testDay = function () {
-  return dayjs.weekdays()
-}
-
 </script>
 
 <template>
@@ -20,20 +9,24 @@ const testDay = function () {
       class="index-aside"
       width="auto"
     >
-      <left-menu v-model:collapse-left="collapseLeft" />
+      <left-menu />
     </el-aside>
     <el-container>
       <el-header>
-        <top-nav v-model:collapse-left="collapseLeft" />
+        <top-nav />
       </el-header>
       <el-main>
-        <el-date-picker
-          v-model="value1"
-          type="date"
-          placeholder="Pick a day"
-        />
-        {{ testDay() }}
-        {{ $i18n.locale }}
+        <router-view v-slot="{ Component, route }">
+          <transition
+            name="slide-fade"
+            mode="out-in"
+          >
+            <component
+              :is="Component"
+              :key="route.fullPath"
+            />
+          </transition>
+        </router-view>
       </el-main>
     </el-container>
   </el-container>

src/views/PersonalInfo.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>{{ $t('common.label.personalInfo') }}</strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>