完成侧边栏的切换功能，缺个人画原型图TAT

Front/vue-unilife/src/components/PersonLayout.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import Personal from './Personal/Personal.vue'
+import { defineComponent } from "vue";
+export default defineComponent({
+    name:'PersonalLayout',
+    components:{
+        Personal
+    }
+});
+
+</script>
+
+<template>
+    <div>
+        <Personal/>
+        <div>
+            <router-view/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

Front/vue-unilife/src/components/Personal/AcountManager.vue

@@ -5,10 +5,13 @@ export default defineComponent({
   name: 'Manager',
 });
 </script>
-<template>
 
+<template>
+    <h1>测试样例</h1>
+    <p>
+      测试样例2
+    </p>
 </template>
 
 <sytle scoped>
-
 </sytle>

Front/vue-unilife/src/components/Personal/Home.vue

@@ -0,0 +1,21 @@
+<script set lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name:'Home',
+});
+</script>
+
+<template>
+    <h1>个人主页</h1>
+    <p>还没做
+        期望完成：
+        查看已发帖
+        查看已发帖的情况
+        编辑帖子
+    </p>
+</template>
+
+<style scoped>
+
+</style>

Front/vue-unilife/src/components/Personal/Personal.vue

@@ -1,5 +1,8 @@
 <script set lang="ts">
 import { defineComponent,ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 export default defineComponent({
   name: 'Personal',
@@ -21,13 +24,14 @@ export default defineComponent({
 </script>
 
 <template>
+  <router-view/>
   <div class = "shell">
     <ul class="nav">
         <li :class="{active: activeIndex == 0}" @click ="setActive(0)" id = "avatar">
-            <router-link :to="{name:'Personal'}">
+            <router-link :to="{name:'Home'}">
                 <div class="icon">
                   <div class="imageBox">
-                    <img src="../../public/images/默认头像.jpg">
+                    <img src="../../../public/images/默认头像.jpg">
                   </div>
                 </div>
                 <div class="text">测试样例</div>
@@ -37,12 +41,42 @@ export default defineComponent({
           <router-link :to="{name:'Manager'}">
             <div class="icon">
               <div class="imageBox">
-              <img src="../../public/images/个人.png">
+              <img src="../../../public/images/个人.png">
               </div>
             </div>
             <div class="text">账号管理</div>
           </router-link>
         </li>
+        <li :class="{active:activeIndex === 2}" @click="setActive(2)">
+          <router-link :to="{name:'Manager'}">
+            <div class="icon">
+              <div class="imageBox">
+              <img src="../../../public/images/个人.png">
+              </div>
+            </div>
+            <div class="text">测试样例2</div>
+          </router-link>
+        </li>
+        <li :class="{active:activeIndex === 3}" @click="setActive(3)">
+          <router-link :to="{name:'Manager'}">
+            <div class="icon">
+              <div class="imageBox">
+              <img src="../../../public/images/个人.png">
+              </div>
+            </div>
+            <div class="text">测试样例3</div>
+          </router-link>
+        </li>
+        <li :class="{active:activeIndex === 4}" @click="setActive(4)">
+          <router-link :to="{name:'Manager'}">
+            <div class="icon">
+              <div class="imageBox">
+              <img src="../../../public/images/个人.png">
+              </div>
+            </div>
+            <div class="text">测试样例4</div>
+          </router-link>
+        </li>
     </ul>
   </div>
   

Front/vue-unilife/src/routers.ts

@@ -1,8 +1,10 @@
 import type { RouteRecord, RouteRecordRaw } from 'vue-router';
 import { createWebHashHistory, createRouter,createWebHistory } from 'vue-router';
 import LogPage from './components/LogPage.vue';
-import Personal from './components/Personal.vue';
+import Personal from './components/Personal/Personal.vue'
 import Manager from './components/Personal/AcountManager.vue';
+import PersonalLayout from './components/PersonLayout.vue'
+import PersonalHome from './components/Personal/Home.vue'
 
 const routes:Array<RouteRecordRaw> = [
     {
@@ -15,12 +17,22 @@ const routes:Array<RouteRecordRaw> = [
         name: 'Personal',
         component: Personal,
         children: [
+            {
+                path:'',
+                name:'Home',
+                component:PersonalHome,
+            },
             {
                 path:'manager',
                 name: 'Manager',
                 component:Manager,
-            }
+            },
         ]
+    },
+    {
+        path:"/personalLayout",
+        name:'Personallayout',
+        component:PersonalLayout,
     }
 ];