From 2fb0cd24891f59b020467cf4b6ba536f95e52606 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E6=A2=93=E5=96=B5=5F=E3=81=82=E3=81=9A=E3=81=AB?=
 =?UTF-8?q?=E3=82=83=E3=82=93?= <heifetzbravo123@hotmail.com>
Date: Sun, 26 Apr 2026 23:07:48 +0800
Subject: [PATCH] =?UTF-8?q?issue=20#39:=20web=E5=A2=9E=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E9=94=AE=E6=B8=85=E7=A9=BA=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Queue.vue | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/web/src/components/Queue.vue b/web/src/components/Queue.vue
index 83356b1..ee5a9e1 100644
--- a/web/src/components/Queue.vue
+++ b/web/src/components/Queue.vue
@@ -3,6 +3,14 @@
     <div class="queue-header">
       <h3 class="queue-title">播放队列</h3>
       <span class="queue-count">{{ botQueue.length }} 首</span>
+      <button 
+        v-if="botQueue.length > 0"
+        class="clear-btn" 
+        @click="clearAndStop" 
+        title="清空队列并停止播放"
+      >
+        <Icon icon="mdi:stop-circle-outline" />
+      </button>
       <button class="close-btn" @click="$emit('close')">
         <Icon icon="mdi:close" />
       </button>
@@ -70,6 +78,15 @@ async function removeSong(index: number) {
     // Ignore
   }
 }
+
+async function clearAndStop() {
+  try {
+    await store.stop();
+    await store.fetchQueue();
+  } catch {
+    // Ignore
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -117,6 +134,14 @@ async function removeSong(index: number) {
   &:hover { opacity: 1; }
 }
 
+.clear-btn {
+  font-size: 18px;
+  opacity: 0.6;
+  transition: opacity var(--transition-fast);
+  color: var(--text-primary);
+  &:hover { opacity: 1; }
+}
+
 .queue-empty {
   padding: 40px 20px;
   text-align: center;