From ab37817d2616616afe350b7f459b26edf6950a65 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Mon, 14 Nov 2022 20:22:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=97=E8=A1=A8=E6=BF=80?=
 =?UTF-8?q?=E6=B4=BB=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/assets/styles/index.less         | 24 +++++++++++
 .../assets/svgs/angle-right-solid.svg         |  1 +
 src/renderer/assets/svgs/play-outline.svg     |  1 +
 .../views/Leaderboard/BoardList/index.vue     | 13 +++++-
 src/renderer/views/List/MusicList/index.vue   | 40 ++++++++++++++++++-
 src/renderer/views/List/MyList/index.vue      | 32 +++++++++++++--
 src/renderer/views/Setting/index.vue          |  9 +++++
 7 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/assets/svgs/angle-right-solid.svg
 create mode 100644 src/renderer/assets/svgs/play-outline.svg

diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index 69576f9a..6422e511 100644
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@@ -570,3 +570,27 @@ table {
 .color-picker {
   border-radius: @radius-border !important;
 }
+
+.list-active-enter-active,
+.list-active-leave-active {
+  transition: .13s ease;
+  transition-property: width, opacity;
+}
+
+.list-active-enter-from,
+.list-active-leave-to {
+  width: 0.25em !important;
+  opacity: 0;
+}
+
+.play-active-enter-active,
+.play-active-leave-active {
+  transition: .13s ease;
+  transition-property: transform, opacity;
+}
+
+.play-active-enter-from,
+.play-active-leave-to {
+  transform: scale(0.8);
+  opacity: 0;
+}
diff --git a/src/renderer/assets/svgs/angle-right-solid.svg b/src/renderer/assets/svgs/angle-right-solid.svg
new file mode 100644
index 00000000..aa6e5ae1
--- /dev/null
+++ b/src/renderer/assets/svgs/angle-right-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/svgs/play-outline.svg b/src/renderer/assets/svgs/play-outline.svg
new file mode 100644
index 00000000..ec5afe93
--- /dev/null
+++ b/src/renderer/assets/svgs/play-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Play</title><path d="M112 111v290c0 17.44 17 28.52 31 20.16l247.9-148.37c12.12-7.25 12.12-26.33 0-33.58L143 90.84c-14-8.36-31 2.72-31 20.16z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>
\ No newline at end of file
diff --git a/src/renderer/views/Leaderboard/BoardList/index.vue b/src/renderer/views/Leaderboard/BoardList/index.vue
index c797cf80..1301c532 100644
--- a/src/renderer/views/Leaderboard/BoardList/index.vue
+++ b/src/renderer/views/Leaderboard/BoardList/index.vue
@@ -5,7 +5,12 @@
       :key="item.id" :class="[$style.listsItem, { [$style.active]: item.id == boardId }, { [$style.clicked]: rightClickItemIndex == index }]"
       :aria-label="item.name" @click="handleToggleList(item.id)" @contextmenu="handleRigthClick($event, index)"
     >
-      <span :class="$style.listsLabel">{{ item.name }}</span>
+      <span :class="$style.listsLabel">
+        <transition name="list-active">
+          <svg-icon v-if="item.id == boardId" name="angle-right-solid" :class="$style.activeIcon" />
+        </transition>
+        {{ item.name }}
+      </span>
     </li>
   </ul>
   <base-menu
@@ -122,6 +127,12 @@ defineExpose({ hideMenu: handleMenuClick })
     }
   }
 }
+.activeIcon {
+  height: .9em;
+  width: .9em;
+  margin-left: -0.45em;
+  vertical-align: -0.05em;
+}
 .listsLabel {
   display: block;
   height: 100%;
diff --git a/src/renderer/views/List/MusicList/index.vue b/src/renderer/views/List/MusicList/index.vue
index 753d18f4..8cfec4e8 100644
--- a/src/renderer/views/List/MusicList/index.vue
+++ b/src/renderer/views/List/MusicList/index.vue
@@ -31,7 +31,14 @@
           class="list-item" :class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { disabled: !assertApiSupport(item.source) }]"
           @click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
         >
-          <div class="list-item-cell no-select num" style="flex: 0 0 5%;" @click.stop>{{ index + 1 }}</div>
+          <div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
+            <div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon">
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="50%" viewBox="0 0 512 512" space="preserve">
+                <use xlink:href="#icon-play-outline" />
+              </svg>
+            </div>
+            <div v-else class="num">{{ index + 1 }}</div>
+          </div>
           <div class="list-item-cell auto name" :aria-label="item.name">
             <span class="select name">{{ item.name }}</span>
             <span v-if="isShowSource" class="no-select label-source">{{ item.source }}</span>
@@ -54,7 +61,16 @@
           :class="[{ [$style.active]: playerInfo.isPlayList && playerInfo.playIndex === index }, { selected: selectedIndex == index || rightClickSelectedIndex == index }, { active: selectedList.includes(item) }, { disabled: !assertApiSupport(item.source) }]"
           @click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
         >
-          <div class="list-item-cell no-select num" style="flex: 0 0 5%;" @click.stop>{{ index + 1 }}</div>
+          <div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
+            <transition name="play-active">
+              <div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="50%" viewBox="0 0 512 512" space="preserve">
+                  <use xlink:href="#icon-play-outline" />
+                </svg>
+              </div>
+              <div v-else class="num">{{ index + 1 }}</div>
+            </transition>
+          </div>
           <div class="list-item-cell auto name">
             <span class="select name" :aria-label="item.name">{{ item.name }}</span>
             <span v-if="isShowSource" class="no-select label-source">{{ item.source }}</span>
@@ -350,6 +366,26 @@ export default {
     }
   }
 }
+.num {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.playIcon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--color-button-font);
+  opacity: .7;
+}
 .content {
   min-height: 0;
   font-size: 14px;
diff --git a/src/renderer/views/List/MyList/index.vue b/src/renderer/views/List/MyList/index.vue
index a1b79d4a..50ecd9a7 100644
--- a/src/renderer/views/List/MyList/index.vue
+++ b/src/renderer/views/List/MyList/index.vue
@@ -21,14 +21,29 @@
         :aria-label="defaultList.name" :aria-selected="defaultList.id == listId"
         @contextmenu="handleListsItemRigthClick($event, -2)" @click="handleListToggle(defaultList.id)"
       >
-        <span :class="$style.listsLabel">{{ defaultList.name }}</span>
+        <!-- <div v-if="defaultList.id == listId" :class="$style.activeIcon">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="40%" viewBox="0 0 451.846 451.847" space="preserve">
+            <use xlink:href="#icon-right" />
+          </svg>
+        </div> -->
+        <span :class="$style.listsLabel">
+          <transition name="list-active">
+            <svg-icon v-if="defaultList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
+          </transition>
+          {{ defaultList.name }}
+        </span>
       </li>
       <li
         class="default-list" :class="[$style.listsItem, {[$style.active]: loveList.id == listId}, {[$style.clicked]: rightClickItemIndex == -1}, {[$style.fetching]: fetchingListStatus[loveList.id]}]"
         :aria-label="loveList.name" :aria-selected="loveList.id == listId"
         @contextmenu="handleListsItemRigthClick($event, -1)" @click="handleListToggle(loveList.id)"
       >
-        <span :class="$style.listsLabel">{{ loveList.name }}</span>
+        <span :class="$style.listsLabel">
+          <transition name="list-active">
+            <svg-icon v-if="loveList.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
+          </transition>
+          {{ loveList.name }}
+        </span>
       </li>
       <li
         v-for="(item, index) in userLists"
@@ -36,7 +51,12 @@
         :class="[$style.listsItem, {[$style.active]: item.id == listId}, {[$style.clicked]: rightClickItemIndex == index}, {[$style.fetching]: fetchingListStatus[item.id]}]"
         :data-index="index" :aria-label="item.name" :aria-selected="defaultList.id == listId" @contextmenu="handleListsItemRigthClick($event, index)"
       >
-        <span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">{{ item.name }}</span>
+        <span :class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)">
+          <transition name="list-active">
+            <svg-icon v-if="item.id == listId" name="angle-right-solid" :class="$style.activeIcon" />
+          </transition>
+          {{ item.name }}
+        </span>
         <input
           :class="$style.listsInput" type="text" :value="item.name"
           :placeholder="item.name" @contextmenu.stop @keyup.enter="handleSaveListName(index, $event)" @blur="handleSaveListName(index, $event)"
@@ -341,6 +361,12 @@ export default {
     }
   }
 }
+.activeIcon {
+  height: .9em;
+  width: .9em;
+  margin-left: -0.45em;
+  vertical-align: -0.05em;
+}
 .listsLabel {
   display: block;
   height: @lists-item-height;
diff --git a/src/renderer/views/Setting/index.vue b/src/renderer/views/Setting/index.vue
index 05426546..e9f6fdc6 100644
--- a/src/renderer/views/Setting/index.vue
+++ b/src/renderer/views/Setting/index.vue
@@ -8,6 +8,9 @@
             role="tab" :aria-selected="avtiveComponentName == h2.id"
             :aria-label="h2.title" ignore-tip @click="toggleTab(h2.id)"
           >
+            <transition name="list-active">
+              <svg-icon v-if="avtiveComponentName == h2.id" name="angle-right-solid" :class="$style.activeIcon" />
+            </transition>
             {{ h2.title }}
           </h2>
           <!-- <ul v-if="h2.children.length" :class="$style.tocList">
@@ -202,6 +205,12 @@ export default {
     color: var(--color-primary);
   }
 }
+.activeIcon {
+  height: .9em;
+  width: .9em;
+  margin-left: -0.45em;
+  vertical-align: -0.05em;
+}
 // .tocH3 {
 //   font-size: 13px;
 //   opacity: .8;