feat: 🎸 新增许多页面
This commit is contained in:
77
src/App.jsx
77
src/App.jsx
@@ -1,63 +1,42 @@
|
|||||||
import {
|
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||||
BrowserRouter as Router,
|
|
||||||
Routes,
|
|
||||||
Route,
|
|
||||||
Navigate,
|
|
||||||
} from "react-router-dom";
|
|
||||||
import Layout from "./components/Layout";
|
import Layout from "./components/Layout";
|
||||||
import Dashboard from "./pages/Dashboard";
|
import routes from "./routes";
|
||||||
import CalendarPage from "./pages/CalendarPage";
|
|
||||||
import LivePage from "./pages/LivePage";
|
|
||||||
import HomeworkPage from "./pages/HomeworkPage";
|
|
||||||
import ProjectLibraryPage from "./pages/ProjectLibraryPage";
|
|
||||||
import PersonalProfile from "./pages/PersonalProfile";
|
|
||||||
import CareerTreePage from "./pages/CareerTreePage";
|
|
||||||
import CompanyJobsPage from "./pages/CompanyJobsPage";
|
|
||||||
import CompanyJobsListPage from "./pages/CompanyJobsListPage";
|
|
||||||
import JobStrategyPage from "./pages/JobStrategyPage";
|
|
||||||
import JobStrategyDetailPage from "./pages/JobStrategyDetailPage";
|
|
||||||
import InterviewSimulationPage from "./pages/InterviewSimulationPage";
|
|
||||||
import ExpertSupportPage from "./pages/ExpertSupportPage";
|
|
||||||
import Portfolio from "./pages/Portfolio";
|
|
||||||
import PublicCourses from "./pages/PublicCourses";
|
|
||||||
import ResumeInterviewPage from "./pages/ResumeInterviewPage";
|
|
||||||
|
|
||||||
// 样式文件导入
|
// 样式文件导入
|
||||||
import "./normalize.css";
|
import "./global.css";
|
||||||
import "@arco-design/web-react/dist/css/arco.css";
|
import "@arco-design/web-react/dist/css/arco.css";
|
||||||
|
|
||||||
|
const getAllRoutes = (routes) => {
|
||||||
|
const result = [];
|
||||||
|
|
||||||
|
const traverse = (routeItems) => {
|
||||||
|
routeItems.forEach((item) => {
|
||||||
|
if (item.routes) {
|
||||||
|
// 如果有子路由，递归处理
|
||||||
|
traverse(item.routes);
|
||||||
|
} else if (item.path && item.element) {
|
||||||
|
// 如果是单个路由项，添加到结果数组
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
traverse(routes);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const allRoutes = getAllRoutes(routes);
|
||||||
return (
|
return (
|
||||||
<Router>
|
<BrowserRouter>
|
||||||
<Layout>
|
<Layout>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
{allRoutes?.map((item) => (
|
||||||
<Route path="/dashboard" element={<Dashboard />} />
|
<Route {...item} key={item.path} />
|
||||||
<Route path="/calendar" element={<CalendarPage />} />
|
))}
|
||||||
<Route path="/live" element={<LivePage />} />
|
|
||||||
<Route path="/homework" element={<HomeworkPage />} />
|
|
||||||
<Route path="/project-library" element={<ProjectLibraryPage />} />
|
|
||||||
<Route path="/profile" element={<PersonalProfile />} />
|
|
||||||
<Route path="/career-tree" element={<CareerTreePage />} />
|
|
||||||
<Route path="/company-jobs" element={<CompanyJobsPage />} />
|
|
||||||
<Route path="/company-jobs-list" element={<CompanyJobsListPage />} />
|
|
||||||
<Route path="/job-strategy" element={<JobStrategyPage />} />
|
|
||||||
<Route path="/resume-interview" element={<ResumeInterviewPage />} />
|
|
||||||
<Route
|
|
||||||
path="/job-strategy-detail"
|
|
||||||
element={<JobStrategyDetailPage />}
|
|
||||||
/>
|
|
||||||
<Route path="/portfolio" element={<Portfolio />} />
|
|
||||||
<Route path="/public-courses" element={<PublicCourses />} />
|
|
||||||
|
|
||||||
<Route
|
|
||||||
path="/interview-simulation"
|
|
||||||
element={<InterviewSimulationPage />}
|
|
||||||
/>
|
|
||||||
<Route path="/expert-support" element={<ExpertSupportPage />} />
|
|
||||||
</Routes>
|
</Routes>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Router>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
1
src/assets/iconfont/iconfont.js
Normal file
1
src/assets/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/images/Sidebar/btn_icon.png
Normal file
BIN
src/assets/images/Sidebar/btn_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
BIN
src/assets/images/Sidebar/logo.png
Normal file
BIN
src/assets/images/Sidebar/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
13
src/components/IconFont/index.jsx
Normal file
13
src/components/IconFont/index.jsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import "@/assets/iconfont/iconfont.js";
|
||||||
|
|
||||||
|
const IconFont = (props) => {
|
||||||
|
const { className, name, onClick } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg className={`icon ${className}`} aria-hidden="true" onClick={onClick}>
|
||||||
|
<use xlinkHref={`#${name}`}></use>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IconFont;
|
||||||
@@ -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 {
|
.app-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
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%;
|
width: 100%;
|
||||||
text-align: left;
|
background-color: #f2f3f5;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 280px; /* 配合侧边栏宽度调整 */
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: margin-left 0.3s ease;
|
transition: margin-left 0.3s ease;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 { useState, useEffect } from "react";
|
||||||
import Sidebar from "./Sidebar";
|
import Sidebar from "../Sidebar";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
const Layout = ({ children }) => {
|
const Layout = ({ children }) => {
|
||||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
const [isCollapsed, setIsCollapsed] = useState(true);
|
||||||
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);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-layout">
|
<div className="app-layout">
|
||||||
<Sidebar />
|
<Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
|
||||||
<main
|
<main className="main-content">{children}</main>
|
||||||
className={`main-content ${isCollapsed ? "sidebar-collapsed" : ""}`}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
194
src/components/Sidebar/index.css
Normal file
194
src/components/Sidebar/index.css
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
.sidebar-expand-wrapper {
|
||||||
|
width: 280px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 10px;
|
||||||
|
transition: margin 0.3s ease;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
color: #262626;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-info {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.user-avatar {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.visitor-count {
|
||||||
|
width: 100%;
|
||||||
|
height: 41px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 41px;
|
||||||
|
}
|
||||||
|
.sidebar-menu {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.sidebar-menu-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-item-active {
|
||||||
|
background-color: #e8f3ff;
|
||||||
|
|
||||||
|
.sidebar-menu-icon {
|
||||||
|
color: #0275f2 !important;
|
||||||
|
}
|
||||||
|
.sidebar-menu-text {
|
||||||
|
color: #0275f2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.sidebar-menu-icon {
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.sidebar-menu-text {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #616065;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-btn {
|
||||||
|
width: 190px;
|
||||||
|
height: 22px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-btn-text {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #616065;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-retract-wrapper {
|
||||||
|
width: 95px;
|
||||||
|
.sidebar-title {
|
||||||
|
> img {
|
||||||
|
margin: 0;
|
||||||
|
transition: margin 0.3s ease;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-info {
|
||||||
|
margin-bottom: 41px;
|
||||||
|
}
|
||||||
|
.visitor-count {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sidebar-menu {
|
||||||
|
.sidebar-menu-title {
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.sidebar-menu-item {
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.sidebar-menu-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.sidebar-menu-text {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-btn {
|
||||||
|
width: 80px;
|
||||||
|
.sidebar-btn-text {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
81
src/components/Sidebar/index.jsx
Normal file
81
src/components/Sidebar/index.jsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import { useNavigate, useLocation } from "react-router-dom";
|
||||||
|
import { mockData } from "@/data/mockData";
|
||||||
|
import IconFont from "@/components/IconFont";
|
||||||
|
import Logo from "@/assets/images/Sidebar/logo.png";
|
||||||
|
import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
|
||||||
|
import routes from "@/routes";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const { user } = mockData;
|
||||||
|
|
||||||
|
const handleNavClick = (path) => {
|
||||||
|
navigate(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换侧边栏展开/折叠状态
|
||||||
|
const toggleSidebar = () => {
|
||||||
|
setIsCollapsed((prev) => !prev);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
!isCollapsed
|
||||||
|
? "sidebar-retract-wrapper sidebar-expand-wrapper"
|
||||||
|
: "sidebar-expand-wrapper"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="sidebar-title">
|
||||||
|
<img src={Logo} alt="logo" />
|
||||||
|
<p>多多畅职教育系统</p>
|
||||||
|
</div>
|
||||||
|
<div className="user-info">
|
||||||
|
<img
|
||||||
|
alt="avatar"
|
||||||
|
className="user-avatar"
|
||||||
|
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="visitor-count">访客总数：1000</div>
|
||||||
|
<ul className="sidebar-menu">
|
||||||
|
{routes
|
||||||
|
.filter((item) => item.showMenu)
|
||||||
|
?.map((item) => (
|
||||||
|
<>
|
||||||
|
<p className="sidebar-menu-title" key={item.name}>
|
||||||
|
{item.name}
|
||||||
|
</p>
|
||||||
|
{item.routes
|
||||||
|
?.filter((i) => i.showMenuItem)
|
||||||
|
?.map((j) => (
|
||||||
|
<li
|
||||||
|
className={
|
||||||
|
location.pathname === j.path
|
||||||
|
? "sidebar-menu-item-active sidebar-menu-item"
|
||||||
|
: "sidebar-menu-item"
|
||||||
|
}
|
||||||
|
key={j.path}
|
||||||
|
onClick={() => handleNavClick(j.path)}
|
||||||
|
>
|
||||||
|
<IconFont
|
||||||
|
className="sidebar-menu-icon"
|
||||||
|
name="icon-yishiming"
|
||||||
|
/>
|
||||||
|
<span className="sidebar-menu-text">{j.name}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="sidebar-btn" onClick={toggleSidebar}>
|
||||||
|
<img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
|
||||||
|
<span className="sidebar-btn-text">展开/收起</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
@@ -153,3 +153,11 @@ html {
|
|||||||
.arco-icon {
|
.arco-icon {
|
||||||
font-size: 32;
|
font-size: 32;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentcolor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import Portal from "@/components/common/Portal";
|
import Portal from "@/components/Portal";
|
||||||
|
|
||||||
const EventDetailModal = ({ isOpen, event, onClose }) => {
|
const EventDetailModal = ({ isOpen, event, onClose }) => {
|
||||||
// ESC键关闭模态框
|
// ESC键关闭模态框
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
.company-jobs-page-left-list {
|
.company-jobs-page-left-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-title {
|
.expert-support-sidebar-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #111827;
|
color: #111827;
|
||||||
@@ -164,7 +164,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse-red {
|
@keyframes pulse-red {
|
||||||
0%, 100% {
|
0%,
|
||||||
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
@@ -649,7 +650,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
.chat-header {
|
.chat-header {
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
}
|
}
|
||||||
@@ -703,7 +703,8 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 480px;
|
max-width: 480px;
|
||||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||||
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
animation: modalAppear 0.2s ease-out;
|
animation: modalAppear 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -383,7 +383,7 @@ const ExpertSupportPage = () => {
|
|||||||
{/* 左侧对话记录区域 */}
|
{/* 左侧对话记录区域 */}
|
||||||
<div className="conversation-sidebar">
|
<div className="conversation-sidebar">
|
||||||
<div className="sidebar-header">
|
<div className="sidebar-header">
|
||||||
<h2 className="sidebar-title">对话记录</h2>
|
<h2 className="expert-support-sidebar-title">对话记录</h2>
|
||||||
<button
|
<button
|
||||||
className="new-conversation-btn"
|
className="new-conversation-btn"
|
||||||
onClick={createNewConversation}
|
onClick={createNewConversation}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import "./index.css";
|
|||||||
// 滑动阈值（向上滑动超过这个距离触发切换）
|
// 滑动阈值（向上滑动超过这个距离触发切换）
|
||||||
const SWIPE_THRESHOLD = 100;
|
const SWIPE_THRESHOLD = 100;
|
||||||
export default () => {
|
export default () => {
|
||||||
const [isSlide, setIsSlide] = useState(true);
|
const [isSlide, setIsSlide] = useState(false);
|
||||||
const [isDragging, setIsDragging] = useState(false);
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
const [startY, setStartY] = useState(0);
|
const [startY, setStartY] = useState(0);
|
||||||
const [currentY, setCurrentY] = useState(0);
|
const [currentY, setCurrentY] = useState(0);
|
||||||
|
|||||||
@@ -1,12 +1,8 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { mockData } from "@/data/mockData";
|
|
||||||
import MockInterview from "./components/MockInterview";
|
import MockInterview from "./components/MockInterview";
|
||||||
import InterviewRating from "./components/InterviewRating";
|
import InterviewRating from "./components/InterviewRating";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
const InterviewSimulationPage = () => {
|
const InterviewSimulationPage = () => {
|
||||||
const { interviewSimulation } = mockData;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="interview-simulation-page">
|
<div className="interview-simulation-page">
|
||||||
<MockInterview />
|
<MockInterview />
|
||||||
|
|||||||
173
src/routes/index.jsx
Normal file
173
src/routes/index.jsx
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import { lazy } from "react";
|
||||||
|
|
||||||
|
const Dashboard = lazy(() => import("@/pages/Dashboard"));
|
||||||
|
const CalendarPage = lazy(() => import("@/pages/CalendarPage"));
|
||||||
|
const LivePage = lazy(() => import("@/pages/LivePage"));
|
||||||
|
const HomeworkPage = lazy(() => import("@/pages/HomeworkPage"));
|
||||||
|
const ProjectLibraryPage = lazy(() => import("@/pages/ProjectLibraryPage"));
|
||||||
|
const PersonalProfile = lazy(() => import("@/pages/PersonalProfile"));
|
||||||
|
const CareerTreePage = lazy(() => import("@/pages/CareerTreePage"));
|
||||||
|
const CompanyJobsPage = lazy(() => import("@/pages/CompanyJobsPage"));
|
||||||
|
const CompanyJobsListPage = lazy(() => import("@/pages/CompanyJobsListPage"));
|
||||||
|
const JobStrategyPage = lazy(() => import("@/pages/JobStrategyPage"));
|
||||||
|
const JobStrategyDetailPage = lazy(() =>
|
||||||
|
import("@/pages/JobStrategyDetailPage")
|
||||||
|
);
|
||||||
|
const InterviewSimulationPage = lazy(() =>
|
||||||
|
import("@/pages/InterviewSimulationPage")
|
||||||
|
);
|
||||||
|
const ExpertSupportPage = lazy(() => import("@/pages/ExpertSupportPage"));
|
||||||
|
const Portfolio = lazy(() => import("@/pages/Portfolio"));
|
||||||
|
const PublicCourses = lazy(() => import("@/pages/PublicCourses"));
|
||||||
|
const ResumeInterviewPage = lazy(() => import("@/pages/ResumeInterviewPage"));
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
showMenu: false,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
element: <Dashboard />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "个人",
|
||||||
|
showMenu: true,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/dashboard",
|
||||||
|
name: "主页",
|
||||||
|
element: <Dashboard />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/profile",
|
||||||
|
name: "个人档案",
|
||||||
|
element: <PersonalProfile />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/calendar",
|
||||||
|
name: "日历",
|
||||||
|
element: <CalendarPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "课程",
|
||||||
|
showMenu: true,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/public-courses",
|
||||||
|
name: "公共课直播间",
|
||||||
|
element: <PublicCourses />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/live",
|
||||||
|
name: "课程直播间",
|
||||||
|
element: <LivePage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/career-tree",
|
||||||
|
name: "就业管家知识树",
|
||||||
|
element: <CareerTreePage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/homework",
|
||||||
|
name: "课后作业",
|
||||||
|
element: <HomeworkPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/job-strategy",
|
||||||
|
name: "定制求职策略",
|
||||||
|
element: <JobStrategyPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/job-strategy-detail",
|
||||||
|
name: "定制求职策略详情",
|
||||||
|
element: <JobStrategyDetailPage />,
|
||||||
|
showMenu: false,
|
||||||
|
icon: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/interview-simulation",
|
||||||
|
name: "线下面试模拟",
|
||||||
|
element: <InterviewSimulationPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "资源",
|
||||||
|
showMenu: true,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/expert-support",
|
||||||
|
name: "专家支持中心",
|
||||||
|
element: <ExpertSupportPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/company-jobs",
|
||||||
|
name: "企业内推岗位",
|
||||||
|
element: <CompanyJobsPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/company-jobs-list",
|
||||||
|
name: "企业内推岗位列表",
|
||||||
|
element: <CompanyJobsListPage />,
|
||||||
|
showMenu: false,
|
||||||
|
icon: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/resume-interview",
|
||||||
|
name: "我的简历与面试",
|
||||||
|
element: <ResumeInterviewPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/project-library",
|
||||||
|
name: "我的项目库",
|
||||||
|
element: <ProjectLibraryPage />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/portfolio",
|
||||||
|
name: "我的作品集",
|
||||||
|
element: <Portfolio />,
|
||||||
|
icon: "",
|
||||||
|
showMenuItem: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
showMenu: false,
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "*",
|
||||||
|
element: <Dashboard />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
0
src/services/index.js
Normal file
0
src/services/index.js
Normal file
43
src/utils/request.js
Normal file
43
src/utils/request.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
// 引入axios
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: "", // 基础URL，根据实际项目配置
|
||||||
|
timeout: 5000, // 请求超时时间
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json;charset=utf-8",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
// 可以在这里添加token等信息
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
if (token) {
|
||||||
|
config.headers["Authorization"] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
// 处理响应数据
|
||||||
|
const res = response.data;
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
// 处理响应错误
|
||||||
|
console.error("请求错误:", error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 导出请求方法
|
||||||
|
export default service;
|
||||||
Reference in New Issue
Block a user