|
|
<template> |
|
|
<div class="main-layout"> |
|
|
<!-- 顶部导航栏 --> |
|
|
<header class="header"> |
|
|
<div class="header-left"> |
|
|
<div class="logo"> |
|
|
<h1>🚀 GoFaster</h1> |
|
|
</div> |
|
|
<div class="breadcrumb"> |
|
|
<span v-for="(item, index) in breadcrumbs" :key="index"> |
|
|
<span v-if="index > 0" class="separator">/</span> |
|
|
<span class="breadcrumb-item">{{ item }}</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="header-right"> |
|
|
<!-- 消息通知 --> |
|
|
<div class="message-center"> |
|
|
<button class="message-btn" @click="toggleMessagePanel"> |
|
|
<i class="icon">📢</i> |
|
|
<span v-if="unreadCount > 0" class="badge">{{ unreadCount }}</span> |
|
|
</button> |
|
|
|
|
|
<!-- 消息面板 --> |
|
|
<div v-if="showMessagePanel" class="message-panel"> |
|
|
<div class="message-header"> |
|
|
<h3>消息</h3> |
|
|
<button class="close-btn" @click="showMessagePanel = false">×</button> |
|
|
</div> |
|
|
<div class="message-list"> |
|
|
<div v-for="message in messages" :key="message.id" class="message-item"> |
|
|
<div class="message-icon">{{ message.icon }}</div> |
|
|
<div class="message-content"> |
|
|
<div class="message-title">{{ message.title }}</div> |
|
|
<div class="message-time">{{ formatTime(message.time) }}</div> |
|
|
</div> |
|
|
<button class="mark-read-btn" @click="markAsRead(message.id)"> |
|
|
✓ |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 用户信息 --> |
|
|
<div class="user-info"> |
|
|
<div class="user-avatar" @click="toggleUserMenu"> |
|
|
<img v-if="currentUser.avatar" :src="currentUser.avatar" :alt="currentUser.name" /> |
|
|
<span v-else class="avatar-placeholder">{{ currentUser.name?.charAt(0) || 'U' }}</span> |
|
|
</div> |
|
|
|
|
|
<!-- 用户菜单 --> |
|
|
<div v-if="showUserMenu" class="user-menu"> |
|
|
<div class="user-menu-header"> |
|
|
<div class="user-details"> |
|
|
<div class="user-name">{{ currentUser.name || '用户' }}</div> |
|
|
<div class="user-email">{{ currentUser.email || 'user@example.com' }}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="user-menu-items"> |
|
|
<button class="menu-item" @click="openProfile"> |
|
|
<i class="icon">👤</i> 个人资料 |
|
|
</button> |
|
|
<button class="menu-item" @click="openSettings"> |
|
|
<i class="icon">⚙️</i> 设置 |
|
|
</button> |
|
|
<button class="menu-item" @click="logout"> |
|
|
<i class="icon">🚪</i> 退出登录 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<!-- 主要内容区域 --> |
|
|
<div class="main-content"> |
|
|
<!-- 左侧菜单 --> |
|
|
<aside class="sidebar"> |
|
|
<nav class="sidebar-nav"> |
|
|
<div class="nav-section"> |
|
|
<ul class="nav-list"> |
|
|
<li v-for="item in mainMenuItems" :key="item.id"> |
|
|
<router-link |
|
|
:to="item.path" |
|
|
class="nav-item" |
|
|
:class="{ active: currentRoute === item.path }" |
|
|
@click="handleMenuClick(item)" |
|
|
> |
|
|
<i class="nav-icon">{{ item.icon }}</i> |
|
|
<span class="nav-text">{{ item.name }}</span> |
|
|
<button |
|
|
v-if="item.favorite" |
|
|
class="favorite-btn" |
|
|
@click.stop="toggleFavorite(item.id)" |
|
|
> |
|
|
⭐ |
|
|
</button> |
|
|
</router-link> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<ul class="nav-list"> |
|
|
<li v-for="item in favoriteMenuItems" :key="item.id"> |
|
|
<router-link |
|
|
:to="item.path" |
|
|
class="nav-item" |
|
|
:class="{ active: currentRoute === item.path }" |
|
|
> |
|
|
<i class="nav-icon">{{ item.icon }}</i> |
|
|
<span class="nav-text">{{ item.name }}</span> |
|
|
<button |
|
|
class="favorite-btn active" |
|
|
@click.stop="toggleFavorite(item.id)" |
|
|
> |
|
|
⭐ |
|
|
</button> |
|
|
</router-link> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
</aside> |
|
|
|
|
|
<!-- 右侧内容区域 --> |
|
|
<div class="content-area"> |
|
|
<!-- 内容选项卡 --> |
|
|
<div class="content-tabs"> |
|
|
<div class="tab-list"> |
|
|
<div |
|
|
v-for="tab in openTabs" |
|
|
:key="tab.id" |
|
|
:class="['tab-item', { active: tab.id === currentTab }]" |
|
|
@click="switchTab(tab.id)" |
|
|
> |
|
|
<span class="tab-title">{{ tab.title }}</span> |
|
|
<button |
|
|
v-if="openTabs.length > 1" |
|
|
class="tab-close" |
|
|
@click.stop="closeTab(tab.id)" |
|
|
title="关闭标签页" |
|
|
> |
|
|
× |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-actions"> |
|
|
<button |
|
|
v-if="openTabs.length > 1" |
|
|
class="close-all-btn" |
|
|
@click="closeAllTabs" |
|
|
title="关闭所有标签页" |
|
|
> |
|
|
<span class="close-all-icon">⊗</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 功能内容区 --> |
|
|
<div class="content-body"> |
|
|
<router-view /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import { ref, reactive, computed, onMounted, watch } from 'vue' |
|
|
import { useRouter, useRoute } from 'vue-router' |
|
|
import { userService } from '@/services/userService' |
|
|
|
|
|
export default { |
|
|
name: 'MainLayout', |
|
|
setup() { |
|
|
const router = useRouter() |
|
|
const route = useRoute() |
|
|
|
|
|
// 响应式数据 |
|
|
const showMessagePanel = ref(false) |
|
|
const showUserMenu = ref(false) |
|
|
const currentTab = ref('home') |
|
|
const openTabs = ref([ |
|
|
{ id: 'home', title: '欢迎', path: '/', closable: false } |
|
|
]) |
|
|
|
|
|
const currentUser = reactive({ |
|
|
name: '管理员', |
|
|
email: 'admin@gofaster.com', |
|
|
avatar: null |
|
|
}) |
|
|
|
|
|
const messages = ref([ |
|
|
{ |
|
|
id: 1, |
|
|
title: '系统更新完成', |
|
|
icon: '🔄', |
|
|
time: new Date(Date.now() - 1000 * 60 * 30), |
|
|
read: false |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: '新用户注册', |
|
|
icon: '👤', |
|
|
time: new Date(Date.now() - 1000 * 60 * 60), |
|
|
read: false |
|
|
} |
|
|
]) |
|
|
|
|
|
const mainMenuItems = ref([ |
|
|
{ id: 'home', name: '欢迎', path: '/', icon: '🏠', favorite: false }, |
|
|
{ id: 'speed-test', name: '速度测试', path: '/speed-test', icon: '⚡', favorite: false }, |
|
|
{ id: 'user-management', name: '用户管理', path: '/user-management', icon: '👥', favorite: false }, |
|
|
{ id: 'history', name: '历史记录', path: '/history', icon: '📊', favorite: false }, |
|
|
{ id: 'settings', name: '系统设置', path: '/settings', icon: '⚙️', favorite: false } |
|
|
]) |
|
|
|
|
|
const favoriteMenuItems = ref([]) |
|
|
|
|
|
// 计算属性 |
|
|
const unreadCount = computed(() => messages.value.filter(m => !m.read).length) |
|
|
const currentRoute = computed(() => route.path) |
|
|
const breadcrumbs = computed(() => { |
|
|
const path = route.path |
|
|
if (path === '/') return ['欢迎'] |
|
|
if (path === '/user-management') return ['欢迎', '用户管理'] |
|
|
if (path === '/speed-test') return ['欢迎', '速度测试'] |
|
|
if (path === '/history') return ['欢迎', '历史记录'] |
|
|
if (path === '/settings') return ['欢迎', '系统设置'] |
|
|
return ['欢迎'] |
|
|
}) |
|
|
|
|
|
// 方法 |
|
|
const toggleMessagePanel = () => { |
|
|
showMessagePanel.value = !showMessagePanel.value |
|
|
showUserMenu.value = false |
|
|
} |
|
|
|
|
|
const toggleUserMenu = () => { |
|
|
showUserMenu.value = !showUserMenu.value |
|
|
showMessagePanel.value = false |
|
|
} |
|
|
|
|
|
const handleMenuClick = (item) => { |
|
|
// 检查标签页是否已存在 |
|
|
const existingTab = openTabs.value.find(tab => tab.id === item.id) |
|
|
if (!existingTab) { |
|
|
openTabs.value.push({ |
|
|
id: item.id, |
|
|
title: item.name, |
|
|
path: item.path, |
|
|
closable: true |
|
|
}) |
|
|
} |
|
|
currentTab.value = item.id |
|
|
} |
|
|
|
|
|
const switchTab = (tabId) => { |
|
|
currentTab.value = tabId |
|
|
const tab = openTabs.value.find(t => t.id === tabId) |
|
|
if (tab) { |
|
|
router.push(tab.path) |
|
|
} |
|
|
} |
|
|
|
|
|
const closeTab = (tabId) => { |
|
|
const index = openTabs.value.findIndex(tab => tab.id === tabId) |
|
|
if (index > -1) { |
|
|
openTabs.value.splice(index, 1) |
|
|
// 如果关闭的是当前标签页，切换到前一个标签页 |
|
|
if (currentTab.value === tabId) { |
|
|
const newTab = openTabs.value[index - 1] || openTabs.value[0] |
|
|
if (newTab) { |
|
|
currentTab.value = newTab.id |
|
|
router.push(newTab.path) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
const closeAllTabs = () => { |
|
|
openTabs.value = openTabs.value.filter(tab => !tab.closable) |
|
|
currentTab.value = 'home' |
|
|
router.push('/') |
|
|
} |
|
|
|
|
|
const toggleFavorite = (itemId) => { |
|
|
const item = mainMenuItems.value.find(i => i.id === itemId) |
|
|
if (item) { |
|
|
item.favorite = !item.favorite |
|
|
updateFavoriteMenu() |
|
|
} |
|
|
} |
|
|
|
|
|
const updateFavoriteMenu = () => { |
|
|
favoriteMenuItems.value = mainMenuItems.value.filter(item => item.favorite) |
|
|
} |
|
|
|
|
|
const markAsRead = (messageId) => { |
|
|
const message = messages.value.find(m => m.id === messageId) |
|
|
if (message) { |
|
|
message.read = true |
|
|
} |
|
|
} |
|
|
|
|
|
const formatTime = (time) => { |
|
|
const now = new Date() |
|
|
const diff = now - time |
|
|
const minutes = Math.floor(diff / (1000 * 60)) |
|
|
const hours = Math.floor(diff / (1000 * 60 * 60)) |
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24)) |
|
|
|
|
|
if (minutes < 60) return `${minutes}分钟前` |
|
|
if (hours < 24) return `${hours}小时前` |
|
|
return `${days}天前` |
|
|
} |
|
|
|
|
|
const openProfile = () => { |
|
|
showUserMenu.value = false |
|
|
// 跳转到个人资料页面 |
|
|
} |
|
|
|
|
|
const openSettings = () => { |
|
|
showUserMenu.value = false |
|
|
router.push('/settings') |
|
|
} |
|
|
|
|
|
const logout = async () => { |
|
|
try { |
|
|
await userService.logout() |
|
|
router.push('/login') |
|
|
} catch (error) { |
|
|
console.error('退出登录失败:', error) |
|
|
} |
|
|
} |
|
|
|
|
|
// 监听路由变化 |
|
|
watch(() => route.path, (newPath) => { |
|
|
const tab = openTabs.value.find(t => t.path === newPath) |
|
|
if (tab) { |
|
|
currentTab.value = tab.id |
|
|
} |
|
|
}) |
|
|
|
|
|
onMounted(() => { |
|
|
// 初始化收藏菜单 |
|
|
updateFavoriteMenu() |
|
|
|
|
|
// 加载当前用户信息 |
|
|
const savedUser = localStorage.getItem('user') |
|
|
if (savedUser) { |
|
|
Object.assign(currentUser, JSON.parse(savedUser)) |
|
|
} |
|
|
}) |
|
|
|
|
|
return { |
|
|
showMessagePanel, |
|
|
showUserMenu, |
|
|
currentTab, |
|
|
openTabs, |
|
|
currentUser, |
|
|
messages, |
|
|
mainMenuItems, |
|
|
favoriteMenuItems, |
|
|
unreadCount, |
|
|
currentRoute, |
|
|
breadcrumbs, |
|
|
toggleMessagePanel, |
|
|
toggleUserMenu, |
|
|
handleMenuClick, |
|
|
switchTab, |
|
|
closeTab, |
|
|
closeAllTabs, |
|
|
toggleFavorite, |
|
|
markAsRead, |
|
|
formatTime, |
|
|
openProfile, |
|
|
openSettings, |
|
|
logout |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
.main-layout { |
|
|
height: calc(100vh - 24px); /* 减去状态条高度 */ |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
background: #f5f5f5; |
|
|
/* 添加中文字体支持 */ |
|
|
font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Avenir, Helvetica, Arial, sans-serif; |
|
|
/* 确保不会溢出 */ |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
/* 顶部导航栏 */ |
|
|
.header { |
|
|
height: 60px; |
|
|
background: white; |
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 0 20px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
margin: 0; |
|
|
font-size: 24px; |
|
|
color: #1976d2; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.breadcrumb { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
color: #666; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.breadcrumb-item { |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.separator { |
|
|
color: #ccc; |
|
|
margin: 0 4px; |
|
|
} |
|
|
|
|
|
.header-right { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
/* 消息中心 */ |
|
|
.message-center { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.message-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 16px; /* 从20px缩小到16px（缩小一半） */ |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.message-btn:hover { |
|
|
background: #f5f5f5; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
background: #f44336; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
font-size: 11px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.message-panel { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
right: 0; |
|
|
width: 350px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
z-index: 1000; |
|
|
margin-top: 8px; |
|
|
} |
|
|
|
|
|
.message-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 16px; |
|
|
border-bottom: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.message-header h3 { |
|
|
margin: 0; |
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
.close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 20px; |
|
|
cursor: pointer; |
|
|
color: #999; |
|
|
} |
|
|
|
|
|
.message-list { |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.message-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 12px 16px; |
|
|
border-bottom: 1px solid #f5f5f5; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.message-item:hover { |
|
|
background: #f9f9f9; |
|
|
} |
|
|
|
|
|
.message-icon { |
|
|
font-size: 20px; |
|
|
margin-right: 12px; |
|
|
} |
|
|
|
|
|
.message-content { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.message-title { |
|
|
font-weight: 500; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.message-time { |
|
|
font-size: 12px; |
|
|
color: #999; |
|
|
} |
|
|
|
|
|
.mark-read-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
color: #4caf50; |
|
|
cursor: pointer; |
|
|
font-size: 16px; |
|
|
padding: 4px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.mark-read-btn:hover { |
|
|
background: #f0f8f0; |
|
|
} |
|
|
|
|
|
/* 用户信息 */ |
|
|
.user-info { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.user-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: #1976d2; |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
font-weight: bold; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.user-avatar:hover { |
|
|
background: #1565c0; |
|
|
} |
|
|
|
|
|
.user-avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.avatar-placeholder { |
|
|
font-size: 18px; |
|
|
} |
|
|
|
|
|
.user-menu { |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
right: 0; |
|
|
width: 250px; |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
z-index: 1000; |
|
|
margin-top: 8px; |
|
|
} |
|
|
|
|
|
.user-menu-header { |
|
|
padding: 16px; |
|
|
border-bottom: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.user-name { |
|
|
font-weight: 600; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.user-email { |
|
|
font-size: 12px; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.user-menu-items { |
|
|
padding: 8px 0; |
|
|
} |
|
|
|
|
|
.menu-item { |
|
|
width: 100%; |
|
|
background: none; |
|
|
border: none; |
|
|
padding: 12px 16px; |
|
|
text-align: left; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
transition: background-color 0.2s; |
|
|
font-size: 13px; /* 从默认14px缩小到13px */ |
|
|
} |
|
|
|
|
|
.menu-item:hover { |
|
|
background: #f5f5f5; |
|
|
} |
|
|
|
|
|
/* 主要内容区域 */ |
|
|
.main-content { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
overflow: hidden; |
|
|
/* 高度由flex自动计算 */ |
|
|
} |
|
|
|
|
|
/* 左侧菜单 */ |
|
|
.sidebar { |
|
|
width: 250px; |
|
|
background: white; |
|
|
border-right: 1px solid #e0e0e0; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar-nav { |
|
|
padding: 20px 0; |
|
|
} |
|
|
|
|
|
.nav-section { |
|
|
margin-bottom: 20px; /* 从30px减少到20px，因为删除了标题 */ |
|
|
} |
|
|
|
|
|
.nav-section:last-child { |
|
|
margin-bottom: 0; /* 最后一个section不需要底部间距 */ |
|
|
} |
|
|
|
|
|
.nav-title { |
|
|
padding: 0 20px; |
|
|
margin-bottom: 12px; |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
color: #999; |
|
|
text-transform: none; /* 取消大写转换 */ |
|
|
letter-spacing: normal; /* 取消字母间距 */ |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 10px 20px; /* 从12px减少到10px，因为字体变小了 */ |
|
|
color: #333; |
|
|
text-decoration: none; |
|
|
transition: all 0.2s; |
|
|
position: relative; |
|
|
font-size: 13px; |
|
|
} |
|
|
|
|
|
.nav-item:hover { |
|
|
background: #f5f5f5; |
|
|
color: #1976d2; |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
background: #e3f2fd; |
|
|
color: #1976d2; |
|
|
border-right: 3px solid #1976d2; |
|
|
} |
|
|
|
|
|
.nav-icon { |
|
|
font-size: 12px; /* 从18px缩小到12px（缩小三分之一） */ |
|
|
margin-right: 12px; |
|
|
width: 16px; /* 从20px缩小到16px */ |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.nav-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.favorite-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 12px; /* 从14px缩小到12px，与图标保持一致 */ |
|
|
cursor: pointer; |
|
|
opacity: 0.3; |
|
|
transition: opacity 0.2s; |
|
|
padding: 2px; /* 添加内边距 */ |
|
|
} |
|
|
|
|
|
.favorite-btn:hover, |
|
|
.favorite-btn.active { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
/* 右侧内容区域 */ |
|
|
.content-area { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
overflow: hidden; /* 隐藏所有滚动条 */ |
|
|
/* 确保高度正确计算 */ |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
/* 内容选项卡 */ |
|
|
.content-tabs { |
|
|
background: #f8f9fa; |
|
|
border-bottom: 1px solid #dee2e6; |
|
|
padding: 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
height: 32px; |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; /* 确保垂直方向不滚动 */ |
|
|
} |
|
|
|
|
|
.tab-list { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
flex: 1; |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; /* 确保垂直方向不滚动 */ |
|
|
height: 100%; /* 限制高度 */ |
|
|
} |
|
|
|
|
|
.tab-item { |
|
|
padding: 6px 16px; |
|
|
background: transparent; |
|
|
border: none; |
|
|
border-right: 1px solid #dee2e6; |
|
|
cursor: pointer; |
|
|
font-size: 13px; |
|
|
color: #6c757d; |
|
|
transition: all 0.2s; |
|
|
white-space: nowrap; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
height: 100%; /* 确保高度填满容器 */ |
|
|
min-width: 120px; |
|
|
justify-content: center; |
|
|
position: relative; |
|
|
box-sizing: border-box; /* 确保padding不会增加总高度 */ |
|
|
} |
|
|
|
|
|
.tab-item:hover { |
|
|
background: #e9ecef; |
|
|
color: #495057; |
|
|
} |
|
|
|
|
|
.tab-item.active { |
|
|
background: white; |
|
|
color: #007bff; |
|
|
border-bottom: 2px solid #007bff; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.tab-item .tab-close { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border: none; |
|
|
background: transparent; |
|
|
color: #6c757d; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
transition: all 0.2s; |
|
|
margin-left: 4px; |
|
|
border-radius: 0; |
|
|
line-height: 1; |
|
|
} |
|
|
|
|
|
.tab-item .tab-close:hover { |
|
|
color: #dc3545; |
|
|
background: transparent; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.tab-title { |
|
|
flex: 1; |
|
|
text-align: center; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.tab-close { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
color: #999; |
|
|
padding: 2px; |
|
|
border-radius: 2px; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.tab-close:hover { |
|
|
background: #f0f0f0; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.tab-actions { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-end; |
|
|
padding-right: 10px; |
|
|
flex-shrink: 0; |
|
|
height: 100%; /* 确保高度一致 */ |
|
|
} |
|
|
|
|
|
.close-all-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 16px; |
|
|
cursor: pointer; |
|
|
color: #999; |
|
|
padding: 4px; |
|
|
border-radius: 3px; |
|
|
transition: all 0.2s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 24px; |
|
|
height: 24px; /* 确保按钮高度合适 */ |
|
|
margin-left: 8px; |
|
|
box-sizing: border-box; /* 确保padding不会增加总高度 */ |
|
|
} |
|
|
|
|
|
.close-all-btn:hover { |
|
|
background: #e9ecef; |
|
|
color: #495057; |
|
|
} |
|
|
|
|
|
.close-all-icon { |
|
|
font-size: 14px; |
|
|
font-weight: bold; |
|
|
line-height: 1; |
|
|
} |
|
|
|
|
|
/* 功能内容区 */ |
|
|
.content-body { |
|
|
flex: 1; |
|
|
overflow-y: auto; /* 只有内容区有垂直滚动条 */ |
|
|
overflow-x: hidden; /* 隐藏水平滚动条 */ |
|
|
background: white; |
|
|
position: relative; |
|
|
/* 高度由flex自动计算 */ |
|
|
} |
|
|
|
|
|
/* 动态滚动条样式 */ |
|
|
.content-body::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
.content-body::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.content-body::-webkit-scrollbar-thumb { |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border-radius: 4px; |
|
|
transition: background 0.3s ease; |
|
|
} |
|
|
|
|
|
.content-body::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.content-body::-webkit-scrollbar-corner { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
/* 选项卡区域的滚动条样式 */ |
|
|
.content-tabs::-webkit-scrollbar { |
|
|
height: 4px; /* 只显示水平滚动条 */ |
|
|
width: 0; /* 隐藏垂直滚动条 */ |
|
|
} |
|
|
|
|
|
.content-tabs::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.content-tabs::-webkit-scrollbar-thumb { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.content-tabs::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
/* 确保内容可以滚动 */ |
|
|
.content-body > * { |
|
|
min-height: 100%; |
|
|
/* 确保子元素不会创建额外的滚动条 */ |
|
|
overflow: visible; |
|
|
} |
|
|
|
|
|
/* 响应式设计 */ |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
width: 200px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
padding: 0 15px; |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
font-size: 20px; |
|
|
} |
|
|
|
|
|
.breadcrumb { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
</style>
|
|
|
|
