优化UI

src/common/types/list.d.ts

@@ -12,13 +12,15 @@ declare namespace LX {
 
     interface MyDefaultListInfo {
       id: 'default'
-      name: '试听列表'
+      name: 'list__name_default'
+      // name: '试听列表'
       // list: LX.Music.MusicInfo[]
     }
 
     interface MyLoveListInfo {
       id: 'love'
-      name: '我的收藏'
+      name: 'list__name_love'
+      // name: '我的收藏'
       // list: LX.Music.MusicInfo[]
     }
 

src/lang/en-us.json

@@ -9,6 +9,7 @@
   "btn_save": "Save",
   "cancel_button_text": "Cancel",
   "close": "Close",
+  "comment__location": "From {location}",
   "comment__hot_load_error": "Hot comments failed to load, click to try to reload",
   "comment__hot_loading": "Hot comments are loading",
   "comment__hot_title": "Hot Comment",
@@ -77,6 +78,8 @@
   "history_search": "History Searches",
   "import": "Import",
   "leaderboard": "Charts",
+  "list__name_default": "Temp List",
+  "list__name_love": "My Love",
   "list__add_to": "Add to ...",
   "list__collect": "Collect",
   "list__copy_name": "Copy name",
@@ -188,6 +191,9 @@
   "pagination__next": "Next page",
   "pagination__page": "Page {num}",
   "pagination__prev": "Previous page",
+  "play_count_million": "{count} Million",
+  "play_count_billion": "{count} Billion",
+  "play_count_none": "{count}",
   "play_timeout": "Timed pause",
   "play_timeout_close": "Close",
   "play_timeout_confirm": "Confirm",

src/lang/zh-cn.json

@@ -9,6 +9,7 @@
   "btn_save": "保存",
   "cancel_button_text": "我不",
   "close": "关闭",
+  "comment__location": "来自 {location}",
   "comment__hot_load_error": "热门评论加载失败，点击尝试重新加载",
   "comment__hot_loading": "热门评论加载中",
   "comment__hot_title": "热门评论",
@@ -77,6 +78,8 @@
   "history_search": "历史搜索",
   "import": "导入",
   "leaderboard": "排行榜",
+  "list__name_default": "试听列表",
+  "list__name_love": "我的收藏",
   "list__add_to": "添加到...",
   "list__collect": "收藏",
   "list__copy_name": "复制歌曲名",
@@ -188,6 +191,9 @@
   "pagination__next": "下一页",
   "pagination__page": "第 {num} 页",
   "pagination__prev": "上一页",
+  "play_count_million": "{count} 万",
+  "play_count_billion": "{count} 亿",
+  "play_count_none": "{count}",
   "play_timeout": "定时暂停",
   "play_timeout_close": "关闭",
   "play_timeout_confirm": "确认",

src/lang/zh-tw.json

@@ -9,6 +9,7 @@
   "btn_save": "保存",
   "cancel_button_text": "取消",
   "close": "關閉",
+  "comment__location": "來自 {location}",
   "comment__hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載",
   "comment__hot_loading": "熱門評論加載中",
   "comment__hot_title": "熱門評論",
@@ -77,6 +78,8 @@
   "history_search": "歷史搜索",
   "import": "導入",
   "leaderboard": "排行榜",
+  "list__name_default": "試聽清單",
+  "list__name_love": "我的收藏",
   "list__add_to": "添加到...",
   "list__collect": "收藏",
   "list__copy_name": "複製歌曲名",
@@ -188,6 +191,9 @@
   "pagination__next": "下一頁",
   "pagination__page": "第 {num} 頁",
   "pagination__prev": "上一頁",
+  "play_count_million": "{count} 萬",
+  "play_count_billion": "{count} 億",
+  "play_count_none": "{count}",
   "play_timeout": "定時暫停",
   "play_timeout_close": "關閉",
   "play_timeout_confirm": "確認",

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.select(:class="$style.name") {{item.userName}}
+            div(:class="$style.baseInfo")
-            time(:class="$style.label" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
+              div.select(:class="$style.name") {{item.userName}}
-            div(:class="$style.label" v-if="item.location") {{item.location}}
+              div(:class="$style.metaInfo")
+                time(:class="$style.label" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
+                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;

src/renderer/store/list/listManage/state.ts

@@ -5,12 +5,14 @@ export const allMusicList: Map<string, LX.Music.MusicInfo[]> = markRaw(new Map()
 
 export const defaultList = markRaw<LX.List.MyDefaultListInfo>({
   id: LIST_IDS.DEFAULT,
-  name: '试听列表',
+  name: 'list__name_default',
+  // name: '试听列表',
 })
 
 export const loveList = markRaw<LX.List.MyLoveListInfo>({
   id: LIST_IDS.LOVE,
-  name: '我的收藏',
+  name: 'list__name_love',
+  // name: '我的收藏',
 })
 export const tempList = markRaw<LX.List.MyTempListInfo>({
   id: LIST_IDS.TEMP,

src/renderer/store/songList/state.ts

@@ -37,8 +37,13 @@ type Tags = Partial<Record<LX.OnlineSource, TagInfo>>
 
 export const tags = shallowReactive<Tags>({})
 
+interface PlayCount {
+  count: number
+  lang: 'play_count_none' | 'play_count_million' | 'play_count_billion'
+}
+
 export declare interface ListInfoItem {
-  play_count: string
+  play_count: PlayCount
   id: string
   author: string
   name: string
@@ -75,7 +80,7 @@ export declare interface ListDetailInfo {
     img?: string
     desc?: string
     author?: string
-    play_count?: string
+    play_count?: PlayCount
   }
   noItemLabel: string
 }
@@ -106,7 +111,7 @@ export const listDetailInfo = reactive<ListDetailInfo>({
 })
 
 export const selectListInfo = markRaw<ListInfoItem>({
-  play_count: '',
+  play_count: { lang: 'play_count_none', count: 0 },
   id: '',
   author: '',
   name: '',

src/renderer/views/List/MyList/index.vue

@@ -30,7 +30,7 @@
           <transition name="list-active">
             <svg-icon v-if="defaultList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
           </transition>
-          {{ defaultList.name }}
+          {{ $t(defaultList.name) }}
         </span>
       </li>
       <li
@@ -42,7 +42,7 @@
           <transition name="list-active">
             <svg-icon v-if="loveList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
           </transition>
-          {{ loveList.name }}
+          {{ $t(loveList.name) }}
         </span>
       </li>
       <li

src/renderer/views/songList/List/components/SongList.vue

@@ -13,7 +13,7 @@
               <p v-if="item.time" :class="$style.time">{{ item.time }}</p>
               <div :class="$style.songlist_info">
                 <span v-if="item.total != null"><svg-icon name="music" />{{ item.total }}</span>
-                <span v-if="item.play_count != null"><svg-icon name="headphones" />{{ item.play_count }}</span>
+                <span v-if="item.play_count != null"><svg-icon name="headphones" />{{ $t(item.play_count.lang, { count: item.play_count.count }) }}</span>
                 <span v-if="visibleSource">{{ item.source }}</span>
               </div>
             </div>