前端启动成功
This commit is contained in:
257
schoolNewsWeb/src/layouts/BasicLayout.vue
Normal file
257
schoolNewsWeb/src/layouts/BasicLayout.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="basic-layout">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar" :class="{ 'collapsed': sidebarCollapsed }">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" v-if="!sidebarCollapsed">
|
||||
<span class="logo-text" v-if="!sidebarCollapsed">校园新闻</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单导航 -->
|
||||
<nav class="sidebar-nav">
|
||||
<MenuNav
|
||||
:menus="menuTree"
|
||||
:collapsed="sidebarCollapsed"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main-wrapper">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<button
|
||||
class="sidebar-toggle"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<i class="icon-menu"></i>
|
||||
</button>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<Breadcrumb :items="breadcrumbItems" />
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<!-- 用户信息 -->
|
||||
<UserDropdown
|
||||
:user="userInfo"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main class="content">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
© 2025 校园新闻管理系统. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { getMenuPath } from '@/utils/route-generator';
|
||||
// @ts-ignore - Vue 3.5 defineOptions支持
|
||||
import MenuNav from '@/components/MenuNav.vue';
|
||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||
import Breadcrumb from '@/components/Breadcrumb.vue';
|
||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||
import UserDropdown from '@/components/UserDropdown.vue';
|
||||
|
||||
// 响应式状态
|
||||
const sidebarCollapsed = ref(false);
|
||||
|
||||
// Composition API
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
// 计算属性
|
||||
const menuTree = computed(() => store.getters['auth/menuTree']);
|
||||
const userInfo = computed(() => store.getters['auth/userInfo']);
|
||||
|
||||
const breadcrumbItems = computed(() => {
|
||||
if (!route.meta?.menuId) return [];
|
||||
|
||||
const menuPath = getMenuPath(menuTree.value, route.meta.menuId as string);
|
||||
return menuPath.map(menu => ({
|
||||
title: menu.name || '',
|
||||
path: menu.url || ''
|
||||
}));
|
||||
});
|
||||
|
||||
// 方法 - 使用 function 声明
|
||||
function toggleSidebar() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value));
|
||||
}
|
||||
|
||||
function handleMenuClick(menu: SysMenu) {
|
||||
if (menu.url && menu.url !== route.path) {
|
||||
router.push(menu.url);
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
store.dispatch('auth/logout');
|
||||
}
|
||||
|
||||
// 监听路由变化，自动展开对应菜单
|
||||
watch(() => route.path, () => {
|
||||
// 可以在这里实现菜单自动展开逻辑
|
||||
});
|
||||
|
||||
// 组件挂载时恢复侧边栏状态
|
||||
onMounted(() => {
|
||||
const savedState = localStorage.getItem('sidebarCollapsed');
|
||||
if (savedState !== null) {
|
||||
sidebarCollapsed.value = savedState === 'true';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: #001529;
|
||||
transition: width 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.collapsed {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
background: #002140;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sidebar-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
margin: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
margin: 0 16px 16px 16px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
.footer-content {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标字体类（这里使用简单的CSS，实际项目中可以使用图标库） */
|
||||
.icon-menu::before {
|
||||
content: "☰";
|
||||
}
|
||||
</style>
|
||||
18
schoolNewsWeb/src/layouts/BlankLayout.vue
Normal file
18
schoolNewsWeb/src/layouts/BlankLayout.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="blank-layout">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 空白布局，仅渲染路由内容，适用于登录页、404页等
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.blank-layout {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
101
schoolNewsWeb/src/layouts/PageLayout.vue
Normal file
101
schoolNewsWeb/src/layouts/PageLayout.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="page-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header" v-if="showHeader">
|
||||
<div class="page-header-content">
|
||||
<div class="page-title">
|
||||
<h1>{{ pageTitle }}</h1>
|
||||
<p class="page-description" v-if="pageDescription">{{ pageDescription }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 页面操作按钮 -->
|
||||
<div class="page-actions" v-if="$slots.actions">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
showHeader?: boolean;
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showHeader: true
|
||||
});
|
||||
|
||||
// Composition API
|
||||
const route = useRoute();
|
||||
|
||||
// 计算属性
|
||||
const pageTitle = computed(() => {
|
||||
return props.title || route.meta?.title || '';
|
||||
});
|
||||
|
||||
const pageDescription = computed(() => {
|
||||
return props.description || route.meta?.description || '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 16px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
margin: 8px 0 0 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user