feat: 统一简历详情显示样式并更新修改版简历内容

- 统一所有岗位卡片的简历详情显示样式
- 移除ResumeInfoModal组件中的markdown渲染逻辑
- 重新导入10个岗位的修改版简历内容并清理格式
- 删除删除线内容和加粗格式符号

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-12 10:21:06 +08:00
parent 4f64941d85
commit 6443f2794e
2 changed files with 217 additions and 319 deletions

View File

@@ -1,8 +1,6 @@
import { useState, useEffect } from "react";
import { Radio } from "@arco-design/web-react";
import Modal from "@/components/Modal";
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import "./index.css";
export default ({ visible, onClose, data, initialVersion = "2" }) => {
@@ -22,22 +20,6 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
onClose();
};
// 判断是否应该使用markdown渲染有真实修改版的岗位
const shouldUseMarkdown = (positionTitle) => {
const markdownPositions = [
"会展策划师",
"会展讲解员",
"活动执行",
"活动策划师",
"漫展策划师",
"会展执行助理",
"旅游规划师",
"旅游计调专员",
"景区运营专员",
"文旅运营总监助理"
];
return markdownPositions.includes(positionTitle);
};
// Markdown解析器 - 解析简历内容
const parseResumeMarkdown = (markdownContent) => {
@@ -117,99 +99,6 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
return result;
};
// 渲染markdown分块内容
const renderMarkdownSections = (markdownContent) => {
if (!markdownContent) return null;
const sections = [];
// 首先添加教育经历板块
sections.push(
<li key="education" className="resume-info-moda-item">
<p className="resume-info-moda-item-title">教育经历</p>
<ul className="educational-experience-list">
<li className="educational-experience-list-item">
<p className="school-name">
苏州信息职业技术学院 - 旅游管理
</p>
<p className="study-time">2020.9-2023.6</p>
</li>
</ul>
</li>
);
// 按H1标题分割markdown内容# 开头的行)
const markdownSections = markdownContent.split(/^# /gm).filter(section => section.trim());
// 添加markdown渲染的section
markdownSections.forEach((section, index) => {
// 为每个section添加回# 前缀(除了第一个如果不是以#开头)
const fullSection = section.startsWith('#') ? section : `# ${section}`;
// 过滤掉"对应岗位"板块
if (fullSection.includes('对应岗位:') || fullSection.includes('对应岗位:')) {
return;
}
sections.push(
<li key={`markdown-${index}`} className="resume-info-moda-item">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
// 标题样式
h1: ({node, ...props}) => <p className="resume-info-moda-item-title" {...props} />,
h2: ({node, ...props}) => <p className="resume-info-moda-item-title" style={{
fontSize: '18px',
marginTop: '15px'
}} {...props} />,
h3: ({node, ...props}) => <p style={{
fontSize: '16px',
fontWeight: '600',
color: '#4e5969',
marginBottom: '10px',
marginTop: '15px',
textAlign: 'left'
}} {...props} />,
// 段落样式
p: ({node, ...props}) => <p style={{
fontSize: '14px',
lineHeight: '1.6',
color: '#1d2129',
marginBottom: '10px',
textAlign: 'left',
width: '100%',
wordWrap: 'break-word'
}} {...props} />,
// 列表样式
ol: ({node, ...props}) => <ol style={{
paddingLeft: '20px',
marginBottom: '15px'
}} {...props} />,
ul: ({node, ...props}) => <ul style={{
paddingLeft: '20px',
marginBottom: '15px'
}} {...props} />,
li: ({node, ...props}) => <li style={{
fontSize: '14px',
lineHeight: '1.6',
color: '#1d2129',
marginBottom: '8px',
textAlign: 'left'
}} {...props} />,
// 加粗和删除线样式
strong: ({node, ...props}) => <strong style={{color: '#ff4d4f', fontWeight: 'bold'}} {...props} />,
del: ({node, ...props}) => <del style={{textDecoration: 'line-through', color: '#999'}} {...props} />
}}
>
{fullSection}
</ReactMarkdown>
</li>
);
});
return sections;
};
// 获取简历数据 - 支持新的数据结构
let resumeContent = {};
@@ -354,12 +243,7 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
{data?.title || resumeContent.personalInfo?.name || "职位名称"}
</p>
{/* 判断是否使用markdown渲染 */}
{data && shouldUseMarkdown(data?.title) && data?.content?.original && data?.content?.modified ? (
<ul className="resume-info-moda-list">
{renderMarkdownSections(version === "1" ? data.content.original : data.content.modified)}
</ul>
) : (
{/* 统一使用结构化样式展示所有岗位 */}
<ul className="resume-info-moda-list">
{/* 教育经历 */}
<li className="resume-info-moda-item">
@@ -476,7 +360,6 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
</li>
)}
</ul>
)}
</div>
</Modal>
</>