feat: 🎸 新增许多页面
This commit is contained in:
77
src/App.jsx
77
src/App.jsx
@@ -1,63 +1,42 @@
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Navigate,
|
||||
} from "react-router-dom";
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import Layout from "./components/Layout";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
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 routes from "./routes";
|
||||
|
||||
// 样式文件导入
|
||||
import "./normalize.css";
|
||||
import "./global.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() {
|
||||
const allRoutes = getAllRoutes(routes);
|
||||
return (
|
||||
<Router>
|
||||
<BrowserRouter>
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<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 />} />
|
||||
{allRoutes?.map((item) => (
|
||||
<Route {...item} key={item.path} />
|
||||
))}
|
||||
</Routes>
|
||||
</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 {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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 {
|
||||
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 Portal from "@/components/common/Portal";
|
||||
import { useEffect } from "react";
|
||||
import Portal from "@/components/Portal";
|
||||
|
||||
const EventDetailModal = ({ isOpen, event, onClose }) => {
|
||||
// ESC键关闭模态框
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
.company-jobs-page-left-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
.expert-support-sidebar-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
@@ -164,7 +164,8 @@
|
||||
}
|
||||
|
||||
@keyframes pulse-red {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
@@ -601,15 +602,15 @@
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.conversation-groups {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.conversation-groups {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.conversation-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
min-width: 280px;
|
||||
@@ -648,8 +649,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chat-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
@@ -703,7 +703,8 @@
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
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;
|
||||
animation: modalAppear 0.2s ease-out;
|
||||
}
|
||||
|
||||
@@ -383,7 +383,7 @@ const ExpertSupportPage = () => {
|
||||
{/* 左侧对话记录区域 */}
|
||||
<div className="conversation-sidebar">
|
||||
<div className="sidebar-header">
|
||||
<h2 className="sidebar-title">对话记录</h2>
|
||||
<h2 className="expert-support-sidebar-title">对话记录</h2>
|
||||
<button
|
||||
className="new-conversation-btn"
|
||||
onClick={createNewConversation}
|
||||
|
||||
@@ -6,7 +6,7 @@ import "./index.css";
|
||||
// 滑动阈值（向上滑动超过这个距离触发切换）
|
||||
const SWIPE_THRESHOLD = 100;
|
||||
export default () => {
|
||||
const [isSlide, setIsSlide] = useState(true);
|
||||
const [isSlide, setIsSlide] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [startY, setStartY] = 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 InterviewRating from "./components/InterviewRating";
|
||||
import "./index.css";
|
||||
|
||||
const InterviewSimulationPage = () => {
|
||||
const { interviewSimulation } = mockData;
|
||||
|
||||
return (
|
||||
<div className="interview-simulation-page">
|
||||
<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