更新依赖

src/renderer/components/material/OnlineList/index.vue

@@ -1,92 +1,92 @@
 <template>
   <div :class="$style.songList">
-    <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
-      <div :class="$style.list">
-        <div class="thead">
-          <table>
-            <thead>
-              <tr v-if="actionButtonsVisible">
-                <th class="num" style="width: 5%;">#</th>
-                <th class="nobreak">{{ $t('music_name') }}</th>
-                <th class="nobreak" style="width: 22%;">{{ $t('music_singer') }}</th>
-                <th class="nobreak" style="width: 22%;">{{ $t('music_album') }}</th>
-                <th class="nobreak" style="width: 9%;">{{ $t('music_time') }}</th>
-                <th class="nobreak" style="width: 16%;">{{ $t('action') }}</th>
-              </tr>
-              <tr v-else>
-                <th class="num" style="width: 5%;">#</th>
-                <th class="nobreak">{{ $t('music_name') }}</th>
-                <th class="nobreak" style="width: 24%;">{{ $t('music_singer') }}</th>
-                <th class="nobreak" style="width: 27%;">{{ $t('music_album') }}</th>
-                <th class="nobreak" style="width: 10%;">{{ $t('music_time') }}</th>
-              </tr>
-            </thead>
-          </table>
-        </div>
-        <div :class="$style.content">
-          <div v-show="!noItem" ref="dom_listContent" :class="$style.content">
-            <base-virtualized-list v-if="actionButtonsVisible" ref="listRef" :list="list" key-name="id" :item-height="listItemHeight" container-class="scroll" content-class="list" @contextmenu.capture="handleListRightClick">
-              <template #default="{ item, index }">
-                <div
-                  class="list-item" :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]"
-                  @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 auto name">
-                    <span class="select name" :aria-label="item.name">{{ item.name }}</span>
-                    <span v-if="item.meta._qualitys.flac24bit" class="no-select badge badge-theme-primary">{{ $t('tag__lossless_24bit') }}</span>
-                    <span v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav" class="no-select badge badge-theme-primary">{{ $t('tag__lossless') }}</span>
-                    <span v-else-if="item.meta._qualitys['320k']" class="no-select badge badge-theme-secondary">{{ $t('tag__high_quality') }}</span>
-                    <span v-if="sourceTag" class="no-select badge badge-theme-tertiary">{{ item.source }}</span>
-                  </div>
-                  <div class="list-item-cell" style="flex: 0 0 22%;"><span class="select" :aria-label="item.singer">{{ item.singer }}</span></div>
-                  <div class="list-item-cell" style="flex: 0 0 22%;"><span class="select" :aria-label="item.meta.albumName">{{ item.meta.albumName }}</span></div>
-                  <div class="list-item-cell" style="flex: 0 0 9%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
-                  <div class="list-item-cell" style="flex: 0 0 16%; padding-left: 0; padding-right: 0;">
-                    <material-list-buttons :index="index" :remove-btn="false" :download-btn="assertApiSupport(item.source)" :play-btn="checkApiSource ? assertApiSupport(item.source) : true" @btn-click="handleListBtnClick" />
-                  </div>
-                </div>
-              </template>
-              <template #footer>
-                <div :class="$style.pagination">
-                  <material-pagination :count="total" :limit="limit" :page="page" @btn-click="$emit('togglePage', $event)" />
-                </div>
-              </template>
-            </base-virtualized-list>
-            <base-virtualized-list v-else ref="listRef" :list="list" key-name="id" :item-height="listItemHeight" container-class="scroll" content-class="list" @contextmenu.capture="handleListRightClick">
-              <template #default="{ item, index }">
-                <div
-                  class="list-item" :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]"
-                  @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 auto name">
-                    <span class="select name" :aria-label="item.name">{{ item.name }}</span>
-                    <span v-if="item.meta._qualitys.flac24bit" class="no-select badge badge-theme-primary">{{ $t('tag__lossless_24bit') }}</span>
-                    <span v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav" class="no-select badge badge-theme-primary">{{ $t('tag__lossless') }}</span>
-                    <span v-else-if="item.meta._qualitys['320k']" class="no-select badge badge-theme-secondary">{{ $t('tag__high_quality') }}</span>
-                    <span v-if="sourceTag" class="no-select badge badge-theme-tertiary">{{ item.source }}</span>
-                  </div>
-                  <div class="list-item-cell" style="flex: 0 0 24%;"><span class="select" :aria-label="item.singer">{{ item.singer }}</span></div>
-                  <div class="list-item-cell" style="flex: 0 0 27%;"><span class="select" :aria-label="item.meta.albumName">{{ item.meta.albumName }}</span></div>
-                  <div class="list-item-cell" style="flex: 0 0 10%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
-                </div>
-              </template>
-              <template #footer>
-                <div :class="$style.pagination">
-                  <material-pagination :count="total" :limit="limit" :page="page" @btn-click="$emit('togglePage', $event)" />
-                </div>
-              </template>
-            </base-virtualized-list>
-          </div>
-          <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
-            <div v-show="noItem" :class="$style.noitem">
-              <p v-text="noItem" />
-            </div>
-          </transition>
-        </div>
+    <!-- <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut"> -->
+    <div :class="$style.list">
+      <div class="thead">
+        <table>
+          <thead>
+            <tr v-if="actionButtonsVisible">
+              <th class="num" style="width: 5%;">#</th>
+              <th class="nobreak">{{ $t('music_name') }}</th>
+              <th class="nobreak" style="width: 22%;">{{ $t('music_singer') }}</th>
+              <th class="nobreak" style="width: 22%;">{{ $t('music_album') }}</th>
+              <th class="nobreak" style="width: 9%;">{{ $t('music_time') }}</th>
+              <th class="nobreak" style="width: 16%;">{{ $t('action') }}</th>
+            </tr>
+            <tr v-else>
+              <th class="num" style="width: 5%;">#</th>
+              <th class="nobreak">{{ $t('music_name') }}</th>
+              <th class="nobreak" style="width: 24%;">{{ $t('music_singer') }}</th>
+              <th class="nobreak" style="width: 27%;">{{ $t('music_album') }}</th>
+              <th class="nobreak" style="width: 10%;">{{ $t('music_time') }}</th>
+            </tr>
+          </thead>
+        </table>
       </div>
-    </transition>
+      <div :class="$style.content">
+        <div v-show="!noItem" ref="dom_listContent" :class="$style.content">
+          <base-virtualized-list v-if="actionButtonsVisible" ref="listRef" :list="list" key-name="id" :item-height="listItemHeight" container-class="scroll" content-class="list" @contextmenu.capture="handleListRightClick">
+            <template #default="{ item, index }">
+              <div
+                class="list-item" :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]"
+                @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 auto name">
+                  <span class="select name" :aria-label="item.name">{{ item.name }}</span>
+                  <span v-if="item.meta._qualitys.flac24bit" class="no-select badge badge-theme-primary">{{ $t('tag__lossless_24bit') }}</span>
+                  <span v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav" class="no-select badge badge-theme-primary">{{ $t('tag__lossless') }}</span>
+                  <span v-else-if="item.meta._qualitys['320k']" class="no-select badge badge-theme-secondary">{{ $t('tag__high_quality') }}</span>
+                  <span v-if="sourceTag" class="no-select badge badge-theme-tertiary">{{ item.source }}</span>
+                </div>
+                <div class="list-item-cell" style="flex: 0 0 22%;"><span class="select" :aria-label="item.singer">{{ item.singer }}</span></div>
+                <div class="list-item-cell" style="flex: 0 0 22%;"><span class="select" :aria-label="item.meta.albumName">{{ item.meta.albumName }}</span></div>
+                <div class="list-item-cell" style="flex: 0 0 9%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
+                <div class="list-item-cell" style="flex: 0 0 16%; padding-left: 0; padding-right: 0;">
+                  <material-list-buttons :index="index" :remove-btn="false" :download-btn="assertApiSupport(item.source)" :play-btn="checkApiSource ? assertApiSupport(item.source) : true" @btn-click="handleListBtnClick" />
+                </div>
+              </div>
+            </template>
+            <template #footer>
+              <div :class="$style.pagination">
+                <material-pagination :count="total" :limit="limit" :page="page" @btn-click="$emit('togglePage', $event)" />
+              </div>
+            </template>
+          </base-virtualized-list>
+          <base-virtualized-list v-else ref="listRef" :list="list" key-name="id" :item-height="listItemHeight" container-class="scroll" content-class="list" @contextmenu.capture="handleListRightClick">
+            <template #default="{ item, index }">
+              <div
+                class="list-item" :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]"
+                @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 auto name">
+                  <span class="select name" :aria-label="item.name">{{ item.name }}</span>
+                  <span v-if="item.meta._qualitys.flac24bit" class="no-select badge badge-theme-primary">{{ $t('tag__lossless_24bit') }}</span>
+                  <span v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav" class="no-select badge badge-theme-primary">{{ $t('tag__lossless') }}</span>
+                  <span v-else-if="item.meta._qualitys['320k']" class="no-select badge badge-theme-secondary">{{ $t('tag__high_quality') }}</span>
+                  <span v-if="sourceTag" class="no-select badge badge-theme-tertiary">{{ item.source }}</span>
+                </div>
+                <div class="list-item-cell" style="flex: 0 0 24%;"><span class="select" :aria-label="item.singer">{{ item.singer }}</span></div>
+                <div class="list-item-cell" style="flex: 0 0 27%;"><span class="select" :aria-label="item.meta.albumName">{{ item.meta.albumName }}</span></div>
+                <div class="list-item-cell" style="flex: 0 0 10%;"><span class="no-select">{{ item.interval || '--/--' }}</span></div>
+              </div>
+            </template>
+            <template #footer>
+              <div :class="$style.pagination">
+                <material-pagination :count="total" :limit="limit" :page="page" @btn-click="$emit('togglePage', $event)" />
+              </div>
+            </template>
+          </base-virtualized-list>
+        </div>
+        <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+          <div v-show="noItem" :class="$style.noitem">
+            <p v-text="noItem" />
+          </div>
+        </transition>
+      </div>
+    </div>
+    <!-- </transition> -->
     <!-- <material-flow-btn :show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick" /> -->
     <!-- <common-download-modal v-model:show="isShowDownload" :music-info="selectedDownloadMusicInfo" teleport="#view" />
     <common-download-multiple-modal v-model:show="isShowDownloadMultiple" :list="selectedList" teleport="#view" @confirm="removeAllSelect" /> -->

src/renderer/views/Leaderboard/BoardList/index.vue

@@ -22,27 +22,33 @@
   />
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { watch, shallowReactive, ref } from '@common/utils/vueTools'
 import { getBoardsList, setBoard } from '@renderer/store/leaderboard/action'
-import { boards, type Board } from '@renderer/store/leaderboard/state'
+import { boards } from '@renderer/store/leaderboard/state'
 import useMenu from './useMenu'
 import { useRouter, useRoute } from '@common/utils/vueRouter'
 
-const props = defineProps<{
-  source: LX.OnlineSource
-  boardId?: string
-}>()
+const props = defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+  boardId: {
+    type: [String, undefined],
+    default: undefined,
+  },
+})
 
 const emit = defineEmits(['show-menu'])
 
 const router = useRouter()
 const route = useRoute()
 
-const list = shallowReactive<Board['list']>([])
+const list = shallowReactive([])
 const rightClickItemIndex = ref(-1)
 
-const handleToggleList = (id: string) => {
+const handleToggleList = (id) => {
   void router.replace({
     path: route.path,
     query: {
@@ -60,11 +66,11 @@ const {
   menuClick,
 } = useMenu({ emit, list })
 
-const handleRigthClick = (event: MouseEvent, index: number) => {
+const handleRigthClick = (event, index) => {
   rightClickItemIndex.value = index
   showMenu(event, index)
 }
-const handleMenuClick = (action?: { action: string }) => {
+const handleMenuClick = (action) => {
   if (rightClickItemIndex.value < 0) return
   let index = rightClickItemIndex.value
   rightClickItemIndex.value = -1

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

@@ -20,25 +20,34 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { watch, shallowReactive, ref, onMounted, onBeforeUnmount, computed, reactive } from '@common/utils/vueTools'
 import { setTags, getTags } from '@renderer/store/songList/action'
-import { tags, type TagInfoTypeItem } from '@renderer/store/songList/state'
+import { tags } from '@renderer/store/songList/state'
 import { useRouter, useRoute } from '@common/utils/vueRouter'
 import { useI18n } from '@renderer/plugins/i18n'
 
-const props = defineProps<{
-  source: LX.OnlineSource
-  tagId: string
-  sortId?: string
-}>()
+const props = defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+  tagId: {
+    type: String,
+    required: true,
+  },
+  sortId: {
+    type: [String, undefined],
+    default: undefined,
+  },
+})
 
 const router = useRouter()
 const route = useRoute()
 const t = useI18n()
 
-const list = shallowReactive<TagInfoTypeItem[]>([])
-const handleToggleTag = (id: string) => {
+const list = shallowReactive([])
+const handleToggleTag = (id) => {
   void router.replace({
     path: route.path,
     query: {
@@ -77,18 +86,18 @@ const popupStyle = reactive({
 const setTagPopupWidth = () => {
   window.setTimeout(() => {
     const dom_view = document.getElementById('view')
-    popupStyle.width = dom_view!.clientWidth * 0.96 + 'px'
-    popupStyle.maxHeight = dom_view!.clientHeight * 0.65 + 'px'
+    popupStyle.width = dom_view.clientWidth * 0.96 + 'px'
+    popupStyle.maxHeight = dom_view.clientHeight * 0.65 + 'px'
   }, 50)
 }
 
 const dom_btn = ref<HTMLElement | null>(null)
 const popupVisible = ref(false)
 const handleShow = () => popupVisible.value = !popupVisible.value
-const handleHide = (evt?: MouseEvent) => {
+const handleHide = (evt) => {
   // if (e && e.target.parentNode != this.$refs.dom_popup && this.show) return this.show = false
   // console.log(this.$refs)
-  if (evt && (evt.target == dom_btn.value || dom_btn.value?.contains(evt.target as HTMLElement))) return
+  if (evt && (evt.target == dom_btn.value || dom_btn.value?.contains(evt.target))) return
   setTimeout(() => {
     popupVisible.value = false
   }, 50)