Skip to content

Commit 3dfcd2b

Browse files
CC11001100CC11001100
authored
Merge pull request #7 from JSREP/dev
优化挑战列表项UI布局，提升移动端和桌面端的信息呈现结构
2 parents 5686722 + 4675b92 commit 3dfcd2b

32 files changed

+1512
-390
lines changed

‎docs/TODO.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
作者这个字段，是要能够自动补全的，单击输入的就要把平台上所有的作者都下拉展开（按照出现次数倒序排列），然后根据用户的输入自动筛选补全，当然用户也可以不选择已有的作者，选择输入新的作者都是可以的，下拉仅仅只是为了补全，减少用户输入的工作量
1+
作者这个字段，是要能够自动补全的，单击输入的就要把平台上所有的作者都下拉展开（按照出现次数倒序排列），然后根据用户的输入自动筛选补全，当然用户也可以不选择已有的作者，选择输入新的作者都是可以的，下拉仅仅只是为了补全，减少用户输入的工作量
2+
3+
4+
5+
6+
7+
8+
检查docs/challenges下所有的yaml文件：
9+
1. 如果缺少name_en或者name_en为空，则将name字段的值翻译为英文作为此字段的值；
10+
2.
11+
12+
13+
14+
15+
16+

‎docs/challenges/Kasada.yml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
id: 110
2+
id-alias: Kasada
3+
platform: Web
4+
name: Kasada防护
5+
name_en: ""
6+
difficulty-level: 3
7+
description-markdown: Kasada防护
8+
base64-url: aHR0cHM6Ly93d3cua2FzYWRhLmlvL3Byb2R1Y3Qv
9+
is-expired: false
10+
tags:
11+
- js-reverse
12+
solutions: []
13+
create-time: 2025-04-13 08:00:31
14+
update-time: 2025-04-13 08:00:31

‎docs/challenges/中国五矿集团有限公司供应链管理平台.yml

+15
Large diffs are not rendered by default.

‎docs/challenges/佛冈通请求头x-itouchtv-ca-key加密.yml

+14
Large diffs are not rendered by default.

‎docs/challenges/力哥爱英语开发者工具打开检测.yml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
id: 108
2+
id-alias: ""
3+
platform: Web
4+
name: 力哥爱英语开发者工具打开检测
5+
name_en: ""
6+
difficulty-level: 1
7+
description-markdown: 按F12和打开开发者工具之后都有防护
8+
base64-url: aHR0cHM6Ly9pZW5nbGlzaDUyMS5jb20v
9+
is-expired: false
10+
tags:
11+
- js-reverse
12+
solutions: []
13+
create-time: 2025-04-13 07:45:34
14+
update-time: 2025-04-13 07:45:34

‎docs/challenges/商丘市教育体育局鼠标移动设置Cookie.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
id: 106
2+
id-alias: ""
3+
platform: Web
4+
name: 商丘市教育体育局鼠标移动设置Cookie
5+
name_en: ""
6+
difficulty-level: 1
7+
description-markdown: |+
8+
9+
第一次访问网站的时候，让移动鼠标，移动鼠标的时候会设置cookie。
10+
11+
如果不是第一次访问，隐身模式访问即可。
12+
13+
14+
15+
base64-url: aHR0cHM6Ly9qeXR5ai5zaGFuZ3FpdS5nb3YuY24vendnay9mZHpkZ2tuci96ZmNnMzFzcXNqeXR5ai96YmdnMzFzcXNqeXR5ag==
16+
is-expired: false
17+
tags:
18+
- js-reverse
19+
solutions: []
20+
create-time: 2025-04-13 07:29:54
21+
update-time: 2025-04-13 07:29:54

‎docs/challenges/成都市中小学教师继续教育网登录密码加密.yml

+15
Large diffs are not rendered by default.

‎package-lock.json

+56-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"@ant-design/icons": "^5.6.1",
1717
"@types/markdown-it": "^14.1.2",
18+
"@types/react-responsive": "^8.0.8",
1819
"antd": "^5.16.4",
1920
"fuse.js": "^7.1.0",
2021
"i18next": "^24.2.2",
@@ -26,6 +27,7 @@
2627
"react-i18next": "^15.4.1",
2728
"react-markdown": "^10.1.0",
2829
"react-markdown-editor-lite": "^1.3.4",
30+
"react-responsive": "^10.0.1",
2931
"react-router-dom": "^6.23.1",
3032
"react-syntax-highlighter": "^15.6.1",
3133
"rehype-raw": "^7.0.0",

‎src/App.css

+41
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,44 @@
9292
.read-the-docs {
9393
color: #888;
9494
}
95+
96+
/* 移动端响应式样式 */
97+
@media (max-width: 768px) {
98+
/* 导航栏调整 */
99+
.navbar-container {
100+
width: 100%;
101+
padding: 0 16px;
102+
}
103+
104+
/* 移动端内容区域调整 */
105+
.content-wrapper {
106+
padding: 10px 0 !important;
107+
}
108+
109+
/* 移动端卡片样式调整 */
110+
.ant-card {
111+
border-radius: 8px;
112+
}
113+
114+
/* 移动端表格调整 */
115+
.ant-table {
116+
font-size: 12px;
117+
}
118+
119+
/* 移动端表单样式 */
120+
.ant-form-item-label {
121+
padding-bottom: 4px;
122+
}
123+
124+
/* 移动端按钮样式 */
125+
.ant-btn {
126+
font-size: 14px;
127+
height: 32px;
128+
padding: 0 15px;
129+
}
130+
131+
/* 防止溢出 */
132+
.mobile-container {
133+
overflow-x: hidden;
134+
}
135+
}

‎src/components/ChallengeDetailPage/ChallengeActions.tsx

+72-17
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,89 @@
1-
import { Link } from 'react-router-dom';
1+
import { Button, Space } from 'antd';
2+
import { HomeOutlined, RightOutlined } from '@ant-design/icons';
3+
import { useNavigate, Link } from 'react-router-dom';
24
import { useTranslation } from 'react-i18next';
35
import { Challenge } from '../../types/challenge';
46

57
interface ChallengeActionsProps {
68
challenge: Challenge;
9+
/**
10+
* 是否为移动端视图
11+
*/
12+
isMobile?: boolean;
713
}
814

915
/**
10-
* 挑战操作区组件，包含外部链接和返回按钮
16+
* 挑战详情页面底部操作按钮组件
1117
*/
12-
const ChallengeActions: React.FC<ChallengeActionsProps> = ({ challenge }) => {
18+
const ChallengeActions: React.FC<ChallengeActionsProps> = ({ challenge, isMobile = false }) => {
19+
const navigate = useNavigate();
1320
const { t } = useTranslation();
1421

22+
// 移动端布局
23+
if (isMobile) {
24+
return (
25+
<div style={{
26+
display: 'flex',
27+
justifyContent: 'center',
28+
width: '100%',
29+
marginTop: '8px',
30+
flexDirection: 'column',
31+
gap: '12px'
32+
}}>
33+
{challenge.externalLink && (
34+
<Button
35+
type="primary"
36+
onClick={() => window.open(challenge.externalLink, '_blank')}
37+
size="middle"
38+
style={{
39+
width: '100%',
40+
maxWidth: '400px',
41+
alignSelf: 'center'
42+
}}
43+
>
44+
{t('challenge.detail.startChallenge')}
45+
</Button>
46+
)}
47+
48+
<Button
49+
type="default"
50+
icon={<HomeOutlined />}
51+
onClick={() => navigate('/challenges')}
52+
size="middle"
53+
style={{
54+
width: '100%',
55+
maxWidth: '400px',
56+
alignSelf: 'center'
57+
}}
58+
>
59+
{t('challenge.actions.backToList')}
60+
</Button>
61+
</div>
62+
);
63+
}
64+
65+
// PC端布局
1566
return (
1667
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
1768
<div>
18-
<a
19-
href={challenge.externalLink}
20-
target="_blank"
21-
rel="noopener noreferrer"
22-
style={{
23-
backgroundColor: '#1890ff',
24-
color: 'white',
25-
padding: '8px 16px',
26-
borderRadius: '4px',
27-
textDecoration: 'none'
28-
}}
29-
>
30-
{t('challenge.detail.startChallenge')} ➔
31-
</a>
69+
{challenge.externalLink && (
70+
<a
71+
href={challenge.externalLink}
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
style={{
75+
backgroundColor: '#1890ff',
76+
color: 'white',
77+
padding: '8px 16px',
78+
borderRadius: '4px',
79+
textDecoration: 'none',
80+
display: 'inline-flex',
81+
alignItems: 'center'
82+
}}
83+
>
84+
{t('challenge.detail.startChallenge')} <RightOutlined style={{ marginLeft: '5px' }} />
85+
</a>
86+
)}
3287
</div>
3388
<Link to="/challenges" style={{ color: '#1890ff' }}>
3489
{t('challenge.actions.backToList')}

0 commit comments

Comments
 (0)