831 lines
23 KiB
Vue
831 lines
23 KiB
Vue
<template>
|
||
<div class="header">
|
||
<div class="l-content">
|
||
<el-button size="small" @click="handleCollapse">
|
||
<i class="fa fa-bars"></i>
|
||
</el-button>
|
||
</div>
|
||
<div class="r-content">
|
||
<!-- 返回首页按钮 -->
|
||
<el-tooltip content="返回首页" placement="top">
|
||
<el-button circle @click="goHome" class="home-btn" title="返回首页">
|
||
<el-icon>
|
||
<HomeFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
</el-tooltip>
|
||
|
||
<!-- 更新缓存按钮 -->
|
||
<el-button circle :icon="Refresh" @click="refreshCache" class="refresh-cache-btn" :loading="cacheLoading"
|
||
title="更新菜单缓存" />
|
||
|
||
<!-- 主题切换按钮 -->
|
||
<el-button circle :icon="themeIcon" @click="toggleTheme" class="theme-toggle-btn"
|
||
:title="currentTheme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'" />
|
||
|
||
<!-- 消息中心 -->
|
||
<el-dropdown trigger="click" @visible-change="handleDropdownVisibleChange">
|
||
<span class="el-dropdown-link" style="cursor: pointer;">
|
||
<el-badge :value="unreadCount" :max="99" :hidden="unreadCount === 0" class="message-badge">
|
||
<el-button circle class="message-btn" title="消息中心">
|
||
<el-icon>
|
||
<Bell />
|
||
</el-icon>
|
||
</el-button>
|
||
</el-badge>
|
||
</span>
|
||
<template #dropdown>
|
||
<div class="message-dropdown-container">
|
||
<div class="message-dropdown-header">
|
||
<span class="title">站内通知 ({{ unreadCount }}条未读)</span>
|
||
<el-link type="primary" :underline="false" class="mark-all-btn" v-if="unreadCount > 0" @click="handleMarkAllRead">全部已读</el-link>
|
||
</div>
|
||
<el-scrollbar max-height="300px">
|
||
<div v-if="loadingMessages" class="loading-state">
|
||
<el-icon class="is-loading"><Loading /></el-icon>
|
||
<span>加载中...</span>
|
||
</div>
|
||
<div v-else-if="messages.length === 0" class="empty-state">
|
||
<el-icon><Message /></el-icon>
|
||
<span>暂无新消息</span>
|
||
</div>
|
||
<div v-else class="message-list">
|
||
<div
|
||
v-for="item in messages"
|
||
:key="item.id"
|
||
class="message-item"
|
||
:class="{ unread: item.is_read === 0 }"
|
||
@click="handleMessageClick(item)"
|
||
>
|
||
<div class="message-item-header">
|
||
<span class="message-title">{{ item.title }}</span>
|
||
<span class="message-time">{{ formatTime(item.create_time) }}</span>
|
||
</div>
|
||
<div class="message-item-brief">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</template>
|
||
</el-dropdown>
|
||
|
||
<span v-if="companyName" class="company-name" title="当前登录的企业">
|
||
{{ companyName }}
|
||
</span>
|
||
<el-dropdown trigger="click" @command="handleCommand">
|
||
<span class="el-dropdown-link" style="cursor: pointer;">
|
||
<img :src="getImageUrl('user')" class="user" />
|
||
<span class="user-meta">
|
||
<span class="user-name">{{ displayName }}</span>
|
||
<span v-if="loginRoleLabel" class="user-role">{{ loginRoleLabel }}</span>
|
||
</span>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item command="profile">
|
||
<el-icon>
|
||
<User />
|
||
</el-icon>
|
||
<span>个人中心</span>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item divided command="logout">
|
||
<el-icon>
|
||
<SwitchButton />
|
||
</el-icon>
|
||
<span>退出登录</span>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message-center">
|
||
<!-- 详情对话框 -->
|
||
<MessageDetailDialog
|
||
v-model="detailVisible"
|
||
:reminder="currentReminder"
|
||
@read-success="handleReadSuccess"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, reactive, onMounted, onUnmounted } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { useAllDataStore, useMenuStore, useTabsStore } from "@/stores";
|
||
import { useAuthStore } from "@/stores/auth";
|
||
import { logout, getCurrentUserProfile } from "@/api/login";
|
||
import { User, SwitchButton, Sunny, Moon, Refresh, Bell, HomeFilled, Loading, Message } from '@element-plus/icons-vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import { getMySiteReminders, readAllSiteReminders } from "@/api/sitereminder";
|
||
import MessageDetailDialog from "./MessageDetailDialog.vue";
|
||
import { formatTime } from "@/utils/datetime";
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
interface Menu {
|
||
id: number;
|
||
name: string;
|
||
path: string;
|
||
parentId: number;
|
||
}
|
||
|
||
interface Breadcrumb {
|
||
label: string;
|
||
path: string;
|
||
}
|
||
|
||
const menuStore = useMenuStore();
|
||
const tabsStore = useTabsStore();
|
||
const cacheLoading = ref(false);
|
||
// 使用 store 中的菜单数据
|
||
const menuList = computed(() => menuStore.menus);
|
||
|
||
// 加载菜单（从 store）
|
||
async function loadMenu() {
|
||
await menuStore.fetchMenus();
|
||
}
|
||
|
||
// 更新缓存（手动刷新）
|
||
async function refreshCache() {
|
||
cacheLoading.value = true;
|
||
try {
|
||
await menuStore.refreshMenus();
|
||
|
||
// 重新加载动态路由
|
||
const { loadAndAddDynamicRoutes, resetDynamicRoutes } = await import('@/router/index');
|
||
// 重置路由加载状态，强制重新加载
|
||
resetDynamicRoutes();
|
||
await loadAndAddDynamicRoutes();
|
||
|
||
// 等待路由完全加载（给Vue Router一些时间更新路由表）
|
||
await new Promise(resolve => setTimeout(resolve, 200));
|
||
|
||
// 触发菜单刷新事件，通知CommonAside组件刷新菜单
|
||
window.dispatchEvent(new CustomEvent('menu-cache-refreshed'));
|
||
|
||
ElMessage.success('更新成功');
|
||
} catch (error) {
|
||
console.error('Failed to refresh cache', error);
|
||
ElMessage.error('更新缓存失败，请检查网络连接');
|
||
} finally {
|
||
cacheLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// 站内信消息中心逻辑
|
||
const unreadCount = ref(0);
|
||
const messages = ref<any[]>([]);
|
||
const loadingMessages = ref(false);
|
||
const detailVisible = ref(false);
|
||
const currentReminder = ref<any>({});
|
||
|
||
const fetchUnreadCount = async () => {
|
||
if (!authStore.token) return;
|
||
try {
|
||
const res = await getMySiteReminders({ page: 1, pageSize: 1, isRead: 0 });
|
||
if (res.code === 200) {
|
||
unreadCount.value = res.data.total || 0;
|
||
}
|
||
} catch (err) {
|
||
console.error("fetchUnreadCount failed", err);
|
||
}
|
||
};
|
||
|
||
const fetchMessages = async () => {
|
||
if (!authStore.token) return;
|
||
loadingMessages.value = true;
|
||
try {
|
||
const res = await getMySiteReminders({ page: 1, pageSize: 5 });
|
||
if (res.code === 200) {
|
||
messages.value = res.data.list || [];
|
||
}
|
||
} catch (err) {
|
||
console.error("fetchMessages failed", err);
|
||
} finally {
|
||
loadingMessages.value = false;
|
||
}
|
||
};
|
||
|
||
const handleDropdownVisibleChange = (visible: boolean) => {
|
||
if (visible) {
|
||
fetchMessages();
|
||
fetchUnreadCount();
|
||
}
|
||
};
|
||
|
||
const handleMessageClick = (item: any) => {
|
||
currentReminder.value = item;
|
||
detailVisible.value = true;
|
||
};
|
||
|
||
const handleReadSuccess = (id: number) => {
|
||
const msg = messages.value.find(m => m.id === id);
|
||
if (msg && msg.is_read === 0) {
|
||
msg.is_read = 1;
|
||
unreadCount.value = Math.max(0, unreadCount.value - 1);
|
||
}
|
||
fetchUnreadCount();
|
||
};
|
||
|
||
const handleMarkAllRead = async () => {
|
||
try {
|
||
const res = await readAllSiteReminders();
|
||
if (res.code === 200) {
|
||
ElMessage.success("全部已读标记成功");
|
||
unreadCount.value = 0;
|
||
messages.value.forEach(m => m.is_read = 1);
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
}
|
||
};
|
||
|
||
// 根据菜单列表和当前路径计算出的面包屑导航
|
||
const breadcrumbs = computed(() => {
|
||
let chain: Breadcrumb[] = [];
|
||
let currentPath = route.path || '/';
|
||
if (currentPath === '/' || currentPath === '') {
|
||
return [{ label: '仪表盘', path: '/' }];
|
||
}
|
||
let current = menuList.value.find(m => m.path === currentPath);
|
||
if (!current) {
|
||
const candidates = menuList.value.filter(m => currentPath.startsWith(m.path));
|
||
current = candidates.sort((a, b) => b.path.length - a.path.length)[0];
|
||
}
|
||
if (!current) return [];
|
||
chain.push({ label: current.name || 'Unknown', path: current.path });
|
||
let parentId = current.parentId;
|
||
while (parentId > 0) {
|
||
let parent = menuList.value.find(m => m.id === parentId);
|
||
if (parent && !chain.some(c => c.label === parent.name)) {
|
||
chain.push({ label: parent.name || 'Unknown', path: parent.path });
|
||
parentId = parent.parentId;
|
||
} else break;
|
||
}
|
||
chain = chain.reverse();
|
||
return chain;
|
||
});
|
||
|
||
const store = useAllDataStore();
|
||
const authStore = useAuthStore();
|
||
|
||
const getImageUrl = (user) => {
|
||
return new URL(`/src/assets/images/default_avatar.png`, import.meta.url).href;
|
||
};
|
||
|
||
// 计算显示名称：优先显示昵称（用户）或姓名（员工），否则显示用户名
|
||
const displayName = computed(() => {
|
||
const user = authStore.user;
|
||
if (!user) return '';
|
||
|
||
// 如果是用户登录，优先显示name
|
||
if (user.name) {
|
||
return user.name;
|
||
}
|
||
|
||
// 最后显示account
|
||
return user.account || '';
|
||
});
|
||
|
||
// 当前登录的企业（租户）名称
|
||
const companyName = computed(() => {
|
||
return authStore.user?.tenant_name || '';
|
||
});
|
||
|
||
// 当前登录用户的角色 / 部门 / 职位（来自后端 /backend/getCurrentUserProfile）
|
||
const userProfile = reactive({ department: '', position: '', role_name: '' });
|
||
|
||
// 优先展示「部门·职位」，二者皆无时回退到角色名
|
||
const loginRoleLabel = computed(() => {
|
||
const dept = (userProfile.department || '').trim();
|
||
const pos = (userProfile.position || '').trim();
|
||
if (dept || pos) {
|
||
return [dept, pos].filter(Boolean).join(' · ');
|
||
}
|
||
return (userProfile.role_name || '').trim();
|
||
});
|
||
|
||
const fetchUserProfile = async () => {
|
||
if (!authStore.token) return;
|
||
try {
|
||
const res = await getCurrentUserProfile();
|
||
if (res && res.code === 200 && res.data) {
|
||
userProfile.department = res.data.department || '';
|
||
userProfile.position = res.data.position || '';
|
||
userProfile.role_name = res.data.role_name || '';
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to fetch current user profile:', e);
|
||
}
|
||
};
|
||
|
||
const handleCollapse = () => {
|
||
store.state.isCollapse = !store.state.isCollapse;
|
||
};
|
||
|
||
const goHome = () => {
|
||
tabsStore.closeAll();
|
||
router.push('/home');
|
||
};
|
||
|
||
const handleCommand = async (command) => {
|
||
if (command === 'profile') {
|
||
router.push('/user/userProfile');
|
||
} else if (command === 'logout') {
|
||
try {
|
||
// 从 localStorage 获取用户信息，传递给后端
|
||
const userInfo = authStore.user;
|
||
// 先调用后端退出登录接口（记录日志）
|
||
await logout(userInfo);
|
||
} catch (error) {
|
||
// 即使后端接口失败，也继续执行前端退出逻辑
|
||
console.error('退出登录接口调用失败:', error);
|
||
}
|
||
|
||
// 清除前端存储
|
||
authStore.clearToken();
|
||
// 清除缓存中的user数据
|
||
localStorage.removeItem('user');
|
||
sessionStorage.removeItem('user');
|
||
//清除租户数据
|
||
localStorage.removeItem('tenant');
|
||
sessionStorage.removeItem('tenant');
|
||
//清除tabs_list缓存
|
||
localStorage.removeItem('tabs_list');
|
||
localStorage.removeItem('active_tab');
|
||
sessionStorage.removeItem('tabs_list');
|
||
|
||
localStorage.removeItem('tabs_list');
|
||
// 清除菜单缓存
|
||
menuStore.resetMenus();
|
||
|
||
// 清除所有以 menu_cache_ 开头的本地存储项
|
||
const menuCacheKeys: string[] = [];
|
||
// 遍历 localStorage
|
||
for (let i = 0; i < localStorage.length; i++) {
|
||
const key = localStorage.key(i);
|
||
if (key && key.startsWith('menu_')) {
|
||
menuCacheKeys.push(key);
|
||
}
|
||
}
|
||
// 删除 localStorage 中的 menu_cache_ 项
|
||
menuCacheKeys.forEach(key => {
|
||
localStorage.removeItem(key);
|
||
});
|
||
|
||
// 遍历 sessionStorage
|
||
const sessionMenuCacheKeys: string[] = [];
|
||
for (let i = 0; i < sessionStorage.length; i++) {
|
||
const key = sessionStorage.key(i);
|
||
if (key && key.startsWith('menu_')) {
|
||
sessionMenuCacheKeys.push(key);
|
||
}
|
||
}
|
||
// 删除 sessionStorage 中的 menu_cache_ 项
|
||
sessionMenuCacheKeys.forEach(key => {
|
||
sessionStorage.removeItem(key);
|
||
});
|
||
|
||
// 重置 tabs store 状态
|
||
const { useTabsStore } = await import('@/stores');
|
||
const tabsStore = useTabsStore();
|
||
tabsStore.resetTabs();
|
||
|
||
router.push('/login');
|
||
}
|
||
};
|
||
|
||
// Element Plus 主题切换
|
||
const THEME_STORAGE_KEY = 'element-plus-theme';
|
||
const isDark = ref(false);
|
||
|
||
// 初始化主题：从 localStorage 读取或检测系统偏好
|
||
const initTheme = () => {
|
||
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
|
||
if (savedTheme) {
|
||
isDark.value = savedTheme === 'dark';
|
||
} else {
|
||
// 检测系统偏好
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
isDark.value = prefersDark;
|
||
}
|
||
applyTheme();
|
||
};
|
||
|
||
// 应用主题：在 html 元素上添加/移除 dark 类
|
||
const applyTheme = () => {
|
||
const htmlElement = document.documentElement;
|
||
if (isDark.value) {
|
||
htmlElement.classList.add('dark');
|
||
localStorage.setItem(THEME_STORAGE_KEY, 'dark');
|
||
} else {
|
||
htmlElement.classList.remove('dark');
|
||
localStorage.setItem(THEME_STORAGE_KEY, 'light');
|
||
}
|
||
};
|
||
|
||
// 切换主题
|
||
const toggleTheme = () => {
|
||
isDark.value = !isDark.value;
|
||
applyTheme();
|
||
};
|
||
|
||
// 计算当前主题
|
||
const currentTheme = computed(() => isDark.value ? 'dark' : 'light');
|
||
|
||
// 计算主题图标
|
||
const themeIcon = computed(() => isDark.value ? Sunny : Moon);
|
||
|
||
// 组件挂载时初始化主题
|
||
let mediaQuery: MediaQueryList | null = null;
|
||
let handleChange: ((e: MediaQueryListEvent) => void) | null = null;
|
||
|
||
onMounted(async () => {
|
||
await loadMenu();
|
||
initTheme();
|
||
|
||
// 监听系统主题变化
|
||
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
handleChange = (e: MediaQueryListEvent) => {
|
||
// 如果用户没有手动设置主题，则跟随系统
|
||
if (!localStorage.getItem(THEME_STORAGE_KEY)) {
|
||
isDark.value = e.matches;
|
||
applyTheme();
|
||
}
|
||
};
|
||
mediaQuery.addEventListener('change', handleChange);
|
||
|
||
if (authStore.token) {
|
||
// 仅在后台页面刷新/首次挂载时更新未读数量，不再自动轮询。
|
||
fetchUnreadCount();
|
||
// 拉取当前登录用户的角色 / 部门 / 职位
|
||
fetchUserProfile();
|
||
}
|
||
});
|
||
|
||
// 组件卸载时清理
|
||
onUnmounted(() => {
|
||
if (mediaQuery && handleChange) {
|
||
mediaQuery.removeEventListener('change', handleChange);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 40px;
|
||
// 使用 Element Plus 的背景色变量，暗黑模式下自动适配
|
||
background-color: var(--el-bg-color);
|
||
color: var(--el-text-color-primary);
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||
|
||
// 亮色主题下使用 #3973ff 背景
|
||
html:not(.dark) & {
|
||
background-color: #3973ff;
|
||
border-bottom-color: rgba(79, 132, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
.icons {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.l-content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.el-button {
|
||
margin-right: 20px;
|
||
// 使用 Element Plus 的填充色变量
|
||
background-color: var(--el-fill-color-light);
|
||
border-color: var(--el-border-color);
|
||
color: var(--el-text-color-primary);
|
||
|
||
&:hover {
|
||
background-color: var(--el-fill-color);
|
||
border-color: var(--el-border-color-dark);
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 手机端（≤768px）：隐藏左侧折叠按钮区（侧栏抽屉由 Main.vue 的 .mobile-menu-btn 控制）
|
||
@media (max-width: 768px) {
|
||
.l-content {
|
||
display: none;
|
||
}
|
||
|
||
// 顶栏左侧为汉堡按钮预留空间，右侧收紧间距，避免空洞与拥挤
|
||
.header {
|
||
padding: 0 12px 0 60px;
|
||
}
|
||
|
||
.r-content {
|
||
gap: 10px;
|
||
|
||
.el-dropdown-link {
|
||
gap: 8px;
|
||
|
||
.user-name {
|
||
max-width: 72px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.r-content {
|
||
position: relative;
|
||
// z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
.refresh-cache-btn,
|
||
.home-btn,
|
||
.theme-toggle-btn {
|
||
// 使用 Element Plus 的填充色变量
|
||
background-color: var(--el-fill-color-light);
|
||
border-color: var(--el-border-color);
|
||
color: var(--el-text-color-primary);
|
||
margin-left: 0 !important;
|
||
|
||
&:hover {
|
||
background-color: var(--el-fill-color);
|
||
border-color: var(--el-border-color-dark);
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.user {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
// 使用 Element Plus 的边框颜色变量
|
||
// border: 2px solid var(--el-border-color);
|
||
transition: border-color 0.3s ease;
|
||
|
||
&:hover {
|
||
border-color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.company-name {
|
||
max-width: 200px;
|
||
padding: 4px 12px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--el-color-primary);
|
||
background-color: var(--el-color-primary-light-9);
|
||
border: 1px solid var(--el-color-primary-light-7);
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.el-dropdown-link {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
gap: 12px;
|
||
|
||
.user-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
line-height: 1.2;
|
||
min-width: 0;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 14px;
|
||
color: var(--el-text-color-primary);
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
max-width: 120px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
// 亮色主题下使用白色
|
||
html:not(.dark) & {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.user-role {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-secondary);
|
||
white-space: nowrap;
|
||
max-width: 160px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
// 亮色主题下使用半透明白色
|
||
html:not(.dark) & {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 下拉菜单样式 - 使用全局样式覆盖
|
||
:deep(.el-dropdown) {
|
||
.el-dropdown__popper {
|
||
.el-dropdown-menu {
|
||
background-color: var(--bg-color-overlay) !important;
|
||
border-color: var(--border-color) !important;
|
||
padding: 4px 0;
|
||
|
||
.el-dropdown-menu__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--text-color-primary) !important;
|
||
transition: background-color 0.2s ease, color 0.2s ease;
|
||
|
||
span {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.el-icon {
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
&:not(.is-disabled):hover {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
&.is-divided {
|
||
border-top-color: var(--border-color) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.bread) {
|
||
|
||
// 面包屑使用白色
|
||
.el-breadcrumb__inner {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.el-breadcrumb__inner.is-link {
|
||
color: #ffffff !important;
|
||
cursor: pointer !important;
|
||
|
||
&:hover {
|
||
color: rgba(255, 255, 255, 0.8) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-tabs__nav) {
|
||
height: 36px !important;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
/* 消息中心下拉列表样式 */
|
||
.message-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.message-dropdown-container {
|
||
width: 320px;
|
||
background-color: var(--el-bg-color-overlay);
|
||
border: 1px solid var(--el-border-color-light);
|
||
border-radius: 8px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.message-dropdown-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
background-color: var(--el-fill-color-blank);
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.mark-all-btn {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.loading-state,
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30px 0;
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 13px;
|
||
gap: 8px;
|
||
|
||
.el-icon {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.message-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.message-item {
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
border-bottom: 1px solid var(--el-border-color-extra-light);
|
||
text-align: left; /* Ensure it is left-aligned */
|
||
|
||
&:hover {
|
||
background-color: var(--el-fill-color-light);
|
||
}
|
||
|
||
&.unread {
|
||
background-color: var(--el-color-primary-light-9);
|
||
|
||
&:hover {
|
||
background-color: var(--el-color-primary-light-8);
|
||
}
|
||
|
||
.message-title {
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
position: relative;
|
||
padding-left: 10px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 6px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: var(--el-color-danger);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.message-item-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 4px;
|
||
gap: 8px;
|
||
|
||
.message-title {
|
||
font-size: 13px;
|
||
color: var(--el-text-color-primary);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
|
||
.message-time {
|
||
font-size: 11px;
|
||
color: var(--el-text-color-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.message-item-brief {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-regular);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: left;
|
||
}
|
||
</style>
|