配置路由

src/Layout/components/AppMain.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="layout_main">
-        <transition name="fade-transform" mode="out-in">
-            <router-view />
-        </transition>
+        <router-view v-slot="{ Component }">
+            <transition name="fade-transform" mode="out-in">
+                <component :is="Component" />
+            </transition>
+        </router-view>
     </div>
 </template>
 <style scoped>

src/Layout/components/Navbar.vue

@@ -1,6 +1,19 @@
+<script setup lang="ts">
+const emit = defineEmits(["btnCut"])
+const { cut } = defineProps(["cut"])
+const btnCut = () => {
+    emit("btnCut")
+}
+</script>
 <template>
     <nav>
-        <div>首页</div>
+        <div class="text">
+            <el-icon size="20" @click="btnCut">
+                <Fold v-if="cut" />
+                <Expand v-else />
+            </el-icon>
+            <span>首页</span>
+        </div>
         <div>
             <el-dropdown>
                 <div class="el_dropdown">
@@ -36,5 +49,10 @@ nav {
         gap: 10px;
     }
 
+    .text {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
 }
 </style>

src/Layout/components/Sidebar.vue

@@ -1,18 +1,27 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const { cut } = defineProps(["cut"])
+const routerList = useRouter().options.routes[0]?.children
+console.log(routerList);
+
+</script>
 <template>
-    <div class="side_bar">
-        <div class="title">调压通后台管理系统</div>
-        <el-menu default-active="1" class="menu" mode="vertical" background-color="#304156" text-color="#bfcbd9"
-            active-text-color="#409EFF">
-            <el-menu-item index="1">Processing Center</el-menu-item>
-            <el-menu-item index="3" disabled>Info</el-menu-item>
-            <el-menu-item index="4">Orders</el-menu-item>
+    <div class="side_bar" :style="{ width: cut ? '250px' : '80px' }">
+        <div class="title"> {{ cut ? "调压通后台管理系统" : "调压通" }}</div>
+        <el-menu router :collapse="!cut" default-active="/overview" class="menu" background-color="#304156"
+            text-color="#bfcbd9" active-text-color="#409EFF">
+            <el-menu-item class="menu_item" v-for="route in routerList" :key="route.name" :index="route.path">
+                <i class="iconfont" :class="route.meta?.icon"></i>
+                <span>{{ route.meta?.title }}</span>
+            </el-menu-item>
         </el-menu>
     </div>
 </template>
 <style scoped>
 .side_bar {
-    width: 250px;
     background-color: #304156;
+    transition: all 0.3s;
+    overflow: hidden;
 
     .title {
         background-color: #2b2f3a;
@@ -26,6 +35,10 @@
 
     .menu {
         border-right: none;
+
+        i {
+            margin-right: 10px;
+        }
     }
 }
 </style>

src/Layout/index.vue

@@ -2,12 +2,17 @@
 import Sidebar from "./components/Sidebar.vue";
 import Navbar from "./components/Navbar.vue";
 import Appmain from "./components/AppMain.vue";
+import { ref } from "vue";
+const cut = ref(true)
+const btnCut = () => {
+    cut.value = !cut.value
+}
 </script>
 <template>
     <div class="layout">
-        <Sidebar></Sidebar>
+        <Sidebar :cut="cut"></Sidebar>
         <div class="main">
-            <Navbar></Navbar>
+            <Navbar @btn-cut="btnCut" :cut="cut"></Navbar>
             <Appmain></Appmain>
         </div>
     </div>

src/router/index.ts

@@ -1,17 +1,40 @@
 import { createMemoryHistory, createRouter } from "vue-router";
 import Layout from "@/Layout/index.vue";
-import AboutView from "@/views/login/index.vue";
+import Login from "@/views/login/index.vue";
 
 const routes = [
   {
     path: "/",
     component: Layout,
-    redirect: "/home",
+    redirect: "/overview",
     children: [
-      { path: "/home", component: () => import("@/views/home/index.vue") },
+      {
+        path: "/overview",
+        name: "Overview",
+        component: () => import("@/views/overview/index.vue"),
+        meta: { title: "数据概览", icon: "icon-shujugailan" },
+      },
+      {
+        path: "/surgery",
+        name: "Surgery",
+        component: () => import("@/views/surgery/index.vue"),
+        meta: { title: "手术记录", icon: "icon-bijijilu" },
+      },
+      {
+        path: "/device",
+        name: "Device",
+        component: () => import("@/views/device/index.vue"),
+        meta: { title: "设备管理", icon: "icon-shebeigailan" },
+      },
+      {
+        path: "/statistics",
+        name: "Statistics",
+        component: () => import("@/views/statistics/index.vue"),
+        meta: { title: "统计分析", icon: "icon-tongji" },
+      },
     ],
   },
-  { path: "/login", component: AboutView },
+  { path: "/login", component: Login },
 ];
 
 const router = createRouter({

src/views/device/index.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'></script>
+<template>
+    <div class="equipment">
+        <h1>设备管理</h1>
+    </div>
+</template>
+<style scoped></style>

src/views/overview/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="data">
+        <h1>数据概览</h1>
+    </div>
+</template>

src/views/statistics/index.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'></script>
+<template>
+    <div class="statistics">
+        <h1>统计分析</h1>
+    </div>
+</template>
+<style scoped></style>

src/views/surgery/index.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'></script>
+<template>
+    <div class="surgery">
+        <h1>手术记录</h1>
+    </div>
+</template>
+<style scoped></style>