You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.6 KiB
140 lines
3.6 KiB
<template>
|
|
<el-container style="height: 100%;">
|
|
<!-- Header -->
|
|
<el-header class="header">
|
|
<el-row type="flex" justify="space-between" style="width:100%;" align="middle">
|
|
<!-- Logo -->
|
|
<el-col :span="6" class="logo-container">
|
|
<img src="@/assets/logo.png" alt="Logo" style="height: 120px;">
|
|
</el-col>
|
|
<!-- Logout Button -->
|
|
<el-col :span="6" style="text-align: right;">
|
|
<el-button type="danger" @click="logout">退出登录</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-header>
|
|
|
|
<!-- Main Content -->
|
|
<el-container style="height: 80%;">
|
|
<!-- Aside (Left Sidebar) -->
|
|
<el-aside class="custom-aside">
|
|
<el-menu :default-active="activeMenu" :router="true" class="custom-menu">
|
|
<el-menu-item index="/">
|
|
<i class="el-icon-house"></i>
|
|
<span>首页</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/profile1">
|
|
<i class="el-icon-user"></i>
|
|
<span>个人信息</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/edit">
|
|
<i class="el-icon-edit"></i>
|
|
<span>写文章</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/display">
|
|
<i class="el-icon-display"></i>
|
|
<span>文章列表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/accounts">
|
|
<i class="el-icon-accounts"></i>
|
|
<span>账号安全</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
<!-- Main Section (Right Content) -->
|
|
<el-main>
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<el-footer>
|
|
<span
|
|
style="height: 20px; position: fixed; bottom: 0; left: 0; right: 0; color: #333; text-align: center;">©
|
|
2024 My Blog. All rights reserved.</span>
|
|
</el-footer>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useUserStore } from '../stores/user';
|
|
|
|
const activeMenu = ref('/profile1'); // 默认激活“个人信息”页面
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
|
|
// 在组件挂载时，检查用户是否已登录，如果已登录则导航到 /profile1
|
|
onMounted(() => {
|
|
if (userStore.isAuthenticated) {
|
|
router.push('/profile1');
|
|
}
|
|
});
|
|
|
|
// 退出登录功能
|
|
const logout = () => {
|
|
// userStore.logoutUser();
|
|
router.push("/");
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header {
|
|
height: 100px;
|
|
background-color: #ffffff;
|
|
border-bottom: 1px solid #ddd;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
/* 确保元素分布 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.logo {
|
|
height: 120px;
|
|
object-fit: contain;
|
|
overflow: hidden;
|
|
/* 防止 logo 超出容器 */
|
|
}
|
|
.el-header {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-aside {
|
|
width: 220px;
|
|
height:100vh;
|
|
background-color: white; /* 更亮的背景色 */
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
|
|
}
|
|
|
|
.custom-menu {
|
|
border: none;
|
|
}
|
|
|
|
.custom-menu .el-menu-item {
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s, color 0.3s; /* 平滑的动画效果 */
|
|
}
|
|
|
|
.custom-menu .el-menu-item:hover {
|
|
background-color: #e6f7ff; /* 悬停背景 */
|
|
color: #1890ff; /* 悬停字体颜色 */
|
|
}
|
|
|
|
.custom-menu .el-menu-item.is-active {
|
|
background-color: #bae7ff; /* 激活状态背景 */
|
|
color: #096dd9; /* 激活状态字体颜色 */
|
|
}
|
|
|
|
</style>
|