优化UI (#1353)

* 优化UI

* 更新

---------

Co-authored-by: lyswhut <lyswhut@qq.com>

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,8 @@
   "pagination__next": "Next page",
   "pagination__page": "Page {num}",
   "pagination__prev": "Previous page",
+  "count_million": "{count} Million",
+  "count_billion": "{count} Billion",
   "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,8 @@
   "pagination__next": "下一页",
   "pagination__page": "第 {num} 页",
   "pagination__prev": "上一页",
+  "count_million": "{count} 万",
+  "count_billion": "{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,8 @@
   "pagination__next": "下一頁",
   "pagination__page": "第 {num} 頁",
   "pagination__prev": "上一頁",
+  "count_million": "{count} 萬",
+  "count_billion": "{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" 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')
@@ -86,12 +88,27 @@ export default {
 .info {
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-end;
+  gap: 15px;
-  min-width: 0;
+  width: 100%;
+  height: 40px;
   line-height: 1.3;
-  gap: 6px;
   color: var(--color-450);
 }
+.baseInfo {
+  height: 100%;
+  flex: auto;
+  display: flex;
+  min-width: 0;
+  flex-flow: column nowrap;
+  justify-content: space-evenly;
+}
+.metaInfo {
+  display: flex;
+  flex-flow: row nowrap;
+  min-width: 0;
+  gap: 10px;
+  overflow: hidden;
+}
 .name {
   flex: 0 1 auto;
   min-width: 0;
@@ -104,11 +121,11 @@ export default {
   // margin-left: 5px;
 }
 .likes {
-  flex: 1 0 auto;
+  flex: none;
-  margin-left: 10px;
   font-size: 11px;
-  align-self: flex-end;
   text-align: right;
+  padding-top: 3px;
+  align-self: flex-start;
 }
 .likesIcon {
   width: 12px;
@@ -119,7 +136,6 @@ export default {
 .comment_text {
   text-align: justify;
   font-size: 14px;
-  padding-top: 5px;
   line-height: 1.5;
   word-break: break-all;
   overflow-wrap: break-word;

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,6 +37,7 @@ type Tags = Partial<Record<LX.OnlineSource, TagInfo>>
 
 export const tags = shallowReactive<Tags>({})
 
+
 export declare interface ListInfoItem {
   play_count: string
   id: string

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