Merge pull request #146 from ZHANGTIANYAO1/fix/webui-icons-and-mobile-ux

WebUI：站点图标、移动端交互与扫码文案

web/index.html

@@ -22,6 +22,22 @@
        "same-origin" keeps the real Origin on same-origin requests, so CSRF passes. -->
   <meta name="referrer" content="same-origin">
   <title>TSMusicBot</title>
+  <!-- Icons live in web/public/ so Vite copies them to the dist root, which is
+       what Express serves (src/index.ts STATIC_DIR). Both an .ico and an .svg
+       are declared: browsers that understand the vector one prefer it and stay
+       sharp on hi-dpi tabs, the rest fall back to the .ico. The .ico also
+       answers the implicit /favicon.ico request — without a real file there the
+       SPA catch-all hands back index.html with a 200, so the tab silently keeps
+       the blank-page icon (issue #142). -->
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+  <!-- iOS home-screen icon; iOS masks the corners itself, so this one is a
+       full square. Android reads the manifest instead. -->
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <!-- Matches --bg-primary of the dark theme, which is what the app starts in
+       (stores/player.ts defaults to 'dark' and never follows the OS scheme). -->
+  <meta name="theme-color" content="#222222">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 </head>

web/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="22" fill="#335eea"/>
+  <g fill="#ffffff" transform="translate(48.46 51.1) scale(0.88) translate(-50 -50)">
+    <path d="M43.5 24 L86.5 15 L86.5 26 L43.5 35 Z"/>
+    <rect x="43.5" y="24" width="6" height="47"/>
+    <rect x="80.5" y="15" width="6" height="47"/>
+    <ellipse cx="32" cy="71" rx="15" ry="11.5" transform="rotate(-20 32 71)"/>
+    <ellipse cx="69" cy="62" rx="15" ry="11.5" transform="rotate(-20 69 62)"/>
+  </g>
+</svg>

web/public/site.webmanifest

@@ -0,0 +1,26 @@
+{
+  "name": "TSMusicBot",
+  "short_name": "TSMusicBot",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#222222",
+  "theme_color": "#222222",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

web/src/App.vue

@@ -9,9 +9,20 @@
     <Queue class="mobile-queue" :open="mobileQueueOpen" @close="mobileQueueOpen = false" />
 
     <!-- Mobile mini player -->
-    <div v-if="currentSong" class="m-player" @click="router.push('/lyrics')">
-      <div class="m-player-progress">
-        <div class="m-player-progress-fill" :style="{ width: mobileProgressPct + '%' }" />
+    <div v-if="currentSong" class="m-player" @click="onPlayerRowClick">
+      <div
+        ref="seekBarRef"
+        class="m-player-progress"
+        :class="{ 'no-seek': !canSeek, dragging: seeking }"
+        @pointerdown="onSeekDown"
+        @pointermove="onSeekMove"
+        @pointerup="onSeekUp"
+        @pointercancel="onSeekCancel"
+      >
+        <div class="m-player-progress-track">
+          <div class="m-player-progress-fill" :style="{ width: seekBarPct + '%' }" />
+          <div class="m-player-progress-thumb" :style="{ left: seekBarPct + '%' }" />
+        </div>
       </div>
       <CoverArt :url="currentSong.coverUrl" :size="40" :radius="8" />
       <div class="m-player-info">
@@ -79,7 +90,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import { usePlayerStore } from './stores/player.js';
@@ -132,15 +143,174 @@ let syncTimer: ReturnType<typeof setInterval> | null = null;
 let mobileRaf: number | null = null;
 
 function updateMobileProgress() {
-  const duration = currentSong.value?.duration ?? 0;
-  // liveElapsed() recomputes each frame; the cached `elapsed` getter would
-  // leave the mobile bar frozen between server pushes (#107).
-  mobileProgressPct.value = duration > 0
-    ? Math.min((playerStore.liveElapsed() / duration) * 100, 100)
-    : 0;
+  // While the finger owns the bar, the clock must keep its hands off it — see
+  // seekBarPct below. Skipping the write (rather than letting it be overridden)
+  // also avoids 60 pointless reactive re-renders per second mid-drag.
+  if (!seeking.value) {
+    const duration = currentSong.value?.duration ?? 0;
+    // liveElapsed() recomputes each frame; the cached `elapsed` getter would
+    // leave the mobile bar frozen between server pushes (#107).
+    mobileProgressPct.value = duration > 0
+      ? Math.min((playerStore.liveElapsed() / duration) * 100, 100)
+      : 0;
+  }
   mobileRaf = requestAnimationFrame(updateMobileProgress);
 }
 
+// --- Mini-player seek (#143) -------------------------------------------------
+// The mobile progress bar used to be display-only. It now supports tap-to-seek
+// and drag-to-seek via Pointer Events (one code path for touch, pen and mouse —
+// no mouse/touch handler pairs) with setPointerCapture, so the drag survives the
+// finger sliding off the 12px strip.
+//
+// Decoupling, exactly the reasoning of composables/useDecoupledSlider.ts (#111):
+// updateMobileProgress() rewrites the rendered percentage every animation frame
+// from the *server* clock, which is still the pre-seek position while the user
+// drags. Binding the bar straight to it would snap the fill back under the
+// finger ~60 times a second. So the rendered value is a computed that switches
+// its source: the finger while `seeking`, the clock otherwise.
+const seekBarRef = ref<HTMLElement | null>(null);
+const seeking = ref(false);
+const seekPct = ref(0);
+let seekPointerId: number | null = null;
+// The song the gesture started on. currentSong can advance mid-drag (the track
+// ends), and the ratio the finger picked means nothing against a different
+// song's duration.
+let seekSongId: string | null = null;
+// Bumped per gesture so a slow seek POST can't clear the override belonging to a
+// newer drag that started while it was still in flight.
+let seekGeneration = 0;
+// Timestamp of the last seek gesture end, used to swallow the trailing click
+// (see onPlayerRowClick).
+let seekEndedAt = 0;
+
+const seekBarPct = computed(() => (seeking.value ? seekPct.value : mobileProgressPct.value));
+
+/** Pointer x → 0..1 along the strip, or null when the element isn't measurable. */
+function seekRatio(e: PointerEvent): number | null {
+  const el = seekBarRef.value;
+  if (!el) return null;
+  const rect = el.getBoundingClientRect();
+  if (rect.width <= 0) return null;
+  return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+}
+
+/** Duration guard: live streams report 0/undefined and ratio*0 would seek to 0,
+ *  while a missing duration would produce NaN — which the API rejects with 400. */
+function seekableDuration(): number {
+  const duration = currentSong.value?.duration ?? 0;
+  return Number.isFinite(duration) && duration > 0 ? duration : 0;
+}
+
+// Drives the `no-seek` class as well as the gesture guard, so a bar that cannot
+// be seeked also gives `touch-action` back to the page — otherwise the strip
+// would be a 12px band that neither seeks nor scrolls.
+const canSeek = computed(() => canTransport.value && seekableDuration() > 0);
+
+function endSeekGesture() {
+  const el = seekBarRef.value;
+  if (el && seekPointerId !== null && el.hasPointerCapture?.(seekPointerId)) {
+    el.releasePointerCapture(seekPointerId);
+  }
+  seekPointerId = null;
+  seekEndedAt = Date.now();
+}
+
+function onSeekDown(e: PointerEvent) {
+  // Seeking is gated on transport, like the desktop player's `no-seek` state:
+  // without it the bar stays purely visual and taps fall through to the row.
+  if (!canSeek.value) return;
+  // One gesture at a time: a second finger landing on the strip would otherwise
+  // steal seekPointerId, leaving the first pointer captured forever and
+  // committing whichever finger happened to lift first.
+  if (seekPointerId !== null) return;
+  const ratio = seekRatio(e);
+  if (ratio === null) return;
+  // Never let the row's router.push('/lyrics') fire while the user is seeking.
+  e.stopPropagation();
+  e.preventDefault(); // suppress text selection / compat mouse events during the drag
+  seekPointerId = e.pointerId;
+  seekSongId = currentSong.value?.id ?? null;
+  seekGeneration += 1;
+  seekBarRef.value?.setPointerCapture?.(e.pointerId);
+  seeking.value = true;
+  seekPct.value = ratio * 100;
+}
+
+function onSeekMove(e: PointerEvent) {
+  if (!seeking.value || e.pointerId !== seekPointerId) return;
+  const ratio = seekRatio(e);
+  if (ratio === null) return;
+  e.stopPropagation();
+  seekPct.value = ratio * 100;
+}
+
+async function onSeekUp(e: PointerEvent) {
+  if (!seeking.value || e.pointerId !== seekPointerId) return;
+  e.stopPropagation();
+  // A tap never moves, so pointerup is also the commit point for tap-to-seek.
+  const ratio = seekRatio(e) ?? seekPct.value / 100;
+  seekPct.value = ratio * 100;
+  const duration = seekableDuration();
+  const generation = seekGeneration;
+  // If the track advanced while the finger was down, the ratio belongs to a
+  // song that is no longer playing — drop the seek rather than applying it to
+  // whatever started next.
+  const sameSong = currentSong.value?.id === seekSongId;
+  endSeekGesture(); // must run synchronously, before the awaited POST
+  try {
+    if (duration > 0 && sameSong) await playerStore.seek(ratio * duration);
+  } catch {
+    // Seek rejected (403/400/offline) — fall back to the server clock below.
+  } finally {
+    // Release the local override only once seek() has resolved. store.seek()
+    // moves its timing anchor to the requested position in the same tick, so
+    // liveElapsed() already reports the new spot and the bar simply carries on
+    // from where the finger left it. Releasing at pointerup instead would show
+    // the *old* position for one round-trip and then jump a second time.
+    // (_syncAfterAction re-polls 500ms later, but that only nudges the bar by
+    // the network delta — not worth freezing the clock for.)
+    if (generation === seekGeneration) seeking.value = false;
+  }
+}
+
+function onSeekCancel(e: PointerEvent) {
+  if (e.pointerId !== seekPointerId) return;
+  // Gesture stolen (system gesture, call, …): abandon without seeking and hand
+  // the bar straight back to the clock.
+  endSeekGesture();
+  seeking.value = false;
+}
+
+// The whole mini player lives inside `v-if="currentSong"`, so when playback
+// stops mid-drag the strip is destroyed and no pointerup/pointercancel can ever
+// reach it — element removal is not a pointercancel trigger. Without this the
+// `seeking` override would stay true and the progress bar would sit frozen for
+// the rest of the session. Bumping the generation also neuters the finally of
+// any seek still in flight.
+watch(currentSong, () => {
+  if (!seeking.value) return;
+  seekGeneration += 1;
+  seekPointerId = null;
+  seekSongId = null;
+  seeking.value = false;
+});
+
+function onPlayerRowClick() {
+  // Both a tap and a drag on the strip emit a trailing `click`, which would
+  // otherwise navigate to /lyrics the moment the user finishes seeking. A
+  // `@click.stop` on the strip is not enough: after a drag the click's target is
+  // the nearest common ancestor of the pointerdown/pointerup hit-tests, i.e.
+  // `.m-player` itself once the finger has left the 12px strip. So the row
+  // swallows any click arriving right after a seek gesture. A timestamp rather
+  // than a flag, so a gesture that produces no click at all (preventDefault,
+  // pointercancel) can't leave the row permanently unclickable — and so an inert
+  // strip (no transport permission, unknown duration) still falls through here
+  // and navigates, exactly as it did before.
+  if (Date.now() - seekEndedAt < 400) return;
+  router.push('/lyrics');
+}
+
 function toggleMobileVolume() {
   mobileVolumeOpen.value = !mobileVolumeOpen.value;
   if (mobileVolumeOpen.value) mobileQueueOpen.value = false;
@@ -242,15 +412,69 @@ onUnmounted(() => {
   top: 0;
   left: 10px;
   right: 10px;
+  // The visible track stays 2px, but 2px is not a touch target (#143), so the
+  // hit area is 12px and grows DOWNWARD into the mini player's own 8px top
+  // padding. It must not reach the transport buttons: they are 32px tall and
+  // centred in the 58px row's 42px content box, i.e. their top edge sits at
+  // 8 + (42 - 32) / 2 = 13px. 12px clears them by 1px. Growing upward is not an
+  // option — that is outside the player's rounded top edge.
+  height: 12px;
+  // Without this the browser claims the gesture for page scrolling partway
+  // through the drag and the pointermove stream stops.
+  touch-action: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+
+  // No transport permission → purely decorative (mirrors Player.vue's .no-seek).
+  // Handing touch-action back matters: an inert strip must not eat gestures.
+  &.no-seek {
+    touch-action: auto;
+  }
+}
+
+.m-player-progress-track {
+  position: relative;
+  // Nudged down inside the 12px hit area so the drag thumb, which is centred on
+  // the track, stays within the card instead of poking out above its top edge.
+  // The 8px thumb's box is (3 + 1 - 4) = 0 to 8, i.e. exactly flush with the
+  // card. (The container is absolutely positioned, so it forms a BFC and this
+  // margin cannot collapse through it.)
+  margin-top: 3px;
   height: 2px;
+  border-radius: 1px;
+  background: var(--border-color);
 }
 
 .m-player-progress-fill {
-  height: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
   background: var(--color-primary);
   border-radius: 1px;
 }
 
+.m-player-progress-thumb {
+  position: absolute;
+  top: 1px;
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  margin-left: -4px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+  pointer-events: none;
+}
+
+.m-player-progress.dragging .m-player-progress-thumb {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .m-player-info {
   flex: 1;
   min-width: 0;

web/src/components/Queue.vue

@@ -26,6 +26,7 @@
         :key="`${song.id}-${i}`"
         class="queue-item"
         :class="{ active: store.currentSong?.id === song.id }"
+        @click="onRowClick($event, i)"
         @dblclick="playAtIndex(i)"
       >
         <CoverArt :url="song.coverUrl" :size="32" :radius="4" />
@@ -33,7 +34,7 @@
           <div class="queue-song-name">{{ song.name }}</div>
           <div class="queue-song-artist">{{ song.artist }}</div>
         </div>
-        <button v-if="can('player.queue') || guestCan('removeClear')" class="remove-btn" @click="removeSong(i)" title="移除">
+        <button v-if="can('player.queue') || guestCan('removeClear')" class="remove-btn" @click.stop="removeSong(i)" title="移除">
           <Icon icon="mdi:close" />
         </button>
       </div>
@@ -72,6 +73,21 @@ async function playAtIndex(index: number) {
   await store.fetchQueue();
 }
 
+// Touch has no `dblclick`, so double-click-to-play was dead in the mobile queue
+// drawer (#143). Same per-event touch rule as SongCard.vue — see the full
+// rationale in the `isTouchClick` comment there. Permission gating stays in
+// playAtIndex(); the remove button uses @click.stop so it can't double-fire.
+function isTouchClick(e: MouseEvent): boolean {
+  const pointerType = (e as PointerEvent).pointerType;
+  if (pointerType) return pointerType === 'touch' || pointerType === 'pen';
+  return window.matchMedia?.('(pointer: coarse)').matches ?? false;
+}
+
+function onRowClick(e: MouseEvent, index: number) {
+  if (!isTouchClick(e)) return;
+  void playAtIndex(index);
+}
+
 async function removeSong(index: number) {
   if (!store.activeBotId) return;
   try {
@@ -205,4 +221,15 @@ async function clearAndStop() {
   color: var(--text-tertiary);
   &:hover { color: var(--text-primary); }
 }
+
+// Touch devices have no :hover, so the parent-hover-reveals-the-button pattern
+// leaves an *invisible but still tappable* remove button on the right edge of
+// every row. Now that a single tap on the row plays (#143), that invisible
+// target reads as "I tapped to play and it deleted the song" — show it, same as
+// .song-actions in SongCard.vue.
+@media (pointer: coarse) {
+  .remove-btn {
+    opacity: 1;
+  }
+}
 </style>

web/src/components/SongCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="song-card" :class="{ active }" @dblclick="showPlay && $emit('play')">
+  <div class="song-card" :class="{ active }" @click="onRowClick" @dblclick="showPlay && $emit('play')">
     <div class="song-index">{{ index }}</div>
     <CoverArt :url="song.coverUrl" :size="36" :radius="6" />
     <div class="song-info">
@@ -51,12 +51,41 @@ const showPlay = computed(() => can('player.control') || guestCan('playNow'));
 const showPlayNext = computed(() => can('player.control') || guestCan('playNext'));
 const showAdd = computed(() => can('player.queue') || guestCan('addToQueue'));
 
-defineEmits<{
+const emit = defineEmits<{
   play: [];
   playNext: [];
   add: [];
 }>();
 
+/**
+ * Was this click made with a finger/stylus rather than a mouse? (#143)
+ *
+ * `dblclick` is mouse-only and never fires on touch, so double-tap-to-play was
+ * simply dead on phones. A single *tap* plays instead, while a single mouse
+ * click must keep doing nothing — otherwise desktop behaviour changes and the
+ * surviving dblclick would fire play twice.
+ *
+ * The check is per-EVENT, not per-device: a `click` is a PointerEvent in modern
+ * browsers, so pointerType describes how *this* click was made. A global
+ * matchMedia('(pointer: coarse)') check reports only the *primary* pointer and
+ * is therefore wrong on hybrid laptops (touchscreen + trackpad); it is used only
+ * as a fallback for browsers that give us no pointerType.
+ */
+function isTouchClick(e: MouseEvent): boolean {
+  const pointerType = (e as PointerEvent).pointerType;
+  if (pointerType) return pointerType === 'touch' || pointerType === 'pen';
+  return window.matchMedia?.('(pointer: coarse)').matches ?? false;
+}
+
+// Listening on `click` rather than `pointerup` on purpose: the browser already
+// suppresses the click that ended a scroll gesture, so a tap that was really the
+// start of a flick can't hijack playback for everyone in the channel.
+// (The action buttons stop propagation, so they never double-fire this.)
+function onRowClick(e: MouseEvent) {
+  if (!showPlay.value || !isTouchClick(e)) return;
+  emit('play');
+}
+
 function formatDuration(seconds: number): string {
   const m = Math.floor(seconds / 60);
   const s = seconds % 60;

web/src/views/Settings.vue

@@ -387,7 +387,7 @@
             <img :src="qqQr.dataUrl" class="qr-image" alt="QR Code" />
             <div class="qr-status" :class="qqQr.status">
               <template v-if="qqQr.status === 'waiting'">
-                <Icon icon="mdi:cellphone" /> 请使用QQ音乐APP扫码
+                <Icon icon="mdi:cellphone" /> 请使用手机QQ扫码
               </template>
               <template v-else-if="qqQr.status === 'scanned'">
                 <Icon icon="mdi:check" /> 已扫码，请在手机上确认