Skip to content

Commit 46c24a7

Browse files
csfwffcsfwff
committed
feat(comment): 添加勋章样式和提示功能
- 在评论区域添加勋章类型样式函数，支持精良、稀有、史诗、传说、神话、限定等类型 - 实现勋章悬停提示功能，显示勋章类型、名称和描述信息 - 优化勋章数据显示逻辑，处理字符串和对象两种格式的勋章数据 - 在文章页面添加相同的勋章样式和显示功能 - 修复文章元信息区域的溢出显示问题 - 为评论和文章中的勋章添加样式化的类型标识显示
1 parent 2a4dc91 commit 46c24a7

File tree

3 files changed

+111
-31
lines changed

3 files changed

+111
-31
lines changed

‎src/main/resources/lib/latke-core.jar‎

2.11 KB
Binary file not shown.

‎src/main/resources/skins/classic/article.ftl‎

Lines changed: 75 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,24 @@
2121
<#include "macro-head.ftl">
2222
<#include "macro-pagination-query.ftl">
2323
<#include "common/title-icon.ftl">
24+
<#function medalTypeStyle type>
25+
<#switch type>
26+
<#case "精良">
27+
<#return "color:#1d4ed8;">
28+
<#case "稀有">
29+
<#return "color:#8b5cf6;">
30+
<#case "史诗">
31+
<#return "color:#ea580c;font-weight:600;">
32+
<#case "传说">
33+
<#return "color:#eab308;font-weight:700;">
34+
<#case "神话">
35+
<#return "color:#f59e0b;font-weight:700;text-shadow:0 0 3px rgba(245,158,11,0.8);">
36+
<#case "限定">
37+
<#return "color:#ef4444;font-weight:700;text-shadow:0 0 6px rgba(239,68,68,0.9);">
38+
<#default>
39+
<#return "color:#111827;">
40+
</#switch>
41+
</#function>
2442
<!DOCTYPE html>
2543
<html>
2644
<head>
@@ -197,7 +215,7 @@
197215
</a>
198216
</div>
199217
<div class="fn__flex-1">
200-
<div id="articleMeta" class="fn__clear" style="height: auto;">
218+
<div id="articleMeta" class="fn__clear" style="height: auto; overflow: visible">
201219
<a rel="author" href="${servePath}/member/${article.articleAuthorName}"
202220
class="article__stats article__stats--a tooltipped tooltipped-e"
203221
aria-label="${article.oId?number?number_to_datetime}">
@@ -225,22 +243,35 @@
225243
<div id="articleCollectCnt" class="article__stats usersInteracts article__stats--a">
226244
<span class="article__cnt">${article.articleCollectCnt}</span>
227245
收藏
228-
</div>
229-
<#if article.articleQnAOfferPoint?c != "0">
230-
<div id="articleQnAOfferCnt" class="article__stats usersInteracts article__stats--a">
231-
<span class="article__cnt">${article.articleQnAOfferPoint?c}</span>
232-
${qnaOfferLabel}
233-
</div>
234-
</#if>
235-
<div class="article__stats usersInteracts article__stats--a">
236-
<#if article.sysMetal != "[]">
246+
</div>
247+
<#if article.articleQnAOfferPoint?c != "0">
248+
<div id="articleQnAOfferCnt" class="article__stats usersInteracts article__stats--a">
249+
<span class="article__cnt">${article.articleQnAOfferPoint?c}</span>
250+
${qnaOfferLabel}
251+
</div>
252+
</#if>
253+
<div class="article__stats usersInteracts article__stats--a">
254+
<#assign articleMedals = (article.sysMetal?is_string)?then(article.sysMetal?eval, article.sysMetal)![]>
255+
<#if articleMedals?size != 0>
237256
<span class="article__cnt">作者勋章</span>
238-
<#list article.sysMetal?eval as metal>
239-
<img title="${metal.description}" src="${servePath}/gen?id=${metal.id}"/>
257+
<#list articleMedals as metal>
258+
<#assign medalType = metal.type!''>
259+
<#assign medalName = metal.name!''>
260+
<#assign medalDesc = metal.description!''>
261+
<span class="tip-wrapper">
262+
<img src="${servePath}/gen?id=${metal.id}"/>
263+
<span class="tip-text">
264+
<#if medalType != "">
265+
<span style="${medalTypeStyle(medalType)}">[${medalType}]</span>
266+
<#if medalName != "" || medalDesc != "">&nbsp;</#if>
267+
</#if>
268+
<#if medalName != "">${medalName}<#if medalDesc != ""> - </#if></#if>${medalDesc}
269+
</span>
270+
</span>
240271
</#list>
241272
</#if>
242-
</div>
243-
</div>
273+
</div>
274+
</div>
244275
<br>
245276
<#if article.thankedCnt != 0>
246277
<div class="fn-clear"></div>
@@ -366,24 +397,40 @@
366397
href="${servePath}/member/${comment.commentAuthorName}"
367398
class="ft-gray"><span
368399
class="ft-gray"><#if comment.commentAuthorNickName != "">${comment.commentAuthorNickName} (${comment.commentAuthorName})<#else>${comment.commentAuthorName}</#if></span></a>
369-
<span class="ft-fade">• ${comment.timeAgo}</span>
370-
371-
<#if comment.rewardedCnt gt 0>
372-
<#assign hasRewarded = isLoggedIn && comment.commentAuthorId != currentUser.oId && comment.rewarded>
373-
<span aria-label="<#if hasRewarded>${thankedLabel}<#else>${thankLabel} ${comment.rewardedCnt}</#if>"
400+
<span class="ft-fade">• ${comment.timeAgo}</span>
401+
402+
<#if comment.rewardedCnt gt 0>
403+
<#assign hasRewarded = isLoggedIn && comment.commentAuthorId != currentUser.oId && comment.rewarded>
404+
<span aria-label="<#if hasRewarded>${thankedLabel}<#else>${thankLabel} ${comment.rewardedCnt}</#if>"
374405
class="tooltipped tooltipped-n rewarded-cnt <#if hasRewarded>ft-red<#else>ft-fade</#if>">
375406
<svg class="fn-text-top"><use
376407
xlink:href="#heart"></use></svg> ${comment.rewardedCnt}
377408
</span>
378-
</#if>
379-
<#if 0 == comment.commenter.userUAStatus><span class="cmt-via ft-fade"
380-
data-ua="${comment.commentUA}"></span></#if>
381-
</span>
382-
&nbsp;<#list comment.sysMetal?eval as metal>
383-
<img title="${metal.description}" src="${servePath}/gen?id=${metal.id}"/>
384-
</#list>
385-
<a class="ft-a-title fn-right tooltipped tooltipped-nw"
386-
aria-label="${goCommentLabel}"
409+
</#if>
410+
<#if 0 == comment.commenter.userUAStatus><span class="cmt-via ft-fade"
411+
data-ua="${comment.commentUA}"></span></#if>
412+
</span>
413+
<#assign commentMedals = (comment.sysMetal?is_string)?then(comment.sysMetal?eval, comment.sysMetal)![]>
414+
<#if commentMedals?size != 0>
415+
&nbsp;
416+
<#list commentMedals as metal>
417+
<#assign medalType = metal.type!''>
418+
<#assign medalName = metal.name!''>
419+
<#assign medalDesc = metal.description!''>
420+
<span class="tip-wrapper">
421+
<img src="${servePath}/gen?id=${metal.id}"/>
422+
<span class="tip-text">
423+
<#if medalType != "">
424+
<span style="${medalTypeStyle(medalType)}">[${medalType}]</span>
425+
<#if medalName != "" || medalDesc != "">&nbsp;</#if>
426+
</#if>
427+
<#if medalName != "">${medalName}<#if medalDesc != ""> - </#if></#if>${medalDesc}
428+
</span>
429+
</span>
430+
</#list>
431+
</#if>
432+
<a class="ft-a-title fn-right tooltipped tooltipped-nw"
433+
aria-label="${goCommentLabel}"
387434
href="javascript:Comment.goComment('${servePath}/article/${article.oId}?p=${comment.paginationCurrentPageNum}&m=${userCommentViewMode}#${comment.oId}')">
388435
<svg>
389436
<use xlink:href="#down"></use>

‎src/main/resources/skins/classic/common/comment.ftl‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@
1818
along with this program. If not, see <https://www.gnu.org/licenses/>.
1919
2020
-->
21+
<#function medalTypeStyle type>
22+
<#switch type>
23+
<#case "精良">
24+
<#return "color:#1d4ed8;">
25+
<#case "稀有">
26+
<#return "color:#8b5cf6;">
27+
<#case "史诗">
28+
<#return "color:#ea580c;font-weight:600;">
29+
<#case "传说">
30+
<#return "color:#eab308;font-weight:700;">
31+
<#case "神话">
32+
<#return "color:#f59e0b;font-weight:700;text-shadow:0 0 3px rgba(245,158,11,0.8);">
33+
<#case "限定">
34+
<#return "color:#ef4444;font-weight:700;text-shadow:0 0 6px rgba(239,68,68,0.9);">
35+
<#default>
36+
<#return "color:#111827;">
37+
</#switch>
38+
</#function>
2139
<li id="${comment.oId}"
2240
class="<#if comment.commentStatus == 1>cmt-shield</#if><#if comment.commentNice || comment.commentQnAOffered == 1> cmt-perfect</#if><#if comment.commentReplyCnt != 0> cmt-selected</#if>">
2341
<div class="fn-flex">
@@ -29,12 +47,27 @@
2947
</div>
3048
<div class="fn-flex-1">
3149
<div class="comment-get-comment list"></div>
50+
<#assign commentMedals = (comment.sysMetal?is_string)?then(comment.sysMetal?eval, comment.sysMetal)![]>
3251
<div class="fn-clear comment-info">
3352
<span class="fn-left ft-smaller">
3453
<a rel="nofollow" href="${servePath}/member/${comment.commentAuthorName}" class="ft-gray"><span class="ft-gray"><#if comment.commentAuthorNickName != "">${comment.commentAuthorNickName} (${comment.commentAuthorName})<#else>${comment.commentAuthorName}</#if></span></a>
35-
<#list comment.sysMetal?eval as metal>
36-
<img title="${metal.description}" src="${servePath}/gen?id=${metal.id}"/>
37-
</#list>
54+
<#if commentMedals?size != 0>
55+
<#list commentMedals as metal>
56+
<#assign medalType = metal.type!''>
57+
<#assign medalName = metal.name!''>
58+
<#assign medalDesc = metal.description!''>
59+
<span class="tip-wrapper">
60+
<img src="${servePath}/gen?id=${metal.id}"/>
61+
<span class="tip-text">
62+
<#if medalType != "">
63+
<span style="${medalTypeStyle(medalType)}">[${medalType}]</span>
64+
<#if medalName != "" || medalDesc != "">&nbsp;</#if>
65+
</#if>
66+
<#if medalName != "">${medalName}<#if medalDesc != ""> - </#if></#if>${medalDesc}
67+
</span>
68+
</span>
69+
</#list>
70+
</#if>
3871
<span class="ft-fade">• ${comment.timeAgo}</span>
3972
<#if 0 == comment.commenter.userUAStatus><span class="cmt-via ft-fade hover-show fn-hidden" data-ua="${comment.commentUA}"></span></#if>
4073
</span>

0 commit comments

Comments
 (0)