优化评论展示

src/lang/en-us.json

@@ -20,6 +20,7 @@
   "comment__show": "Song comments",
   "comment__title": "{name} comment",
   "comment__unavailable": "This song does not support getting comments",
+  "comment__location": "From {location}",
   "confirm_button_text": "Yes",
   "copy_tip": " (Click to copy)",
   "date_format_hour": "{num} hours ago",

src/lang/zh-cn.json

@@ -20,6 +20,7 @@
   "comment__show": "歌曲评论",
   "comment__title": "{name} 的评论",
   "comment__unavailable": "此歌曲不支持获取评论",
+  "comment__location": "来自 {location}",
   "confirm_button_text": "是的",
   "copy_tip": "（点击复制）",
   "date_format_hour": "{num}小时前",

src/lang/zh-tw.json

@@ -20,6 +20,7 @@
   "comment__show": "歌曲評論",
   "comment__title": "{name} 的評論",
   "comment__unavailable": "此歌曲不支持獲取評論",
+  "comment__location": "來自 {location}",
   "confirm_button_text": "是的",
   "copy_tip": "（點擊複製）",
   "date_format_hour": "{num}小時前",

src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue

@@ -7,9 +7,11 @@ div(:class="$style.container")
           img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
         div(:class="$style.right")
           div(:class="$style.info")
+            div(:class="$style.baseInfo")
               div.select(:class="$style.name") {{item.userName}}
+              div(:class="$style.metaInfo")
                 time(:class="$style.label" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
-            div(:class="$style.label" v-if="item.location") {{item.location}}
+                div(:class="[$style.label, $style.location]" v-if="item.location") {{$t('comment__location', { location: item.location })}}
             div(:class="$style.likes" v-if="item.likedCount != null")
               svg(:class="$style.likesIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
                 use(xlink:href='#icon-thumbs-up')
@@ -88,10 +90,33 @@ export default {
   flex-flow: row nowrap;
   align-items: flex-end;
   min-width: 0;
-  line-height: 1.3;
+  font-size: inherit;
-  gap: 6px;
+  vertical-align: baseline;
   color: var(--color-450);
 }
+.baseInfo {
+  display: table-cell;
+  height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: normal !important;
+  text-align: justify;
+  min-width: 0;
+  line-height: 1.6;
+  color: var(--color-450);
+}
+.metaInfo {
+  position: relative;
+  display: inline-block;
+  .label {
+    float: left;
+  }
+  .location{
+    margin-left: 10px;
+  }
+}
 .name {
   flex: 0 1 auto;
   min-width: 0;
@@ -104,6 +129,12 @@ export default {
   // margin-left: 5px;
 }
 .likes {
+  position: relative;
+  margin: auto;
+  left: 0;
+  top :0;
+  right: 0;
+  bottom: 0;
   flex: 1 0 auto;
   margin-left: 10px;
   font-size: 11px;

src/renderer/utils/musicSdk/tx/comment.js

@@ -113,7 +113,9 @@ export default {
     const { body, statusCode } = await _requestObj.promise
     if (statusCode != 200 || body.code !== 0) throw new Error('获取评论失败')
     // console.log(body, statusCode)
+
     const comment = body.comment
+
     return {
       source: 'tx',
       comments: this.filterNewComment(comment.commentlist),
@@ -183,7 +185,9 @@ export default {
     const { body, statusCode } = await _requestObj2.promise
     // console.log('body', body)
     if (statusCode != 200 || body.code !== 0 || body.req.code !== 0) throw new Error('获取热门评论失败')
+
     const comment = body.req.data.CommentList
+
     return {
       source: 'tx',
       comments: this.filterHotComment(comment.Comments),
@@ -244,7 +248,7 @@ export default {
         userName: item.Nick ? item.Nick.substring(1) : '',
         images: item.Pic ? [item.Pic] : [],
         avatar: item.Avatar,
-        location: item.Location ? ('来自' + item.Location) : '',
+        location: item.Location,
         userId: item.EncryptUin,
         likedCount: item.PraiseNum,
         reply: item.SubComments