feat： 播放器布局优化

Author: Taois

dashboard/src/components/players/ArtVideoPlayer.vue

@@ -837,7 +837,7 @@ const initArtPlayer = async (url) => {
       controls: [
         {
           position: 'right',
-          html: hasNextEpisode() ? '下一集' : '',
+          html: hasNextEpisode() ? '<span class="player-control-label" data-mobile="下">下一集</span>' : '',
           tooltip: hasNextEpisode() ? '播放下一集' : '',
           style: hasNextEpisode() ? {} : { display: 'none' },
           click: function () {
@@ -846,15 +846,15 @@ const initArtPlayer = async (url) => {
         },
         {
           position: 'right',
-          html: availableQualities.value.length > 1 ? `画质: ${getCurrentQualityLabel.value}` : '',
+          html: availableQualities.value.length > 1 ? `<span class="player-control-label" data-mobile="质">画质: ${getCurrentQualityLabel.value}</span>` : '',
           style: availableQualities.value.length > 1 ? {} : { display: 'none' },
           click: function () {
             toggleQualityLayer()
           },
         },
         {
           position: 'right',
-          html: props.episodes.length > 1 ? '选集' : '',
+          html: props.episodes.length > 1 ? '<span class="player-control-label" data-mobile="集">选集</span>' : '',
           tooltip: props.episodes.length > 1 ? '选择集数' : '',
           style: props.episodes.length > 1 ? {} : { display: 'none' },
           click: function () {
@@ -863,7 +863,7 @@ const initArtPlayer = async (url) => {
         },
         {
           position: 'right',
-          html: '关闭',
+          html: '<span class="player-control-label" data-mobile="关">关闭</span>',
           tooltip: '关闭播放器',
           click: function () {
             closePlayer()
@@ -1163,7 +1163,7 @@ const updateQualityControlText = () => {
         for (let i = 0; i < buttons.length; i++) {
           const button = buttons[i]
           if (button.innerHTML.includes('画质')) {
-            const newText = `画质: ${getCurrentQualityLabel.value}`
+            const newText = `<span class="player-control-label" data-mobile="质">画质: ${getCurrentQualityLabel.value}</span>`
             button.innerHTML = newText
             console.log('更新控制栏画质文本:', newText)
             return
@@ -2140,6 +2140,52 @@ onUnmounted(() => {
   color: #23ade5;
 }
 
+:deep(.player-control-label) {
+  display: inline-flex;
+  align-items: center;
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  :deep(.art-bottom) {
+    padding: 0 4px;
+  }
+
+  :deep(.art-controls),
+  :deep(.art-controls-left),
+  :deep(.art-controls-right) {
+    min-width: 0;
+  }
+
+  :deep(.art-controls-right) {
+    flex: 0 1 auto;
+    overflow: hidden;
+  }
+
+  :deep(.art-controls-right .art-control) {
+    flex: 0 0 34px;
+    width: 34px;
+    min-width: 34px;
+    padding: 0 4px;
+    font-size: 12px;
+  }
+
+  :deep(.art-controls-right .art-control .player-control-label) {
+    width: 22px;
+    justify-content: center;
+    font-size: 0;
+  }
+
+  :deep(.art-controls-right .art-control .player-control-label::before) {
+    content: attr(data-mobile);
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+
 /* ArtPlayer selector 弹层位置调整 */
 :deep(.art-selector) {
   bottom: 45px !important; /* 向上调整弹层位置，避免被遮挡 */

dashboard/src/components/players/PlayerHeader.vue

@@ -86,7 +86,7 @@
               :title="`${parser.name} (${parser.type === '1' ? 'JSON' : '嗅探'})`"
               :disabled="parser.type === '0' && !snifferEnabled"
             >
-              解析:{{ parser.name }}
+              解析 · {{ parser.name }}
               <span v-if="parser.type === '0' && !snifferEnabled" style="color: #ff4d4f; font-size: 10px;">
                 (需嗅探器)
               </span>
@@ -110,14 +110,14 @@
             class="compact-select"
             size="small"
           >
-            <a-option value="disabled" title="关闭代理播放功能">代理播放:关闭</a-option>
+            <a-option value="disabled" title="关闭代理播放功能">代理 · 关闭</a-option>
             <a-option 
               v-for="option in proxyOptions" 
               :key="option.value" 
               :value="option.value"
               :title="`${option.label}\n完整链接: ${option.url || option.value}`"
             >
-              代理播放:{{ option.label }}
+              代理 · {{ option.label }}
             </a-option>
           </a-select>
         </div>
@@ -145,7 +145,7 @@
               :value="quality.name"
               :title="`切换到${quality.name}画质`"
             >
-              画质:{{ quality.name }}
+              画质 · {{ quality.name }}
             </a-option>
           </a-select>
         </div>
@@ -690,49 +690,95 @@ onUnmounted(() => {
 @media (max-width: 768px) {
   .player-header {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
     gap: 8px;
+    padding: 8px 2px;
+    margin-bottom: 6px;
   }
-  
+
   .player-header h3 {
+    width: 100%;
     margin-right: 0;
-    font-size: 15px;
+    font-size: 14px;
+    line-height: 1.4;
   }
-  
+
+  .player-controls {
+    width: 100%;
+    min-width: 0;
+  }
+
   .compact-button-group {
-    flex-wrap: wrap;
     width: 100%;
-    justify-content: center;
+    justify-content: flex-start;
+    gap: 6px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 4px;
+    border-radius: 10px;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
   }
-  
+
+  .compact-button-group::-webkit-scrollbar {
+    display: none;
+  }
+
   .compact-btn {
-    flex: 1;
-    min-width: 80px;
+    flex: 0 0 auto;
+    min-width: 42px;
+    min-height: 32px;
     justify-content: center;
+    border-radius: 8px;
+    scroll-snap-align: start;
   }
-  
+
   .btn-text {
     display: none;
   }
-  
+
   .selector-btn {
-    flex: 2;
+    flex: 0 0 auto;
+    min-width: 136px;
   }
-  
+
   .compact-select {
-    min-width: 100px;
+    width: 136px;
+    min-width: 136px;
+  }
+
+  .compact-select :deep(.arco-select-view) {
+    height: 32px;
+    padding: 0 8px;
+    border-radius: 8px;
+  }
+
+  .compact-select :deep(.arco-select-view-value) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 @media (max-width: 480px) {
+  .compact-button-group {
+    margin: 0 -2px;
+  }
+
   .compact-btn {
-    padding: 4px 6px;
-    min-height: 26px;
+    padding: 4px 8px;
+    min-height: 32px;
   }
-  
+
   .btn-icon {
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .selector-btn,
+  .compact-select {
+    min-width: 142px;
+    width: 142px;
   }
 }
 </style>