From 740d9a2d69c8c44033b1517ba992b7edca40f933 Mon Sep 17 00:00:00 2001 From: Astrian Zheng Date: Sun, 25 May 2025 17:20:03 +1000 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B9=B6=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2=E5=A4=9A=E4=B8=AA=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BB=A5=E6=8F=90=E9=AB=98=E4=BB=A3=E7=A0=81=E5=A4=8D=E7=94=A8?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本次提交新增了多个图标组件，并在多个页面和组件中替换了原有的内联SVG代码。通过引入这些可复用的图标组件，提高了代码的可维护性和一致性。 --- src/App.vue | 21 ++++++-------- src/assets/icons/corg.vue | 15 ++++++++++ src/assets/icons/forward.vue | 15 ++++++++++ src/assets/icons/leftarrow.vue | 11 ++++++++ src/assets/icons/loadingindicator.vue | 20 ++++++++++++++ src/assets/icons/pause.vue | 13 +++++++++ src/assets/icons/play.vue | 15 ++++++++++ src/assets/icons/rewind.vue | 15 ++++++++++ src/assets/icons/search.vue | 11 ++++++++ src/assets/icons/shuffle.vue | 15 ++++++++++ src/assets/icons/starempty.vue | 15 ++++++++++ src/components/Player.vue | 29 ++++++------------- src/pages/AlbumDetail.vue | 28 +++++-------------- src/pages/Playroom.vue | 40 +++++++++++---------------- 14 files changed, 185 insertions(+), 78 deletions(-) create mode 100644 src/assets/icons/corg.vue create mode 100644 src/assets/icons/forward.vue create mode 100644 src/assets/icons/leftarrow.vue create mode 100644 src/assets/icons/loadingindicator.vue create mode 100644 src/assets/icons/pause.vue create mode 100644 src/assets/icons/play.vue create mode 100644 src/assets/icons/rewind.vue create mode 100644 src/assets/icons/search.vue create mode 100644 src/assets/icons/shuffle.vue create mode 100644 src/assets/icons/starempty.vue diff --git a/src/App.vue b/src/App.vue index a2e8ff3..e34fea6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,9 @@ + + \ No newline at end of file diff --git a/src/assets/icons/forward.vue b/src/assets/icons/forward.vue new file mode 100644 index 0000000..4e2963d --- /dev/null +++ b/src/assets/icons/forward.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/leftarrow.vue b/src/assets/icons/leftarrow.vue new file mode 100644 index 0000000..2b6d447 --- /dev/null +++ b/src/assets/icons/leftarrow.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/loadingindicator.vue b/src/assets/icons/loadingindicator.vue new file mode 100644 index 0000000..05351c8 --- /dev/null +++ b/src/assets/icons/loadingindicator.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/pause.vue b/src/assets/icons/pause.vue new file mode 100644 index 0000000..28451e3 --- /dev/null +++ b/src/assets/icons/pause.vue @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/play.vue b/src/assets/icons/play.vue new file mode 100644 index 0000000..3334db7 --- /dev/null +++ b/src/assets/icons/play.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/rewind.vue b/src/assets/icons/rewind.vue new file mode 100644 index 0000000..7ee4ca8 --- /dev/null +++ b/src/assets/icons/rewind.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/search.vue b/src/assets/icons/search.vue new file mode 100644 index 0000000..a37dff3 --- /dev/null +++ b/src/assets/icons/search.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/shuffle.vue b/src/assets/icons/shuffle.vue new file mode 100644 index 0000000..25511fd --- /dev/null +++ b/src/assets/icons/shuffle.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/starempty.vue b/src/assets/icons/starempty.vue new file mode 100644 index 0000000..e765ee4 --- /dev/null +++ b/src/assets/icons/starempty.vue @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/components/Player.vue b/src/components/Player.vue index 5f04221..02433b7 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -3,6 +3,10 @@ import { usePlayQueueStore } from '../stores/usePlayQueueStore' import { useTemplateRef, watch } from 'vue' import { useRoute } from 'vue-router' +import PlayIcon from '../assets/icons/play.vue' +import PauseIcon from '../assets/icons/pause.vue' +import LoadingIndicator from '../assets/icons/loadingindicator.vue' + const playQueueStore = usePlayQueueStore() const route = useRoute() const player = useTemplateRef('playerRef') @@ -114,28 +118,11 @@ function updateCurrentTime() { diff --git a/src/pages/AlbumDetail.vue b/src/pages/AlbumDetail.vue index c722a96..9e40313 100644 --- a/src/pages/AlbumDetail.vue +++ b/src/pages/AlbumDetail.vue @@ -6,6 +6,10 @@ import { usePlayQueueStore } from '../stores/usePlayQueueStore' import { artistsOrganize } from '../utils' import TrackItem from '../components/TrackItem.vue' +import PlayIcon from '../assets/icons/play.vue' +import StarEmptyIcon from '../assets/icons/starempty.vue' +import ShuffleIcon from '../assets/icons/shuffle.vue' + const album = ref() const route = useRoute() @@ -69,36 +73,18 @@ function playTheAlbum() { diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue index ae0ea48..f8a7b8f 100644 --- a/src/pages/Playroom.vue +++ b/src/pages/Playroom.vue @@ -7,6 +7,12 @@ import { onMounted } from 'vue' import { useTemplateRef } from 'vue' import { ref, watch } from 'vue' +import RewindIcon from '../assets/icons/rewind.vue' +import ForwardIcon from '../assets/icons/forward.vue' +import PlayIcon from '../assets/icons/play.vue' +import PauseIcon from '../assets/icons/pause.vue' +import LoadingIndicator from '../assets/icons/loadingindicator.vue' + const playQueueStore = usePlayQueueStore() gsap.registerPlugin(Draggable) @@ -83,7 +89,8 @@ function playPrevious() {