菜单布局搭建

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite ",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <Header v-if="!isLoginPage"/>
+    <!-- <Header v-if="!isLoginPage"/> -->
     <main class="main-content">
       <router-view />
     </main>
@@ -47,5 +47,6 @@ header {
 
 .main-content {
   /* padding-top: 30px; */
+  height: 100vh;
 }
 </style>

src/router/index.ts

@@ -1,71 +1,102 @@
 // src/router/index.ts
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import Layout from '@/components/Layout.vue'
+import Layout from "@/components/Layout.vue";
-import { Components } from 'ant-design-vue/es/date-picker/generatePicker'
+import { Components } from "ant-design-vue/es/date-picker/generatePicker";
 
-const HomeView = () => import('@/views/home/index.vue')
+const HomeView = () => import("@/views/home/index.vue");
-const FileStore = () => import('@/views/controlPanel/fileStore/index.vue')
+const FileStore = () => import("@/views/controlPanel/fileStore/index.vue");
 // 账号安全
-const AccountSecurity = () => import('@/views/controlPanel/account/security/index.vue')
+const AccountSecurity = () =>
+  import("@/views/controlPanel/account/security/index.vue");
 // 访问记录
-const AccountHistory = () => import('@/views/controlPanel/account/history/index.vue')
+const AccountHistory = () =>
+  import("@/views/controlPanel/account/history/index.vue");
 
 const routes: RouteRecordRaw[] = [
   {
-    path: '/',
+    path: "/",
-    name: 'Home',
+    // component: HomeView  // 这个页面独立，不使用Layout
-    component: HomeView  // 这个页面独立，不使用Layout
+    redirect: "/layout/home",
   },
   {
-    path:'/login',
+    path: "/login",
-    name:"Login",
+    name: "Login",
-    component:()=>import('@/views/login/index.vue')
+    component: () => import("@/views/login/index.vue"),
   },
   {
-    path: '/controlPanel',
+    path: "/layout",
-    component: Layout,  // 这个路径下的所有页面都使用 Layout（包含侧边栏）
+    name: "Layout",
-    redirect: '/controlPanel/fileStore', // 添加重定向到默认子路由
+    component: () => import("@/views/layout/index.vue"),
-  },
-  {
-    path: '/fileStore',
-    name: 'FileStore',
-    component: Layout,  // 使用Layout包装FileStore
     children: [
       {
-        path: '',  // 空路径，访问 /fileStore 时显示FileStore组件
+        path: "home",
-        name: 'FileStoreContent',
+        name: "LayoutHome",
-        component: FileStore
+        component: () => import("@/views/home/index.vue"),
       },
       {
-        path: '/accountSecurity', 
+        path: "admin",
-        name: 'AccountSecurity',
+        name: "Admin",
-        component: AccountSecurity
+        component: () => import("@/views/admin/index.vue"),
+        children: [
+          {
+            path: "",
+            redirect: "home",
+          },
+          {
+            path: "home",
+            name: "AdminHome",
+            component: () => import("@/views/admin/home/index.vue"),
+          },
+        ],
       },
-       {
+        {
-        path: '/accountHistory', 
+    path: '/:pathMatch(.*)*',
-        name: 'AccountHistory',
+    name: 'NotFound',
-        component: AccountHistory
+    component: () => import('@/views/404.vue')
-      }
-    ]
-  },
-  // 可以继续添加其他使用Layout的路由
-  {
-    path: '/container',
-    name: 'Container',
-    component: Layout,
-    children: [
-      {
-        path: '',
-        name: 'ContainerContent',
-        component: () => import('@/views/controlPanel/container/index.vue')
-      }
-    ]
   }
-]
+    ],
+  },
+
+  // {
+  //   path: '/fileStore',
+  //   name: 'FileStore',
+  //   component: Layout,  // 使用Layout包装FileStore
+  //   children: [
+  //     {
+  //       path: '',  // 空路径，访问 /fileStore 时显示FileStore组件
+  //       name: 'FileStoreContent',
+  //       component: FileStore
+  //     },
+  //     {
+  //       path: '/accountSecurity',
+  //       name: 'AccountSecurity',
+  //       component: AccountSecurity
+  //     },
+  //      {
+  //       path: '/accountHistory',
+  //       name: 'AccountHistory',
+  //       component: AccountHistory
+  //     }
+  //   ]
+  // },
+  // // 可以继续添加其他使用Layout的路由
+  // {
+  //   path: '/container',
+  //   name: 'Container',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: '',
+  //       name: 'ContainerContent',
+  //       component: () => import('@/views/controlPanel/container/index.vue')
+  //     }
+  //   ]
+  // }
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes,
-})
+});
 
-export default router
+export default router;

src/style.css

@@ -79,3 +79,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+

src/views/admin/home/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>主页</div>
+</template>

src/views/admin/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="admin-layout">
+        <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" style="width: 256px"
+            :mode="state.mode" :items="items" :theme="state.theme"></a-menu>
+        <div class="admin-contain">
+           <router-view />
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { h, reactive } from 'vue';
+import {
+    MailOutlined,
+    CalendarOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+} from '@ant-design/icons-vue';
+import type { MenuMode, MenuTheme } from 'ant-design-vue';
+import { ItemType } from 'ant-design-vue';
+
+const state = reactive({
+    mode: 'inline' as MenuMode,
+    theme: 'light' as MenuTheme,
+    selectedKeys: ['1'],
+    openKeys: ['sub1'],
+});
+
+function getItem(
+    label: string,
+    key: string,
+    icon?: any,
+    children?: ItemType[],
+    type?: 'group',
+): ItemType {
+    return {
+        key,
+        icon,
+        children,
+        label,
+        type,
+    } as ItemType;
+}
+
+const items: ItemType[] = reactive([
+    getItem('Navigation One', '1', h(MailOutlined)),
+    getItem('Navigation Two', '2', h(CalendarOutlined)),
+    getItem('Navigation Two', 'sub1', h(AppstoreOutlined), [
+        getItem('Option 3', '3'),
+        getItem('Option 4', '4'),
+        getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
+    ]),
+    getItem('Navigation Three', 'sub2', h(SettingOutlined), [
+        getItem('Option 7', '7'),
+        getItem('Option 8', '8'),
+        getItem('Option 9', '9'),
+        getItem('Option 10', '10'),
+    ]),
+]);
+
+const changeMode = (checked: boolean) => {
+    state.mode = checked ? 'vertical' : 'inline';
+};
+
+const changeTheme = (checked: boolean) => {
+    state.theme = checked ? 'dark' : 'light';
+};
+</script>

src/views/layout/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="gx_layout">
+    <div class="gx_layout_header">
+      <div class="logo">GxDL算力云</div>
+      <div class="menu">
+        <a-menu
+          v-model:selectedKeys="current"
+          mode="horizontal"
+          :items="leftRoutes"
+          @click="({ key }) => handleMenuClick(key)"
+        />
+        <a-menu
+          v-model:selectedKeys="current"
+          mode="horizontal"
+          :items="rightRoutes"
+          @click="({ key }) => handleMenuClick(key)"
+        />
+      </div>
+      <div class="user-info"></div>
+    </div>
+    <div class="gx_layout_content">
+      <router-view />
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+// 根据当前路由初始化菜单选中项（去掉 /layout 前缀）
+const getActiveKeyFromRoute = () => {
+  const path = route.path
+  if (path.startsWith('/layout')) {
+    const key = path.replace('/layout', '') || '/home'
+    return [key.startsWith('/') ? key : '/' + key]
+  }
+  return ['/home']
+}
+
+const current = ref(getActiveKeyFromRoute())
+
+// 监听路由变化（浏览器前进后退时同步菜单）
+watch(() => route.path, () => {
+  current.value = getActiveKeyFromRoute()
+})
+
+// 菜单数据（key 使用子路径，如 '/admin'）
+const leftRoutes = ref([
+  { key: '/home', label: '首页' },
+  { key: '/center', label: '算力中心' },
+  { key: '/yunmain', label: '云主机' }
+])
+const rightRoutes = ref([
+  { key: '/document', label: '用户文档' },
+  { key: '/admin/home', label: '控制台' }
+])
+
+// 点击菜单跳转
+const handleMenuClick = (key) => {
+  // key 如 "/admin" → 拼成 "/layout/admin"
+  const fullPath = `/layout${key}`
+  router.push(fullPath)
+}
+</script>
+<style lang="scss" scoped>
+.gx_layout{
+    width: 100%;
+    height:100vh;
+    .gx_layout_header{
+        height: 60px;
+        background: #ffffff;
+        border-bottom: 1px solid rgb(216 216 216);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 20px;
+        flex: 1;
+        .logo{
+            width: 200px;
+        }
+        .user-info{
+            width: 100px;
+        }
+        .menu{
+            flex: 1;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            &>ul:first-child{
+                width: 100%;
+                border-bottom: none;
+            }
+             &>ul{
+                border-bottom: none;
+            }
+        }
+    }
+    .gx_layout_content{
+        height: calc(100% - 60px);
+        background-color: rgba(240, 240, 240, 1);
+    }
+}
+
+</style>

src/views/login/component/account.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish" @finishFailed="onFinishFailed">
+  <a-form :model="formState" name="normal_login" class="login-form"  @finishFailed="onFinishFailed">
     <a-form-item label="账号" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
       <a-input v-model:value="formState.username">
         <template #prefix>

vite.config.ts

@@ -1,18 +1,23 @@
 // vite.config.js
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
-
+import path from "path";
 export default defineConfig({
   plugins: [vue()],
+  // resolve: {
+  //   alias: {
+  //     '@': fileURLToPath(new URL('./src', import.meta.url))
+  //   }
+  // },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      "@": path.resolve(__dirname, "src"),
-    }
+    },
   },
   server: {
-    port: 8080,          // 设置开发服务器端口为 8080
+    port: 8080, // 设置开发服务器端口为 8080
-    host: '0.0.0.0',     // 可选：允许外部访问（如局域网）
+    host: true,
-    open: true           // 可选：启动时自动打开浏览器
+    open: true, // 可选：启动时自动打开浏览器
-  }
+  },
-})
+});