up

src/components/GameScreensPanel.vue

@@ -111,31 +111,51 @@ function uploadTrack(options: { file: UploadFileInfo }) {
           class="track-row"
           :class="{ 'track-row-active': index === (props.music.trackIndex ?? 0) }"
         >
-          <n-button class="track-main" text @click="emit('setMusic', { trackIndex: index, positionMs: 0 })">
+          <div class="track-main">
+            <span class="track-number">{{ index + 1 }}</span>
             <span class="track-details">
               <span class="track-name">{{ track.name || track.filename || `Трек ${index + 1}` }}</span>
               <span class="track-filename">{{ track.filename }}</span>
             </span>
-          </n-button>
-          <n-button size="small" type="error" ghost @click="emit('deleteTrack', track.ID!)">
-            Удалить
-          </n-button>
+          </div>
+          <n-flex align="center" class="track-actions">
+            <n-tag v-if="index === (props.music.trackIndex ?? 0)" type="success" size="small">
+              {{ props.music.playback === 'MUSIC_PLAYBACK_PLAYING' ? 'Играет' : 'Выбран' }}
+            </n-tag>
+            <n-button
+              v-else
+              size="small"
+              type="primary"
+              ghost
+              @click="emit('setMusic', { trackIndex: index, positionMs: 0 })"
+            >
+              Включить
+            </n-button>
+            <n-button size="small" type="error" ghost @click="emit('deleteTrack', track.ID!)">
+              Удалить
+            </n-button>
+          </n-flex>
         </div>
       </div>
       <n-button size="small" @click="emit('setMusic', { playback: 'MUSIC_PLAYBACK_PLAYING' })">Старт</n-button>
       <n-button size="small" @click="emit('setMusic', { playback: 'MUSIC_PLAYBACK_PAUSED' })">Пауза</n-button>
       <n-button size="small" @click="emit('setMusic', { playback: 'MUSIC_PLAYBACK_STOPPED', positionMs: 0 })">Стоп</n-button>
-      <n-input-number
-        :value="props.music?.volume"
-        :min="0"
-        :max="100"
-        :step="5"
-        size="small"
-        style="width: 110px"
-        @update:value="(value) => value != null && emit('setMusic', { volume: value })"
-      >
-        <template #prefix>Громкость</template>
-      </n-input-number>
+      <div class="volume-control">
+        <span class="volume-label">Громкость</span>
+        <n-input-number
+          :value="props.music?.volume ?? 100"
+          :min="0"
+          :max="100"
+          :step="5"
+          size="small"
+          :show-button="true"
+          aria-label="Громкость музыки"
+          class="volume-input"
+          @update:value="(value) => value != null && emit('setMusic', { volume: value })"
+        >
+          <template #suffix>%</template>
+        </n-input-number>
+      </div>
       <n-switch
         :value="props.music?.loop"
         :round="false"
@@ -167,6 +187,20 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   margin: 8px 0;
 }
 
+.volume-control {
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+}
+
+.volume-label {
+  white-space: nowrap;
+}
+
+.volume-input {
+  width: 96px;
+}
+
 .screen-row {
   align-items: center;
   border-top: 1px solid rgb(255 255 255 / 10%);
@@ -194,6 +228,7 @@ function uploadTrack(options: { file: UploadFileInfo }) {
 .track-list {
   flex-basis: 100%;
   margin-top: 8px;
+  padding: 0 8px;
 }
 
 .track-empty {
@@ -207,18 +242,27 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   display: flex;
   gap: 8px;
   justify-content: space-between;
-  padding: 8px 0;
+  min-height: 56px;
+  padding: 12px 8px;
 }
 
 .track-row-active {
-  background: rgb(255 255 255 / 5%);
+  background: rgb(255 255 255 / 12%);
 }
 
 .track-main {
+  align-items: center;
+  display: flex;
   flex: 1;
-  justify-content: flex-start;
   overflow: hidden;
-  text-align: left;
+  padding-left: 8px;
+}
+
+.track-number {
+  color: #aaa;
+  flex: 0 0 28px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
 }
 
 .track-details {
@@ -240,4 +284,45 @@ function uploadTrack(options: { file: UploadFileInfo }) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.track-actions {
+  flex: 0 0 auto;
+}
+
+@media (width < 1024px) {
+  .track-list {
+    padding: 0;
+  }
+
+  .track-row {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .track-main {
+    padding-left: 0;
+    width: 100%;
+  }
+
+  .track-actions {
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .track-actions .n-button {
+    flex: 1;
+  }
+
+  .volume-control {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .volume-input {
+    flex: 1;
+    width: auto;
+  }
+}
 </style>