UI for music playback

src/view/mainWindow/Guide.vue

@@ -36,21 +36,6 @@
             </div>
           </div>
           
-          <!-- 卡片3: 单击操作（Rock手势） -->
-          <div class="card">
-            <div class="card-icon">
-              <div class="icon-circle">
-                <span class="icon-symbol">🤘</span>
-              </div>
-            </div>
-            <div class="card-content">
-              <h3 class="card-title">{{ $t('单击操作') }}</h3>
-              <p class="card-description">{{ $t('Rock手势执行鼠标单击') }}</p>
-              <div class="card-extra">
-              </div>
-            </div>
-          </div>
-          
           <!-- 卡片4: 滚动控制 -->
           <div class="card">
             <div class="card-icon">
@@ -126,7 +111,7 @@
           <div class="card">
             <div class="card-icon">
               <div class="icon-circle">
-                <span class="icon-symbol">🎤</span>
+                <span class="icon-symbol">🤙</span>
               </div>
             </div>
             <div class="card-content">
@@ -205,6 +190,52 @@
             </div>
           </div>
 
+
+          <!-- 音乐控制手势标题 -->
+          <div style="grid-column: span 3; font-weight: bold; color: #333;">
+            🎵 {{ $t("音乐播放手势") }}
+          </div>
+
+          <!-- 卡片13: 上一首 -->
+          <div class="card">
+            <div class="card-icon">
+              <div class="icon-circle">
+                <span class="icon-symbol">⏪️</span>
+              </div>
+            </div>
+            <div class="card-content">
+              <h3 class="card-title">{{ $t('上一首') }}</h3>
+              <p class="card-description">{{ $t('大拇指向左表示上一首') }}</p>
+            </div>
+          </div>
+
+          <!-- 卡片14: 下一首 -->
+          <div class="card">
+            <div class="card-icon">
+              <div class="icon-circle">
+                <span class="icon-symbol">⏩️</span>
+              </div>
+            </div>
+            <div class="card-content">
+              <h3 class="card-title">{{ $t('下一首') }}</h3>
+              <p class="card-description">{{ $t('大拇指向右表示下一首') }}</p>
+            </div>
+          </div>
+
+          <!-- 卡片15: 暂停/播放 -->
+          <div class="card">
+            <div class="card-icon">
+              <div class="icon-circle">
+                <span class="icon-symbol">⏯️</span>
+              </div>
+            </div>
+            <div class="card-content">
+              <h3 class="card-title">{{ $t('暂停/播放') }}</h3>
+              <p class="card-description">{{ $t('比耶手势用于暂停或播放音乐') }}</p>
+            </div>
+          </div>
+
+
         </div>
       </n-card>
     </div>

src/view/mainWindow/Home.vue

@@ -105,9 +105,9 @@
             </div>
 
             <div class="gesture-item">
-              <div class="gesture-icon">🤘</div>
-              <div class="gesture-name">Rock 手势点击</div>
-              <div class="gesture-action">Rock手势执行鼠标单击</div>
+              <div class="gesture-icon">🤙</div>
+              <div class="gesture-name">六指手势</div>
+              <div class="gesture-action">六指手势开始语音识别</div>
             </div>
 
             <div class="gesture-item">