From 0f013aa3b64f095999b4c24385510519b4447fb7 Mon Sep 17 00:00:00 2001
From: Discreater <discreater@163.com>
Date: Fri, 10 Nov 2023 02:09:47 +0800
Subject: [PATCH] chore: refactor music  table render

---
 src/components/Navigator.vue    |  4 ++--
 src/components/QHoverButton.vue |  6 +++---
 src/components/QInput.vue       |  2 +-
 src/pages/main/MusicLib.vue     | 10 ++++++----
 src/pages/main/PlayQueue.vue    |  4 +++-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index d8aef60..af7cecf 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -97,7 +97,7 @@ const inTauri = getPlatform() === 'tauri';
       @keyup.enter="search"
     >
       <template #extra>
-        <QHoverButton size="small" :disabled="!searchText" @click="search">
+        <QHoverButton size="custom" :disabled="!searchText" @click="search">
           <IconSearch clip="text-xs" />
         </QHoverButton>
       </template>
@@ -120,7 +120,7 @@ const inTauri = getPlatform() === 'tauri';
       :placeholder="t('nav.search')" @keyup.enter="search"
     >
       <template #extra>
-        <QHoverButton size="small" :disabled="!searchText" @click="search">
+        <QHoverButton size="custom" :disabled="!searchText" @click="search">
           <IconSearch text="text-xs" />
         </QHoverButton>
       </template>
diff --git a/src/components/QHoverButton.vue b/src/components/QHoverButton.vue
index eddbc36..94866a7 100644
--- a/src/components/QHoverButton.vue
+++ b/src/components/QHoverButton.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-type Size = 'small' | 'normal';
+type Size = 'custom' | 'fixed';
 
 type Cursor = 'default' | 'pointer';
 
 const props = withDefaults(defineProps<{ disabled?: boolean; size?: Size; cursor?: Cursor }>(), {
   disabled: false,
-  size: 'normal',
+  size: 'fixed',
   cursor: 'default',
 });
 
-const buttonClass = props.size === 'small' ? 'my-0.5' : 'h-10 w-10';
+const buttonClass = props.size === 'custom' ? 'my-0.5' : 'h-10 w-10';
 </script>
 
 <template>
diff --git a/src/components/QInput.vue b/src/components/QInput.vue
index acc132a..4fc97f2 100644
--- a/src/components/QInput.vue
+++ b/src/components/QInput.vue
@@ -39,7 +39,7 @@ function clear() {
       @focusout="focus = false"
       @input="onValueChange($event)"
     >
-    <QHoverButton v-if="showValue" size="small" @click="clear()">
+    <QHoverButton v-if="showValue" size="custom" @click="clear()">
       <IconDismiss class="text-xs" />
     </QHoverButton>
     <slot name="extra" />
diff --git a/src/pages/main/MusicLib.vue b/src/pages/main/MusicLib.vue
index a055393..ad67c19 100644
--- a/src/pages/main/MusicLib.vue
+++ b/src/pages/main/MusicLib.vue
@@ -109,13 +109,15 @@ function handleTitleClick(track: Track) {
       <template #bodyCell="{ column, row, rowIdx }">
         <template v-if="column.key === 'actions'">
           <div class="flex">
-            <QButton class="text-passion" @click="playByIdx(rowIdx)">
-              <IconPlay />
-            </QButton>
+            <QHoverButton size="custom" class="text-passion h-8 w-8" @click="playByIdx(rowIdx)">
+              <IconPlay class="text-base" />
+            </QHoverButton>
           </div>
         </template>
         <template v-else-if="column.key === 'title'">
-          <QHoverButton :text="row.title" class="hover:text-passion text-left" @click="handleTitleClick(row)" />
+          <QHoverButton size="custom" class="hover:text-passion text-left" @click="handleTitleClick(row)">
+            {{ row.title }}
+          </QHoverButton>
         </template>
         <template v-else-if="column.key === 'artist'">
           <div>
diff --git a/src/pages/main/PlayQueue.vue b/src/pages/main/PlayQueue.vue
index 3091d4b..911fe84 100644
--- a/src/pages/main/PlayQueue.vue
+++ b/src/pages/main/PlayQueue.vue
@@ -47,7 +47,9 @@ const columns: Column[] = [
     <QTable :columns="columns" :data="views">
       <template #bodyCell="{ column, row, rowIdx }">
         <template v-if="column.key === 'actions'">
-          <QHoverButton :icon="IconPlay" class="text-passion" @click="playByIdx(rowIdx)" />
+          <QHoverButton size="custom" class="text-passion h-8 w-8" @click="playByIdx(rowIdx)">
+            <IconPlay class="text-base" />
+          </QHoverButton>
         </template>
         <template v-else-if="column.key === 'title'">
           {{ row.title }}