路由更新
This commit is contained in:
92
schoolNewsWeb/src/components/base/Breadcrumb.vue
Normal file
92
schoolNewsWeb/src/components/base/Breadcrumb.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="breadcrumb" v-if="items && items.length > 0">
|
||||
<span v-for="(item, index) in items" :key="index" class="breadcrumb-wrapper">
|
||||
<span class="breadcrumb-item">
|
||||
<!-- 最后一个项目不可点击 -->
|
||||
<template v-if="index === items.length - 1">
|
||||
<span class="breadcrumb-text current">{{ item.title }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 其他项目可点击 -->
|
||||
<template v-else>
|
||||
<router-link
|
||||
:to="item.path"
|
||||
class="breadcrumb-link"
|
||||
v-if="item.path"
|
||||
>
|
||||
{{ item.title }}
|
||||
</router-link>
|
||||
<span class="breadcrumb-text" v-else>{{ item.title }}</span>
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<!-- 分隔符 -->
|
||||
<span class="breadcrumb-separator" v-if="index < items.length - 1">
|
||||
<i class="separator-icon"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 面包屑项目接口
|
||||
interface BreadcrumbItem {
|
||||
title: string;
|
||||
path?: string;
|
||||
}
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
items: BreadcrumbItem[];
|
||||
separator?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
separator: '/'
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-text {
|
||||
color: inherit;
|
||||
|
||||
&.current {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.separator-icon::before {
|
||||
content: "/";
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
357
schoolNewsWeb/src/components/base/FloatingSidebar.vue
Normal file
357
schoolNewsWeb/src/components/base/FloatingSidebar.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<aside class="floating-sidebar" :class="{ collapsed: collapsed, [type]: true }">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="sidebar-toggle-btn" @click="$emit('toggle')">
|
||||
<i class="toggle-icon">{{ collapsed ? '▶' : '◀' }}</i>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏内容 -->
|
||||
<div class="sidebar-content" v-if="!collapsed">
|
||||
<!-- 标题 -->
|
||||
<div class="sidebar-header" v-if="title">
|
||||
<h3 class="sidebar-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<nav class="sidebar-nav">
|
||||
<div
|
||||
v-for="menu in menus"
|
||||
:key="menu.menuID"
|
||||
class="sidebar-item"
|
||||
:class="{ active: isActive(menu), 'has-children': hasChildren(menu) }"
|
||||
>
|
||||
<div class="sidebar-link" @click="handleClick(menu)">
|
||||
<span class="link-text">{{ menu.name }}</span>
|
||||
<i v-if="hasChildren(menu)" class="arrow-icon">▼</i>
|
||||
</div>
|
||||
|
||||
<!-- 子菜单 -->
|
||||
<div v-if="hasChildren(menu) && isExpanded(menu)" class="sidebar-submenu">
|
||||
<div
|
||||
v-for="child in menu.children"
|
||||
:key="child.menuID"
|
||||
class="submenu-item"
|
||||
:class="{ active: isActive(child) }"
|
||||
@click="handleClick(child)"
|
||||
>
|
||||
<span class="submenu-text">{{ child.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- 折叠状态的图标 -->
|
||||
<div class="sidebar-icons" v-else>
|
||||
<div
|
||||
v-for="menu in menus"
|
||||
:key="menu.menuID"
|
||||
class="icon-item"
|
||||
:class="{ active: isActive(menu) }"
|
||||
:title="menu.name"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<span class="icon-text">{{ menu.name?.charAt(0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { SysMenu } from '@/types';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
menus: SysMenu[];
|
||||
collapsed?: boolean;
|
||||
title?: string;
|
||||
type?: 'nav' | 'sidebar';
|
||||
activePath?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
collapsed: false,
|
||||
type: 'sidebar'
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'toggle': [];
|
||||
'menu-click': [menu: SysMenu];
|
||||
}>();
|
||||
|
||||
// 展开的菜单ID列表
|
||||
const expandedMenus = ref<Set<string>>(new Set());
|
||||
|
||||
// 检查菜单是否有子菜单
|
||||
function hasChildren(menu: SysMenu): boolean {
|
||||
return !!(menu.children && menu.children.length > 0);
|
||||
}
|
||||
|
||||
// 检查菜单是否激活
|
||||
function isActive(menu: SysMenu): boolean {
|
||||
if (!menu.url) return false;
|
||||
return props.activePath === menu.url;
|
||||
}
|
||||
|
||||
// 检查菜单是否展开
|
||||
function isExpanded(menu: SysMenu): boolean {
|
||||
return menu.menuID ? expandedMenus.value.has(menu.menuID) : false;
|
||||
}
|
||||
|
||||
// 处理点击
|
||||
function handleClick(menu: SysMenu) {
|
||||
if (hasChildren(menu)) {
|
||||
// 切换展开状态
|
||||
if (menu.menuID) {
|
||||
if (expandedMenus.value.has(menu.menuID)) {
|
||||
expandedMenus.value.delete(menu.menuID);
|
||||
} else {
|
||||
expandedMenus.value.add(menu.menuID);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 触发点击事件
|
||||
emit('menu-click', menu);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.floating-sidebar {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&.sidebar {
|
||||
width: 260px;
|
||||
|
||||
&.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav {
|
||||
width: 200px;
|
||||
|
||||
&.collapsed {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle-btn {
|
||||
width: 24px;
|
||||
height: 48px;
|
||||
background: white;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 0 12px 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f5;
|
||||
border-color: #C62828;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.sidebar-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
|
||||
/* 滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #ddd;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
background: #fff1f0;
|
||||
|
||||
.sidebar-link {
|
||||
color: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.link-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
transition: transform 0.3s;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-submenu {
|
||||
background: #fafafa;
|
||||
margin: 0 8px 4px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
padding: 10px 16px 10px 32px;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff1f0;
|
||||
color: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.submenu-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-icons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 8px;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #f5f5f5;
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #C62828;
|
||||
|
||||
.icon-text {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.floating-sidebar {
|
||||
&.sidebar {
|
||||
width: 200px;
|
||||
|
||||
&.collapsed {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav {
|
||||
width: 180px;
|
||||
|
||||
&.collapsed {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
228
schoolNewsWeb/src/components/base/MenuItem.vue
Normal file
228
schoolNewsWeb/src/components/base/MenuItem.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="menu-item">
|
||||
<!-- 有子菜单的情况 -->
|
||||
<template v-if="hasChildren">
|
||||
<div
|
||||
class="menu-item-content"
|
||||
:class="{
|
||||
'active': isActive,
|
||||
'collapsed': collapsed
|
||||
}"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
<div class="menu-item-inner">
|
||||
<i class="menu-icon" :class="menu.icon || 'icon-folder'"></i>
|
||||
<span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
|
||||
<i
|
||||
class="expand-icon"
|
||||
:class="{ 'expanded': expanded }"
|
||||
v-if="!collapsed"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子菜单 -->
|
||||
<transition name="submenu">
|
||||
<div
|
||||
class="submenu"
|
||||
v-if="expanded && !collapsed"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="child in menu.children"
|
||||
:key="child.menuID"
|
||||
:menu="child"
|
||||
:collapsed="false"
|
||||
:level="level + 1"
|
||||
@menu-click="$emit('menu-click', $event)"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<!-- 没有子菜单的情况 -->
|
||||
<template v-else>
|
||||
<div
|
||||
class="menu-item-content"
|
||||
:class="{
|
||||
'active': isActive,
|
||||
'collapsed': collapsed
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="menu-item-inner">
|
||||
<i class="menu-icon" :class="menu.icon || 'icon-file'"></i>
|
||||
<span class="menu-title" v-if="!collapsed">{{ menu.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
|
||||
// 递归组件需要声明名称（Vue 3.5+）
|
||||
defineOptions({
|
||||
name: 'MenuItem'
|
||||
});
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
menu: SysMenu;
|
||||
collapsed?: boolean;
|
||||
level?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
level: 0
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'menu-click': [menu: SysMenu];
|
||||
}>();
|
||||
|
||||
// 状态
|
||||
const expanded = ref(false);
|
||||
|
||||
// Composition API
|
||||
const route = useRoute();
|
||||
|
||||
// 计算属性
|
||||
const hasChildren = computed(() => {
|
||||
return props.menu.children && props.menu.children.length > 0;
|
||||
});
|
||||
|
||||
const isActive = computed(() => {
|
||||
// 检查当前路由是否匹配此菜单
|
||||
return route.path === props.menu.url;
|
||||
});
|
||||
|
||||
// 方法 - 使用 function 声明
|
||||
function toggleExpanded() {
|
||||
if (hasChildren.value) {
|
||||
expanded.value = !expanded.value;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
if (props.menu.type === MenuType.NAVIGATION && props.menu.url) {
|
||||
emit('menu-click', props.menu);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-item {
|
||||
margin: 2px 8px;
|
||||
}
|
||||
|
||||
.menu-item-content {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
|
||||
.menu-item-inner {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
margin: 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
.collapsed & {
|
||||
justify-content: center;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
margin-right: 12px;
|
||||
|
||||
.collapsed & {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
margin-left: auto;
|
||||
|
||||
&::before {
|
||||
content: "▶";
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.menu-item-content {
|
||||
margin: 0 4px;
|
||||
|
||||
.menu-item-inner {
|
||||
padding-left: 48px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.submenu-enter-active,
|
||||
.submenu-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submenu-enter-from,
|
||||
.submenu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
/* 图标字体类（简单实现，实际项目中使用图标库） */
|
||||
.icon-folder::before { content: "📁"; }
|
||||
.icon-file::before { content: "📄"; }
|
||||
.icon-dashboard::before { content: "📊"; }
|
||||
.icon-user::before { content: "👤"; }
|
||||
.icon-news::before { content: "📰"; }
|
||||
.icon-settings::before { content: "⚙️"; }
|
||||
</style>
|
||||
36
schoolNewsWeb/src/components/base/MenuNav.vue
Normal file
36
schoolNewsWeb/src/components/base/MenuNav.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="menu-nav">
|
||||
<MenuItem
|
||||
v-for="menu in menus"
|
||||
:key="menu.menuID"
|
||||
:menu="menu"
|
||||
:collapsed="collapsed"
|
||||
@menu-click="$emit('menu-click', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SysMenu } from '@/types';
|
||||
// @ts-ignore - Vue 3.5 defineOptions支持递归组件
|
||||
import MenuItem from './MenuItem.vue';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
menus: SysMenu[];
|
||||
collapsed?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
// Emits
|
||||
defineEmits<{
|
||||
'menu-click': [menu: SysMenu];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-nav {
|
||||
padding: 8px 0;
|
||||
}
|
||||
</style>
|
||||
529
schoolNewsWeb/src/components/base/TopNavigation.vue
Normal file
529
schoolNewsWeb/src/components/base/TopNavigation.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<nav class="top-navigation">
|
||||
<div class="nav-container">
|
||||
<!-- Logo区域 -->
|
||||
<div class="nav-logo">
|
||||
<img src="../../assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
|
||||
<span class="logo-text">红色思政学习平台</span>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<div class="nav-menu">
|
||||
<div
|
||||
v-for="menu in navigationMenus"
|
||||
:key="menu.menuID"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive(menu) }"
|
||||
@mouseenter="(e) => handleMouseEnter(menu, e)"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<div class="nav-link" @click="handleNavClick(menu)">
|
||||
<span>{{ menu.name }}</span>
|
||||
<img v-if="hasNavigationChildren(menu)" class="arrow-down" src="@/assets/imgs/arrow-down.svg" alt="arrow" />
|
||||
</div>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<Teleport to="body" v-if="hasNavigationChildren(menu)">
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
:class="{ show: activeDropdown === menu.menuID }"
|
||||
:style="getDropdownPosition(menu)"
|
||||
@mouseenter="() => { if (menu.menuID) activeDropdown = menu.menuID }"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<div
|
||||
v-for="child in getNavigationChildren(menu)"
|
||||
:key="child.menuID"
|
||||
class="dropdown-item"
|
||||
:class="{ active: isActive(child) }"
|
||||
@click="handleNavClick(child)"
|
||||
>
|
||||
<span>{{ child.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧用户区域 -->
|
||||
<div class="nav-right">
|
||||
<!-- 搜索框 -->
|
||||
<div class="nav-search">
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索思政资源"
|
||||
class="search-input"
|
||||
v-model="searchKeyword"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<div class="search-icon">
|
||||
<img src="../../assets/imgs/search-icon.svg" alt="搜索" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UserDropdown :user="userInfo" @logout="handleLogout" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
// @ts-ignore - Vue 3.5 组件导入兼容性
|
||||
import UserDropdown from './UserDropdown.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const activeDropdown = ref<string | null>(null);
|
||||
const searchKeyword = ref('');
|
||||
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});
|
||||
|
||||
// 获取所有菜单
|
||||
const allMenus = computed(() => store.getters['auth/menuTree']);
|
||||
const userInfo = computed(() => store.getters['auth/userInfo']);
|
||||
|
||||
// 获取第一层的导航菜单（MenuType.NAVIGATION）
|
||||
const navigationMenus = computed(() => {
|
||||
const menus = allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
|
||||
console.log('导航菜单数据:', menus);
|
||||
menus.forEach((menu: SysMenu) => {
|
||||
console.log(`菜单 ${menu.name}:`, {
|
||||
menuID: menu.menuID,
|
||||
parentID: menu.parentID,
|
||||
children: menu.children,
|
||||
childrenCount: menu.children?.length || 0
|
||||
});
|
||||
});
|
||||
return menus;
|
||||
});
|
||||
|
||||
// 检查菜单是否有导航类型的子菜单
|
||||
function hasNavigationChildren(menu: SysMenu): boolean {
|
||||
return !!(menu.children && menu.children.some(child => child.type === MenuType.NAVIGATION));
|
||||
}
|
||||
|
||||
// 获取导航类型的子菜单
|
||||
function getNavigationChildren(menu: SysMenu): SysMenu[] {
|
||||
if (!menu.children) {
|
||||
console.log(`菜单 ${menu.name} 没有子菜单`);
|
||||
return [];
|
||||
}
|
||||
const children = menu.children.filter(child => child.type === MenuType.NAVIGATION);
|
||||
console.log(`菜单 ${menu.name} 的子菜单:`, children);
|
||||
return children;
|
||||
}
|
||||
|
||||
// 判断菜单是否激活
|
||||
function isActive(menu: SysMenu): boolean {
|
||||
if (!menu.url) return false;
|
||||
|
||||
// 精确匹配
|
||||
if (route.path === menu.url) return true;
|
||||
|
||||
// 检查是否是子路由
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
return isMenuOrChildActive(menu);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 递归检查菜单或其子菜单是否激活
|
||||
function isMenuOrChildActive(menu: SysMenu): boolean {
|
||||
if (route.path === menu.url) return true;
|
||||
|
||||
if (menu.children) {
|
||||
return menu.children.some(child => isMenuOrChildActive(child));
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 处理鼠标进入
|
||||
function handleMouseEnter(menu: SysMenu, event?: MouseEvent) {
|
||||
if (hasNavigationChildren(menu)) {
|
||||
activeDropdown.value = menu.menuID || null;
|
||||
|
||||
// 计算下拉菜单位置
|
||||
if (event && menu.menuID) {
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const navLink = target.querySelector('.nav-link') as HTMLElement;
|
||||
const rect = (navLink || target).getBoundingClientRect();
|
||||
|
||||
dropdownPositions.value[menu.menuID] = {
|
||||
left: rect.left,
|
||||
top: rect.bottom,
|
||||
width: rect.width
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取下拉菜单位置样式
|
||||
function getDropdownPosition(menu: SysMenu) {
|
||||
const menuID = menu.menuID;
|
||||
const pos = menuID && dropdownPositions.value[menuID];
|
||||
|
||||
if (!pos) {
|
||||
return {
|
||||
position: 'fixed' as const,
|
||||
visibility: 'hidden' as const
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
position: 'fixed' as const,
|
||||
left: `${pos.left}px`,
|
||||
top: `${pos.top}px`,
|
||||
width: `${pos.width}px`
|
||||
};
|
||||
}
|
||||
|
||||
// 处理鼠标离开
|
||||
function handleMouseLeave() {
|
||||
activeDropdown.value = null;
|
||||
}
|
||||
|
||||
// 处理导航点击
|
||||
function handleNavClick(menu: SysMenu) {
|
||||
activeDropdown.value = null;
|
||||
|
||||
if (menu.url) {
|
||||
router.push(menu.url);
|
||||
} else if (menu.children && menu.children.length > 0) {
|
||||
// 如果没有url但有子菜单，跳转到第一个子菜单
|
||||
const firstChild = menu.children.find(child => child.url);
|
||||
if (firstChild?.url) {
|
||||
router.push(firstChild.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
function handleSearch() {
|
||||
if (searchKeyword.value.trim()) {
|
||||
// 这里可以跳转到搜索页面或触发搜索功能
|
||||
router.push(`/search?keyword=${encodeURIComponent(searchKeyword.value.trim())}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理登出
|
||||
function handleLogout() {
|
||||
store.dispatch('auth/logout');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-navigation {
|
||||
height: 76px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid rgba(72, 72, 72, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
margin: 0 auto;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20.6px;
|
||||
line-height: 1.31;
|
||||
color: #C62828;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
padding-bottom: 2px; /* 为滚动条留出空间 */
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #C62828 #f5f5f5;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #C62828;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当内容可以滚动时显示滚动条 */
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0; /* 防止菜单项被压缩 */
|
||||
|
||||
&:hover {
|
||||
.nav-link {
|
||||
background: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: #C62828;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 26px 21px;
|
||||
color: #141F38;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
min-width: 106px;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
font-size: 8px;
|
||||
margin-left: 2px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover .arrow-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top center;
|
||||
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scaleY(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #333;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #ffe6e6;
|
||||
color: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-search {
|
||||
margin-left: auto;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 221px;
|
||||
height: 36px;
|
||||
border: 1px solid #BAC0CC;
|
||||
border-radius: 30px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 7px 20px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.57;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #C62828;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-shrink: 0; /* 防止右侧区域被压缩 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.nav-container {
|
||||
padding: 0 30px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-width: 90px;
|
||||
padding: 26px 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
/* 在小屏幕上确保滚动条可见 */
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
padding: 0 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-logo .logo-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-width: 80px;
|
||||
padding: 26px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-container {
|
||||
padding: 0 15px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-logo .logo-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-width: 70px;
|
||||
padding: 26px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
320
schoolNewsWeb/src/components/base/UserDropdown.vue
Normal file
320
schoolNewsWeb/src/components/base/UserDropdown.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="user-dropdown" @click="toggleDropdown" v-click-outside="closeDropdown">
|
||||
<!-- 未登录状态 -->
|
||||
<div class="login-info" v-if="!isLoggedIn">
|
||||
<div class="login-text">
|
||||
<i class="login-icon">👤</i>
|
||||
<span v-if="!collapsed">登录/注册</span>
|
||||
</div>
|
||||
<i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
|
||||
</div>
|
||||
|
||||
<!-- 已登录状态 -->
|
||||
<div class="user-info" v-else>
|
||||
<div class="user-avatar">
|
||||
<img :src="userAvatar" :alt="user?.username" v-if="userAvatar">
|
||||
<span class="avatar-placeholder" v-else>{{ avatarText }}</span>
|
||||
</div>
|
||||
<div class="user-details" v-if="!collapsed">
|
||||
<div class="user-name">{{ user?.realName || user?.username }}</div>
|
||||
<div class="user-role">{{ primaryRole }}</div>
|
||||
</div>
|
||||
<i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
|
||||
</div>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<transition name="dropdown">
|
||||
<div class="dropdown-menu" v-if="dropdownVisible">
|
||||
<!-- 未登录时的菜单 -->
|
||||
<template v-if="!isLoggedIn">
|
||||
<div class="dropdown-item" @click="goToLogin">
|
||||
<i class="item-icon icon-login"></i>
|
||||
<span>登录</span>
|
||||
</div>
|
||||
<div class="dropdown-item" @click="goToRegister">
|
||||
<i class="item-icon icon-register"></i>
|
||||
<span>注册</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 已登录时的菜单 -->
|
||||
<template v-else>
|
||||
<div class="dropdown-item" @click="goToProfile">
|
||||
<i class="item-icon icon-profile"></i>
|
||||
<span>个人资料</span>
|
||||
</div>
|
||||
<div class="dropdown-item" @click="goToSettings">
|
||||
<i class="item-icon icon-settings"></i>
|
||||
<span>账户设置</span>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="dropdown-item danger" @click="handleLogout">
|
||||
<i class="item-icon icon-logout"></i>
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { UserVO } from '@/types';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
user?: UserVO | null;
|
||||
collapsed?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
logout: [];
|
||||
}>();
|
||||
|
||||
// 状态
|
||||
const dropdownVisible = ref(false);
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
// 计算属性
|
||||
const isLoggedIn = computed(() => {
|
||||
return store.getters['auth/isAuthenticated'];
|
||||
});
|
||||
|
||||
const userAvatar = computed(() => {
|
||||
return props.user?.avatar || '';
|
||||
});
|
||||
|
||||
const avatarText = computed(() => {
|
||||
const name = props.user?.realName || props.user?.username || '';
|
||||
return name.charAt(0).toUpperCase();
|
||||
});
|
||||
|
||||
const primaryRole = computed(() => {
|
||||
// 这里可以从store中获取用户角色信息
|
||||
return '管理员'; // 暂时硬编码
|
||||
});
|
||||
|
||||
// 方法 - 使用 function 声明
|
||||
function toggleDropdown() {
|
||||
dropdownVisible.value = !dropdownVisible.value;
|
||||
}
|
||||
|
||||
function closeDropdown() {
|
||||
dropdownVisible.value = false;
|
||||
}
|
||||
|
||||
// 未登录时的操作
|
||||
function goToLogin() {
|
||||
closeDropdown();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
function goToRegister() {
|
||||
closeDropdown();
|
||||
router.push('/register');
|
||||
}
|
||||
|
||||
// 已登录时的操作
|
||||
function goToProfile() {
|
||||
closeDropdown();
|
||||
router.push('/profile');
|
||||
}
|
||||
|
||||
function goToSettings() {
|
||||
closeDropdown();
|
||||
router.push('/profile/settings');
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
closeDropdown();
|
||||
emit('logout');
|
||||
}
|
||||
|
||||
// 点击外部关闭指令
|
||||
const vClickOutside = {
|
||||
mounted(el: any, binding: any) {
|
||||
el._clickOutside = (event: Event) => {
|
||||
if (!(el === event.target || el.contains(event.target as Node))) {
|
||||
binding.value();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', el._clickOutside);
|
||||
},
|
||||
unmounted(el: any) {
|
||||
document.removeEventListener('click', el._clickOutside);
|
||||
delete el._clickOutside;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-dropdown {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.login-info,
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.login-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&::before {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
min-width: 160px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e8e8e8;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ff4d4f;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff2f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 16px;
|
||||
margin-right: 12px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: #e8e8e8;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* 图标字体类 */
|
||||
.icon-login::before { content: "🔑"; }
|
||||
.icon-register::before { content: "📝"; }
|
||||
.icon-profile::before { content: "👤"; }
|
||||
.icon-settings::before { content: "⚙️"; }
|
||||
.icon-logout::before { content: "🚪"; }
|
||||
</style>
|
||||
6
schoolNewsWeb/src/components/base/index.ts
Normal file
6
schoolNewsWeb/src/components/base/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export { default as Breadcrumb } from './Breadcrumb.vue';
|
||||
export { default as FloatingSidebar } from './FloatingSidebar.vue';
|
||||
export { default as MenuItem } from './MenuItem.vue';
|
||||
export { default as MenuNav } from './MenuNav.vue';
|
||||
export { default as TopNavigation } from './TopNavigation.vue';
|
||||
export { default as UserDropdown } from './UserDropdown.vue';
|
||||
Reference in New Issue
Block a user