@@ -75,68 +75,71 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
75
75
} }
76
76
>
77
77
< Space direction = "vertical" style = { { width : '100%' } } size = { isMobile ? 'small' : 'middle' } >
78
+ { /* 第一行:题号和标题 */ }
78
79
< div style = { {
79
80
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'
83
84
} } >
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 } />
97
86
< Text
98
87
strong
99
88
style = { {
100
89
fontSize : isMobile ? 14 : 16 ,
101
90
lineHeight : 1.4 ,
102
91
flex : 1 ,
103
- marginBottom : isMobile ? '4px' : '0'
104
92
} }
105
93
>
106
94
{ displayTitle }
107
95
</ Text >
108
96
</ 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
+ />
132
110
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 >
139
141
142
+ { /* 第三行:创建日期、更新日期和按钮 */ }
140
143
< div style = { {
141
144
display : 'flex' ,
142
145
justifyContent : 'space-between' ,
0 commit comments