feat: 统一简历详情显示样式并更新修改版简历内容
- 统一所有岗位卡片的简历详情显示样式 - 移除ResumeInfoModal组件中的markdown渲染逻辑 - 重新导入10个岗位的修改版简历内容并清理格式 - 删除删除线内容和加粗格式符号 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user