初始化

management/src/App.vue

@@ -0,0 +1,244 @@
+<template>
+  <!-- 外层容器 - 固定定位占满全屏 -->
+  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
+    <el-container style="height: 100%; min-height: 100%; overflow: hidden;">
+      <!-- 侧边栏区域 -->
+      <el-aside
+          :width="isCollapse ? '64px' : '200px'"
+          style="border-right: 1px solid #eee; transition: width 0.3s ease; background-color: #f5f7fa;"
+      >
+        <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            :collapse="isCollapse"
+            @open="handleOpen"
+            @close="handleClose"
+            background-color="#f5f7fa"
+            text-color="#333"
+            active-text-color="#409eff"
+            :collapse-transition="false"
+            style="border-right: none; margin-top: 20px;"
+        >
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon><Location /></el-icon>
+              <span>Navigator One</span>
+            </template>
+            <el-menu-item-group>
+              <template #title><span>Group One</span></template>
+              <el-menu-item index="1-1">item one</el-menu-item>
+              <el-menu-item index="1-2">item two</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="Group Two">
+              <el-menu-item index="1-3">item three</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="1-4">
+              <template #title><span>item four</span></template>
+              <el-menu-item index="1-4-1">item one</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-menu-item index="2">
+            <el-icon><IconMenu /></el-icon>
+            <template #title>Navigator Two</template>
+          </el-menu-item>
+          <el-menu-item index="3" disabled>
+            <el-icon><Document /></el-icon>
+            <template #title>Navigator Three</template>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <el-icon><Setting /></el-icon>
+            <template #title>Navigator Four</template>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <!-- 右侧主内容容器 -->
+      <el-container direction="vertical" style="height: 100%; overflow: hidden;">
+        <!-- 顶部导航栏 - 固定高度 -->
+        <el-header style="height: 60px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
+          <div class="header-left">
+            <!-- 替换为单个切换按钮 -->
+            <el-button
+                @click="isCollapse = !isCollapse"
+                size="small"
+                style="margin-right: 20px;"
+                type="primary"
+            >
+              <!-- 根据折叠状态显示不同箭头 -->
+              {{ isCollapse ? '->' : '<-' }}
+            </el-button>
+            <el-breadcrumb separator="/" style="line-height: 60px;">
+              <el-breadcrumb-item
+                  v-for="(item, index) in breadcrumbItems"
+                  :key="index"
+                  :to="item.path"
+              >
+                {{ item.meta.title }}
+              </el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+
+          <div class="header-user-area">
+            <!-- 通知图标按钮 -->
+            <el-button
+                size="small"
+                circle
+                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
+            >
+              <el-icon style="font-size: 18px;"><Bell /></el-icon>
+            </el-button>
+
+            <!-- 消息图标按钮 -->
+            <el-button
+                size="small"
+                circle
+                style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
+            >
+              <el-icon style="font-size: 18px;"><Message /></el-icon>
+            </el-button>
+
+            <!-- 用户下拉菜单 -->
+            <el-dropdown trigger="click" placement="bottom-end">
+              <div class="user-info" style="cursor: pointer; display: flex; align-items: center;">
+                <!-- 调整头像尺寸和样式 -->
+                <img
+                    src="https://picsum.photos/id/1005/40/40"
+                    alt="用户头像"
+                    class="user-avatar"
+                    style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;"
+                >
+                <span class="user-name" style="margin-left: 8px; font-size: 14px;">用户名</span>
+                <el-icon style="margin-left: 6px; font-size: 16px;"><ChevronDown /></el-icon>
+              </div>
+
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>个人中心</el-dropdown-item>
+                  <el-dropdown-item>设置</el-dropdown-item>
+                  <el-dropdown-item>退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </el-header>
+
+        <!-- 主显示区域 -->
+        <el-main style="transition: all 0.3s ease; padding: 20px; margin: 0; overflow-y: auto; flex: 1; box-sizing: border-box;">
+          <router-view />
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+  Bell,
+  Message
+} from '@element-plus/icons-vue'
+import { useRoute } from 'vue-router'
+
+const isCollapse = ref(true)
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const route = useRoute()
+const breadcrumbItems = ref(route.matched)
+
+// 监听路由变化，更新面包屑
+watch(
+    () => route.matched,
+    (newMatched) => {
+      breadcrumbItems.value = newMatched
+    },
+    { immediate: true }
+)
+</script>
+
+<style scoped>
+/* 禁止水平滚动 */
+::v-deep html, ::v-deep body {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 清除所有默认边距和滚动 */
+::v-deep * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 菜单样式 */
+.el-menu-vertical-demo {
+  border-right: none;
+}
+
+/* 顶部栏样式 */
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.user-name {
+  font-size: 14px;
+}
+
+/* 主内容样式 */
+.main-content {
+  width: 100%;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 组件样式穿透 */
+::v-deep .el-container,
+::v-deep .el-aside,
+::v-deep .el-header,
+::v-deep .el-main {
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow-x: hidden;
+}
+
+::v-deep .el-header {
+  background-color: #fff;
+}
+
+::v-deep .el-main {
+  background-color: #fff;
+}
+
+::v-deep .el-menu--horizontal {
+  border-bottom: none;
+}
+</style>
+

management/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

management/src/components/HelloWorld.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+</template>
+
+<style scoped>
+</style>

management/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+createApp(App).use(router).use(ElementPlus).mount('#app')

management/src/router/index.ts

@@ -0,0 +1,42 @@
+import { createRouter, createWebHistory } from 'vue-router'
+// 关键修复：使用 import type 导入类型
+import type { RouteRecordRaw } from 'vue-router'
+
+// 懒加载组件
+const HomeView = () => import('../views/HomeView.vue')
+const AboutView = () => import('../views/AboutView.vue')
+
+// 定义路由规则（现在 RouteRecordRaw 导入正确）
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        name: 'Home',
+        component: HomeView,
+        meta: {
+            title: '首页',
+            requiresAuth: false
+        }
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: AboutView,
+        meta: {
+            title: '关于我们'
+        }
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes
+})
+
+// 导航守卫：自动更新页面标题
+router.beforeEach((to) => {
+    if (to.meta.title) {
+        document.title = to.meta.title as string
+    }
+})
+
+export default router

management/src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+
+  <h1>About 页面</h1>
+  <a>about</a> <!-- 具体内容 -->
+</template>

management/src/views/HomeView.vue

@@ -0,0 +1,4 @@
+<template>
+123
+
+</template>