Skip to content

Commit 4675b92

Browse files
committed
优化挑战列表项布局,调整为三行结构:第一行题号和标题,第二行星级和标签,第三行日期和按钮
1 parent b0d2929 commit 4675b92

File tree

1 file changed

+49
-46
lines changed

1 file changed

+49
-46
lines changed

src/components/ChallengeListPage/ChallengeListItem.tsx

+49-46
Original file line numberDiff line numberDiff line change
@@ -75,68 +75,71 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
7575
}}
7676
>
7777
<Space direction="vertical" style={{ width: '100%' }} size={isMobile ? 'small' : 'middle'}>
78+
{/* 第一行:题号和标题 */}
7879
<div style={{
7980
display: 'flex',
80-
alignItems: 'flex-start',
81-
flexDirection: isMobile ? 'column' : 'row',
82-
gap: isMobile ? '8px' : '0'
81+
width: '100%',
82+
alignItems: 'center',
83+
gap: '8px'
8384
}}>
84-
<div style={{
85-
display: 'flex',
86-
alignItems: 'center',
87-
gap: '8px',
88-
marginRight: isMobile ? '0' : '12px'
89-
}}>
90-
<IdTag id={displayId} />
91-
<StarRating
92-
difficulty={challenge.difficulty}
93-
onClick={onDifficultyClick}
94-
stopPropagation={true}
95-
/>
96-
</div>
85+
<IdTag id={displayId} />
9786
<Text
9887
strong
9988
style={{
10089
fontSize: isMobile ? 14 : 16,
10190
lineHeight: 1.4,
10291
flex: 1,
103-
marginBottom: isMobile ? '4px' : '0'
10492
}}
10593
>
10694
{displayTitle}
10795
</Text>
10896
</div>
109-
110-
<Space wrap size={isMobile ? 4 : 'small'} style={{ marginTop: isMobile ? '4px' : '8px' }}>
111-
{/* 添加平台标签 */}
112-
{challenge.platform && onPlatformClick && (
113-
<PlatformTag
114-
platform={challenge.platform}
115-
clickable
116-
onClick={onPlatformClick}
117-
stopPropagation={true}
118-
/>
119-
)}
120-
121-
{/* 限制在移动设备上显示的标签数量 */}
122-
{(isMobile ? challenge.tags.slice(0, 2) : challenge.tags).map(tag => (
123-
<TopicTag
124-
key={tag}
125-
text={tag}
126-
selected={selectedTags.includes(tag)}
127-
clickable
128-
onClick={onTagClick}
129-
stopPropagation={true}
130-
/>
131-
))}
97+
98+
{/* 第二行:星级、平台和标签 */}
99+
<div style={{
100+
display: 'flex',
101+
alignItems: 'center',
102+
flexWrap: 'wrap',
103+
gap: '8px'
104+
}}>
105+
<StarRating
106+
difficulty={challenge.difficulty}
107+
onClick={onDifficultyClick}
108+
stopPropagation={true}
109+
/>
132110

133-
{isMobile && challenge.tags.length > 2 && (
134-
<Text type="secondary" style={{ fontSize: '12px' }}>
135-
+{challenge.tags.length - 2}
136-
</Text>
137-
)}
138-
</Space>
111+
<Space wrap size={isMobile ? 4 : 'small'}>
112+
{/* 添加平台标签 */}
113+
{challenge.platform && onPlatformClick && (
114+
<PlatformTag
115+
platform={challenge.platform}
116+
clickable
117+
onClick={onPlatformClick}
118+
stopPropagation={true}
119+
/>
120+
)}
121+
122+
{/* 限制在移动设备上显示的标签数量 */}
123+
{(isMobile ? challenge.tags.slice(0, 2) : challenge.tags).map(tag => (
124+
<TopicTag
125+
key={tag}
126+
text={tag}
127+
selected={selectedTags.includes(tag)}
128+
clickable
129+
onClick={onTagClick}
130+
stopPropagation={true}
131+
/>
132+
))}
133+
134+
{isMobile && challenge.tags.length > 2 && (
135+
<Text type="secondary" style={{ fontSize: '12px' }}>
136+
+{challenge.tags.length - 2}
137+
</Text>
138+
)}
139+
</Space>
140+
</div>
139141

142+
{/* 第三行:创建日期、更新日期和按钮 */}
140143
<div style={{
141144
display: 'flex',
142145
justifyContent: 'space-between',

0 commit comments

Comments
 (0)