feat(#119): saved queues web UI + behavior-settings toggles

- 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 <noreply@anthropic.com>
2026-10-10 08:52:49 +08:00 · 2026-07-17 01:29:00 +08:00
1 parent 69a2e8c264
commit 0b10f9553c
@@ -0,0 +1,301 @@
+<template>
+  <div class="saved-queues-page">
+    <button class="back-btn" @click="$router.back()">
+      <Icon icon="mdi:arrow-left" />
+      返回
+    </button>
+    <h1 class="page-title">已保存队列</h1>
+
+    <div v-if="disabled" class="empty">
+      此功能未启用。请在「设置 → 行为设置」中开启「保存/加载播放清单」。
+    </div>
+
+    <template v-else>
+      <!-- Save current queue -->
+      <section class="save-card">
+        <div class="save-title">保存当前队列</div>
+        <div class="save-hint">
+          将机器人 <strong>{{ activeBotName }}</strong> 当前的播放队列保存为一份清单，稍后可加载或追加。
+        </div>
+        <div class="save-row">
+          <input
+            v-model="newName"
+            class="input"
+            type="text"
+            placeholder="清单名称"
+            maxlength="80"
+            @keyup.enter="onSave"
+          />
+          <label class="shared-check">
+            <input v-model="newShared" type="checkbox" />
+            共享
+          </label>
+          <button class="btn-primary" :disabled="!canSave || saving" @click="onSave">
+            {{ saving ? '保存中…' : '保存' }}
+          </button>
+        </div>
+      </section>
+
+      <div v-if="loading" class="loading">加载中...</div>
+      <div v-else-if="queues.length === 0" class="empty">还没有已保存的队列</div>
+
+      <div v-else class="queue-list">
+        <div v-for="q in queues" :key="q.id" class="queue-row">
+          <div class="queue-info">
+            <span class="queue-name">{{ q.name }}</span>
+            <span v-if="isShared(q)" class="badge shared">共享</span>
+            <span v-else class="badge private">私有</span>
+            <span class="queue-count">{{ q.songCount }} 首</span>
+          </div>
+          <div class="queue-actions">
+            <button class="btn-sm primary" :disabled="!activeBotId || busyId === q.id" @click="onLoad(q, 'replace')">
+              加载
+            </button>
+            <button class="btn-sm" :disabled="!activeBotId || busyId === q.id" @click="onLoad(q, 'append')">
+              追加
+            </button>
+            <button class="btn-sm danger" :disabled="busyId === q.id" @click="onDelete(q)">
+              删除
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import { usePlayerStore } from '../stores/player.js';
+import { useSavedQueues } from '../composables/useSavedQueues.js';
+import { isShared, type SavedQueueMeta } from '../composables/savedQueues.js';
+
+const store = usePlayerStore();
+const { queues, loading, disabled, list, save, load, remove } = useSavedQueues();
+
+const newName = ref('');
+const newShared = ref(false);
+const saving = ref(false);
+const busyId = ref<number | null>(null);
+
+const activeBotId = computed(() => store.activeBotId);
+const activeBotName = computed(() => store.activeBot?.name ?? '（未选择）');
+const canSave = computed(() => !!activeBotId.value && newName.value.trim().length > 0);
+
+async function onSave() {
+  if (!canSave.value || saving.value) return;
+  saving.value = true;
+  try {
+    await save(activeBotId.value!, newName.value.trim(), newShared.value);
+    store.notify(`已保存「${newName.value.trim()}」`, 'info');
+    newName.value = '';
+    newShared.value = false;
+  } catch (e: unknown) {
+    const msg = (e as { response?: { data?: { error?: string } } })?.response?.data?.error;
+    store.notify(msg || '保存失败', 'error');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function onLoad(q: SavedQueueMeta, mode: 'replace' | 'append') {
+  if (!activeBotId.value) return;
+  busyId.value = q.id;
+  try {
+    const res = await load(q.id, activeBotId.value, mode);
+    store.notify(
+      mode === 'append' ? `已追加「${q.name}」（${res.loaded} 首）` : `已加载「${q.name}」（${res.loaded} 首）`,
+      'info',
+    );
+    store.fetchQueue();
+  } catch {
+    store.notify('加载失败', 'error');
+  } finally {
+    busyId.value = null;
+  }
+}
+
+async function onDelete(q: SavedQueueMeta) {
+  busyId.value = q.id;
+  try {
+    await remove(q.id);
+    store.notify(`已删除「${q.name}」`, 'info');
+  } catch {
+    store.notify('删除失败', 'error');
+  } finally {
+    busyId.value = null;
+  }
+}
+
+onMounted(async () => {
+  if (!store.activeBotId) {
+    await store.fetchBots();
+  }
+  await list();
+});
+</script>
+
+<style lang="scss" scoped>
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  opacity: 0.7;
+  margin-bottom: 16px;
+  transition: opacity var(--transition-fast);
+  &:hover { opacity: 1; }
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 800;
+  margin-bottom: 24px;
+}
+
+.save-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 18px;
+  margin-bottom: 24px;
+}
+
+.save-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.save-hint {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 14px;
+}
+
+.save-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.input {
+  flex: 1;
+  min-width: 180px;
+  padding: 10px 12px;
+  font-size: 14px;
+  background: var(--hover-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: inherit;
+  &:focus { outline: none; border-color: var(--color-primary); }
+}
+
+.shared-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.btn-primary {
+  padding: 10px 18px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary);
+  color: #fff;
+  border: 1px solid var(--color-primary);
+  cursor: pointer;
+  transition: filter var(--transition-fast);
+  &:hover:not(:disabled) { filter: brightness(1.08); }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.queue-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.queue-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  flex-wrap: wrap;
+}
+
+.queue-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.queue-name {
+  font-size: 15px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queue-count {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  &.shared { background: var(--color-primary-15); color: var(--color-primary); }
+  &.private { background: var(--hover-bg); color: var(--text-secondary); }
+}
+
+.queue-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  background: var(--hover-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  &:hover:not(:disabled) { background: var(--bg-secondary); border-color: var(--color-primary); }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  &.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
+  &.danger { color: #ef4444; }
+}
+
+.loading {
+  text-align: center;
+  padding: 60px;
+  color: var(--text-secondary);
+}
+
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-tertiary);
+  font-size: 14px;
+}
+</style>
@@ -760,6 +760,32 @@
          @change="saveLocalAudioEnabled"
        />
      </label>
+
+      <label class="profile-toggle behavior-toggle">
+        <div class="profile-toggle-text">
+          <div class="profile-toggle-label">保存/加载播放清单（含重启后自动恢复队列）</div>
+          <div class="profile-toggle-hint">开启后可在网页与聊天命令（!save / !load / !queues）保存和加载播放清单，并在机器人重启后自动恢复并继续播放上次的队列。重启只能从当前曲目的开头恢复（不记忆进度）；Spotify 恢复为尽力而为。默认关闭。</div>
+        </div>
+        <input
+          v-model="savedQueuesEnabled"
+          type="checkbox"
+          class="profile-toggle-switch"
+          @change="saveSavedQueuesEnabled"
+        />
+      </label>
+
+      <label class="profile-toggle behavior-toggle">
+        <div class="profile-toggle-text">
+          <div class="profile-toggle-label">直接播放单曲时不清空队列</div>
+          <div class="profile-toggle-hint">开启后，直接播放单曲会插入到当前歌曲之后并立即播放，播完继续原队列，而不是清空整个队列。仅影响单曲的「直接播放」；歌单/专辑/电台仍会替换队列。默认关闭。</div>
+        </div>
+        <input
+          v-model="playKeepsQueue"
+          type="checkbox"
+          class="profile-toggle-switch"
+          @change="savePlayKeepsQueue"
+        />
+      </label>
    </section>

    <!-- Guest Mode (admin only) -->
@@ -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