feat: 🎸 新增许多页面
This commit is contained in:
@@ -1,165 +0,0 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { mockData } from "@/data/mockData";
|
||||
import Portal from "../common/Portal";
|
||||
|
||||
const MessageNotification = ({ isOpen, onClose, onMarkAllRead }) => {
|
||||
const { notifications } = mockData;
|
||||
const popupRef = useRef(null);
|
||||
|
||||
// 点击外部关闭浮窗
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (popupRef.current && !popupRef.current.contains(event.target)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// 获取消息类型图标
|
||||
const getMessageIcon = (type) => {
|
||||
const icons = {
|
||||
system: "⚙️",
|
||||
course: "📚",
|
||||
assignment: "📝",
|
||||
announcement: "📢",
|
||||
};
|
||||
return icons[type] || "📬";
|
||||
};
|
||||
|
||||
// 获取优先级颜色
|
||||
const getPriorityColor = (priority) => {
|
||||
const colors = {
|
||||
high: "#ef4444",
|
||||
medium: "#f59e0b",
|
||||
low: "#10b981",
|
||||
};
|
||||
return colors[priority] || "#6b7280";
|
||||
};
|
||||
|
||||
// 格式化时间显示
|
||||
const formatTime = (timeString) => {
|
||||
const date = new Date(timeString);
|
||||
const now = new Date();
|
||||
const diffInHours = Math.floor((now - date) / (1000 * 60 * 60));
|
||||
|
||||
if (diffInHours < 1) {
|
||||
return "刚刚";
|
||||
} else if (diffInHours < 24) {
|
||||
return `${diffInHours}小时前`;
|
||||
} else {
|
||||
const diffInDays = Math.floor(diffInHours / 24);
|
||||
return `${diffInDays}天前`;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理消息点击
|
||||
const handleMessageClick = (message) => {
|
||||
// 这里可以添加具体的消息处理逻辑
|
||||
};
|
||||
|
||||
// 处理全部标记已读
|
||||
const handleMarkAllReadClick = () => {
|
||||
onMarkAllRead();
|
||||
};
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Portal className="message-notification-portal">
|
||||
<div
|
||||
ref={popupRef}
|
||||
className="message-notification-popup"
|
||||
style={{
|
||||
animation: "notificationFadeIn 200ms ease-out forwards",
|
||||
position: "fixed",
|
||||
top: "120px",
|
||||
left: "280px",
|
||||
zIndex: "var(--z-modal, 10000)",
|
||||
}}
|
||||
>
|
||||
{/* 浮窗头部 */}
|
||||
<div className="message-notification-header">
|
||||
<h4 className="message-notification-title">系统消息</h4>
|
||||
<div className="message-notification-actions">
|
||||
{notifications.unreadCount > 0 && (
|
||||
<button
|
||||
className="mark-all-read-btn"
|
||||
onClick={handleMarkAllReadClick}
|
||||
>
|
||||
全部已读
|
||||
</button>
|
||||
)}
|
||||
<button className="close-btn" onClick={onClose}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 消息列表 */}
|
||||
<div className="message-notification-content">
|
||||
{notifications.messages.length === 0 ? (
|
||||
<div className="empty-messages">
|
||||
<div className="empty-icon">📭</div>
|
||||
<p>暂无消息通知</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="message-list">
|
||||
{notifications.messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`message-item ${
|
||||
!message.isRead ? "unread" : "read"
|
||||
}`}
|
||||
onClick={() => handleMessageClick(message)}
|
||||
>
|
||||
<div className="message-icon-wrapper">
|
||||
<span className="message-type-icon">
|
||||
{getMessageIcon(message.type)}
|
||||
</span>
|
||||
{!message.isRead && (
|
||||
<div
|
||||
className="message-priority-dot"
|
||||
style={{
|
||||
backgroundColor: getPriorityColor(message.priority),
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="message-content">
|
||||
<div className="message-header">
|
||||
<h5 className="message-title">{message.title}</h5>
|
||||
<span className="message-time">
|
||||
{formatTime(message.time)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="message-text">{message.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 浮窗底部 */}
|
||||
<div className="message-notification-footer">
|
||||
<span className="message-count">
|
||||
共 {notifications.messages.length} 条消息
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageNotification;
|
||||
@@ -1,143 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { mockData } from "@/data/mockData";
|
||||
|
||||
const navigation = {
|
||||
sections: [
|
||||
{
|
||||
title: "个人区块",
|
||||
items: [
|
||||
{ name: "🏠 主页", path: "/dashboard", active: true },
|
||||
{ name: "👤 个人档案", path: "/profile" },
|
||||
{ name: "📅 日历", path: "/calendar" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "课程区块",
|
||||
items: [
|
||||
{ name: "📺 公共课直播间", path: "/public-courses" },
|
||||
{ name: "📺 课程直播间", path: "/live" },
|
||||
{ name: "🌳 就业管家知识树", path: "/career-tree" },
|
||||
{ name: "📝 课后作业", path: "/homework" },
|
||||
{
|
||||
name: "🎯 1V1定制求职策略",
|
||||
path: ["/job-strategy", "/job-strategy-detail"],
|
||||
},
|
||||
{ name: "🎭 线下面试模拟", path: "/interview-simulation" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "资源区块",
|
||||
items: [
|
||||
{ name: "🏥 专家支持中心", path: "/expert-support" },
|
||||
{
|
||||
name: "🏢 企业内推岗位",
|
||||
path: ["/company-jobs", "/company-jobs-list"],
|
||||
},
|
||||
{ name: "📄 我的简历与面试题", path: "/resume-interview" },
|
||||
{ name: "📚 我的项目库", path: "/project-library" },
|
||||
{ name: "📚 我的作品集", path: "/portfolio" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const Sidebar = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user } = mockData;
|
||||
|
||||
// 侧边栏折叠状态，从localStorage恢复状态
|
||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
||||
const saved = localStorage.getItem("sidebar-collapsed");
|
||||
return saved === "true";
|
||||
});
|
||||
|
||||
// 保存状态到localStorage并发送事件
|
||||
useEffect(() => {
|
||||
localStorage.setItem("sidebar-collapsed", isCollapsed.toString());
|
||||
// 发送自定义事件通知Layout组件状态变化
|
||||
const event = new CustomEvent("sidebarToggle", {
|
||||
detail: { isCollapsed },
|
||||
});
|
||||
window.dispatchEvent(event);
|
||||
}, [isCollapsed]);
|
||||
|
||||
const handleNavClick = (path) => {
|
||||
if (Array.isArray(path)) {
|
||||
navigate(path[0]);
|
||||
} else {
|
||||
navigate(path);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换侧边栏展开/折叠状态
|
||||
const toggleSidebar = () => {
|
||||
setIsCollapsed(!isCollapsed);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`sidebar ${isCollapsed ? "collapsed" : ""}`}>
|
||||
{/* 顶部Logo和标题 */}
|
||||
<div className="sidebar-header">
|
||||
<div className="sidebar-logo">多</div>
|
||||
{!isCollapsed && (
|
||||
<div className="sidebar-title">多多畅职教务系统</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 用户信息 - 纯静态展示 */}
|
||||
<div className="user-profile">
|
||||
<div className="user-avatar"></div>
|
||||
{!isCollapsed && (
|
||||
<div className="user-info">
|
||||
<h4>{user.name}</h4>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 导航菜单 */}
|
||||
<div className="nav-menu">
|
||||
{navigation.sections.map((section, sectionIndex) => (
|
||||
<div key={sectionIndex} className="nav-section">
|
||||
{isCollapsed ? (
|
||||
<div className="nav-section-title-collapsed">
|
||||
{section.title.charAt(0)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="nav-section-title">{section.title}</div>
|
||||
)}
|
||||
{section.items.map((item, itemIndex) => (
|
||||
<button
|
||||
key={itemIndex}
|
||||
className={`nav-item ${
|
||||
location.pathname === item.path ||
|
||||
item.path.includes(location.pathname)
|
||||
? "active"
|
||||
: ""
|
||||
} ${section.title !== "个人区块" ? "nav-subitem" : ""}`}
|
||||
onClick={() => handleNavClick(item.path)}
|
||||
title={isCollapsed ? item.name : ""}
|
||||
>
|
||||
{isCollapsed ? item.name.split(" ")[0] : item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 悬浮的折叠/展开按钮 */}
|
||||
<button
|
||||
className={`sidebar-float-toggle ${isCollapsed ? "collapsed" : ""}`}
|
||||
onClick={toggleSidebar}
|
||||
title={isCollapsed ? "展开侧边栏" : "折叠侧边栏"}
|
||||
>
|
||||
<span className="toggle-icon">{isCollapsed ? "▶" : "◀"}</span>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -1,583 +1,15 @@
|
||||
/* 全局z-index层级系统 - 确保弹窗层级的最佳实践 */
|
||||
:root {
|
||||
/* z-index层级标准 - 数值间隔1000确保充足的层级空间 */
|
||||
--z-modal: 10000; /* 模态框 - 最高层级，包括系统消息弹窗 */
|
||||
--z-popup: 9000; /* 弹出框 - 次高层级，如用户菜单、下拉框 */
|
||||
--z-tooltip: 8000; /* 提示框 - 中等层级，如悬浮提示 */
|
||||
--z-dropdown: 7000; /* 下拉菜单 - 较低层级 */
|
||||
--z-header: 1000; /* 页头导航 - 基础层级 */
|
||||
--z-content: 1; /* 页面内容 - 默认层级 */
|
||||
}
|
||||
|
||||
/* Layout组件专用变量定义 - 不与其他文件共享 */
|
||||
.app-layout,
|
||||
.sidebar,
|
||||
.app-layout *,
|
||||
.sidebar * {
|
||||
--primary-color: #3b82f6;
|
||||
--text-primary: #111827;
|
||||
--text-secondary: #6b7280;
|
||||
--card-bg: #ffffff;
|
||||
--sidebar-bg: #ffffff;
|
||||
--border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* 布局相关样式 */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* 侧边栏样式 */
|
||||
.sidebar {
|
||||
width: 280px; /* 增加宽度避免内容换行 */
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed; /* 固定定位同时作为子元素的定位上下文 */
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 侧边栏滚动条样式 - 极简清透设计 */
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 6px; /* 纤细的滚动条 */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: transparent; /* 透明轨道 */
|
||||
margin: 10px 0; /* 上下留边 */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1); /* 半透明滑块 */
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.2); /* 悬停时加深 */
|
||||
}
|
||||
|
||||
/* Firefox滚动条样式 */
|
||||
.sidebar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
|
||||
}
|
||||
|
||||
/* 折叠状态的侧边栏 */
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
border-radius: 50% !important;
|
||||
background: #e5e7eb;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.user-info h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 导航菜单样式 */
|
||||
.nav-menu {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.15s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #f3f4f6;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: #eff6ff;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 折叠状态下的区块标题 */
|
||||
.nav-section-title-collapsed {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 悬浮的折叠/展开按钮 */
|
||||
.sidebar-float-toggle {
|
||||
position: fixed;
|
||||
top: 5%; /* 垂直居中 */
|
||||
left: 260px; /* 默认位置：侧边栏宽度 */
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
border: none;
|
||||
border-radius: 0 10px 10px 0; /* 右侧圆角 */
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 2px 0 10px rgba(59, 130, 246, 0.3);
|
||||
z-index: 1001; /* 确保在侧边栏上方 */
|
||||
opacity: 0.9;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* 折叠状态的按钮位置 */
|
||||
.sidebar-float-toggle.collapsed {
|
||||
left: 64px; /* 折叠时的侧边栏宽度 */
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.sidebar-float-toggle:hover {
|
||||
opacity: 1;
|
||||
width: 28px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
box-shadow: 3px 0 15px rgba(59, 130, 246, 0.4);
|
||||
transform: translateY(-50%) translateX(2px);
|
||||
}
|
||||
|
||||
/* 图标动画 */
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-float-toggle:hover .toggle-icon {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* 旧的toggle-btn样式已被sidebar-float-toggle替代 */
|
||||
|
||||
/* 折叠状态下的特殊样式 */
|
||||
.sidebar.collapsed .nav-item {
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .user-profile {
|
||||
justify-content: center;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-header {
|
||||
justify-content: center;
|
||||
padding: 20px 12px;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-left: 280px; /* 配合侧边栏宽度调整 */
|
||||
overflow: hidden;
|
||||
transition: margin-left 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
|
||||
/* 当侧边栏折叠时的主内容区域 */
|
||||
.main-content.sidebar-collapsed {
|
||||
margin-left: 64px;
|
||||
}
|
||||
|
||||
/* 用户信息区域优化 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 消息图标容器 */
|
||||
.message-icon-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 150ms ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-icon-container:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 消息图标 */
|
||||
.message-icon {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.message-icon-container:hover .message-icon {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* 未读消息徽章 */
|
||||
.message-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: messagePulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 未读徽章动画 */
|
||||
@keyframes messagePulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息通知浮窗遮罩 - 已由Portal替代，保留样式以防回退 */
|
||||
.message-notification-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: var(--z-modal);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 消息通知浮窗 - 使用全局z-index系统 */
|
||||
.message-notification-popup {
|
||||
position: fixed; /* Portal渲染到body，使用fixed定位 */
|
||||
top: 120px;
|
||||
left: 280px;
|
||||
width: 320px;
|
||||
max-height: 400px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e5e7eb;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
z-index: var(--z-modal); /* 使用全局变量确保最高层级 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 浮窗淡入动画 */
|
||||
@keyframes notificationFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 浮窗头部 */
|
||||
.message-notification-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 16px 12px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.message-notification-title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.message-notification-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mark-all-read-btn {
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.mark-all-read-btn:hover {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 150ms ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 浮窗内容区域 */
|
||||
.message-notification-content {
|
||||
flex: 1;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.message-notification-content::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.message-notification-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.message-notification-content::-webkit-scrollbar-thumb {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.message-notification-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 消息项 */
|
||||
.message-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.message-item.unread {
|
||||
background-color: #fefefe;
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.message-item.read {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 消息图标包装器 */
|
||||
.message-icon-wrapper {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-type-icon {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message-priority-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 消息内容 */
|
||||
.message-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 空消息状态 */
|
||||
.empty-messages {
|
||||
text-align: center;
|
||||
padding: 32px 16px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-messages p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 浮窗底部 */
|
||||
.message-notification-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-count {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -1,42 +1,14 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import Sidebar from "./Sidebar";
|
||||
import Sidebar from "../Sidebar";
|
||||
import "./index.css";
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
||||
const saved = localStorage.getItem("sidebar-collapsed");
|
||||
return saved === "true";
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleStorageChange = () => {
|
||||
const saved = localStorage.getItem("sidebar-collapsed");
|
||||
setIsCollapsed(saved === "true");
|
||||
};
|
||||
|
||||
window.addEventListener("storage", handleStorageChange);
|
||||
|
||||
// 监听自定义事件
|
||||
const handleSidebarToggle = (event) => {
|
||||
setIsCollapsed(event.detail.isCollapsed);
|
||||
};
|
||||
|
||||
window.addEventListener("sidebarToggle", handleSidebarToggle);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("storage", handleStorageChange);
|
||||
window.removeEventListener("sidebarToggle", handleSidebarToggle);
|
||||
};
|
||||
}, []);
|
||||
const [isCollapsed, setIsCollapsed] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="app-layout">
|
||||
<Sidebar />
|
||||
<main
|
||||
className={`main-content ${isCollapsed ? "sidebar-collapsed" : ""}`}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
<Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
|
||||
<main className="main-content">{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user