点击有问题
This commit is contained in:
parent
c4efa5f8a2
commit
512c039023
3
src/MainPage/Index.vue
Normal file
3
src/MainPage/Index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
这是主页
|
||||
</template>
|
||||
44
src/Manager/Header.vue
Normal file
44
src/Manager/Header.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<a-button class="logo" ghost>LOGO</a-button>
|
||||
<div class="centered-text">内部系统管理界面</div>
|
||||
<div class="avatar-container">
|
||||
<a-avatar :size="64">
|
||||
<a-image :size="64" src="../views/images/img1.jpg"></a-image>
|
||||
</a-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
background: rgb(68, 112, 131);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
border: none;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-left: auto; /* 将头像置于最右侧 */
|
||||
}
|
||||
|
||||
.centered-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:35px;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
</script>
|
||||
85
src/Manager/LeftBar.vue
Normal file
85
src/Manager/LeftBar.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-menu
|
||||
:default-selected-keys="state.selectedKeys"
|
||||
style="width: 256px"
|
||||
mode="inline"
|
||||
:open-keys="state.openKeys"
|
||||
:items="items"
|
||||
@openChange="onOpenChange"
|
||||
@click="HandleClick"
|
||||
></a-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { h, reactive } from 'vue';
|
||||
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
function getItem(label, key, icon, children, type) {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
};
|
||||
}
|
||||
|
||||
const items = reactive([
|
||||
getItem('系统管理', 'sub1', () => h(MailOutlined), [
|
||||
getItem('用户管理', '1'),
|
||||
getItem('角色管理', '2'),
|
||||
getItem('权限管理', '3'),
|
||||
getItem('日志管理', '4'),
|
||||
getItem('日报管理', '5'),
|
||||
getItem('消息管理', '6'),
|
||||
], 'submenu'),
|
||||
getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
|
||||
getItem('轮播图管理', '5'),
|
||||
getItem('团队简介', '6'),
|
||||
getItem('项目推荐', '7'),
|
||||
getItem('新闻展示', '8'),
|
||||
getItem('用户推荐', '9'),
|
||||
], 'submenu'),
|
||||
getItem('信息管理', 'sub4', () => h(SettingOutlined), [
|
||||
getItem('项目信息管理', '9'),
|
||||
getItem('团队信息管理', '10'),
|
||||
getItem('新闻信息管理', '11'),
|
||||
], 'submenu'),
|
||||
]);
|
||||
|
||||
const state = reactive({
|
||||
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
|
||||
openKeys: ['sub1'],
|
||||
selectedKeys: [],
|
||||
});
|
||||
|
||||
const onOpenChange = (openKeys) => {
|
||||
const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
|
||||
if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
||||
state.openKeys = openKeys;
|
||||
} else {
|
||||
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
||||
}
|
||||
};
|
||||
|
||||
const HandleClick = (e) => {
|
||||
console.log("点击成功");
|
||||
const router = useRouter();
|
||||
const key = e.key;
|
||||
console.log(e.key);
|
||||
switch (key) {
|
||||
case '1':
|
||||
router.push('/Manager/User'); // 导航到用户管理界面的路由
|
||||
break;
|
||||
case '2':
|
||||
break;
|
||||
case '3':
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
7
src/Manager/MainSection.vue
Normal file
7
src/Manager/MainSection.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template style="display: flex;flex-direction: row">
|
||||
<LeftBar></LeftBar>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<script setup>
|
||||
import LeftBar from "@/Manager/LeftBar.vue";
|
||||
</script>
|
||||
100
src/Manager/Manage.vue
Normal file
100
src/Manager/Manage.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<a-button class="logo" ghost>LOGO</a-button>
|
||||
<div class="centered-text">内部系统管理界面</div>
|
||||
<div class="avatar-container">
|
||||
<a-avatar :size="64">
|
||||
<a-image :size="64" src="../views/images/img1.jpg"></a-image>
|
||||
</a-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-menu
|
||||
v-model:selectedKeys="state.selectedKeys"
|
||||
style="width: 256px"
|
||||
mode="inline"
|
||||
:open-keys="state.openKeys"
|
||||
:items="items"
|
||||
@openChange="onOpenChange"
|
||||
></a-menu>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { h, reactive } from 'vue';
|
||||
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
||||
function getItem(label, key, icon, children, type) {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
};
|
||||
}
|
||||
const items = reactive([
|
||||
getItem('系统管理', 'sub1', () => h(MailOutlined), [
|
||||
getItem('用户管理', '1'),
|
||||
getItem('角色管理', '2'),
|
||||
getItem('权限管理', '3'),
|
||||
getItem('日志管理', '4'),
|
||||
getItem('日报管理', '5'),
|
||||
getItem('消息管理', '6'),
|
||||
]),
|
||||
getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
|
||||
getItem('轮播图管理', '5'),
|
||||
getItem('团队简介', '6'),
|
||||
getItem('项目推荐', '7'),
|
||||
getItem('新闻展示', '8'),
|
||||
getItem('用户推荐', '9'),
|
||||
]),
|
||||
getItem('信息管理', 'sub4', () => h(SettingOutlined), [
|
||||
getItem('项目信息管理', '9'),
|
||||
getItem('团队信息管理', '10'),
|
||||
getItem('新闻信息管理', '11'),
|
||||
]),
|
||||
]);
|
||||
const state = reactive({
|
||||
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
|
||||
openKeys: ['sub1'],
|
||||
selectedKeys: [],
|
||||
});
|
||||
const onOpenChange = openKeys => {
|
||||
const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
|
||||
if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
||||
state.openKeys = openKeys;
|
||||
} else {
|
||||
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
background: rgb(68, 112, 131);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
border: none;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-left: auto; /* 将头像置于最右侧 */
|
||||
}
|
||||
|
||||
.centered-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:35px;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -9,72 +9,14 @@ const router = createRouter({
|
||||
component:()=>import('../App.vue')
|
||||
},
|
||||
{
|
||||
path:'/manage',
|
||||
name:'manage',
|
||||
component:()=>import('../manager/manage.vue'),
|
||||
children:[
|
||||
{
|
||||
path:'/manage/authority',
|
||||
component:()=>import('../manager/components/Authority.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/carousel',
|
||||
component:()=>import('../manager/components/Carousel.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/daily',
|
||||
component:()=>import('../manager/components/Daily.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/log',
|
||||
component:()=>import('../manager/components/Log.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/main',
|
||||
component:()=>import('../manager/components/Main.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/message',
|
||||
component:()=>import('../manager/components/Message.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/newsdisplay',
|
||||
component:()=>import('../manager/components/NewsDisplay.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/newsinformation',
|
||||
component:()=>import('../manager/components/NewsInformation.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/projectinformation',
|
||||
component:()=>import('../manager/components/ProjectInformation.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/projectrecommend',
|
||||
component:()=>import('../manager/components/ProjectRecommend.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/role',
|
||||
component:()=>import('../manager/components/Role.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/teaminformation',
|
||||
component:()=>import('../manager/components/TeamInformation.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/teamprofile',
|
||||
component:()=>import('../manager/components/TeamProfile.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/user',
|
||||
component:()=>import('../manager/components/User.vue'),
|
||||
},
|
||||
{
|
||||
path:'/manage/userrecommend',
|
||||
component:()=>import('../manager/components/UserRecommend.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
path:'/Manager',
|
||||
name:'Manager',
|
||||
component:()=>import('../Manager/Manage.vue'),
|
||||
children:[{
|
||||
path:'/Manager/User',
|
||||
component:() =>import('../Manager/components/User.vue')
|
||||
}]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user