菜单布局搭建
This commit is contained in:
Leo_Ding
parent
050f33ba68
commit
84c349ad54
@ -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>
|
||||
@ -1,71 +1,102 @@
|
||||
// src/router/index.ts
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import { Components } from 'ant-design-vue/es/date-picker/generatePicker'
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/components/Layout.vue";
|
||||
import { Components } from "ant-design-vue/es/date-picker/generatePicker";
|
||||
|
||||
const HomeView = () => import('@/views/home/index.vue')
|
||||
const FileStore = () => import('@/views/controlPanel/fileStore/index.vue')
|
||||
const HomeView = () => import("@/views/home/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: '/',
|
||||
name: 'Home',
|
||||
component: HomeView // 这个页面独立，不使用Layout
|
||||
path: "/",
|
||||
// component: HomeView // 这个页面独立，不使用Layout
|
||||
redirect: "/layout/home",
|
||||
},
|
||||
{
|
||||
path:'/login',
|
||||
path: "/login",
|
||||
name: "Login",
|
||||
component:()=>import('@/views/login/index.vue')
|
||||
component: () => import("@/views/login/index.vue"),
|
||||
},
|
||||
{
|
||||
path: '/controlPanel',
|
||||
component: Layout, // 这个路径下的所有页面都使用 Layout（包含侧边栏）
|
||||
redirect: '/controlPanel/fileStore', // 添加重定向到默认子路由
|
||||
},
|
||||
{
|
||||
path: '/fileStore',
|
||||
name: 'FileStore',
|
||||
component: Layout, // 使用Layout包装FileStore
|
||||
path: "/layout",
|
||||
name: "Layout",
|
||||
component: () => import("@/views/layout/index.vue"),
|
||||
children: [
|
||||
{
|
||||
path: '', // 空路径，访问 /fileStore 时显示FileStore组件
|
||||
name: 'FileStoreContent',
|
||||
component: FileStore
|
||||
path: "home",
|
||||
name: "LayoutHome",
|
||||
component: () => import("@/views/home/index.vue"),
|
||||
},
|
||||
{
|
||||
path: '/accountSecurity',
|
||||
name: 'AccountSecurity',
|
||||
component: AccountSecurity
|
||||
},
|
||||
{
|
||||
path: '/accountHistory',
|
||||
name: 'AccountHistory',
|
||||
component: AccountHistory
|
||||
}
|
||||
]
|
||||
},
|
||||
// 可以继续添加其他使用Layout的路由
|
||||
{
|
||||
path: '/container',
|
||||
name: 'Container',
|
||||
component: Layout,
|
||||
path: "admin",
|
||||
name: "Admin",
|
||||
component: () => import("@/views/admin/index.vue"),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'ContainerContent',
|
||||
component: () => import('@/views/controlPanel/container/index.vue')
|
||||
path: "",
|
||||
redirect: "home",
|
||||
},
|
||||
{
|
||||
path: "home",
|
||||
name: "AdminHome",
|
||||
component: () => import("@/views/admin/home/index.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/404.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;
|
||||
|
||||
@ -79,3 +79,4 @@ button:focus-visible {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
3
src/views/admin/home/index.vue
Normal file
3
src/views/admin/home/index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>主页</div>
|
||||
</template>
|
||||
67
src/views/admin/index.vue
Normal file
67
src/views/admin/index.vue
Normal file
@ -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>
|
||||
107
src/views/layout/index.vue
Normal file
107
src/views/layout/index.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
// vite.config.js
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
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
|
||||
host: '0.0.0.0', // 可选：允许外部访问（如局域网）
|
||||
open: true // 可选：启动时自动打开浏览器
|
||||
}
|
||||
})
|
||||
host: true,
|
||||
open: true, // 可选：启动时自动打开浏览器
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user