Skip to content

Commit 357762a

Browse files
CC11001100CC11001100
committed
修复两个问题：1. YAML预览中Markdown内容不更新问题 2. 详情页长URL溢出显示问题
1 parent 963b76f commit 357762a

File tree

3 files changed

+80
-17
lines changed

3 files changed

+80
-17
lines changed

‎src/components/ChallengeContributePage/index.tsx

+21-14
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const ChallengeContributePage: React.FC = () => {
140140
'difficulty-level': values.difficultyLevel,
141141
'description-markdown': values.description || values.descriptionMarkdown,
142142
'base64-url': values.base64Url,
143-
'is-expired': values.isExpired,
143+
'is-expired': values.isExpired === undefined ? false : values.isExpired,
144144
'tags': values.tags || [],
145145
'solutions': (values.solutions || [])?.filter(s => s.title && s.url).map(s => ({
146146
title: s.title,
@@ -170,12 +170,12 @@ const ChallengeContributePage: React.FC = () => {
170170
'name': values.name,
171171
'name_en': values.nameEn,
172172
'difficulty-level': values.difficultyLevel,
173-
'description-markdown': values.description || values.descriptionMarkdown,
174-
'description-markdown_en': values.descriptionEn || values.descriptionMarkdownEn,
173+
'description-markdown': values.description || values.descriptionMarkdown || '',
174+
'description-markdown_en': values.descriptionEn || values.descriptionMarkdownEn || '',
175175
'base64-url': values.base64Url,
176-
'is-expired': values.isExpired,
176+
'is-expired': values.isExpired === undefined ? false : values.isExpired,
177177
'tags': values.tags || [],
178-
'solutions': (values.solutions || [])?.filter(s => s.title && s.url).map(s => ({
178+
'solutions': (values.solutions || [])?.filter((s: any) => s.title && s.url).map((s: any) => ({
179179
title: s.title,
180180
url: s.url,
181181
...(s.source ? {source: s.source} : {}),
@@ -187,7 +187,7 @@ const ChallengeContributePage: React.FC = () => {
187187
const lines = values.rawYaml.split('\n');
188188

189189
// 新的方法：创建行类型映射，标记每行是什么类型
190-
const lineTypes = lines.map(line => {
190+
const lineTypes = lines.map((line: string) => {
191191
const trimmedLine = line.trim();
192192
if (trimmedLine === '') return 'empty';
193193
if (trimmedLine.startsWith('#')) return 'comment';
@@ -228,22 +228,22 @@ const ChallengeContributePage: React.FC = () => {
228228
if (!fieldRanges[currentField]) {
229229
fieldRanges[currentField] = { start: -1, end: -1, valueStart: -1, valueEnd: -1 };
230230
}
231-
fieldRanges[currentField].end = i - 1;
231+
fieldRanges[currentField as string].end = i - 1;
232232
}
233233

234234
// 记录当前字段的开始位置
235235
currentField = fieldName;
236236
if (!fieldRanges[currentField]) {
237237
fieldRanges[currentField] = { start: i, end: -1, valueStart: -1, valueEnd: -1 };
238238
} else {
239-
fieldRanges[currentField].start = i;
239+
fieldRanges[currentField as string].start = i;
240240
}
241241

242242
// 找出值的开始位置
243243
const valueMatch = line.match(/^(\s*[a-zA-Z0-9_-]+:)(\s*)(.*)/);
244244
if (valueMatch && valueMatch[3]) {
245-
fieldRanges[currentField].valueStart = valueMatch[1].length + valueMatch[2].length;
246-
fieldRanges[currentField].valueEnd = line.length;
245+
fieldRanges[currentField as string].valueStart = valueMatch[1].length + valueMatch[2].length;
246+
fieldRanges[currentField as string].valueEnd = line.length;
247247
}
248248

249249
// 处理tags和solutions字段
@@ -272,7 +272,7 @@ const ChallengeContributePage: React.FC = () => {
272272

273273
// 设置最后一个字段的结束位置
274274
if (currentField && fieldRanges[currentField]) {
275-
fieldRanges[currentField].end = lines.length - 1;
275+
fieldRanges[currentField as string].end = lines.length - 1;
276276
}
277277

278278
console.log('字段范围:', fieldRanges);
@@ -288,6 +288,12 @@ const ChallengeContributePage: React.FC = () => {
288288
continue; // 这些复杂字段单独处理
289289
}
290290

291+
// 特殊处理is-expired字段，确保它总是有值
292+
if (fieldName === 'is-expired' && (value === undefined || value === null)) {
293+
// 如果is-expired未定义，默认设为false
294+
fieldValueMap['is-expired'] = false;
295+
}
296+
291297
if (fieldRanges[fieldName] && fieldRanges[fieldName].valueStart >= 0) {
292298
const lineIndex = fieldRanges[fieldName].start;
293299
const line = lines[lineIndex];
@@ -303,9 +309,10 @@ const ChallengeContributePage: React.FC = () => {
303309
if (fieldValueMap['description-markdown'] && fieldRanges['description-markdown']) {
304310
const fieldRange = fieldRanges['description-markdown'];
305311
const startLine = fieldRange.start;
306-
const indent = fieldIndents['description-markdown'];
312+
const indent = fieldIndents['description-markdown'] || '';
307313

308-
const descriptionValue = fieldValueMap['description-markdown'];
314+
// 获取最新的描述内容（确保使用最新表单值）
315+
const descriptionValue = form.getFieldValue('description') || form.getFieldValue('descriptionMarkdown') || '';
309316

310317
// 检查原始格式是否使用竖线(|)
311318
if (lines[startLine].includes('|')) {
@@ -576,7 +583,7 @@ const ChallengeContributePage: React.FC = () => {
576583
// 处理base64Url字段，确保正确映射
577584
base64Url: challengeData['base64-url'] || '',
578585
// 处理过期标志
579-
isExpired: challengeData['is-expired'] === true,
586+
isExpired: challengeData['is-expired'] === true || false,
580587
tags: challengeData.tags || [],
581588
solutions: (challengeData.solutions || []).map((solution: any) => ({
582589
title: solution.title || '',

‎src/components/ChallengeDetailPage/ChallengeDescription.tsx

+46-2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,27 @@ const MarkdownImage = (props: any) => {
4141
);
4242
};
4343

44+
// 链接组件
45+
const MarkdownLink = (props: any) => {
46+
return (
47+
<a
48+
{...props}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
style={{
52+
overflowWrap: 'break-word',
53+
wordWrap: 'break-word',
54+
wordBreak: 'break-word',
55+
maxWidth: '100%',
56+
display: 'inline-block',
57+
...props.style
58+
}}
59+
>
60+
{props.children}
61+
</a>
62+
);
63+
};
64+
4465
/**
4566
* 挑战描述组件，显示问题的Markdown描述
4667
*/
@@ -58,12 +79,35 @@ const ChallengeDescription: React.FC<ChallengeDescriptionProps> = ({ challenge }
5879

5980
{/* 实际挑战描述 */}
6081
{displayDescription ? (
61-
<Card bordered={false} style={{ marginBottom: 24 }}>
82+
<Card
83+
bordered={false}
84+
style={{
85+
marginBottom: 24,
86+
wordWrap: 'break-word',
87+
overflowWrap: 'break-word'
88+
}}
89+
>
6290
<div className="markdown-content">
6391
<ReactMarkdown
6492
rehypePlugins={[rehypeRaw]}
6593
components={{
66-
img: MarkdownImage
94+
img: MarkdownImage,
95+
a: MarkdownLink,
96+
pre: (props: any) => (
97+
<pre style={{
98+
overflowX: 'auto',
99+
whiteSpace: 'pre-wrap',
100+
wordWrap: 'break-word',
101+
maxWidth: '100%'
102+
}} {...props} />
103+
),
104+
code: (props: any) => (
105+
<code style={{
106+
overflowWrap: 'break-word',
107+
wordWrap: 'break-word',
108+
wordBreak: 'break-word'
109+
}} {...props} />
110+
)
67111
}}
68112
>
69113
{displayDescription}

‎src/styles/markdown.css

+13-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
line-height: 1.8;
55
color: rgba(0, 0, 0, 0.85);
66
padding: 8px 0;
7+
overflow-wrap: break-word;
8+
word-wrap: break-word;
9+
word-break: break-word;
10+
hyphens: auto;
711
}
812

913
.markdown-content h1,
@@ -60,6 +64,8 @@
6064
border-radius: 6px;
6165
margin-bottom: 16px;
6266
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
67+
white-space: pre-wrap;
68+
max-width: 100%;
6369
}
6470

6571
.markdown-content code {
@@ -110,11 +116,12 @@
110116
.markdown-content table {
111117
display: block;
112118
width: 100%;
113-
overflow: auto;
119+
overflow-x: auto;
114120
margin-top: 0;
115121
margin-bottom: 16px;
116122
border-spacing: 0;
117123
border-collapse: collapse;
124+
max-width: 100%;
118125
}
119126

120127
.markdown-content table tr {
@@ -140,6 +147,11 @@
140147
.markdown-content a {
141148
color: #1890ff;
142149
text-decoration: none;
150+
overflow-wrap: break-word;
151+
word-wrap: break-word;
152+
word-break: break-word;
153+
max-width: 100%;
154+
display: inline-block;
143155
}
144156

145157
.markdown-content a:hover {

0 commit comments

Comments
 (0)