feat(ui): 优化标签样式并添加播放状态高亮效果

- 重构标签HTML结构，添加.tag-text容器
- 为当前播放标签添加旋转渐变边框效果
- 调整标签尺寸和内边距
- 添加控制台日志输出当前播放数据
- 更新VSCode端口配置

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

song-request-station.html

@@ -47,7 +47,9 @@
                         <div class="fill-item" v-for="(item, index) in tagsFill" :key="index" :class="[`item${ item.type }`]"></div>
                     </div>
                     <div class="list" id="bubbleContainer" ref="container">
-                        <div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">{{ item.tag }}</div>
+                        <div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred},{'show': playData?.tag == item.tag}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">
+                            <div class="tag-text">{{ item.tag }}</div>
+                        </div>
                     </div>
                 </div>
 

static/css/song-request-station.css

@@ -300,51 +300,89 @@
   border-radius: 18px;
 }
 .tag-item {
-  height: 60px;
+  height: 66px;
-  line-height: 60px;
   border-radius: 12px;
-  background: #d5e7f7;
   position: absolute;
   font-size: 20px !important;
   color: #1c3e5e;
-  padding: 0 25px;
   width: fit-content;
   cursor: pointer;
-  box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+  background: rgba(255, 255, 255, 0.223529);
   opacity: 1 !important;
+  padding: 3px;
+}
+.tag-item.show::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
+  animation: bg 1.3s infinite linear;
+}
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes bg {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+.tag-item .tag-text {
+  background: #d5e7f7;
+  padding: 0 25px;
+  border-radius: 10px;
+  height: 100%;
+  display: flex;
+  align-items: center;
   transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+  position: relative;
+  z-index: 1;
 }
 .tag-item:hover {
   font-weight: 650;
   color: #583a05 !important;
-  background: #f19a04 !important;
   z-index: 100 !important;
 }
+.tag-item:hover .tag-text {
+  background: #f19a04 !important;
+}
 .tag-item.item2 {
-  height: 50px;
+  height: 56px;
-  line-height: 50px;
   color: #1c3e5e;
-  padding: 0 20px;
   font-size: 18px !important;
+}
+.tag-item.item2 .tag-text {
+  padding: 0 20px;
   background: #d5e7f7;
 }
 .tag-item.item3 {
-  height: 47px;
+  height: 53px;
-  line-height: 47px;
   color: #1c3e5e;
-  padding: 0 16px;
   font-size: 16px !important;
+}
+.tag-item.item3 .tag-text {
+  padding: 0 16px;
   background: #d5e7f7;
 }
 .tag-item.item4 {
-  height: 30px;
+  height: 36px;
-  line-height: 30px;
   color: #1c3e5e;
-  padding: 0 10px;
   font-size: 14px !important;
+}
+.tag-item.item4 .tag-text {
+  padding: 0 10px;
   background: #d5e7f7;
 }
-.tag-item.red {
+.tag-item.red .tag-text {
   color: #62263c !important;
   background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
 }

static/css/song-request-station.less

@@ -356,70 +356,111 @@
 }
 
 .tag-item {
-    height: 60px;
+    height: 66px;
-    line-height: 60px;
+    // line-height: 60px;
-    // border-radius: 30px;
     border-radius: 12px;
-    background: #d5e7f7;
+    // background: #d5e7f7;
     position: absolute;
     font-size: 20px !important;
     color: #1c3e5e;
-    padding: 0 25px;
     width: fit-content;
     cursor: pointer;
-    box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+    // box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
+    background: rgba(255, 255, 255, 0.223529);
     opacity: 1 !important;
+    // transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+    padding: 3px;
+
+    &.show::after {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 12px;
+
+        background: linear-gradient(var(--rotate), #db4743, #ffffff 43%, #c28846);
+        animation: bg 1.3s infinite linear;
+    }
+
+    @property --rotate {
+        syntax: "<angle>";
+        initial-value: 0deg;
+        inherits: false;
+    }
+
+    @keyframes bg {
+        0% {
+            --rotate: 0deg;
+        }
+
+        100% {
+            --rotate: 360deg;
+        }
+    }
+
+    .tag-text {
+        background: #d5e7f7;
+        padding: 0 25px;
+        border-radius: 10px;
+        height: 100%;
+        display: flex;
+        align-items: center;
         transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
+        position: relative;
+        z-index: 1;
+    }
 
     &:hover {
         font-weight: 650;
         color: #583a05 !important;
-        background: rgba(241, 154, 4, 1) !important;
         z-index: 100 !important;
+        .tag-text {
+            background: rgba(241, 154, 4, 1) !important;
+        }
     }
 
     &.item2 {
-        height: 50px;
+        height: 56px;
-        line-height: 50px;
-        // border-radius: 25px;
         color: #1c3e5e;
-        padding: 0 20px;
         font-size: 18px !important;
+
+        .tag-text {
+            padding: 0 20px;
             background: #d5e7f7;
         }
+    }
 
     &.item3 {
-        height: 47px;
+        height: 53px;
-        line-height: 47px;
-        // border-radius: 25px;
         color: #1c3e5e;
-        padding: 0 16px;
         font-size: 16px !important;
+
+        .tag-text {
+            padding: 0 16px;
             background: #d5e7f7;
         }
+    }
 
     &.item4 {
-        height: 30px;
+        height: 36px;
-        line-height: 30px;
-        // border-radius: 30px;
         color: #1c3e5e;
-        padding: 0 10px;
         font-size: 14px !important;
+
+        .tag-text {
+            padding: 0 10px;
             background: #d5e7f7;
         }
+    }
 
     &.red {
+        .tag-text {
             color: #62263c !important;
             background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
         }
-
+    }
-    // &.red:hover {
-    //     font-weight: 650;
-    //     color: #583a05 !important;
-    //     // background-color: rgba(241, 154, 4, 1) !important;
-    //     background-color: rgb(255, 255, 255) !important;
-    //     z-index: 100 !important;
-    // }
 }
 
 .bottom-play {

static/js/song-request-station.js

@@ -404,6 +404,8 @@ createApp({
             setTimeout(() => {
                 if (audio?.src != item.path) audio.src = `./static/mp3/station/${item.path}`;
                 audio.play().then(() => (playData.value = { ...item, state: true }));
+
+                console.log("playData.value", playData.value);
             }, 500);
         };