Duguay/teach_sys_Demo
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完整的教务系统前端项目 - 包含所有修复和9月份数据

Browse Source
This commit is contained in:
KQL
2025-09-03 13:26:13 +08:00
commit 87b06d3176
270 changed files with 116169 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css Normal file
View File

@@ -0,0 +1,391 @@
.project-cases-modal {
width: 758px;
height: 720px;
border-radius: 8px;
position: relative;
background-color: #f2f3f5;
overflow: hidden;
box-sizing: border-box;
padding: 20px;
background-image: url("@/assets/images/Common/modal_bg.png");
background-size: 100% 100%;
.close-icon {
position: absolute;
right: 20px;
top: 20px;
width: 16px;
height: 16px;
background-image: url("@/assets/images/Common/close.png");
background-size: 100% 100%;
z-index: 10;
cursor: pointer;
}
.project-cases-modal-title {
width: 100%;
height: 30px;
line-height: 30px;
text-align: left;
color: #1d2129;
font-size: 20px;
font-weight: 600;
}
.project-cases-modal-list {
width: 100%;
max-height: 640px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
.project-cases-modal-item {
width: 100%;
margin-bottom: 20px;
border-radius: 8px;
box-sizing: border-box;
padding: 16px;
background-color: #fff;
.project-cases-modal-item-title {
width: 100%;
text-align: left;
line-height: 30px;
width: 100%;
height: 30px;
color: #0275f2;
font-size: 20px;
font-weight: 600;
position: relative;
display: inline-block;
width: fit-content;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 5px;
opacity: 0.1;
border-radius: 5px;
background-color: #0275f2;
}
}
.project-cases-modal-item-text {
width: 100%;
margin-top: 5px;
text-align: left;
color: #1d2129;
font-size: 14px;
line-height: 22px;
font-weight: 400;
}
.project-cases-modal-horizontal-list {
width: 100%;
margin-top: 10px;
overflow-x: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.high-count-list-item {
width: 220px;
height: 82px;
background-color: #f7f8fa;
margin-right: 20px;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #e5e6eb;
cursor: pointer;
flex-shrink: 0;
> span {
font-size: 12px;
line-height: 20px;
font-weight: 600;
box-sizing: border-box;
padding: 0 8px;
border-radius: 2px;
margin-bottom: 5px;
}
.high {
color: #2c7aff;
background-color: #e8f3ff;
border: 1px solid #2c7aff;
}
.medium {
color: #722ed1;
background-color: #f5e8ff;
border: 1px solid #722ed1;
}
.low {
color: #00b42a;
background-color: #e8ffea;
border: 1px solid #00b42a;
}
> p {
width: 100%;
height: 24px;
text-align: left;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #1d2129;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.class-list-item {
width: 220px;
height: 60px;
background-color: #f7f8fa;
margin-right: 20px;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #e5e6eb;
cursor: pointer;
flex-shrink: 0;
.class-list-item-title {
height: 36px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
> i {
width: 36px;
height: 36px;
background-image: url("@/assets/images/ProjectLibraryPage/class_icon.png");
background-size: 100% 100%;
}
> span {
font-size: 14px;
font-weight: 400;
color: #1d2129;
margin-left: 10px;
}
}
}
}
.project-cases-modal-attachment-list {
width: 100%;
margin-top: 10px;
overflow-y: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
.attachment-list-item {
min-width: 300px;
max-width: 100%;
width: auto;
height: 80px;
border: 1px solid #e5e6eb;
cursor: pointer;
flex-shrink: 0;
background-color: #f7f8fa;
border-radius: 8px;
padding: 10px 40px 10px 10px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
&::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
width: 20px;
height: 20px;
background-image: url("@/assets/images/ProjectLibraryPage/eyes_icon.png");
background-size: 100% 100%;
}
.attachment-icon {
width: 56px;
height: 56px;
margin-right: 12px;
flex-shrink: 0;
}
.file-icon {
margin-right: 12px;
flex-shrink: 0;
}
.attachment-info {
flex: 1;
min-width: 0;
height: 48px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-right: 10px;
> p {
width: 100%;
line-height: 28px;
text-align: left;
font-size: 16px;
font-weight: 600;
color: #09090b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> span {
line-height: 20px;
text-align: left;
font-size: 14px;
font-weight: 400;
color: #788089;
}
}
}
}
/* Markdown内容样式 */
.project-cases-modal-markdown-content {
width: 100%;
margin-top: 10px;
color: #1d2129;
font-size: 14px;
line-height: 1.6;
text-align: left;
h1, h2, h3, h4, h5, h6 {
color: #1d2129;
margin-top: 16px;
margin-bottom: 8px;
font-weight: 600;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; }
p {
margin: 8px 0;
line-height: 1.6;
text-align: left;
}
ul, ol {
margin: 8px 0;
padding-left: 24px;
}
li {
margin: 4px 0;
line-height: 1.6;
text-align: left;
}
ul li {
list-style-type: disc;
}
ol li {
list-style-type: decimal;
}
strong {
font-weight: 600;
color: #1d2129;
}
em {
font-style: italic;
}
code {
background-color: #f7f8fa;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
}
pre {
background-color: #f7f8fa;
border: 1px solid #e5e6eb;
border-radius: 4px;
padding: 12px;
overflow-x: auto;
margin: 12px 0;
}
pre code {
background: none;
padding: 0;
}
blockquote {
border-left: 4px solid #0275f2;
padding-left: 16px;
margin: 12px 0;
color: #4e5969;
}
hr {
border: none;
border-top: 1px solid #e5e6eb;
margin: 16px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
}
th, td {
border: 1px solid #e5e6eb;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f7f8fa;
font-weight: 600;
}
a {
color: #0275f2;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
}

125
src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.jsx Normal file
View File

@@ -0,0 +1,125 @@
import Modal from "@/components/Modal";
import PDFICON from "@/assets/images/Common/pdf_icon.png";
import FileIcon from "@/components/FileIcon";
import ReactMarkdown from "react-markdown";
import "./index.css";
export default ({ visible, onClose, data }) => {
const handleCloseModal = () => {
onClose();
};
// 将换行符转换为Markdown格式
const formatMarkdownContent = (content) => {
if (!content) return "";
// 将 \n 替换为实际的换行符
return content.replace(/\\n/g, '\n');
};
return (
<Modal visible={visible} onClose={handleCloseModal}>
<div className="project-cases-modal">
<i className="close-icon" onClick={handleCloseModal} />
<p className="project-cases-modal-title">{data?.title}</p>
<ul className="project-cases-modal-list">
{/* 项目概述 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">项目概述</p>
<p className="project-cases-modal-item-text">
{data?.overview || "暂无项目概述"}
</p>
</li>
{/* 适用岗位 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">适用岗位</p>
<ul className="project-cases-modal-horizontal-list">
{data?.applicablePositions?.map((pos, index) => (
<li key={index} className="high-count-list-item">
<span className={pos.level === '初级' ? 'low' : pos.level === '中级' ? 'medium' : 'high'}>
{pos.level}
</span>
<p>{pos.position}</p>
</li>
)) || (
<li className="high-count-list-item">
<span className="medium">暂无</span>
<p>适用岗位信息</p>
</li>
)}
</ul>
</li>
{/* 对应单元 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">对应单元</p>
<ul className="project-cases-modal-horizontal-list">
{data?.units?.map((unit, index) => (
<li key={index} className="class-list-item">
<div className="class-list-item-title">
<i />
<span>{unit}</span>
</div>
</li>
)) || (
<li className="class-list-item">
<div className="class-list-item-title">
<i />
<span>暂无对应单元信息</span>
</div>
</li>
)}
</ul>
</li>
{/* 项目整体流程介绍 - Markdown格式 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">项目整体流程介绍</p>
<div className="project-cases-modal-markdown-content">
{data?.process ? (
<ReactMarkdown>{formatMarkdownContent(data.process)}</ReactMarkdown>
) : (
<p className="project-cases-modal-item-text">暂无项目流程介绍</p>
)}
</div>
</li>
{/* 项目案例关键技术点 - Markdown格式 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">项目案例关键技术点</p>
<div className="project-cases-modal-markdown-content">
{data?.keyPoints ? (
<ReactMarkdown>{formatMarkdownContent(data.keyPoints)}</ReactMarkdown>
) : (
<p className="project-cases-modal-item-text">暂无关键技术点</p>
)}
</div>
</li>
{/* 附件 */}
<li className="project-cases-modal-item">
<p className="project-cases-modal-item-title">附件</p>
<ul className="project-cases-modal-attachment-list">
{data?.attachments?.map((attachment, index) => (
<li key={index} className="attachment-list-item">
{attachment.type ? (
<FileIcon type={attachment.type} />
) : (
<img src={PDFICON} alt="icon" className="attachment-icon" />
)}
<div className="attachment-info">
<p>{attachment.name}</p>
<span>{attachment.size}</span>
</div>
</li>
)) || (
<li className="attachment-list-item">
<img src={PDFICON} alt="icon" className="attachment-icon" />
<div className="attachment-info">
<p>暂无附件</p>
<span>0kb</span>
</div>
</li>
)}
</ul>
</li>
</ul>
</div>
</Modal>
);
};