From 0b10f9553c3d717e1fc86c43a305dbeabec83b20 Mon Sep 17 00:00:00 2001 From: saopig1 <4x7sw862st@gmail.com> Date: Fri, 17 Jul 2026 01:29:00 +0800 Subject: [PATCH] feat(#119): saved queues web UI + behavior-settings toggles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Settings → 行为设置: two new toggles (保存/加载播放清单, 单曲直接播放不清空队列) that round-trip savedQueuesEnabled / playKeepsQueue and keep the nav gate in sync. - New "已存队列" page (/saved-queues): save the current queue (with a 共享 option), load (replace) / append / delete saved queues; renders a "feature disabled" state on 403 so it degrades gracefully when the flag is off. - Nav entry gated on the savedQueuesEnabled store flag (hidden for guests). - useSavedQueues API composable + a pure, unit-tested list/ownership helper. Co-Authored-By: Claude Fable 5 --- web/src/App.vue | 3 + web/src/components/Navbar.vue | 6 + web/src/composables/savedQueues.test.ts | 34 +++ web/src/composables/savedQueues.ts | 27 +++ web/src/composables/useSavedQueues.ts | 52 ++++ web/src/router/index.ts | 1 + web/src/stores/player.ts | 16 ++ web/src/views/SavedQueues.vue | 301 ++++++++++++++++++++++++ web/src/views/Settings.vue | 48 ++++ 9 files changed, 488 insertions(+) create mode 100644 web/src/composables/savedQueues.test.ts create mode 100644 web/src/composables/savedQueues.ts create mode 100644 web/src/composables/useSavedQueues.ts create mode 100644 web/src/views/SavedQueues.vue diff --git a/web/src/App.vue b/web/src/App.vue index ea8c0e9..17cced8 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -166,6 +166,9 @@ onMounted(async () => { // Search or Playlist render hearts correctly without first visiting Home. // (fire-and-forget; fetchFavorites swallows the 401 when not yet logged in.) playerStore.fetchFavorites(); + // Non-critical: reads savedQueuesEnabled so the nav entry can show/hide. + // Guests get a 403 (swallowed) → the entry stays hidden for them. + if (!session.isGuest.value) playerStore.fetchBotSettings(); syncTimer = setInterval(() => playerStore.syncElapsed(), 3000); mobileRaf = requestAnimationFrame(updateMobileProgress); // Reconcile the dedicated-link scope only after the bot list is known: the diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue index 67bbc85..28f9b19 100644 --- a/web/src/components/Navbar.vue +++ b/web/src/components/Navbar.vue @@ -7,6 +7,12 @@ 搜索 音乐库 播放历史 + 已存队列
diff --git a/web/src/composables/savedQueues.test.ts b/web/src/composables/savedQueues.test.ts new file mode 100644 index 0000000..9d89633 --- /dev/null +++ b/web/src/composables/savedQueues.test.ts @@ -0,0 +1,34 @@ +import { describe, it, expect } from 'vitest'; +import { isShared, sortQueues, SHARED_OWNER, type SavedQueueMeta } from './savedQueues'; + +const meta = (over: Partial): SavedQueueMeta => ({ + id: 1, + ownerId: 'u1', + name: 'q', + songCount: 0, + createdAt: '2026-01-01', + updatedAt: '2026-01-01', + ...over, +}); + +describe('savedQueues helper', () => { + it('flags the shared owner', () => { + expect(isShared({ ownerId: SHARED_OWNER })).toBe(true); + expect(isShared({ ownerId: 'u1' })).toBe(false); + }); + + it('sorts by updatedAt descending (newest first)', () => { + const out = sortQueues([ + meta({ id: 1, updatedAt: '2026-01-01' }), + meta({ id: 2, updatedAt: '2026-02-01' }), + meta({ id: 3, updatedAt: '2026-01-15' }), + ]); + expect(out.map((q) => q.id)).toEqual([2, 3, 1]); + }); + + it('does not mutate the input array', () => { + const input = [meta({ id: 1, updatedAt: '2026-01-01' }), meta({ id: 2, updatedAt: '2026-02-01' })]; + sortQueues(input); + expect(input.map((q) => q.id)).toEqual([1, 2]); + }); +}); diff --git a/web/src/composables/savedQueues.ts b/web/src/composables/savedQueues.ts new file mode 100644 index 0000000..65b7a04 --- /dev/null +++ b/web/src/composables/savedQueues.ts @@ -0,0 +1,27 @@ +// Pure, framework-free helpers for the Saved Queues feature (#119). Kept +// separate from the API composable so the list/ownership logic is unit-testable +// without a DOM or axios. + +export interface SavedQueueMeta { + id: number; + ownerId: string; + name: string; + songCount: number; + createdAt: string; + updatedAt: string; +} + +/** Must match SHARED_QUEUE_OWNER in src/data/database.ts. */ +export const SHARED_OWNER = '__shared__'; + +/** Whether a saved queue lives in the shared bucket (vs. private to a user). */ +export function isShared(q: Pick): boolean { + return q.ownerId === SHARED_OWNER; +} + +/** Newest-updated first; stable for equal timestamps. */ +export function sortQueues(qs: T[]): T[] { + return [...qs].sort((a, b) => + a.updatedAt < b.updatedAt ? 1 : a.updatedAt > b.updatedAt ? -1 : 0, + ); +} diff --git a/web/src/composables/useSavedQueues.ts b/web/src/composables/useSavedQueues.ts new file mode 100644 index 0000000..03f4fb2 --- /dev/null +++ b/web/src/composables/useSavedQueues.ts @@ -0,0 +1,52 @@ +import { ref } from 'vue'; +import axios from 'axios'; +import { sortQueues, type SavedQueueMeta } from './savedQueues.js'; + +/** + * API composable for the Saved Queues feature (#119). Wraps /api/saved-queues. + * `disabled` becomes true when the server returns 403 (savedQueuesEnabled off), + * so the page can render a "feature disabled" state instead of an error. + */ +export function useSavedQueues() { + const queues = ref([]); + const loading = ref(false); + const disabled = ref(false); + const error = ref(null); + + async function list(): Promise { + loading.value = true; + error.value = null; + try { + const res = await axios.get('/api/saved-queues'); + queues.value = sortQueues((res.data?.queues ?? []) as SavedQueueMeta[]); + disabled.value = false; + } catch (e: unknown) { + const status = (e as { response?: { status?: number } })?.response?.status; + if (status === 403) { + disabled.value = true; + queues.value = []; + } else { + error.value = '加载已保存队列失败'; + } + } finally { + loading.value = false; + } + } + + async function save(botId: string, name: string, shared: boolean): Promise { + await axios.post('/api/saved-queues', { botId, name, shared }); + await list(); + } + + async function load(id: number, botId: string, mode: 'replace' | 'append'): Promise<{ loaded: number; mode: string }> { + const res = await axios.post(`/api/saved-queues/${id}/load`, { botId, mode }); + return res.data; + } + + async function remove(id: number): Promise { + await axios.delete(`/api/saved-queues/${id}`); + await list(); + } + + return { queues, loading, disabled, error, list, save, load, remove }; +} diff --git a/web/src/router/index.ts b/web/src/router/index.ts index ad1e49d..03d3b31 100644 --- a/web/src/router/index.ts +++ b/web/src/router/index.ts @@ -22,6 +22,7 @@ const router = createRouter({ }, { path: '/lyrics', name: 'lyrics', component: () => import('../views/Lyrics.vue') }, { path: '/history', name: 'history', component: () => import('../views/History.vue') }, + { path: '/saved-queues', name: 'saved-queues', component: () => import('../views/SavedQueues.vue') }, { path: '/settings', name: 'settings', component: () => import('../views/Settings.vue') }, { path: '/setup', name: 'setup', component: () => import('../views/Setup.vue') }, { path: '/bot/:id', name: 'bot', component: () => import('../views/BotRedirect.vue') }, diff --git a/web/src/stores/player.ts b/web/src/stores/player.ts index 3970199..dfc6ac4 100644 --- a/web/src/stores/player.ts +++ b/web/src/stores/player.ts @@ -115,6 +115,10 @@ export const usePlayerStore = defineStore('player', { enabledProviders: [] as string[], defaultSource: 'netease' as string, + // Whether the admin enabled save/load queues (#119). Gates the nav entry + // and the /saved-queues page. Fetched from /api/bot/settings (non-guest). + savedQueuesEnabled: false, + // Home page cache, split by source recommendPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[], kugou: [] as PlaylistItem[], spotify: [] as PlaylistItem[] }, dailySongs: { netease: [] as Song[], qq: [] as Song[], kugou: [] as Song[], spotify: [] as Song[] }, @@ -595,6 +599,18 @@ export const usePlayerStore = defineStore('player', { return this.favoritedPlaylists.some((f) => f.playlistId === playlistId && f.platform === platform); }, + /** Load global bot settings we care about client-side (currently just the + * saved-queues gate). Guests get a 403 here, which we swallow so the nav + * entry simply stays hidden for them. */ + async fetchBotSettings() { + try { + const res = await axios.get('/api/bot/settings'); + this.savedQueuesEnabled = res.data?.savedQueuesEnabled === true; + } catch { + // not critical (guests 403; keep previous value otherwise) + } + }, + /** Load the server-side source gate (enabledProviders + default). */ async fetchProviders() { try { diff --git a/web/src/views/SavedQueues.vue b/web/src/views/SavedQueues.vue new file mode 100644 index 0000000..f9d0c2a --- /dev/null +++ b/web/src/views/SavedQueues.vue @@ -0,0 +1,301 @@ + + + + + diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue index 04b307d..c1734d8 100755 --- a/web/src/views/Settings.vue +++ b/web/src/views/Settings.vue @@ -760,6 +760,32 @@ @change="saveLocalAudioEnabled" /> + + + + @@ -1490,6 +1516,9 @@ const idleTimeout = ref(0); // Defaults OFF to match the backend default (config.ts getDefaultConfig). const autoPauseOnEmpty = ref(false); const localAudioEnabled = ref(true); +// Saved-queues + play-keeps-queue toggles (#119), both default OFF. +const savedQueuesEnabled = ref(false); +const playKeepsQueue = ref(false); async function loadIdleTimeout() { try { @@ -1497,6 +1526,9 @@ async function loadIdleTimeout() { idleTimeout.value = res.data.idleTimeoutMinutes ?? 0; autoPauseOnEmpty.value = res.data.autoPauseOnEmpty ?? false; localAudioEnabled.value = res.data.localAudioEnabled ?? true; + savedQueuesEnabled.value = res.data.savedQueuesEnabled ?? false; + playKeepsQueue.value = res.data.playKeepsQueue ?? false; + store.savedQueuesEnabled = savedQueuesEnabled.value; applyGuestModeFromServer(res.data.guestMode); applyAdminGroupsFromServer(res.data.adminGroups); applySpotifyConfig(res.data.spotify); @@ -1528,6 +1560,22 @@ async function saveLocalAudioEnabled() { } catch { /* ignore */ } } +async function saveSavedQueuesEnabled() { + try { + const res = await axios.post('/api/bot/settings', { savedQueuesEnabled: savedQueuesEnabled.value }); + savedQueuesEnabled.value = res.data.savedQueuesEnabled ?? savedQueuesEnabled.value; + // Keep the shared store flag (nav gate) in sync without a reload. + store.savedQueuesEnabled = savedQueuesEnabled.value; + } catch { /* ignore */ } +} + +async function savePlayKeepsQueue() { + try { + const res = await axios.post('/api/bot/settings', { playKeepsQueue: playKeepsQueue.value }); + playKeepsQueue.value = res.data.playKeepsQueue ?? playKeepsQueue.value; + } catch { /* ignore */ } +} + // --- Spotify (Connect) settings (§8) --- // NOTE: This card's status comes ONLY from /api/spotify/status (playback OAuth // `authorized`). It is deliberately NOT wired to the player store's