mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-02 04:52:50 +08:00
Merge pull request #50 from ZHANGTIANYAO1/feature/design-implementation
Web UI redesign + per-platform tabs + play-next + audit fixes
This commit is contained in:
31 files changed
+4572
-247
No files matched your search
@@ -13,7 +13,10 @@
|
||||
"mcp__Claude_Preview__*",
|
||||
"mcp__Claude_in_Chrome__*",
|
||||
"mcp__scheduled-tasks__*",
|
||||
"Bash(npx vitest:*)"
|
||||
"Bash(npx vitest:*)",
|
||||
"Bash(cp \"C:\\\\Users\\\\saopig1\\\\.claude\\\\projects\\\\C--Users-saopig1-Music-teamspeak-music-bot\\\\b5a64d6f-051e-4b87-966c-ece97d2b879b\\\\tool-results\\\\webfetch-1776569008470-exv7qe.bin\" /tmp/design.gz)",
|
||||
"Bash(gunzip -f /tmp/design.gz)",
|
||||
"Read(//tmp/**)"
|
||||
],
|
||||
"deny": [
|
||||
"Bash(git push * main)",
|
||||
|
||||
@@ -0,0 +1,911 @@
|
||||
# Music Source Tabs Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Add NetEase / QQ source-switcher tabs to Home (推荐歌单 / 每日推荐 / 我的歌单) and Library (我的歌单), with per-section persistence and graceful degradation when only one source is logged in.
|
||||
|
||||
**Architecture:** A single shared `<SourceTabs>` Vue component handles the tab UI and self-hides when fewer than 2 sources are available. The Pinia store splits the affected fields into `{ netease, qq }` objects, fetches from both platforms in `fetchHomeData()` based on `authStatus`, and consumers select with a reactive `activeSource` ref persisted to localStorage.
|
||||
|
||||
**Tech Stack:** Vue 3 (Composition API + `<script setup>`), Pinia, TypeScript, SCSS (CSS variables from `web/src/styles/variables.scss`).
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-05-06-music-source-tabs-design.md`
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
**New:**
|
||||
- `web/src/components/SourceTabs.vue` — shared tab UI (presentational, no store deps)
|
||||
|
||||
**Modified:**
|
||||
- `web/src/stores/player.ts` — state shape change + `authStatus` + `fetchHomeData` rewrite
|
||||
- `web/src/views/Home.vue` — 3 sections wired to SourceTabs
|
||||
- `web/src/views/Library.vue` — 1 section wired; remove dead `liked` block
|
||||
|
||||
**Unchanged:**
|
||||
- Backend (already supports `?platform=qq`)
|
||||
- All other web pages
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Build the SourceTabs component
|
||||
|
||||
**Files:**
|
||||
- Create: `web/src/components/SourceTabs.vue`
|
||||
|
||||
This task is fully independent of store changes — the component is presentational, takes typed props, and emits an update event. It can land and be committed alone (build will pass; component is just unused until later tasks).
|
||||
|
||||
- [ ] **Step 1.1: Create the component file**
|
||||
|
||||
Write `web/src/components/SourceTabs.vue`:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="sources.length >= 2" class="source-tabs">
|
||||
<button
|
||||
v-for="src in sources"
|
||||
:key="src"
|
||||
type="button"
|
||||
class="source-tab"
|
||||
:class="{ active: src === modelValue }"
|
||||
@click="$emit('update:modelValue', src)"
|
||||
>
|
||||
{{ LABELS[src] }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Source = 'netease' | 'qq';
|
||||
|
||||
const LABELS: Record<Source, string> = {
|
||||
netease: '网易云',
|
||||
qq: 'QQ',
|
||||
};
|
||||
|
||||
defineProps<{
|
||||
modelValue: Source;
|
||||
sources: Source[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: Source];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.source-tabs {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
margin-left: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.source-tab {
|
||||
padding: 4px 10px;
|
||||
min-height: 28px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-12);
|
||||
font-weight: var(--fw-semi);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.source-tabs {
|
||||
margin-left: 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.source-tab {
|
||||
padding: 6px 10px;
|
||||
min-height: 36px; // larger touch target on mobile
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Why these choices:
|
||||
- `v-if="sources.length >= 2"` — auto-hide when only one source available; parent doesn't need wrapper logic
|
||||
- Min-height 28px desktop / 36px mobile — comfortable touch on phones
|
||||
- `--color-primary-12` (12% primary tint) — matches existing active-state pattern in the codebase
|
||||
- No `--brand-netease/qq` in active state — keeps tab visually consistent regardless of which platform; brand colors are reserved for SongCard platform badges where they identify content origin
|
||||
|
||||
- [ ] **Step 1.2: Verify it imports cleanly via type check**
|
||||
|
||||
Run from project root:
|
||||
|
||||
```
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: exit code 0, no output.
|
||||
|
||||
Then verify the web project also type-checks:
|
||||
|
||||
```
|
||||
cd web && npx vue-tsc --noEmit && cd ..
|
||||
```
|
||||
|
||||
Expected: exit code 0, no output.
|
||||
|
||||
- [ ] **Step 1.3: Commit**
|
||||
|
||||
```
|
||||
git add web/src/components/SourceTabs.vue
|
||||
git commit -m "feat(web): add SourceTabs component for platform switcher
|
||||
|
||||
Presentational component for switching between netease and qq music
|
||||
sources. Auto-hides when fewer than 2 sources are passed in. Mobile
|
||||
breakpoint enlarges touch target to 36px.
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Refactor the store (state + fetchHomeData)
|
||||
|
||||
**Files:**
|
||||
- Modify: `web/src/stores/player.ts`
|
||||
|
||||
This task changes types, which will break Home.vue and Library.vue at compile time. **Do not run tsc/build between Task 2 and Task 4** — they are migrated in a single coherent commit. After Task 4, type-check confirms the whole change.
|
||||
|
||||
- [ ] **Step 2.1: Add the `Source` type alias and update state shape**
|
||||
|
||||
In `web/src/stores/player.ts`, locate the `state: () => ({ ... })` block (around line 47-63).
|
||||
|
||||
**Find:**
|
||||
|
||||
```ts
|
||||
// Home page cache
|
||||
recommendPlaylists: [] as PlaylistItem[],
|
||||
dailySongs: [] as Song[],
|
||||
userPlaylists: [] as PlaylistItem[],
|
||||
bilibiliPopular: [] as Song[],
|
||||
lastFetchTime: 0,
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
|
||||
```ts
|
||||
// Home page cache, split by source
|
||||
recommendPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
|
||||
dailySongs: { netease: [] as Song[], qq: [] as Song[] },
|
||||
userPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
|
||||
bilibiliPopular: [] as Song[],
|
||||
authStatus: { netease: false, qq: false },
|
||||
lastFetchTime: 0,
|
||||
```
|
||||
|
||||
Also add this exported type at the top of the file, right after the existing `Song` interface (around line 12):
|
||||
|
||||
```ts
|
||||
export type Source = 'netease' | 'qq';
|
||||
```
|
||||
|
||||
- [ ] **Step 2.2: Rewrite `fetchHomeData()`**
|
||||
|
||||
In the same file, find the `fetchHomeData` action (around line 352-378).
|
||||
|
||||
**Replace the entire action body with:**
|
||||
|
||||
```ts
|
||||
async fetchHomeData() {
|
||||
if (this.lastFetchTime > 0 && Date.now() - this.lastFetchTime < HOME_CACHE_TTL) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 1. Fetch auth status for both platforms first.
|
||||
const [neAuthRes, qqAuthRes] = await Promise.allSettled([
|
||||
axios.get('/api/auth/status', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/auth/status', { params: { platform: 'qq' } }),
|
||||
]);
|
||||
this.authStatus.netease =
|
||||
neAuthRes.status === 'fulfilled' && !!neAuthRes.value.data?.loggedIn;
|
||||
this.authStatus.qq =
|
||||
qqAuthRes.status === 'fulfilled' && !!qqAuthRes.value.data?.loggedIn;
|
||||
|
||||
// 2. NetEase data: recommend playlists work anonymously; daily/user
|
||||
// playlists need login but Promise.allSettled isolates failures.
|
||||
const neteasePromises = [
|
||||
axios.get('/api/music/recommend/playlists', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/music/recommend/songs', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/music/user/playlists', { params: { platform: 'netease' } }),
|
||||
];
|
||||
|
||||
// 3. QQ data: only fetch when QQ is logged in. When not logged in,
|
||||
// resolve to empty payloads so the same indexed handling works.
|
||||
const emptyPlaylists = { data: { playlists: [] } };
|
||||
const emptySongs = { data: { songs: [] } };
|
||||
const qqPromises = this.authStatus.qq
|
||||
? [
|
||||
axios.get('/api/music/recommend/playlists', { params: { platform: 'qq' } }),
|
||||
axios.get('/api/music/recommend/songs', { params: { platform: 'qq' } }),
|
||||
axios.get('/api/music/user/playlists', { params: { platform: 'qq' } }),
|
||||
]
|
||||
: [
|
||||
Promise.resolve(emptyPlaylists),
|
||||
Promise.resolve(emptySongs),
|
||||
Promise.resolve(emptyPlaylists),
|
||||
];
|
||||
|
||||
const biliPromise = axios.get('/api/music/bilibili/popular?limit=12');
|
||||
|
||||
const results = await Promise.allSettled([
|
||||
...neteasePromises,
|
||||
...qqPromises,
|
||||
biliPromise,
|
||||
]);
|
||||
|
||||
const [neRecPL, neDaily, neUserPL, qqRecPL, qqDaily, qqUserPL, bili] = results;
|
||||
|
||||
if (neRecPL.status === 'fulfilled') {
|
||||
this.recommendPlaylists.netease = neRecPL.value.data.playlists ?? [];
|
||||
}
|
||||
if (neDaily.status === 'fulfilled') {
|
||||
this.dailySongs.netease = neDaily.value.data.songs ?? [];
|
||||
}
|
||||
if (neUserPL.status === 'fulfilled') {
|
||||
this.userPlaylists.netease = neUserPL.value.data.playlists ?? [];
|
||||
}
|
||||
if (qqRecPL.status === 'fulfilled') {
|
||||
this.recommendPlaylists.qq = qqRecPL.value.data.playlists ?? [];
|
||||
}
|
||||
if (qqDaily.status === 'fulfilled') {
|
||||
this.dailySongs.qq = qqDaily.value.data.songs ?? [];
|
||||
}
|
||||
if (qqUserPL.status === 'fulfilled') {
|
||||
this.userPlaylists.qq = qqUserPL.value.data.playlists ?? [];
|
||||
}
|
||||
if (bili.status === 'fulfilled') {
|
||||
this.bilibiliPopular = bili.value.data.songs ?? [];
|
||||
}
|
||||
|
||||
this.lastFetchTime = Date.now();
|
||||
},
|
||||
```
|
||||
|
||||
**Do NOT type-check yet** — Home/Library still reference the old shape. They'll be migrated in Tasks 3 and 4.
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Migrate Home.vue to multi-source tabs
|
||||
|
||||
**Files:**
|
||||
- Modify: `web/src/views/Home.vue`
|
||||
|
||||
- [ ] **Step 3.1: Add a localStorage helper module**
|
||||
|
||||
Create `web/src/stores/sourceTabs.ts`:
|
||||
|
||||
```ts
|
||||
import type { Source } from './player.js';
|
||||
|
||||
const STORAGE_KEY = 'source-tabs';
|
||||
|
||||
export type TabKey =
|
||||
| 'home.recommend'
|
||||
| 'home.daily'
|
||||
| 'home.user'
|
||||
| 'library.user';
|
||||
|
||||
function readAll(): Partial<Record<TabKey, Source>> {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return {};
|
||||
const parsed = JSON.parse(raw);
|
||||
return typeof parsed === 'object' && parsed !== null ? parsed : {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function loadTabSource(key: TabKey, fallback: Source = 'netease'): Source {
|
||||
const all = readAll();
|
||||
const v = all[key];
|
||||
return v === 'netease' || v === 'qq' ? v : fallback;
|
||||
}
|
||||
|
||||
export function saveTabSource(key: TabKey, value: Source): void {
|
||||
try {
|
||||
const all = readAll();
|
||||
all[key] = value;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
|
||||
} catch {
|
||||
// localStorage may be unavailable (private browsing); silently no-op
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is a separate file rather than inline so Library can reuse it without duplication.
|
||||
|
||||
- [ ] **Step 3.2: Update Home.vue template**
|
||||
|
||||
Replace the three `<section>` blocks (推荐歌单 / 每日推荐 / 我的歌单) and the `<script setup>` block.
|
||||
|
||||
**Find** the entire `<template>` 推荐歌单 section (currently around lines 53-67):
|
||||
|
||||
```vue
|
||||
<!-- 推荐歌单 -->
|
||||
<section class="section" v-if="store.recommendPlaylists.length > 0">
|
||||
<h2 class="section-title">推荐歌单</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="playlist in store.recommendPlaylists"
|
||||
:key="playlist.id"
|
||||
:to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="playlist.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ playlist.name }}</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
|
||||
```vue
|
||||
<!-- 推荐歌单 -->
|
||||
<section class="section" v-if="recommendAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
推荐歌单
|
||||
<SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="playlist in (store.recommendPlaylists[recommendSourceSafe] ?? [])"
|
||||
:key="playlist.id"
|
||||
:to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="playlist.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ playlist.name }}</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Find** the 每日推荐 section (currently around lines 36-51):
|
||||
|
||||
```vue
|
||||
<!-- 每日推荐 -->
|
||||
<section class="section" v-if="store.dailySongs.length > 0">
|
||||
<h2 class="section-title">每日推荐</h2>
|
||||
<div class="daily-grid">
|
||||
<div
|
||||
v-for="song in store.dailySongs.slice(0, 12)"
|
||||
:key="song.id"
|
||||
class="daily-card hover-scale"
|
||||
@click="store.playSong(song)"
|
||||
>
|
||||
<CoverArt :url="song.coverUrl" :size="120" :radius="10" :show-shadow="true" />
|
||||
<div class="daily-name">{{ song.name }}</div>
|
||||
<div class="daily-artist">{{ song.artist }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
|
||||
```vue
|
||||
<!-- 每日推荐 -->
|
||||
<section class="section" v-if="dailyAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
每日推荐
|
||||
<SourceTabs v-model="dailySource" :sources="dailyAvailable" />
|
||||
</h2>
|
||||
<div class="daily-grid">
|
||||
<div
|
||||
v-for="song in (store.dailySongs[dailySourceSafe] ?? []).slice(0, 12)"
|
||||
:key="song.id"
|
||||
class="daily-card hover-scale"
|
||||
@click="store.playSong(song)"
|
||||
>
|
||||
<CoverArt :url="song.coverUrl" :size="120" :radius="10" :show-shadow="true" />
|
||||
<div class="daily-name">{{ song.name }}</div>
|
||||
<div class="daily-artist">{{ song.artist }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Find** the 我的歌单 section (currently around lines 69-95):
|
||||
|
||||
```vue
|
||||
<!-- 我的歌单 -->
|
||||
<section class="section" v-if="store.userPlaylists.length > 0">
|
||||
<h2 class="section-title">
|
||||
我的歌单
|
||||
<span class="section-count">{{ store.userPlaylists.length }}</span>
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="pl in visibleUserPlaylists"
|
||||
:key="pl.id"
|
||||
:to="`/playlist/${pl.id}?platform=${pl.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ pl.name }}</div>
|
||||
<div class="playlist-count">{{ pl.songCount }} 首</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button
|
||||
v-if="store.userPlaylists.length > USER_PLAYLIST_LIMIT"
|
||||
class="expand-btn"
|
||||
@click="userPlaylistsExpanded = !userPlaylistsExpanded"
|
||||
>
|
||||
<Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
|
||||
{{ userPlaylistsExpanded ? '收起' : `展开全部 ${store.userPlaylists.length} 个歌单` }}
|
||||
</button>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
|
||||
```vue
|
||||
<!-- 我的歌单 -->
|
||||
<section class="section" v-if="userAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
我的歌单
|
||||
<span class="section-count">{{ currentUserPlaylists.length }}</span>
|
||||
<SourceTabs v-model="userSource" :sources="userAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="pl in visibleUserPlaylists"
|
||||
:key="pl.id"
|
||||
:to="`/playlist/${pl.id}?platform=${pl.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ pl.name }}</div>
|
||||
<div class="playlist-count">{{ pl.songCount }} 首</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button
|
||||
v-if="currentUserPlaylists.length > USER_PLAYLIST_LIMIT"
|
||||
class="expand-btn"
|
||||
@click="userPlaylistsExpanded = !userPlaylistsExpanded"
|
||||
>
|
||||
<Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
|
||||
{{ userPlaylistsExpanded ? '收起' : `展开全部 ${currentUserPlaylists.length} 个歌单` }}
|
||||
</button>
|
||||
</section>
|
||||
```
|
||||
|
||||
- [ ] **Step 3.3: Update Home.vue `<script setup>`**
|
||||
|
||||
**Find** the `<script setup lang="ts">` block (currently around lines 119-153):
|
||||
|
||||
```ts
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import axios from 'axios';
|
||||
import { usePlayerStore, type Song } from '../stores/player.js';
|
||||
import CoverArt from '../components/CoverArt.vue';
|
||||
|
||||
const store = usePlayerStore();
|
||||
const USER_PLAYLIST_LIMIT = 20;
|
||||
const userPlaylistsExpanded = ref(false);
|
||||
const visibleUserPlaylists = computed(() =>
|
||||
userPlaylistsExpanded.value
|
||||
? store.userPlaylists
|
||||
: store.userPlaylists.slice(0, USER_PLAYLIST_LIMIT)
|
||||
);
|
||||
|
||||
async function playFm() {
|
||||
try {
|
||||
const res = await axios.get('/api/music/personal/fm');
|
||||
const songs: Song[] = res.data.songs;
|
||||
if (songs.length > 0) {
|
||||
await store.play(songs[0].name, songs[0].platform);
|
||||
for (let i = 1; i < songs.length; i++) {
|
||||
await store.addToQueue(songs[i].name, songs[i].platform);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchHomeData();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
**Replace with:**
|
||||
|
||||
```ts
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import axios from 'axios';
|
||||
import { usePlayerStore, type Song, type Source } from '../stores/player.js';
|
||||
import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
|
||||
import CoverArt from '../components/CoverArt.vue';
|
||||
import SourceTabs from '../components/SourceTabs.vue';
|
||||
|
||||
const store = usePlayerStore();
|
||||
const USER_PLAYLIST_LIMIT = 20;
|
||||
const userPlaylistsExpanded = ref(false);
|
||||
|
||||
// Available sources per section. Recommend playlists are public for both
|
||||
// platforms — netease always; qq only when logged in. Daily and user
|
||||
// playlists need login on both sides.
|
||||
const recommendAvailable = computed<Source[]>(() => {
|
||||
const s: Source[] = ['netease'];
|
||||
if (store.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
});
|
||||
const dailyAvailable = computed<Source[]>(() => {
|
||||
const s: Source[] = [];
|
||||
if (store.authStatus.netease) s.push('netease');
|
||||
if (store.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
});
|
||||
const userAvailable = computed<Source[]>(() => {
|
||||
const s: Source[] = [];
|
||||
if (store.authStatus.netease) s.push('netease');
|
||||
if (store.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
});
|
||||
|
||||
// Persisted active source per section.
|
||||
const recommendSource = ref<Source>(loadTabSource('home.recommend'));
|
||||
const dailySource = ref<Source>(loadTabSource('home.daily'));
|
||||
const userSource = ref<Source>(loadTabSource('home.user'));
|
||||
|
||||
watch(recommendSource, (v) => saveTabSource('home.recommend', v));
|
||||
watch(dailySource, (v) => saveTabSource('home.daily', v));
|
||||
watch(userSource, (v) => saveTabSource('home.user', v));
|
||||
|
||||
// Fallback when persisted source is no longer available (e.g. user logged
|
||||
// out of QQ since last visit). We render against `*Safe` but never write
|
||||
// back, so the user's preference is preserved for when they log in again.
|
||||
const recommendSourceSafe = computed<Source>(() =>
|
||||
recommendAvailable.value.includes(recommendSource.value)
|
||||
? recommendSource.value
|
||||
: recommendAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
const dailySourceSafe = computed<Source>(() =>
|
||||
dailyAvailable.value.includes(dailySource.value)
|
||||
? dailySource.value
|
||||
: dailyAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
const userSourceSafe = computed<Source>(() =>
|
||||
userAvailable.value.includes(userSource.value)
|
||||
? userSource.value
|
||||
: userAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
|
||||
const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
|
||||
const visibleUserPlaylists = computed(() =>
|
||||
userPlaylistsExpanded.value
|
||||
? currentUserPlaylists.value
|
||||
: currentUserPlaylists.value.slice(0, USER_PLAYLIST_LIMIT)
|
||||
);
|
||||
|
||||
async function playFm() {
|
||||
try {
|
||||
const res = await axios.get('/api/music/personal/fm');
|
||||
const songs: Song[] = res.data.songs;
|
||||
if (songs.length > 0) {
|
||||
await store.play(songs[0].name, songs[0].platform);
|
||||
for (let i = 1; i < songs.length; i++) {
|
||||
await store.addToQueue(songs[i].name, songs[i].platform);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchHomeData();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
Note: The 我的歌单 template uses `userSource` (not `userSourceSafe`) on the `<SourceTabs>` v-model so the user's click maps directly to the persisted ref. The grid below the tabs uses `currentUserPlaylists` which derives from `userSourceSafe`, so even if `userSource` points at an unavailable platform momentarily, the grid still renders something sensible. Same pattern for 推荐歌单 / 每日推荐.
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Migrate Library.vue and remove dead code
|
||||
|
||||
**Files:**
|
||||
- Modify: `web/src/views/Library.vue`
|
||||
|
||||
- [ ] **Step 4.1: Replace the template**
|
||||
|
||||
**Find** the `<template>` block (currently lines 1-64) and **replace the entire template with:**
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="library-page">
|
||||
<h1 class="page-title">音乐库</h1>
|
||||
|
||||
<!-- 我的歌单 -->
|
||||
<section class="section" v-if="userAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
我的歌单
|
||||
<span class="section-count">{{ currentUserPlaylists.length }}</span>
|
||||
<SourceTabs v-model="userSource" :sources="userAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="pl in currentUserPlaylists"
|
||||
:key="pl.id"
|
||||
:to="`/playlist/${pl.id}?platform=${pl.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ pl.name }}</div>
|
||||
<div class="playlist-count">{{ pl.songCount }} 首</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 最近播放 -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">最近播放</h2>
|
||||
<div v-if="historyLoading" class="loading">加载中...</div>
|
||||
<div v-else-if="history.length === 0" class="empty">暂无播放记录</div>
|
||||
<div v-else class="song-list">
|
||||
<SongCard
|
||||
v-for="(song, i) in history.slice(0, 10)"
|
||||
:key="`hist-${song.id}-${i}`"
|
||||
:song="song"
|
||||
:index="i + 1"
|
||||
:active="store.currentSong?.id === song.id"
|
||||
@play="store.play(song.name, song.platform)"
|
||||
@add="store.addToQueue(song.name, song.platform)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="!historyLoading && userAvailable.length === 0 && history.length === 0" class="empty-state">
|
||||
<Icon icon="mdi:music-box-outline" class="empty-icon" />
|
||||
<div>登录网易云或QQ音乐后，这里将显示你的歌单和播放记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Changes from the previous version:
|
||||
- "我的歌单" section: same data binding pattern as Home (`userAvailable`, `currentUserPlaylists`, `<SourceTabs>`)
|
||||
- "我的收藏" section: removed entirely (the `/api/music/user/liked` endpoint never existed)
|
||||
- Empty state condition: replaced `liked.length === 0` with `userAvailable.length === 0`
|
||||
|
||||
- [ ] **Step 4.2: Replace the script block**
|
||||
|
||||
**Find** the `<script setup lang="ts">` block (currently lines 66-105) and **replace with:**
|
||||
|
||||
```ts
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import axios from 'axios';
|
||||
import { usePlayerStore, type Song, type Source } from '../stores/player.js';
|
||||
import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
|
||||
import CoverArt from '../components/CoverArt.vue';
|
||||
import SongCard from '../components/SongCard.vue';
|
||||
import SourceTabs from '../components/SourceTabs.vue';
|
||||
|
||||
const store = usePlayerStore();
|
||||
|
||||
const history = ref<Song[]>([]);
|
||||
const historyLoading = ref(true);
|
||||
|
||||
const userAvailable = computed<Source[]>(() => {
|
||||
const s: Source[] = [];
|
||||
if (store.authStatus.netease) s.push('netease');
|
||||
if (store.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
});
|
||||
|
||||
const userSource = ref<Source>(loadTabSource('library.user'));
|
||||
watch(userSource, (v) => saveTabSource('library.user', v));
|
||||
|
||||
const userSourceSafe = computed<Source>(() =>
|
||||
userAvailable.value.includes(userSource.value)
|
||||
? userSource.value
|
||||
: userAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
|
||||
const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
|
||||
|
||||
onMounted(async () => {
|
||||
if (!store.activeBotId) {
|
||||
await store.fetchBots();
|
||||
}
|
||||
|
||||
store.fetchHomeData();
|
||||
|
||||
if (store.activeBotId) {
|
||||
try {
|
||||
const res = await axios.get(`/api/player/${store.activeBotId}/history`);
|
||||
history.value = res.data.history ?? [];
|
||||
} catch {
|
||||
// API may not be ready
|
||||
}
|
||||
}
|
||||
|
||||
historyLoading.value = false;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
Changes:
|
||||
- Removed `liked` ref and the `/api/music/user/liked` axios call
|
||||
- Added auth-driven `userAvailable`, persisted `userSource`, and `currentUserPlaylists` computed
|
||||
- Imports `Source` type and `SourceTabs` component
|
||||
|
||||
- [ ] **Step 4.3: Style — `.section-title` already supports inline children**
|
||||
|
||||
The existing `.section-title` style (Library.vue and Home.vue both) already uses `display: flex; align-items: center; gap: 8px;`. SourceTabs uses `display: inline-flex` with its own `margin-left`, so it sits inline with the title and count. **No style changes are required in either Home.vue or Library.vue.**
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Verify the build and types
|
||||
|
||||
- [ ] **Step 5.1: Run TypeScript backend type check**
|
||||
|
||||
```
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
Expected: exit code 0, no output. (No backend files were touched.)
|
||||
|
||||
- [ ] **Step 5.2: Run web type check + production build**
|
||||
|
||||
```
|
||||
npm run build:web
|
||||
```
|
||||
|
||||
Expected: build completes with `✓ built in N.NNs` and no TypeScript errors. The script runs `vue-tsc --noEmit && vite build`, so failures here mean a type or template error in our changes.
|
||||
|
||||
- [ ] **Step 5.3: Run the existing test suite to confirm no regression**
|
||||
|
||||
```
|
||||
npm test
|
||||
```
|
||||
|
||||
Expected: same baseline as before this feature (`Test Files 2 failed | 26 passed (28)`, `Tests 2 failed | 161 passed (163)`). The 2 pre-existing failures are in `dist/` and `.claude/worktrees/` and are unrelated to our changes — they should remain at exactly 2.
|
||||
|
||||
If any **source-tree** test fails (anything not in `dist/` or `.claude/worktrees/`), stop and investigate.
|
||||
|
||||
---
|
||||
|
||||
## Task 6: Manual smoke test on the dev server
|
||||
|
||||
This task verifies behavior the type system can't catch.
|
||||
|
||||
- [ ] **Step 6.1: Start the dev server**
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Wait for `Web server started` and `WebUI: http://localhost:3000` log lines.
|
||||
|
||||
- [ ] **Step 6.2: Test scenario A — only NetEase logged in**
|
||||
|
||||
Open http://localhost:3000 in a browser. Confirm:
|
||||
|
||||
- 推荐歌单 section displays NetEase playlists, **no tab bar visible** (single source, SourceTabs auto-hidden)
|
||||
- 每日推荐 section: visible only if NetEase login provides daily songs; **no tab bar**
|
||||
- 我的歌单 section: visible if NetEase has user playlists; **no tab bar**
|
||||
- Navigate to `/library`: 我的歌单 section: same — no tab bar, NetEase playlists shown
|
||||
|
||||
Open DevTools → Application → Local Storage → `localhost:3000` → `source-tabs` should be absent or `{}` (no clicks happened).
|
||||
|
||||
- [ ] **Step 6.3: Test scenario B — both NetEase and QQ logged in**
|
||||
|
||||
If QQ is not logged in, log in via Settings → QQ Music → 扫码登录.
|
||||
|
||||
Hard reload the browser (Cmd/Ctrl+Shift+R) to bypass the 5-min `lastFetchTime` cache.
|
||||
|
||||
Confirm:
|
||||
|
||||
- 推荐歌单: tab bar shows `[网易云] [QQ]`, NetEase active by default
|
||||
- Click `QQ` — playlist grid switches to QQ data, no flicker (data already in store)
|
||||
- Click `网易云` — back to NetEase
|
||||
- Same for 每日推荐 and 我的歌单
|
||||
- Navigate to `/library`, confirm 我的歌单 has its own tab bar with independent state
|
||||
- Reload the page — Home tabs and Library tab persist their last-selected source independently
|
||||
|
||||
Check `localStorage['source-tabs']`: should contain JSON with up to 4 keys (`home.recommend`, `home.daily`, `home.user`, `library.user`).
|
||||
|
||||
- [ ] **Step 6.4: Test scenario C — fallback when persisted source becomes unavailable**
|
||||
|
||||
While logged into both:
|
||||
1. On Home, switch 推荐歌单 to `QQ`. Confirm `localStorage['source-tabs']['home.recommend'] === 'qq'`.
|
||||
2. Go to Settings → log out of QQ.
|
||||
3. Hard-reload Home.
|
||||
|
||||
Confirm:
|
||||
- 推荐歌单 tab bar disappears (only NetEase available)
|
||||
- Grid shows NetEase playlists (graceful fallback via `recommendSourceSafe`)
|
||||
- `localStorage['source-tabs']['home.recommend']` is **still `'qq'`** (preference preserved)
|
||||
4. Log back into QQ → reload → 推荐歌单 grid is QQ again (preference restored)
|
||||
|
||||
- [ ] **Step 6.5: Test mobile layout**
|
||||
|
||||
Open DevTools → Toggle device toolbar → set width to 375px (iPhone SE).
|
||||
|
||||
Confirm on Home and Library:
|
||||
- Section title + tab bar fit on the same line without overflow
|
||||
- Tab buttons are at least 36px tall (use Inspect → check computed `min-height`)
|
||||
- Tabs are tappable (clicking still switches sources)
|
||||
|
||||
- [ ] **Step 6.6: Stop the dev server**
|
||||
|
||||
Kill the `npm run dev` process.
|
||||
|
||||
---
|
||||
|
||||
## Task 7: Final commit
|
||||
|
||||
- [ ] **Step 7.1: Stage and commit Task 2 + 3 + 4 changes**
|
||||
|
||||
```
|
||||
git add web/src/stores/player.ts web/src/stores/sourceTabs.ts web/src/views/Home.vue web/src/views/Library.vue
|
||||
git status
|
||||
```
|
||||
|
||||
Expected `git status` output: 4 modified/new files staged, working tree otherwise clean (apart from pre-existing `.claude/worktrees/` and `test-ts6-version.cjs` untracked).
|
||||
|
||||
```
|
||||
git commit -m "feat(web): per-platform source tabs on Home and Library
|
||||
|
||||
Recommend playlists, daily songs, and user playlists on Home now show
|
||||
a [网易云][QQ] tab when both platforms are logged in. Library 我的歌单
|
||||
gets the same tab. Selection persists per-section in localStorage and
|
||||
falls back gracefully when the persisted source becomes unavailable
|
||||
(e.g., user logged out). Removes dead 我的收藏 block from Library that
|
||||
referenced a non-existent /api/music/user/liked endpoint.
|
||||
|
||||
Spec: docs/superpowers/specs/2026-05-06-music-source-tabs-design.md
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
- [ ] **Step 7.2: Verify commit landed**
|
||||
|
||||
```
|
||||
git log --oneline -3
|
||||
```
|
||||
|
||||
Expected:
|
||||
```
|
||||
<sha> feat(web): per-platform source tabs on Home and Library
|
||||
<sha> feat(web): add SourceTabs component for platform switcher
|
||||
<sha> docs: spec for multi-source tabs on Home and Library
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Done
|
||||
|
||||
The branch should now have 3 new commits on top of the merge commit, all green builds and tests, and the feature working in dev mode.
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,189 @@
|
||||
# Multi-Source Tabs for Recommend / User Playlists / Daily Songs
|
||||
|
||||
**Date:** 2026-05-06
|
||||
**Status:** Spec — pending implementation
|
||||
|
||||
## Problem
|
||||
|
||||
Home 和 Library 页面的"推荐歌单 / 每日推荐 / 我的歌单"这三类内容当前硬编码只走网易云。当用户同时登录了网易云和 QQ 音乐时，无法在 Web UI 上看到 QQ 侧的对应内容、也无法切换查看。
|
||||
|
||||
## Goal
|
||||
|
||||
在以下 4 个 section 上提供"网易云 / QQ"来源切换 tab，桌面端和移动端均可用：
|
||||
|
||||
- `Home.vue` — 推荐歌单
|
||||
- `Home.vue` — 每日推荐
|
||||
- `Home.vue` — 我的歌单
|
||||
- `Library.vue` — 我的歌单
|
||||
|
||||
切换为纯前端动作（数据已预先 fetch），无加载闪烁。各 section 的选择独立持久化。
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 私人 FM（QQ 无对应概念）
|
||||
- B 站热门（独立第三来源，不属于网易/QQ 切换语义）
|
||||
- 最近播放（bot 维度的播放历史，与音乐源无关）
|
||||
- Library 现有的"我的收藏"段落 —— 当前调用的 `/api/music/user/liked` 端点不存在，是死代码，本次顺手移除
|
||||
- 登录状态实时同步（用户在 Settings 登录后需手动刷新 Home/Library 才能看到 QQ tab）
|
||||
- Tab 排序、隐藏、拖动等高级配置
|
||||
|
||||
## Non-functional Constraints
|
||||
|
||||
- 桌面端（>768px）和移动端（≤768px）布局均可用，tab 与 section title 同行排布；空间不足时允许 flex-wrap
|
||||
- Tab 触控区域有效高度 ≥36px
|
||||
- 现有 5 分钟 home data cache 行为保留
|
||||
- 不引入新的后端端点（后端已通过 `?platform=` 参数支持多源）
|
||||
|
||||
## Architecture
|
||||
|
||||
### 数据层（`web/src/stores/player.ts`）
|
||||
|
||||
字段从单平台改为按 platform 切分：
|
||||
|
||||
```ts
|
||||
// 前
|
||||
recommendPlaylists: PlaylistItem[]
|
||||
userPlaylists: PlaylistItem[]
|
||||
dailySongs: Song[]
|
||||
|
||||
// 后
|
||||
recommendPlaylists: { netease: PlaylistItem[]; qq: PlaylistItem[] }
|
||||
userPlaylists: { netease: PlaylistItem[]; qq: PlaylistItem[] }
|
||||
dailySongs: { netease: Song[]; qq: Song[] }
|
||||
|
||||
// 新增
|
||||
authStatus: { netease: boolean; qq: boolean }
|
||||
```
|
||||
|
||||
`fetchHomeData()` 改写：
|
||||
|
||||
1. 并发调用 `/api/auth/status?platform=netease` 与 `?platform=qq`，写入 `authStatus`
|
||||
2. 网易云的三类数据照常 fetch（推荐歌单匿名可访问；每日推荐和我的歌单需登录，未登录时 API 自然返回空或失败，`Promise.allSettled` 已隔离）
|
||||
3. QQ 的三类数据**仅在 QQ 登录时** fetch，未登录则为空数组
|
||||
4. B 站热门保持原样
|
||||
5. 5 分钟缓存 TTL 不变
|
||||
|
||||
### UI 组件
|
||||
|
||||
新增 `web/src/components/SourceTabs.vue`：
|
||||
|
||||
```vue
|
||||
<SourceTabs v-model="activeSource" :sources="availableSources" />
|
||||
```
|
||||
|
||||
Props：
|
||||
- `sources: ('netease' | 'qq')[]` — 由父组件根据 auth 状态过滤后传入
|
||||
- `modelValue: 'netease' | 'qq'` — v-model 绑定
|
||||
|
||||
行为：
|
||||
- `sources.length < 2` 时组件**自身不渲染**（返回空），父组件无需 v-if 包装
|
||||
- 文字标签：`{ netease: '网易云', qq: 'QQ' }`
|
||||
- 视觉：水平排列，激活态用主色（`var(--color-primary)`）下划线 + 加粗，未激活态使用次要文字色
|
||||
- 紧贴 section-title 右侧，使用 `display: inline-flex`，移动端 padding/font-size 缩小
|
||||
|
||||
### 各 section 接入模板
|
||||
|
||||
```vue
|
||||
<section v-if="recommendAvailable.length > 0" class="section">
|
||||
<h2 class="section-title">
|
||||
推荐歌单
|
||||
<SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="pl in store.recommendPlaylists[recommendSource]"
|
||||
:key="pl.id"
|
||||
:to="`/playlist/${pl.id}?platform=${pl.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ pl.name }}</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
每个 section 在 `<script setup>` 维护两个值：
|
||||
|
||||
- `recommendSource: Ref<'netease' | 'qq'>` — 当前选中
|
||||
- `recommendAvailable: ComputedRef<('netease' | 'qq')[]>` — 该 section 在当前登录状态下有哪些 source 可选
|
||||
|
||||
`recommendAvailable` 计算规则：
|
||||
|
||||
| Section | netease 加入条件 | qq 加入条件 |
|
||||
|---|---|---|
|
||||
| Home 推荐歌单 | 总是（公开数据） | `authStatus.qq` |
|
||||
| Home 每日推荐 | `authStatus.netease` | `authStatus.qq` |
|
||||
| Home 我的歌单 | `authStatus.netease` | `authStatus.qq` |
|
||||
| Library 我的歌单 | `authStatus.netease` | `authStatus.qq` |
|
||||
|
||||
#### "我的歌单"展开按钮兼容
|
||||
|
||||
Home 的"我的歌单"现有 `USER_PLAYLIST_LIMIT = 20` 折叠/展开。改造后：
|
||||
|
||||
```ts
|
||||
const visibleUserPlaylists = computed(() => {
|
||||
const all = store.userPlaylists[userSource.value] ?? [];
|
||||
return userPlaylistsExpanded.value ? all : all.slice(0, USER_PLAYLIST_LIMIT);
|
||||
});
|
||||
```
|
||||
|
||||
切换 source 时折叠态保留（不需 reset）。
|
||||
|
||||
### 持久化
|
||||
|
||||
localStorage 键统一为一个 JSON：
|
||||
|
||||
```
|
||||
key: "source-tabs"
|
||||
value: {
|
||||
"home.recommend": "qq",
|
||||
"home.daily": "netease",
|
||||
"home.user": "qq",
|
||||
"library.user": "netease"
|
||||
}
|
||||
```
|
||||
|
||||
读：组件 mount 时一次性读 + 解析。
|
||||
写：在 v-model 的 setter 里 `watch` 一次写回。
|
||||
不存在的键 / 解析失败 / 老用户没这个 key —— 默认值 `"netease"`。
|
||||
|
||||
### 边界与回退
|
||||
|
||||
| 情况 | 行为 |
|
||||
|---|---|
|
||||
| 选的 source 不在 `available` 里（例：选了 QQ，登出后回到页面） | 渲染时 fallback 到 `available[0]`，不修改 localStorage（保留用户偏好，下次登回来仍生效） |
|
||||
| `recommendPlaylists.qq` 为空数组（API 失败 or 无数据） | tab 仍可切，切过去显示空 grid（无错误提示，符合现有"空数据隐藏 section"语义；section 顶层 v-if 检查的是 `available.length > 0`，单 platform 数据为空不影响 section 显隐） |
|
||||
| QQ provider 不支持 `getDailyRecommendSongs`（501） | `Promise.allSettled` 已捕获，`dailySongs.qq` 保持 `[]`，等同上一行 |
|
||||
| 用户在 Settings 登录 QQ 后切回 Home | 不自动 refetch / 不自动出 tab —— 用户需手动刷新页面（保留 5 分钟缓存语义） |
|
||||
| 网易云和 QQ 都没登录 | `available` 为空时 section 隐藏（沿用现有逻辑） |
|
||||
| Library "我的收藏" 段落 | 整段移除（含 template、script 中的 `liked` ref、对应 axios 调用） |
|
||||
|
||||
## 修改文件清单
|
||||
|
||||
新增：
|
||||
- `web/src/components/SourceTabs.vue` — 共享 tab 组件
|
||||
|
||||
修改：
|
||||
- `web/src/stores/player.ts` — 多平台 state、`authStatus`、`fetchHomeData` 重写
|
||||
- `web/src/views/Home.vue` — 三个 section 接入 SourceTabs，对应 ref + computed
|
||||
- `web/src/views/Library.vue` — 我的歌单接入 SourceTabs；移除我的收藏死代码
|
||||
|
||||
不改：
|
||||
- 后端（API 已支持 `?platform=`）
|
||||
- `Search.vue` / `Playlist.vue` / `Settings.vue` 等其他页面
|
||||
|
||||
## 测试方案
|
||||
|
||||
- 手动：在两种登录组合下访问 Home 和 Library，验证 tab 显隐、切换、刷新后持久化
|
||||
- 仅网易登录 → 不显示 tab
|
||||
- 两边登录 → 显示 tab，切换后刷新页面来源不变
|
||||
- QQ 登录 → 网易登出 → 网易 tab 消失，若上次选的是网易则 fallback 到 QQ
|
||||
- 移动端（DevTools 768px 以下）：tab 与 section-title 同行不溢出，触控区域可点
|
||||
- TypeScript 类型检查通过：`npx tsc --noEmit` + `npm run build:web`
|
||||
- 单元测试：现有 vitest 套件不应回归（store 改动不破坏其他用法）
|
||||
|
||||
## 风险
|
||||
|
||||
- store 字段类型变更（数组 → 对象）会影响所有读取这三个字段的地方。需 grep 确认没有遗漏的消费者。
|
||||
- localStorage 解析失败的容错必须周全，避免一次脏数据导致整个页面白屏。
|
||||
@@ -0,0 +1,226 @@
|
||||
# History-aware `prev` + "Play Next" Insert
|
||||
|
||||
**Date:** 2026-05-06
|
||||
**Status:** Spec — pending implementation
|
||||
|
||||
## Problem
|
||||
|
||||
Two queue/playback gaps surfaced in real use:
|
||||
|
||||
1. In `PlayMode.Random` and `PlayMode.RandomLoop`, `!prev` does not play the
|
||||
actually-previously-played song. It just walks `currentIndex - 1` in the
|
||||
underlying array — but in random modes `currentIndex` jumps non-sequentially,
|
||||
so the "previous" array slot has no relationship to play history.
|
||||
|
||||
2. `!add` / web "添加到队列" appends to the queue tail. There is no way to
|
||||
say "play this song right after the current one." Users want a "下一首
|
||||
播放" affordance comparable to Spotify "Add to Queue (next up)" or Apple
|
||||
Music "Play Next".
|
||||
|
||||
## Goals
|
||||
|
||||
- `prev` walks back through the actual play history regardless of mode.
|
||||
- A new "Play Next" path inserts a song at `currentIndex + 1`, available
|
||||
via web UI button and TS3 chat command.
|
||||
- Both features are usable on desktop and mobile web.
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- Forward/redo through prev'd songs (user would need to push next manually,
|
||||
which picks a fresh random in random modes — acceptable simplification).
|
||||
- Reordering songs already in the queue ("move to next" inside Queue.vue).
|
||||
- Persisting play history across bot restarts (in-memory only).
|
||||
|
||||
## Non-functional Constraints
|
||||
|
||||
- History capped at 50 entries to bound memory.
|
||||
- `addNext` must keep `playedIndices` and `history` index references valid
|
||||
after insertion (shift all indices > current by +1).
|
||||
- New Toast UX from the previous round still applies (failures surface).
|
||||
- TypeScript and existing test suite must not regress.
|
||||
|
||||
## Architecture
|
||||
|
||||
### A. History-aware `prev`
|
||||
|
||||
**`src/audio/queue.ts`** — `PlayQueue` gains a back-stack:
|
||||
|
||||
```ts
|
||||
private history: number[] = [];
|
||||
private static readonly HISTORY_LIMIT = 50;
|
||||
|
||||
private pushHistory(idx: number): void {
|
||||
if (idx < 0) return;
|
||||
this.history.push(idx);
|
||||
if (this.history.length > PlayQueue.HISTORY_LIMIT) {
|
||||
this.history.shift();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Mutators call `pushHistory(this.currentIndex)` **before** changing `currentIndex`:
|
||||
|
||||
| Method | History action |
|
||||
|---|---|
|
||||
| `play()` | `this.history = []` (fresh playback) |
|
||||
| `playAt(idx)` | `pushHistory(currentIndex)`, then set `currentIndex = idx` |
|
||||
| `next()` | `pushHistory(currentIndex)`, then advance per mode |
|
||||
| `prev()` | **Pop** from history → `currentIndex = popped`. If empty, fall back to existing `currentIndex - 1` (which keeps Sequential's wrap behavior; Random returns null). `prev` itself does NOT push to history. |
|
||||
| `clear()` | `this.history = []` |
|
||||
| `setMode(m)` | `this.history = []` (mode change resets context) |
|
||||
| `remove(idx)` | Drop matching entries from history; shift any entry `> idx` by `-1`. Same logic as the existing `playedIndices` rebuild. |
|
||||
|
||||
**`prev()` rewrite:**
|
||||
|
||||
```ts
|
||||
prev(): QueuedSong | null {
|
||||
if (this.songs.length === 0) return null;
|
||||
// History-driven path (preferred when we have one)
|
||||
while (this.history.length > 0) {
|
||||
const idx = this.history.pop()!;
|
||||
if (idx >= 0 && idx < this.songs.length) {
|
||||
this.currentIndex = idx;
|
||||
this.playedIndices.add(idx);
|
||||
return this.songs[idx];
|
||||
}
|
||||
// popped index is stale (song removed) — keep popping
|
||||
}
|
||||
// Fallback: old index-based prev
|
||||
const prevIndex = this.currentIndex - 1;
|
||||
if (prevIndex < 0) {
|
||||
if (this.mode === PlayMode.Sequential) return null;
|
||||
this.currentIndex = this.songs.length - 1;
|
||||
} else {
|
||||
this.currentIndex = prevIndex;
|
||||
}
|
||||
this.playedIndices.add(this.currentIndex);
|
||||
return this.songs[this.currentIndex];
|
||||
}
|
||||
```
|
||||
|
||||
### B. Play Next (insert after current)
|
||||
|
||||
**`PlayQueue.addNext(song)`:**
|
||||
|
||||
```ts
|
||||
addNext(song: QueuedSong): void {
|
||||
if (this.currentIndex < 0 || this.songs.length === 0) {
|
||||
this.songs.push(song);
|
||||
return;
|
||||
}
|
||||
const insertAt = this.currentIndex + 1;
|
||||
this.songs.splice(insertAt, 0, song);
|
||||
// Shift any tracked index > currentIndex by +1
|
||||
const shifted = new Set<number>();
|
||||
for (const i of this.playedIndices) {
|
||||
shifted.add(i > this.currentIndex ? i + 1 : i);
|
||||
}
|
||||
this.playedIndices = shifted;
|
||||
this.history = this.history.map((i) => (i > this.currentIndex ? i + 1 : i));
|
||||
}
|
||||
```
|
||||
|
||||
**Backend endpoint** — `src/web/api/player.ts`:
|
||||
|
||||
```
|
||||
POST /api/player/:botId/play-next-song
|
||||
body: { song: Song }
|
||||
```
|
||||
|
||||
Behavior:
|
||||
- If queue is empty or `currentIndex < 0`: `queue.addNext(song)` (which falls
|
||||
through to plain push), then `queue.play()`, then `resolveAndPlay`. Same
|
||||
semantics as a successful `/play-song` — message: "正在播放：…"
|
||||
- Otherwise: `queue.addNext(song)`, no resolveAndPlay. Message: "已加入下一首：…"
|
||||
- Returns `{ ok: boolean, message: string }` matching the convention
|
||||
established in the previous round.
|
||||
|
||||
**Bot command** — `src/bot/instance.ts`:
|
||||
|
||||
Register `!playnext <query>` (alias `!pn`):
|
||||
- Mirror of `cmdPlay`'s search step
|
||||
- On match: `queue.addNext(song)`. If no current playback, fall through to
|
||||
`resolveAndPlay`.
|
||||
- Reply with `已加入下一首：<name>` or `正在播放：<name>` accordingly
|
||||
|
||||
**Frontend store action** — `web/src/stores/player.ts`:
|
||||
|
||||
```ts
|
||||
async playNextSong(song: Song) {
|
||||
if (!this.activeBotId) return;
|
||||
const res = await axios.post(`/api/player/${this.activeBotId}/play-next-song`, { song });
|
||||
if (res.data?.message) {
|
||||
this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Frontend SongCard** — `web/src/components/SongCard.vue`:
|
||||
|
||||
Add a third action button between the existing "play" and "add to queue":
|
||||
|
||||
```vue
|
||||
<button class="action-btn" @click.stop="$emit('playNext')" title="下一首播放">
|
||||
<Icon icon="mdi:playlist-play" />
|
||||
</button>
|
||||
```
|
||||
|
||||
Add `playNext: []` to `defineEmits`.
|
||||
|
||||
**Caller updates** — `Home.vue`, `Library.vue`, `Search.vue`, `History.vue`,
|
||||
`Playlist.vue`: each `<SongCard>` usage adds
|
||||
`@playNext="store.playNextSong(song)"`.
|
||||
|
||||
**Queue.vue** is intentionally **not** updated — clicking "play next" on a
|
||||
song already in the queue would create a confusing duplicate.
|
||||
|
||||
## Edge Cases
|
||||
|
||||
| Case | Behavior |
|
||||
|---|---|
|
||||
| `prev` with empty history in Sequential mode | Walks `currentIndex - 1`; returns null at index 0 (existing) |
|
||||
| `prev` with empty history in Random/RandomLoop | Returns null (no past to recover) |
|
||||
| Repeated `prev` past start of history | Pops what's there, then falls back to index walk; eventually null |
|
||||
| `addNext` while `currentIndex == -1` (nothing played yet) | Falls through to push; queue.play() will pick it as first |
|
||||
| `addNext` while playing and queue size = 1 | Inserts at index 1; current index unchanged; next() will advance to it |
|
||||
| `remove` removes a song whose index is in history | Entry dropped; shifted accordingly |
|
||||
| Mode switched mid-playback | History cleared (intentional — mode change is a context boundary) |
|
||||
| `addNext` then `prev` | Inserted song was never played → not in history; prev pops the previously-played song, NOT the just-inserted one |
|
||||
|
||||
## Files Touched
|
||||
|
||||
- `src/audio/queue.ts` — history field, `pushHistory`, `addNext`, rewritten `prev`, mutator updates
|
||||
- `src/audio/queue.test.ts` (or add if missing) — unit tests for history behavior + addNext shift logic
|
||||
- `src/bot/instance.ts` — register `!playnext` / `!pn` command handler
|
||||
- `src/web/api/player.ts` — new `/play-next-song` route
|
||||
- `web/src/stores/player.ts` — `playNextSong` action
|
||||
- `web/src/components/SongCard.vue` — third action button + emit
|
||||
- `web/src/views/Home.vue` — wire `@playNext`
|
||||
- `web/src/views/Library.vue` — wire `@playNext`
|
||||
- `web/src/views/Search.vue` — wire `@playNext`
|
||||
- `web/src/views/History.vue` — wire `@playNext`
|
||||
- `web/src/views/Playlist.vue` — wire `@playNext`
|
||||
|
||||
## Test Plan
|
||||
|
||||
**Unit (vitest, `queue.test.ts`):**
|
||||
- prev with empty history in Sequential: walks back, null at index 0
|
||||
- prev with empty history in Random: returns null
|
||||
- next → next → next → prev pops correctly; prev again pops earlier
|
||||
- prev after `clear()` returns null (history reset)
|
||||
- prev after `setMode()` returns null (history reset)
|
||||
- `remove(idx)` drops from history and shifts entries > idx
|
||||
- `addNext` while empty: appends
|
||||
- `addNext` while playing index 2 in a 5-song queue: ends up at index 3, currentIndex still 2, queue size 6
|
||||
- `addNext` then `next()`: plays the inserted song
|
||||
- `addNext` shifts existing playedIndices and history correctly
|
||||
|
||||
**Integration (manual smoke):**
|
||||
- Random mode: play 4 songs, hit `prev` 3 times → walks back through history
|
||||
- Click "下一首播放" on a search result → next song after current is the chosen one
|
||||
- `!playnext 七里香` → bot replies "已加入下一首：..."; current keeps playing; next song is 七里香
|
||||
- `!playnext` while idle → starts playing immediately
|
||||
|
||||
**Regression:**
|
||||
- Existing 161 source-tree tests still pass.
|
||||
- TypeScript `tsc --noEmit` and `npm run build:web` clean.
|
||||
@@ -261,4 +261,227 @@ describe("PlayQueue", () => {
|
||||
queue.playAt(2);
|
||||
expect(queue.current()?.id).toBe("3");
|
||||
});
|
||||
|
||||
describe("history-aware prev", () => {
|
||||
it("walks back through played indices in random mode", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.add(makeSong("d"));
|
||||
queue.add(makeSong("e"));
|
||||
|
||||
// Force a deterministic random sequence: a → c → e
|
||||
queue.playAt(0);
|
||||
queue.playAt(2);
|
||||
queue.playAt(4);
|
||||
expect(queue.current()?.id).toBe("e");
|
||||
|
||||
// prev pops back through history: e → c → a
|
||||
expect(queue.prev()?.id).toBe("c");
|
||||
expect(queue.prev()?.id).toBe("a");
|
||||
});
|
||||
|
||||
it("returns null when history is empty in random mode", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.playAt(0);
|
||||
// No further moves → history is empty (only 'a' is current, never pushed)
|
||||
expect(queue.prev()).toBeNull();
|
||||
});
|
||||
|
||||
it("preserves sequential prev when history is empty", () => {
|
||||
queue.setMode(PlayMode.Sequential);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.play();
|
||||
queue.next(); // currentIndex = 1
|
||||
// Sequential next() pushed 0 to history → prev pops back to 0
|
||||
expect(queue.prev()?.id).toBe("a");
|
||||
});
|
||||
|
||||
it("clears history on play()", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.playAt(0);
|
||||
queue.playAt(1);
|
||||
queue.play(); // resets to index 0 and clears history
|
||||
expect(queue.prev()).toBeNull();
|
||||
});
|
||||
|
||||
it("clears history on clear()", () => {
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.play();
|
||||
queue.next();
|
||||
queue.clear();
|
||||
queue.add(makeSong("c"));
|
||||
queue.play();
|
||||
// History was wiped — no prev path available beyond index 0
|
||||
expect(queue.prev()).toBeNull();
|
||||
});
|
||||
|
||||
it("clears history on setMode()", () => {
|
||||
queue.setMode(PlayMode.Sequential);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.play();
|
||||
queue.next();
|
||||
// Mode change resets context
|
||||
queue.setMode(PlayMode.Random);
|
||||
expect(queue.prev()).toBeNull();
|
||||
});
|
||||
|
||||
it("drops history entries pointing at a removed song", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.playAt(0);
|
||||
queue.playAt(1); // history: [0]
|
||||
queue.playAt(2); // history: [0, 1]
|
||||
// Remove song at index 1 → history entry 1 dropped
|
||||
queue.remove(1);
|
||||
// queue is now [a, c], history should be [0]
|
||||
// current was at 2 → after remove shifts to 1 → song "c"
|
||||
expect(queue.current()?.id).toBe("c");
|
||||
expect(queue.prev()?.id).toBe("a");
|
||||
});
|
||||
|
||||
it("does not push to history on prev itself", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.playAt(0);
|
||||
queue.playAt(1);
|
||||
queue.playAt(2); // history: [0, 1]
|
||||
queue.prev(); // pops 1, history: [0]
|
||||
queue.prev(); // pops 0, history: []
|
||||
expect(queue.prev()).toBeNull(); // no fallback target in random mode
|
||||
});
|
||||
|
||||
it("caps history at HISTORY_LIMIT (50) entries, dropping oldest", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
// Build a queue large enough to overflow HISTORY_LIMIT
|
||||
for (let i = 0; i < 60; i++) queue.add(makeSong(`s${i}`));
|
||||
// Walk through 60 explicit picks → 59 pushes to history
|
||||
// (playAt pushes the previous currentIndex; first call has -1
|
||||
// which pushHistory rejects). After 60 playAts, history holds
|
||||
// the last 50 of those 59 entries.
|
||||
for (let i = 0; i < 60; i++) queue.playAt(i);
|
||||
|
||||
// Walk back through history. The first prev returns whatever the
|
||||
// 50th-most-recent push was (= index 9, since pushes 0..58 happened
|
||||
// and the oldest 9 fell off). We can verify by counting prevs that
|
||||
// succeed before history exhausts and prev returns null in random.
|
||||
let count = 0;
|
||||
while (queue.prev() !== null) {
|
||||
count++;
|
||||
if (count > 100) break; // safety
|
||||
}
|
||||
expect(count).toBe(50);
|
||||
});
|
||||
});
|
||||
|
||||
describe("addNext", () => {
|
||||
it("appends when queue is empty (no current)", () => {
|
||||
queue.addNext(makeSong("a"));
|
||||
expect(queue.size()).toBe(1);
|
||||
expect(queue.list()[0].id).toBe("a");
|
||||
});
|
||||
|
||||
it("appends when nothing is currently playing (currentIndex < 0)", () => {
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
// No play() yet → currentIndex still -1
|
||||
queue.addNext(makeSong("c"));
|
||||
expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c"]);
|
||||
});
|
||||
|
||||
it("inserts at currentIndex+1 mid-queue", () => {
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.add(makeSong("d"));
|
||||
queue.play(); // current = 0 (a)
|
||||
queue.next(); // current = 1 (b)
|
||||
queue.addNext(makeSong("x"));
|
||||
expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "x", "c", "d"]);
|
||||
expect(queue.current()?.id).toBe("b"); // current unchanged
|
||||
});
|
||||
|
||||
it("makes the inserted song play next when next() is called", () => {
|
||||
queue.setMode(PlayMode.Sequential);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.play(); // current = 0 (a)
|
||||
queue.addNext(makeSong("x"));
|
||||
expect(queue.next()?.id).toBe("x");
|
||||
});
|
||||
|
||||
it("shifts playedIndices entries > currentIndex by +1", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.add(makeSong("d"));
|
||||
queue.playAt(2); // current = 2 (c), played = {2}
|
||||
queue.playAt(3); // current = 3 (d), played = {2, 3}
|
||||
queue.playAt(2); // current = 2 (c), played = {2, 3}
|
||||
// Now insert after c — d's index 3 should become 4
|
||||
queue.addNext(makeSong("x"));
|
||||
expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c", "x", "d"]);
|
||||
// After addNext: currentIndex still 2; played should be {2, 4}
|
||||
// (the previously-played 'd' is now at index 4)
|
||||
// Verify by removing 'x' (index 3) — d should remain played at index 3
|
||||
queue.remove(3);
|
||||
expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c", "d"]);
|
||||
});
|
||||
|
||||
it("shifts history entries > currentIndex by +1", () => {
|
||||
queue.setMode(PlayMode.Random);
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.add(makeSong("d"));
|
||||
queue.playAt(0); // current = 0
|
||||
queue.playAt(3); // current = 3 (d), history = [0]
|
||||
queue.playAt(1); // current = 1 (b), history = [0, 3]
|
||||
queue.addNext(makeSong("x"));
|
||||
// Insert at index 2 → entries > 1 shift +1 → history becomes [0, 4]
|
||||
// queue: [a, b, x, c, d]; d is now at index 4
|
||||
// prev → pop 4 → song at index 4 = d
|
||||
expect(queue.prev()?.id).toBe("d");
|
||||
// prev again → pop 0 → song at index 0 = a
|
||||
expect(queue.prev()?.id).toBe("a");
|
||||
});
|
||||
|
||||
it("idle player + stale currentIndex: insertion target is currentIndex+1, not size-1", () => {
|
||||
// Reproduces the scenario where the player has gone idle but the
|
||||
// queue still has a non-negative currentIndex (e.g., after natural
|
||||
// track end without queue.clear()).
|
||||
queue.add(makeSong("a"));
|
||||
queue.add(makeSong("b"));
|
||||
queue.add(makeSong("c"));
|
||||
queue.add(makeSong("d"));
|
||||
queue.play(); // current = 0 (a)
|
||||
queue.next(); // current = 1 (b)
|
||||
// Simulate idle-with-stale-currentIndex: the player has gone idle
|
||||
// but queue still points at b.
|
||||
// Caller pre-captures insertedAt:
|
||||
const insertedAt = queue.getCurrentIndex() + 1; // = 2
|
||||
queue.addNext(makeSong("x"));
|
||||
// queue is now [a, b, x, c, d]
|
||||
// size-1 would be 4 (d) — WRONG.
|
||||
// insertedAt is 2 (x) — RIGHT.
|
||||
expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "x", "c", "d"]);
|
||||
expect(queue.size() - 1).toBe(4); // proves size-1 strategy would pick d
|
||||
const promoted = queue.playAt(insertedAt);
|
||||
expect(promoted?.id).toBe("x");
|
||||
});
|
||||
});
|
||||
});
|
||||
+75
-1
@@ -21,6 +21,16 @@ export class PlayQueue {
|
||||
private currentIndex = -1;
|
||||
private mode: PlayMode = PlayMode.Sequential;
|
||||
private playedIndices = new Set<number>();
|
||||
private history: number[] = [];
|
||||
private static readonly HISTORY_LIMIT = 50;
|
||||
|
||||
private pushHistory(idx: number): void {
|
||||
if (idx < 0 || idx >= this.songs.length) return;
|
||||
this.history.push(idx);
|
||||
if (this.history.length > PlayQueue.HISTORY_LIMIT) {
|
||||
this.history.shift();
|
||||
}
|
||||
}
|
||||
|
||||
add(song: QueuedSong): void {
|
||||
this.songs.push(song);
|
||||
@@ -30,6 +40,34 @@ export class PlayQueue {
|
||||
this.songs.push(...songs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert a song to play immediately after the current one. Falls
|
||||
* through to plain push when nothing is playing yet (currentIndex < 0
|
||||
* or queue empty), so the existing "add → idle bot starts playing"
|
||||
* flow continues to work.
|
||||
*
|
||||
* Shifts playedIndices and history entries > currentIndex by +1 so
|
||||
* their references stay valid after the splice.
|
||||
*/
|
||||
addNext(song: QueuedSong): void {
|
||||
if (this.currentIndex < 0 || this.songs.length === 0) {
|
||||
this.songs.push(song);
|
||||
return;
|
||||
}
|
||||
const insertAt = this.currentIndex + 1;
|
||||
this.songs.splice(insertAt, 0, song);
|
||||
|
||||
const shifted = new Set<number>();
|
||||
for (const i of this.playedIndices) {
|
||||
shifted.add(i > this.currentIndex ? i + 1 : i);
|
||||
}
|
||||
this.playedIndices = shifted;
|
||||
|
||||
this.history = this.history.map((i) =>
|
||||
i > this.currentIndex ? i + 1 : i,
|
||||
);
|
||||
}
|
||||
|
||||
remove(index: number): QueuedSong | null {
|
||||
if (index < 0 || index >= this.songs.length) return null;
|
||||
const [removed] = this.songs.splice(index, 1);
|
||||
@@ -48,6 +86,12 @@ export class PlayQueue {
|
||||
}
|
||||
this.playedIndices = newPlayed;
|
||||
|
||||
// Same shift logic for history — drop entries pointing at the
|
||||
// removed song; shift entries > index down by 1.
|
||||
this.history = this.history
|
||||
.filter((idx) => idx !== index)
|
||||
.map((idx) => (idx > index ? idx - 1 : idx));
|
||||
|
||||
return removed;
|
||||
}
|
||||
|
||||
@@ -55,11 +99,13 @@ export class PlayQueue {
|
||||
this.songs = [];
|
||||
this.currentIndex = -1;
|
||||
this.playedIndices.clear();
|
||||
this.history = [];
|
||||
}
|
||||
|
||||
play(): QueuedSong | null {
|
||||
if (this.songs.length === 0) return null;
|
||||
this.playedIndices.clear();
|
||||
this.history = [];
|
||||
this.currentIndex = 0;
|
||||
this.playedIndices.add(0);
|
||||
return this.songs[0];
|
||||
@@ -67,6 +113,10 @@ export class PlayQueue {
|
||||
|
||||
playAt(index: number): QueuedSong | null {
|
||||
if (index < 0 || index >= this.songs.length) return null;
|
||||
this.pushHistory(this.currentIndex);
|
||||
// Reset the Random-mode "unplayed" pool — explicit picks restart
|
||||
// shuffle from this point. History tracking is independent and
|
||||
// unaffected by this clear.
|
||||
this.playedIndices.clear();
|
||||
this.currentIndex = index;
|
||||
this.playedIndices.add(index);
|
||||
@@ -80,10 +130,12 @@ export class PlayQueue {
|
||||
case PlayMode.Sequential: {
|
||||
const nextIndex = this.currentIndex + 1;
|
||||
if (nextIndex >= this.songs.length) return null;
|
||||
this.pushHistory(this.currentIndex);
|
||||
this.currentIndex = nextIndex;
|
||||
return this.songs[nextIndex];
|
||||
}
|
||||
case PlayMode.Loop: {
|
||||
this.pushHistory(this.currentIndex);
|
||||
this.currentIndex = (this.currentIndex + 1) % this.songs.length;
|
||||
return this.songs[this.currentIndex];
|
||||
}
|
||||
@@ -95,12 +147,14 @@ export class PlayQueue {
|
||||
if (unplayed.length === 0) return null;
|
||||
const nextIndex =
|
||||
unplayed[Math.floor(Math.random() * unplayed.length)];
|
||||
this.pushHistory(this.currentIndex);
|
||||
this.currentIndex = nextIndex;
|
||||
this.playedIndices.add(nextIndex);
|
||||
return this.songs[nextIndex];
|
||||
}
|
||||
case PlayMode.RandomLoop: {
|
||||
if (this.songs.length === 1) {
|
||||
this.pushHistory(this.currentIndex);
|
||||
this.currentIndex = 0;
|
||||
return this.songs[0];
|
||||
}
|
||||
@@ -108,6 +162,7 @@ export class PlayQueue {
|
||||
do {
|
||||
idx = Math.floor(Math.random() * this.songs.length);
|
||||
} while (idx === this.currentIndex);
|
||||
this.pushHistory(this.currentIndex);
|
||||
this.currentIndex = idx;
|
||||
return this.songs[idx];
|
||||
}
|
||||
@@ -116,9 +171,27 @@ export class PlayQueue {
|
||||
|
||||
prev(): QueuedSong | null {
|
||||
if (this.songs.length === 0) return null;
|
||||
|
||||
// Preferred: pop from the back-stack so prev means "the song I
|
||||
// actually played before this one," not "the previous array slot."
|
||||
while (this.history.length > 0) {
|
||||
const idx = this.history.pop()!;
|
||||
if (idx >= 0 && idx < this.songs.length) {
|
||||
this.currentIndex = idx;
|
||||
this.playedIndices.add(idx);
|
||||
return this.songs[idx];
|
||||
}
|
||||
// Stale entry (song removed) — keep popping.
|
||||
}
|
||||
|
||||
// Fallback: no history to walk back through. In Sequential we
|
||||
// can still meaningfully step the index backward; in random
|
||||
// modes there's nothing useful to return.
|
||||
if (this.mode === PlayMode.Random || this.mode === PlayMode.RandomLoop) {
|
||||
return null;
|
||||
}
|
||||
const prevIndex = this.currentIndex - 1;
|
||||
if (prevIndex < 0) {
|
||||
// In Sequential mode, don't wrap around
|
||||
if (this.mode === PlayMode.Sequential) return null;
|
||||
this.currentIndex = this.songs.length - 1;
|
||||
} else {
|
||||
@@ -153,6 +226,7 @@ export class PlayQueue {
|
||||
setMode(mode: PlayMode): void {
|
||||
this.mode = mode;
|
||||
this.playedIndices.clear();
|
||||
this.history = [];
|
||||
if (this.currentIndex >= 0) {
|
||||
this.playedIndices.add(this.currentIndex);
|
||||
}
|
||||
|
||||
+65
-12
@@ -254,6 +254,8 @@ export class BotInstance extends EventEmitter {
|
||||
const AUDIO_COMMANDS = new Set([
|
||||
"play",
|
||||
"add",
|
||||
"playnext",
|
||||
"pn",
|
||||
"next",
|
||||
"skip",
|
||||
"prev",
|
||||
@@ -270,6 +272,9 @@ export class BotInstance extends EventEmitter {
|
||||
return this.cmdPlay(cmd);
|
||||
case "add":
|
||||
return this.cmdAdd(cmd);
|
||||
case "playnext":
|
||||
case "pn":
|
||||
return this.cmdPlayNext(cmd);
|
||||
case "pause":
|
||||
return this.cmdPause();
|
||||
case "resume":
|
||||
@@ -428,6 +433,39 @@ export class BotInstance extends EventEmitter {
|
||||
return `Added to queue: ${song.name} - ${song.artist} (position ${this.queue.size()})`;
|
||||
}
|
||||
|
||||
private async cmdPlayNext(cmd: ParsedCommand): Promise<string> {
|
||||
if (!cmd.args) return "Usage: !playnext <song name>";
|
||||
const provider = this.getProvider(cmd.flags);
|
||||
const result = await provider.search(cmd.args, 1);
|
||||
if (result.songs.length === 0)
|
||||
return `No results found for: ${cmd.args}`;
|
||||
|
||||
const song = result.songs[0];
|
||||
const wasIdle = this.player.getState() === "idle";
|
||||
// Capture the slot addNext WILL insert at, before mutating the queue.
|
||||
// addNext pushes when currentIndex<0 (slot = size); otherwise splices
|
||||
// at currentIndex+1. Using size-1 after addNext was wrong when the
|
||||
// queue had stale currentIndex>=0 while the player was idle (e.g.,
|
||||
// after natural track end without queue.clear()).
|
||||
const insertedAt =
|
||||
this.queue.getCurrentIndex() < 0
|
||||
? this.queue.size()
|
||||
: this.queue.getCurrentIndex() + 1;
|
||||
this.queue.addNext({ ...song, platform: provider.platform });
|
||||
|
||||
if (wasIdle) {
|
||||
this.queue.playAt(insertedAt);
|
||||
this.player.resetFailures();
|
||||
const ok = await this.resolveAndPlay(this.queue.current()!);
|
||||
this.emit("stateChange");
|
||||
if (!ok) return `Cannot play: ${song.name}`;
|
||||
return `Now playing: ${song.name} - ${song.artist}`;
|
||||
}
|
||||
|
||||
this.emit("stateChange");
|
||||
return `Up next: ${song.name} - ${song.artist}`;
|
||||
}
|
||||
|
||||
private cmdPause(): string {
|
||||
this.player.pause();
|
||||
this.emit("stateChange");
|
||||
@@ -460,13 +498,17 @@ export class BotInstance extends EventEmitter {
|
||||
}
|
||||
|
||||
private async cmdPrev(): Promise<string> {
|
||||
const prev = this.queue.prev();
|
||||
if (prev) {
|
||||
// Retry-skip up to 4 attempts: history can include failed songs
|
||||
// that playNext's auto-advance retry-skipped past, so a single
|
||||
// prev would otherwise land on an unplayable song and leave the
|
||||
// queue's currentIndex stuck mid-failure.
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const prev = this.queue.prev();
|
||||
if (!prev) return "No previous song";
|
||||
const ok = await this.resolveAndPlay(prev);
|
||||
if (!ok) return "Cannot play previous song";
|
||||
return `Now playing: ${prev.name} - ${prev.artist}`;
|
||||
if (ok) return `Now playing: ${prev.name} - ${prev.artist}`;
|
||||
}
|
||||
return "No previous song";
|
||||
return "Cannot play any previous songs (all failed to resolve)";
|
||||
}
|
||||
|
||||
private cmdVol(cmd: ParsedCommand): string {
|
||||
@@ -715,6 +757,7 @@ export class BotInstance extends EventEmitter {
|
||||
`${p}play -b <song> — Search from BiliBili`,
|
||||
`${p}play -y <song> — Search from YouTube (yt-dlp)`,
|
||||
`${p}add <song> — Add to queue`,
|
||||
`${p}playnext <song> — Insert as next song (alias: ${p}pn)`,
|
||||
`${p}pause/resume — Pause/resume`,
|
||||
`${p}next/prev — Next/previous`,
|
||||
`${p}stop — Stop and clear queue`,
|
||||
@@ -734,17 +777,25 @@ export class BotInstance extends EventEmitter {
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
private async playNext(): Promise<void> {
|
||||
if (this.isAdvancing || !this.connected) return;
|
||||
/**
|
||||
* Advance the queue and play the next song. If the resolved URL fails
|
||||
* (e.g., copyright/region restrictions for QQ), skips up to `maxRetries`
|
||||
* more songs looking for a playable one. Public so REST endpoints that
|
||||
* seed the queue can fall back to this retry-skip behavior.
|
||||
*
|
||||
* Returns true if a song actually started playing, false otherwise.
|
||||
*/
|
||||
async playNext(maxRetries = 3): Promise<boolean> {
|
||||
if (this.isAdvancing || !this.connected) return false;
|
||||
this.isAdvancing = true;
|
||||
try {
|
||||
this.voteSkipUsers.clear();
|
||||
const next = this.queue.next();
|
||||
let started = false;
|
||||
if (next) {
|
||||
let started = await this.resolveAndPlay(next);
|
||||
started = await this.resolveAndPlay(next);
|
||||
if (!started) {
|
||||
// Skip to next if URL resolve fails (up to 3 retries)
|
||||
for (let i = 0; i < 3 && this.connected; i++) {
|
||||
for (let i = 0; i < maxRetries && this.connected; i++) {
|
||||
const retry = this.queue.next();
|
||||
if (!retry) break;
|
||||
if (await this.resolveAndPlay(retry)) {
|
||||
@@ -766,8 +817,9 @@ export class BotInstance extends EventEmitter {
|
||||
await this.refillFm();
|
||||
const refillNext = this.queue.next();
|
||||
if (refillNext) {
|
||||
await this.resolveAndPlay(refillNext);
|
||||
} else {
|
||||
started = await this.resolveAndPlay(refillNext);
|
||||
}
|
||||
if (!started) {
|
||||
this.player.stop();
|
||||
this.profileManager.onSongChange(null).catch(() => {});
|
||||
}
|
||||
@@ -777,6 +829,7 @@ export class BotInstance extends EventEmitter {
|
||||
}
|
||||
}
|
||||
this.emit("stateChange");
|
||||
return started;
|
||||
} finally {
|
||||
this.isAdvancing = false;
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ describe("database", () => {
|
||||
botDb.saveBotInstance(instance);
|
||||
const instances = botDb.getBotInstances();
|
||||
expect(instances).toHaveLength(1);
|
||||
expect(instances[0]).toEqual(instance);
|
||||
expect(instances[0]).toMatchObject(instance);
|
||||
expect(instances[0].autoStart).toBe(true);
|
||||
|
||||
// Test upsert
|
||||
|
||||
@@ -3,6 +3,7 @@ import type {
|
||||
MusicProvider,
|
||||
Song,
|
||||
Playlist,
|
||||
PlaylistDetail,
|
||||
LyricLine,
|
||||
SearchResult,
|
||||
QrCodeResult,
|
||||
@@ -319,6 +320,21 @@ export class NeteaseProvider implements MusicProvider {
|
||||
}));
|
||||
}
|
||||
|
||||
async getPlaylistDetail(playlistId: string): Promise<PlaylistDetail | null> {
|
||||
const res = await this.api.get("/playlist/detail", {
|
||||
params: { id: playlistId, ...this.cookieParams },
|
||||
});
|
||||
const p = res.data?.playlist;
|
||||
if (!p) return null;
|
||||
return {
|
||||
id: String(p.id),
|
||||
name: p.name ?? "",
|
||||
description: p.description ?? "",
|
||||
coverUrl: p.coverImgUrl ?? "",
|
||||
songCount: p.trackCount ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
async getUserPlaylists(): Promise<Playlist[]> {
|
||||
// First get user ID from login status
|
||||
const statusRes = await this.api.get("/login/status", {
|
||||
|
||||
@@ -20,6 +20,14 @@ export interface Playlist {
|
||||
platform: "netease" | "qq" | "bilibili" | "youtube";
|
||||
}
|
||||
|
||||
export interface PlaylistDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
coverUrl: string;
|
||||
songCount: number;
|
||||
}
|
||||
|
||||
export interface Album {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -77,4 +85,5 @@ export interface MusicProvider {
|
||||
getPersonalFm?(): Promise<Song[]>;
|
||||
getDailyRecommendSongs?(): Promise<Song[]>;
|
||||
getUserPlaylists?(): Promise<Playlist[]>;
|
||||
getPlaylistDetail?(playlistId: string): Promise<PlaylistDetail | null>;
|
||||
}
|
||||
+180
-13
@@ -3,6 +3,7 @@ import type {
|
||||
MusicProvider,
|
||||
Song,
|
||||
Playlist,
|
||||
PlaylistDetail,
|
||||
LyricLine,
|
||||
SearchResult,
|
||||
QrCodeResult,
|
||||
@@ -18,6 +19,22 @@ const qqDirectApi = axios.create({
|
||||
headers: { referer: "https://y.qq.com" },
|
||||
});
|
||||
|
||||
// Direct client for c.y.qq.com endpoints (collected playlists / favorites).
|
||||
// The bundled qq-music-api wrapper doesn't expose these endpoints.
|
||||
const qqFavApi = axios.create({
|
||||
baseURL: "https://c.y.qq.com",
|
||||
timeout: 10000,
|
||||
headers: { referer: "https://y.qq.com/" },
|
||||
});
|
||||
|
||||
function computeGtk(pSkey: string): number {
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < pSkey.length; i++) {
|
||||
hash = (hash + (hash << 5) + pSkey.charCodeAt(i)) | 0;
|
||||
}
|
||||
return hash & 0x7fffffff;
|
||||
}
|
||||
|
||||
export class QQMusicProvider implements MusicProvider {
|
||||
readonly platform = "qq" as const;
|
||||
private api: AxiosInstance;
|
||||
@@ -98,6 +115,50 @@ export class QQMusicProvider implements MusicProvider {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Batch-check which song mids are actually streamable. QQ playlists
|
||||
* (especially collected ones) frequently contain a majority of songs
|
||||
* that return result=104003 ("no copyright/region restricted") for the
|
||||
* current user — a sequential retry loop wastes time guessing.
|
||||
*
|
||||
* The wrapper's /getMusicPlay accepts a comma-separated songmid list
|
||||
* and resolves all of them in a single upstream call. We chunk to keep
|
||||
* the URL well under typical 8KB query-string limits and to keep per-
|
||||
* request latency bounded (~2-3s per 100 mids).
|
||||
*
|
||||
* Returns:
|
||||
* - non-null Set: authoritative result. Empty Set means all songs are
|
||||
* unplayable; non-empty means filter to those mids.
|
||||
* - null: every chunk failed. Caller should fall back to sequential
|
||||
* retry rather than treating as "all unplayable".
|
||||
*/
|
||||
async getPlayableSongIds(songIds: string[]): Promise<Set<string> | null> {
|
||||
if (songIds.length === 0) return new Set();
|
||||
|
||||
const CHUNK = 100; // ~14 chars/mid * 100 + commas ≈ 1.5KB
|
||||
const playable = new Set<string>();
|
||||
let allChunksFailed = true;
|
||||
for (let i = 0; i < songIds.length; i += CHUNK) {
|
||||
const slice = songIds.slice(i, i + CHUNK);
|
||||
try {
|
||||
const res = await this.api.get("/getMusicPlay", {
|
||||
params: { songmid: slice.join(","), quality: this.quality, ...this.cookieParams },
|
||||
});
|
||||
const playUrlMap: Record<string, { url?: string }> | undefined =
|
||||
res.data?.data?.playUrl;
|
||||
if (!playUrlMap) continue; // chunk-level failure, try next
|
||||
allChunksFailed = false;
|
||||
for (const [mid, info] of Object.entries(playUrlMap)) {
|
||||
if (info?.url) playable.add(mid);
|
||||
}
|
||||
} catch {
|
||||
// chunk-level failure — keep going so a transient error on one
|
||||
// chunk doesn't poison the whole batch.
|
||||
}
|
||||
}
|
||||
return allChunksFailed ? null : playable;
|
||||
}
|
||||
|
||||
async getSongDetail(songId: string): Promise<Song | null> {
|
||||
// Try /getSongInfo for full metadata, but fall through to a minimal
|
||||
// stub if the library endpoint fails (current @sansenjian/qq-music-api
|
||||
@@ -162,6 +223,21 @@ export class QQMusicProvider implements MusicProvider {
|
||||
}));
|
||||
}
|
||||
|
||||
async getPlaylistDetail(playlistId: string): Promise<PlaylistDetail | null> {
|
||||
const res = await this.api.get("/getSongListDetail", {
|
||||
params: { disstid: playlistId, ...this.cookieParams },
|
||||
});
|
||||
const cd = res.data?.response?.cdlist?.[0];
|
||||
if (!cd) return null;
|
||||
return {
|
||||
id: String(cd.disstid ?? cd.dissid ?? ""),
|
||||
name: cd.dissname ?? "",
|
||||
description: cd.desc ?? "",
|
||||
coverUrl: cd.logo ?? "",
|
||||
songCount: cd.songnum ?? cd.total_song_num ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
async getRecommendPlaylists(): Promise<Playlist[]> {
|
||||
const res = await this.api.get("/getSongLists", {
|
||||
params: { categoryId: 10000000, pageSize: 10, ...this.cookieParams },
|
||||
@@ -291,25 +367,116 @@ export class QQMusicProvider implements MusicProvider {
|
||||
}
|
||||
}
|
||||
|
||||
async getUserPlaylists(): Promise<Playlist[]> {
|
||||
if (!this.cookie) return [];
|
||||
const uinMatch = /(?:^|; )uin=o?0?(\d+)/.exec(this.cookie);
|
||||
const uin = uinMatch ? uinMatch[1] : "";
|
||||
if (!uin) return [];
|
||||
async getDailyRecommendSongs(): Promise<Song[]> {
|
||||
// QQ has no per-user daily list; use newsong.NewSongServer (新歌速递)
|
||||
// as the closest analogue. Returns ~20 newly-released songs.
|
||||
try {
|
||||
const res = await this.api.get("/user/getUserPlaylists", {
|
||||
params: { uin, ...this.cookieParams },
|
||||
const res = await this.api.get("/getNewSongs", {
|
||||
params: { ...this.cookieParams },
|
||||
});
|
||||
if (res.data?.response?.code !== 0) return [];
|
||||
return (res.data?.response?.data?.playlists ?? []).map((p: any) => ({
|
||||
id: String(p.dissid ?? p.id ?? ""),
|
||||
name: p.dissname ?? p.name ?? "",
|
||||
coverUrl: p.imgurl ?? p.coverUrl ?? "",
|
||||
songCount: p.song_count ?? p.listennum ?? 0,
|
||||
const list: any[] = res.data?.response?.new_song?.data?.songlist ?? [];
|
||||
return list.map((s: any) => ({
|
||||
id: String(s.mid ?? s.id),
|
||||
name: s.title ?? s.name ?? "",
|
||||
artist: (s.singer ?? []).map((a: any) => a.name).join(" / "),
|
||||
album: s.album?.name ?? s.album?.title ?? "",
|
||||
duration: s.interval ?? 0,
|
||||
coverUrl: s.album?.mid
|
||||
? `https://y.gtimg.cn/music/photo_new/T002R300x300M000${s.album.mid}.jpg`
|
||||
: "",
|
||||
platform: "qq",
|
||||
}));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async getUserPlaylists(): Promise<Playlist[]> {
|
||||
if (!this.cookie) return [];
|
||||
const uinMatch = /(?:^|; )uin=o?0?(\d+)/.exec(this.cookie);
|
||||
const uin = uinMatch ? uinMatch[1] : "";
|
||||
if (!uin) return [];
|
||||
|
||||
// Created and collected playlists come from two separate QQ endpoints.
|
||||
// Run them in parallel and concatenate (created first, then collected),
|
||||
// matching the order shown in the QQ Music desktop app.
|
||||
const [created, collected] = await Promise.all([
|
||||
this.fetchCreatedPlaylists(uin),
|
||||
this.fetchCollectedPlaylists(uin),
|
||||
]);
|
||||
return [...created, ...collected];
|
||||
}
|
||||
|
||||
private async fetchCreatedPlaylists(uin: string): Promise<Playlist[]> {
|
||||
try {
|
||||
const res = await this.api.get("/user/getUserPlaylists", {
|
||||
params: { uin, ...this.cookieParams },
|
||||
});
|
||||
if (res.data?.response?.code !== 0) return [];
|
||||
return (res.data?.response?.data?.playlists ?? []).map((p: any) => {
|
||||
// fcg_get_profile_homepage returns title/picurl/subtitle ("X首 Y次播放").
|
||||
const subtitle: string = p.subtitle ?? "";
|
||||
const songCountFromSubtitle = parseInt(subtitle.match(/(\d+)\s*首/)?.[1] ?? "0", 10);
|
||||
return {
|
||||
id: String(p.dissid ?? p.id ?? ""),
|
||||
name: p.title ?? p.dissname ?? p.name ?? "",
|
||||
coverUrl: p.picurl ?? p.imgurl ?? p.coverUrl ?? "",
|
||||
songCount: p.song_count ?? p.listennum ?? songCountFromSubtitle,
|
||||
platform: "qq",
|
||||
};
|
||||
});
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
private async fetchCollectedPlaylists(uin: string): Promise<Playlist[]> {
|
||||
// c.y.qq.com fav endpoint: reqtype=3 returns collected playlists (cdlist).
|
||||
// Requires g_tk derived from the p_skey cookie.
|
||||
const pSkeyMatch = /(?:^|; )p_skey=([^;]+)/.exec(this.cookie);
|
||||
if (!pSkeyMatch) return [];
|
||||
const gtk = computeGtk(pSkeyMatch[1]);
|
||||
|
||||
const PAGE_SIZE = 30;
|
||||
const MAX_PAGES = 10; // 300-playlist hard cap; should cover any sane user
|
||||
const all: Playlist[] = [];
|
||||
try {
|
||||
for (let page = 0; page < MAX_PAGES; page++) {
|
||||
const sin = page * PAGE_SIZE;
|
||||
const ein = sin + PAGE_SIZE - 1;
|
||||
const res = await qqFavApi.get("/fav/fcgi-bin/fcg_get_profile_order_asset.fcg", {
|
||||
params: {
|
||||
ct: 20,
|
||||
cid: 205360956,
|
||||
userid: uin,
|
||||
reqtype: 3,
|
||||
sin,
|
||||
ein,
|
||||
g_tk: gtk,
|
||||
format: "json",
|
||||
},
|
||||
headers: { Cookie: this.cookie },
|
||||
});
|
||||
if (res.data?.code !== 0) break;
|
||||
const list: any[] = res.data?.data?.cdlist ?? [];
|
||||
for (const p of list) {
|
||||
all.push({
|
||||
id: String(p.dissid ?? ""),
|
||||
name: p.dissname ?? "",
|
||||
coverUrl: p.logo ?? "",
|
||||
songCount: p.songnum ?? 0,
|
||||
platform: "qq",
|
||||
});
|
||||
}
|
||||
// Stop when upstream signals no more pages, or when this page is
|
||||
// short (also indicates end). has_more is the canonical signal.
|
||||
const hasMore = res.data?.data?.has_more === 1 || res.data?.data?.has_more === true;
|
||||
if (!hasMore || list.length < PAGE_SIZE) break;
|
||||
}
|
||||
} catch {
|
||||
// Return whatever we got so far on partial failure rather than dropping
|
||||
// earlier pages.
|
||||
}
|
||||
return all;
|
||||
}
|
||||
}
|
||||
+9
-25
@@ -168,32 +168,16 @@ export function createMusicRouter(
|
||||
router.get("/playlist/:id/detail", async (req, res) => {
|
||||
try {
|
||||
const provider = getProvider(req.query.platform as string);
|
||||
// Use the playlist songs endpoint to get basic info,
|
||||
// but we also need detail info (name, cover, description).
|
||||
// For netease, we access the underlying API directly.
|
||||
const nProvider = provider as any;
|
||||
if (nProvider.api) {
|
||||
const cookieParams = nProvider.cookie
|
||||
? { cookie: nProvider.cookie }
|
||||
: {};
|
||||
const detailRes = await nProvider.api.get("/playlist/detail", {
|
||||
params: { id: req.params.id, ...cookieParams },
|
||||
});
|
||||
const p = detailRes.data?.playlist;
|
||||
if (p) {
|
||||
res.json({
|
||||
playlist: {
|
||||
id: String(p.id),
|
||||
name: p.name,
|
||||
description: p.description ?? "",
|
||||
coverUrl: p.coverImgUrl ?? "",
|
||||
songCount: p.trackCount ?? 0,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!provider.getPlaylistDetail) {
|
||||
res.status(501).json({ error: "Not supported by this provider" });
|
||||
return;
|
||||
}
|
||||
res.status(404).json({ error: "Playlist not found" });
|
||||
const detail = await provider.getPlaylistDetail(req.params.id);
|
||||
if (!detail) {
|
||||
res.status(404).json({ error: "Playlist not found" });
|
||||
return;
|
||||
}
|
||||
res.json({ playlist: detail });
|
||||
} catch (err) {
|
||||
logger.error({ err }, "Get playlist detail failed");
|
||||
res.status(500).json({ error: (err as Error).message });
|
||||
|
||||
+83
-6
@@ -249,9 +249,32 @@ export function createPlayerRouter(
|
||||
return;
|
||||
}
|
||||
|
||||
// QQ-specific optimization: many users' QQ playlists contain a
|
||||
// large fraction of songs that return result=104003 (region/copyright
|
||||
// restricted). Batch-resolve URLs once and only queue the playable
|
||||
// ones, otherwise the playback retry loop wastes time guessing.
|
||||
let queueable: { id: string }[] = songs;
|
||||
const totalCount = songs.length;
|
||||
const qqLike = provider as { getPlayableSongIds?: (ids: string[]) => Promise<Set<string> | null> };
|
||||
if (typeof qqLike.getPlayableSongIds === "function") {
|
||||
const playable = await qqLike.getPlayableSongIds(songs.map((s: { id: string }) => s.id));
|
||||
if (playable !== null) {
|
||||
// Authoritative answer from upstream — even an empty set means
|
||||
// "we know none are playable", short-circuit immediately rather
|
||||
// than wasting 20+ retries.
|
||||
queueable = songs.filter((s: { id: string }) => playable.has(s.id));
|
||||
}
|
||||
// If null, the batch endpoint itself errored — fall through to
|
||||
// the sequential retry path, which still has a chance.
|
||||
}
|
||||
if (queueable.length === 0) {
|
||||
res.json({ ok: false, message: `歌单 ${totalCount} 首歌曲均无版权可播放（区域/版权限制）` });
|
||||
return;
|
||||
}
|
||||
|
||||
const queue = bot.getQueueManager();
|
||||
queue.clear();
|
||||
for (const song of songs) {
|
||||
for (const song of queueable) {
|
||||
queue.add({ ...song, platform: provider.platform });
|
||||
}
|
||||
|
||||
@@ -265,11 +288,25 @@ export function createPlayerRouter(
|
||||
first = queue.play();
|
||||
}
|
||||
|
||||
if (first) {
|
||||
await bot.resolveAndPlay(first);
|
||||
// If the first picked song can't resolve (e.g., QQ song with no
|
||||
// streaming entitlement → result 104003), fall back to playNext's
|
||||
// retry-skip behavior. Use a higher retry budget than the default
|
||||
// trackEnd auto-advance because user-initiated playlist plays
|
||||
// commonly have long contiguous runs of unplayable songs.
|
||||
let started = first ? await bot.resolveAndPlay(first) : false;
|
||||
if (first && !started) {
|
||||
started = await bot.playNext(20);
|
||||
}
|
||||
|
||||
res.json({ message: `Loaded ${songs.length} songs. Now playing: ${first?.name ?? "unknown"}` });
|
||||
const playing = queue.current();
|
||||
const loadedMsg = queueable.length < totalCount
|
||||
? `已加载 ${queueable.length}/${totalCount} 首（其余区域/版权限制）`
|
||||
: `已加载 ${queueable.length} 首`;
|
||||
if (started && playing) {
|
||||
res.json({ ok: true, message: `${loadedMsg}，正在播放：${playing.name}` });
|
||||
} else {
|
||||
res.json({ ok: false, message: `${loadedMsg}，但无法开始播放。` });
|
||||
}
|
||||
} catch (err) {
|
||||
logger.error({ err }, "Play playlist failed");
|
||||
res.status(500).json({ error: (err as Error).message });
|
||||
@@ -293,11 +330,51 @@ export function createPlayerRouter(
|
||||
bot.getPlayer().resetFailures();
|
||||
const ok = await bot.resolveAndPlay(queue.current()!);
|
||||
if (!ok) {
|
||||
res.json({ message: `Cannot play: ${song.name || song.id}` });
|
||||
res.json({ ok: false, message: `无法播放「${song.name || song.id}」（区域/版权限制）` });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({ message: `Now playing: ${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
|
||||
res.json({ ok: true, message: `正在播放：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: (err as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
// Insert a single song to play right after the current one.
|
||||
// If nothing is playing, behaves like /play-song (start immediately).
|
||||
router.post("/:botId/play-next-song", async (req, res) => {
|
||||
try {
|
||||
const bot = (req as any).bot;
|
||||
const { song } = req.body;
|
||||
if (!song || !song.id || !song.platform) {
|
||||
res.status(400).json({ error: "song object with id and platform is required" });
|
||||
return;
|
||||
}
|
||||
const queue = bot.getQueueManager();
|
||||
const wasIdle = bot.getPlayer().getState() === "idle";
|
||||
// Capture the slot addNext WILL insert at, before mutating the queue.
|
||||
// addNext pushes when currentIndex<0 (slot = size); otherwise splices
|
||||
// at currentIndex+1. Using size-1 after addNext was wrong when the
|
||||
// queue had stale currentIndex>=0 while the player was idle (e.g.,
|
||||
// after natural track end without queue.clear()).
|
||||
const insertedAt =
|
||||
queue.getCurrentIndex() < 0 ? queue.size() : queue.getCurrentIndex() + 1;
|
||||
queue.addNext(song);
|
||||
|
||||
if (wasIdle) {
|
||||
// Promote the just-added song to current and start it.
|
||||
queue.playAt(insertedAt);
|
||||
bot.getPlayer().resetFailures();
|
||||
const ok = await bot.resolveAndPlay(queue.current()!);
|
||||
if (!ok) {
|
||||
res.json({ ok: false, message: `无法播放「${song.name || song.id}」（区域/版权限制）` });
|
||||
return;
|
||||
}
|
||||
res.json({ ok: true, message: `正在播放：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({ ok: true, message: `已加入下一首：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: (err as Error).message });
|
||||
}
|
||||
|
||||
+177
-2
@@ -5,32 +5,89 @@
|
||||
<RouterView />
|
||||
</main>
|
||||
<Player />
|
||||
<Toast />
|
||||
|
||||
<!-- 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>
|
||||
<CoverArt :url="currentSong.coverUrl" :size="40" :radius="8" />
|
||||
<div class="m-player-info">
|
||||
<div class="m-player-name">{{ currentSong.name }}</div>
|
||||
<div class="m-player-artist">{{ currentSong.artist }}</div>
|
||||
</div>
|
||||
<button class="m-player-btn" @click.stop="playerStore.isPlaying ? playerStore.pause() : playerStore.resume()">
|
||||
<Icon :icon="playerStore.isPlaying ? 'mdi:pause' : 'mdi:play'" />
|
||||
</button>
|
||||
<button class="m-player-btn" @click.stop="playerStore.next()">
|
||||
<Icon icon="mdi:skip-next" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile bottom tab bar -->
|
||||
<nav class="m-tabbar">
|
||||
<RouterLink to="/" class="m-tab" :class="{ active: route.path === '/' }">
|
||||
<Icon icon="mdi:home" class="tab-icon" />
|
||||
<span class="tab-label">发现</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/search" class="m-tab" :class="{ active: route.path === '/search' }">
|
||||
<Icon icon="mdi:magnify" class="tab-icon" />
|
||||
<span class="tab-label">搜索</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/library" class="m-tab" :class="{ active: route.path === '/library' }">
|
||||
<Icon icon="mdi:music-box-multiple" class="tab-icon" />
|
||||
<span class="tab-label">音乐库</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/settings" class="m-tab" :class="{ active: route.path.startsWith('/settings') }">
|
||||
<Icon icon="mdi:cog" class="tab-icon" />
|
||||
<span class="tab-label">设置</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted } from 'vue';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { usePlayerStore } from './stores/player.js';
|
||||
import { useWebSocket } from './composables/useWebSocket.js';
|
||||
import Navbar from './components/Navbar.vue';
|
||||
import Player from './components/Player.vue';
|
||||
import CoverArt from './components/CoverArt.vue';
|
||||
import Toast from './components/Toast.vue';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const theme = computed(() => playerStore.theme);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { connect } = useWebSocket();
|
||||
const currentSong = computed(() => playerStore.currentSong);
|
||||
|
||||
const mobileProgressPct = ref(0);
|
||||
let syncTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let mobileRaf: number | null = null;
|
||||
|
||||
function updateMobileProgress() {
|
||||
const duration = currentSong.value?.duration ?? 0;
|
||||
mobileProgressPct.value = duration > 0
|
||||
? Math.min((playerStore.elapsed / duration) * 100, 100)
|
||||
: 0;
|
||||
mobileRaf = requestAnimationFrame(updateMobileProgress);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
playerStore.loadTheme();
|
||||
connect();
|
||||
playerStore.fetchBots();
|
||||
// Periodically sync elapsed time from server (ground truth)
|
||||
syncTimer = setInterval(() => playerStore.syncElapsed(), 3000);
|
||||
mobileRaf = requestAnimationFrame(updateMobileProgress);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (syncTimer) clearInterval(syncTimer);
|
||||
if (mobileRaf !== null) cancelAnimationFrame(mobileRaf);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -47,5 +104,123 @@ onUnmounted(() => {
|
||||
@media (max-width: 1336px) {
|
||||
padding: 80px 5vw 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 72px 16px 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile mini player
|
||||
.m-player {
|
||||
position: fixed;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 68px;
|
||||
height: 58px;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
|
||||
z-index: 95;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 769px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.m-player-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.m-player-progress-fill {
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.m-player-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.m-player-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.m-player-artist {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.m-player-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
opacity: 0.85;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Mobile bottom tab bar
|
||||
.m-tabbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
background: var(--bg-navbar);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-top: 1px solid var(--border-color);
|
||||
z-index: 100;
|
||||
|
||||
@media (min-width: 769px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 6px 14px;
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
|
||||
&.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+195
-107
@@ -5,6 +5,7 @@
|
||||
<div class="nav-links">
|
||||
<RouterLink to="/" class="nav-link" active-class="active">发现</RouterLink>
|
||||
<RouterLink to="/search" class="nav-link" active-class="active">搜索</RouterLink>
|
||||
<RouterLink to="/library" class="nav-link" active-class="active">音乐库</RouterLink>
|
||||
<RouterLink to="/history" class="nav-link" active-class="active">播放历史</RouterLink>
|
||||
</div>
|
||||
|
||||
@@ -19,38 +20,68 @@
|
||||
<Icon icon="mdi:chevron-down" class="bot-chevron" :class="{ rotated: dropdownOpen }" />
|
||||
</button>
|
||||
<div v-if="dropdownOpen" class="bot-dropdown">
|
||||
<div class="bot-dropdown-header">机器人</div>
|
||||
<div
|
||||
v-for="bot in store.bots"
|
||||
:key="bot.id"
|
||||
class="bot-dropdown-row"
|
||||
class="bot-card"
|
||||
:class="{ active: bot.id === store.activeBotId }"
|
||||
>
|
||||
<button
|
||||
class="bot-dropdown-item"
|
||||
:class="{ active: bot.id === store.activeBotId }"
|
||||
@click="selectBot(bot.id)"
|
||||
>
|
||||
<div class="bot-card-head" @click="bot.connected ? selectBot(bot.id) : undefined">
|
||||
<span class="bot-dot" :class="{ online: bot.connected }" />
|
||||
<span class="bot-dropdown-name">{{ bot.name }}</span>
|
||||
<span class="bot-card-name">{{ bot.name }}</span>
|
||||
<span v-if="bot.id === store.activeBotId" class="bot-current-badge">当前</span>
|
||||
<span v-if="bot.playing && !bot.paused" class="bot-playing-badge">播放中</span>
|
||||
<span v-else-if="bot.paused" class="bot-paused-badge">已暂停</span>
|
||||
<span v-else-if="bot.connected" class="bot-idle-badge">空闲</span>
|
||||
<span v-else class="bot-offline-badge">离线</span>
|
||||
</button>
|
||||
<button
|
||||
class="bot-power-btn"
|
||||
:class="{ online: bot.connected }"
|
||||
:title="bot.connected ? `停止 ${bot.name}` : `启动 ${bot.name}`"
|
||||
:disabled="togglingBots[bot.id]"
|
||||
@click.stop="togglePower(bot)"
|
||||
>
|
||||
<Icon :icon="bot.connected ? 'mdi:power' : 'mdi:power-off'" />
|
||||
</button>
|
||||
<button class="bot-link-btn" :title="`复制 ${bot.name} 的专属链接`" @click.stop="copyBotLink(bot.id)">
|
||||
<Icon icon="mdi:link-variant" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="bot-card-controls">
|
||||
<button
|
||||
v-if="bot.connected"
|
||||
class="bot-ctrl-btn danger"
|
||||
:disabled="togglingBots[bot.id]"
|
||||
@click.stop="togglePower(bot)"
|
||||
>
|
||||
<Icon icon="mdi:link-off" /> 断开
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="bot-ctrl-btn primary"
|
||||
:disabled="togglingBots[bot.id]"
|
||||
@click.stop="togglePower(bot)"
|
||||
>
|
||||
<Icon icon="mdi:link-variant" /> 连接
|
||||
</button>
|
||||
<button
|
||||
v-if="bot.playing || bot.paused"
|
||||
class="bot-ctrl-btn"
|
||||
:disabled="!bot.connected"
|
||||
@click.stop="store.pause()"
|
||||
>
|
||||
<Icon icon="mdi:stop" /> 停止
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="bot-ctrl-btn"
|
||||
:disabled="!bot.connected"
|
||||
@click.stop="store.resume()"
|
||||
>
|
||||
<Icon icon="mdi:play" /> 播放
|
||||
</button>
|
||||
<button
|
||||
class="bot-ctrl-btn"
|
||||
:disabled="!bot.connected || (!bot.playing && !bot.paused)"
|
||||
@click.stop="store.next()"
|
||||
title="下一首"
|
||||
>
|
||||
<Icon icon="mdi:skip-next" />
|
||||
</button>
|
||||
<button class="bot-ctrl-btn" @click.stop="copyBotLink(bot.id)" title="复制链接">
|
||||
<Icon icon="mdi:link-variant" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bot-dropdown-divider" />
|
||||
<div class="bot-dropdown-hint">点击切换 · 🔗 复制专属链接</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -227,6 +258,11 @@ onUnmounted(() => {
|
||||
@media (max-width: 1336px) {
|
||||
padding: 0 5vw;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 16px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -234,11 +270,20 @@ onUnmounted(() => {
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin-right: 40px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 17px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@@ -266,7 +311,7 @@ onUnmounted(() => {
|
||||
opacity: 0.6;
|
||||
|
||||
&.online {
|
||||
background: rgba(51, 94, 234, 0.15);
|
||||
background: var(--color-primary-15);
|
||||
color: var(--color-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -295,12 +340,25 @@ onUnmounted(() => {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
min-height: 32px;
|
||||
gap: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
}
|
||||
|
||||
.bot-state-mini {
|
||||
font-size: 14px;
|
||||
&.playing { color: #22c55e; }
|
||||
&.paused { color: #eab308; }
|
||||
&.playing { color: var(--color-online); }
|
||||
&.paused { color: var(--color-paused); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bot-chevron {
|
||||
@@ -311,6 +369,10 @@ onUnmounted(() => {
|
||||
&.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bot-dot {
|
||||
@@ -321,7 +383,12 @@ onUnmounted(() => {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.online {
|
||||
background: #22c55e;
|
||||
background: var(--color-online);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -330,96 +397,83 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.bot-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
min-width: 320px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 4px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
padding: 6px;
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
z-index: 200;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bot-dropdown-item {
|
||||
.bot-dropdown-header {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-tertiary);
|
||||
padding: 6px 10px 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.bot-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 4px;
|
||||
border: 1px solid transparent;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&.active {
|
||||
background: var(--color-primary-12);
|
||||
border-color: rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.bot-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(51, 94, 234, 0.12);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bot-dropdown-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bot-dropdown-name {
|
||||
.bot-card-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bot-link-btn {
|
||||
.bot-current-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-primary-15);
|
||||
flex-shrink: 0;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 15px;
|
||||
opacity: 0.4;
|
||||
transition: opacity var(--transition-fast), background var(--transition-fast);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.bot-power-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
color: var(--text-tertiary);
|
||||
transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
opacity: 1;
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.25;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
&.online {
|
||||
color: #22c55e;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.bot-playing-badge,
|
||||
@@ -427,25 +481,25 @@ onUnmounted(() => {
|
||||
.bot-idle-badge,
|
||||
.bot-offline-badge {
|
||||
font-size: 11px;
|
||||
padding: 1px 6px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bot-playing-badge {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #22c55e;
|
||||
background: var(--color-online-15);
|
||||
color: var(--color-online);
|
||||
}
|
||||
|
||||
.bot-paused-badge {
|
||||
background: rgba(234, 179, 8, 0.15);
|
||||
color: #eab308;
|
||||
background: var(--color-paused-15);
|
||||
color: var(--color-paused);
|
||||
}
|
||||
|
||||
.bot-idle-badge {
|
||||
background: rgba(51, 94, 234, 0.12);
|
||||
color: var(--color-primary);
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.bot-offline-badge {
|
||||
@@ -453,17 +507,47 @@ onUnmounted(() => {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.bot-dropdown-divider {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 4px 0;
|
||||
.bot-card-controls {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bot-dropdown-hint {
|
||||
padding: 4px 12px 6px;
|
||||
.bot-ctrl-btn {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--hover-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
@@ -471,12 +555,16 @@ onUnmounted(() => {
|
||||
opacity: 0.6;
|
||||
transition: opacity var(--transition-fast);
|
||||
&:hover { opacity: 1; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-dialog-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
background: var(--bg-modal-scrim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -490,7 +578,7 @@ onUnmounted(() => {
|
||||
padding: 20px;
|
||||
min-width: 360px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: var(--shadow-modal);
|
||||
}
|
||||
|
||||
.link-dialog-title {
|
||||
|
||||
@@ -206,6 +206,10 @@ function cycleMode() {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.player-bar {
|
||||
@@ -326,12 +330,12 @@ function cycleMode() {
|
||||
|
||||
.bot-badge {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-micro);
|
||||
font-weight: var(--fw-semi);
|
||||
padding: 0 5px;
|
||||
background: rgba(51, 94, 234, 0.15);
|
||||
background: var(--color-primary-15);
|
||||
color: var(--color-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius-xs);
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -171,7 +171,7 @@ async function clearAndStop() {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -18,6 +18,9 @@
|
||||
<button class="action-btn" @click.stop="$emit('play')" title="播放">
|
||||
<Icon icon="mdi:play" />
|
||||
</button>
|
||||
<button class="action-btn" @click.stop="$emit('playNext')" title="下一首播放">
|
||||
<Icon icon="mdi:playlist-play" />
|
||||
</button>
|
||||
<button class="action-btn" @click.stop="$emit('add')" title="添加到队列">
|
||||
<Icon icon="mdi:playlist-plus" />
|
||||
</button>
|
||||
@@ -38,6 +41,7 @@ defineProps<{
|
||||
|
||||
defineEmits<{
|
||||
play: [];
|
||||
playNext: [];
|
||||
add: [];
|
||||
}>();
|
||||
|
||||
@@ -64,7 +68,7 @@ function formatDuration(seconds: number): string {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,31 +101,31 @@ function formatDuration(seconds: number): string {
|
||||
|
||||
.platform-badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-micro);
|
||||
font-weight: var(--fw-semi);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius-xs);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.badge-netease {
|
||||
background: rgba(232, 17, 35, 0.15);
|
||||
color: #e81123;
|
||||
background: var(--brand-netease-15);
|
||||
color: var(--brand-netease);
|
||||
}
|
||||
|
||||
.badge-qq {
|
||||
background: rgba(18, 183, 106, 0.15);
|
||||
color: #12b76a;
|
||||
background: var(--brand-qq-15);
|
||||
color: var(--brand-qq);
|
||||
}
|
||||
|
||||
.badge-bilibili {
|
||||
background: rgba(0, 161, 214, 0.15);
|
||||
color: #00a1d6;
|
||||
background: var(--brand-bilibili-15);
|
||||
color: var(--brand-bilibili);
|
||||
}
|
||||
|
||||
.badge-youtube {
|
||||
background: rgba(255, 0, 0, 0.12);
|
||||
color: #ff0000;
|
||||
background: var(--brand-youtube-12);
|
||||
color: var(--brand-youtube);
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
@@ -152,6 +156,15 @@ function formatDuration(seconds: number): string {
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
// Touch devices have no :hover, so the parent-hover-reveals-actions
|
||||
// pattern leaves all action buttons invisible. Always show on coarse-
|
||||
// pointer (touch) inputs — this is also where bigger tap targets matter.
|
||||
@media (pointer: coarse) {
|
||||
.song-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div v-if="sources.length > 0" class="source-tabs">
|
||||
<template v-if="sources.length >= 2">
|
||||
<button
|
||||
v-for="src in sources"
|
||||
:key="src"
|
||||
type="button"
|
||||
class="source-tab"
|
||||
:class="{ active: src === modelValue }"
|
||||
@click="$emit('update:modelValue', src)"
|
||||
>
|
||||
{{ LABELS[src] }}
|
||||
</button>
|
||||
</template>
|
||||
<span v-else class="source-tab-label" :title="`数据来自${LABELS[sources[0]]}`">
|
||||
{{ LABELS[sources[0]] }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Source } from '../stores/player.js';
|
||||
|
||||
const LABELS: Record<Source, string> = {
|
||||
netease: '网易云',
|
||||
qq: 'QQ',
|
||||
};
|
||||
|
||||
defineProps<{
|
||||
modelValue: Source;
|
||||
sources: Source[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: Source];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.source-tabs {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
margin-left: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.source-tab {
|
||||
padding: 4px 10px;
|
||||
min-height: 28px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-12);
|
||||
font-weight: var(--fw-semi);
|
||||
}
|
||||
}
|
||||
|
||||
// Single-source mode: not interactive, but tells the user which platform
|
||||
// they're looking at instead of leaving them guessing.
|
||||
.source-tab-label {
|
||||
padding: 4px 10px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text-tertiary);
|
||||
background: var(--hover-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.source-tabs {
|
||||
margin-left: 8px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.source-tab {
|
||||
padding: 6px 10px;
|
||||
min-height: 36px; // larger touch target on mobile
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<Transition name="toast">
|
||||
<div v-if="visible && current" class="toast" :class="`toast--${current.type}`">
|
||||
<Icon :icon="current.type === 'error' ? 'mdi:alert-circle' : 'mdi:information'" class="toast-icon" />
|
||||
<span class="toast-msg">{{ current.message }}</span>
|
||||
<button class="toast-close" @click="visible = false" aria-label="关闭">
|
||||
<Icon icon="mdi:close" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onUnmounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { usePlayerStore } from '../stores/player.js';
|
||||
|
||||
const store = usePlayerStore();
|
||||
const visible = ref(false);
|
||||
const current = ref<{ id: number; message: string; type: 'error' | 'info' } | null>(null);
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
watch(
|
||||
() => store.notification?.id,
|
||||
() => {
|
||||
if (!store.notification) return;
|
||||
current.value = store.notification;
|
||||
visible.value = true;
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
visible.value = false;
|
||||
}, current.value.type === 'error' ? 5000 : 3000);
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) clearTimeout(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: calc(var(--player-height) + 24px);
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
max-width: min(90vw, 480px);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
font-size: var(--fs-body);
|
||||
color: var(--text-primary);
|
||||
z-index: 1000;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
bottom: calc(var(--player-height) + 60px); // sit above mobile tabbar
|
||||
}
|
||||
}
|
||||
|
||||
.toast--error {
|
||||
border-color: var(--brand-netease);
|
||||
.toast-icon { color: var(--brand-netease); }
|
||||
}
|
||||
|
||||
.toast--info {
|
||||
border-color: var(--color-primary);
|
||||
.toast-icon { color: var(--color-primary); }
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toast-msg {
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
color: var(--text-tertiary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:hover { color: var(--text-primary); }
|
||||
}
|
||||
|
||||
.toast-enter-active,
|
||||
.toast-leave-active {
|
||||
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.toast-enter-from,
|
||||
.toast-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
</style>
|
||||
@@ -13,6 +13,11 @@ const router = createRouter({
|
||||
name: 'search',
|
||||
component: () => import('../views/Search.vue'),
|
||||
},
|
||||
{
|
||||
path: '/library',
|
||||
name: 'library',
|
||||
component: () => import('../views/Library.vue'),
|
||||
},
|
||||
{
|
||||
path: '/playlist/:id',
|
||||
name: 'playlist',
|
||||
|
||||
+119
-24
@@ -11,6 +11,8 @@ export interface Song {
|
||||
platform: 'netease' | 'qq' | 'bilibili' | 'youtube';
|
||||
}
|
||||
|
||||
export type Source = 'netease' | 'qq';
|
||||
|
||||
export interface BotStatus {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -54,12 +56,17 @@ export const usePlayerStore = defineStore('player', {
|
||||
timings: {} as Record<string, TimingState>,
|
||||
theme: 'dark' as 'dark' | 'light',
|
||||
|
||||
// Home page cache
|
||||
recommendPlaylists: [] as PlaylistItem[],
|
||||
dailySongs: [] as Song[],
|
||||
userPlaylists: [] as PlaylistItem[],
|
||||
// Home page cache, split by source
|
||||
recommendPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
|
||||
dailySongs: { netease: [] as Song[], qq: [] as Song[] },
|
||||
userPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
|
||||
bilibiliPopular: [] as Song[],
|
||||
authStatus: { netease: false, qq: false },
|
||||
lastFetchTime: 0,
|
||||
|
||||
// Transient notification for surfacing failures (e.g., "song not playable")
|
||||
// to a global Toast. Bumped `id` triggers re-render of the same message.
|
||||
notification: null as { id: number; message: string; type: 'error' | 'info' } | null,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
@@ -91,6 +98,13 @@ export const usePlayerStore = defineStore('player', {
|
||||
if (this.isPaused) return Math.min(timing.serverElapsed, maxDuration);
|
||||
return Math.min(timing.serverElapsed + (Date.now() - timing.serverSyncTime) / 1000, maxDuration);
|
||||
},
|
||||
/** Sources that are currently logged in. Order: netease before qq. */
|
||||
availableSources(): Source[] {
|
||||
const s: Source[] = [];
|
||||
if (this.authStatus.netease) s.push('netease');
|
||||
if (this.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
@@ -259,13 +273,30 @@ export const usePlayerStore = defineStore('player', {
|
||||
this._syncAfterAction();
|
||||
},
|
||||
|
||||
notify(message: string, type: 'error' | 'info' = 'info') {
|
||||
this.notification = { id: Date.now(), message, type };
|
||||
},
|
||||
|
||||
async playSong(song: Song) {
|
||||
if (!this.activeBotId) return;
|
||||
await axios.post(`/api/player/${this.activeBotId}/play-song`, { song });
|
||||
const res = await axios.post(`/api/player/${this.activeBotId}/play-song`, { song });
|
||||
if (res.data?.ok === false && res.data?.message) {
|
||||
this.notify(res.data.message, 'error');
|
||||
}
|
||||
this._setTiming(this.activeBotId, { serverElapsed: 0 });
|
||||
this._syncAfterAction();
|
||||
},
|
||||
|
||||
async playNextSong(song: Song) {
|
||||
if (!this.activeBotId) return;
|
||||
const res = await axios.post(`/api/player/${this.activeBotId}/play-next-song`, { song });
|
||||
if (res.data?.message) {
|
||||
this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
|
||||
}
|
||||
// Refresh queue so the inserted item shows up in the side panel
|
||||
this.fetchQueue();
|
||||
},
|
||||
|
||||
async addToQueue(query: string, platform = 'netease') {
|
||||
if (!this.activeBotId) return;
|
||||
await axios.post(`/api/player/${this.activeBotId}/add`, { query, platform });
|
||||
@@ -283,7 +314,10 @@ export const usePlayerStore = defineStore('player', {
|
||||
|
||||
async playPlaylist(playlistId: string, platform = 'netease') {
|
||||
if (!this.activeBotId) return;
|
||||
await axios.post(`/api/player/${this.activeBotId}/play-playlist`, { playlistId, platform });
|
||||
const res = await axios.post(`/api/player/${this.activeBotId}/play-playlist`, { playlistId, platform });
|
||||
if (res.data?.message) {
|
||||
this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
|
||||
}
|
||||
this._setTiming(this.activeBotId, { serverElapsed: 0 });
|
||||
this._syncAfterAction();
|
||||
},
|
||||
@@ -350,31 +384,92 @@ export const usePlayerStore = defineStore('player', {
|
||||
},
|
||||
|
||||
async fetchHomeData() {
|
||||
if (this.lastFetchTime > 0 && Date.now() - this.lastFetchTime < HOME_CACHE_TTL) {
|
||||
// Always check auth status first — if it changed since the cached
|
||||
// fetch (e.g., user logged in/out as a different account), the
|
||||
// cached playlists belong to a different user and we MUST refetch.
|
||||
const [neAuthRes, qqAuthRes] = await Promise.allSettled([
|
||||
axios.get('/api/auth/status', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/auth/status', { params: { platform: 'qq' } }),
|
||||
]);
|
||||
const newAuth = {
|
||||
netease: neAuthRes.status === 'fulfilled' && !!neAuthRes.value.data?.loggedIn,
|
||||
qq: qqAuthRes.status === 'fulfilled' && !!qqAuthRes.value.data?.loggedIn,
|
||||
};
|
||||
const authChanged =
|
||||
newAuth.netease !== this.authStatus.netease || newAuth.qq !== this.authStatus.qq;
|
||||
this.authStatus.netease = newAuth.netease;
|
||||
this.authStatus.qq = newAuth.qq;
|
||||
|
||||
// Cache hit only if auth is unchanged AND within TTL.
|
||||
if (
|
||||
!authChanged &&
|
||||
this.lastFetchTime > 0 &&
|
||||
Date.now() - this.lastFetchTime < HOME_CACHE_TTL
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [playlistRes, dailyRes, userRes, biliRes] = await Promise.allSettled([
|
||||
axios.get('/api/music/recommend/playlists'),
|
||||
axios.get('/api/music/recommend/songs'),
|
||||
axios.get('/api/music/user/playlists'),
|
||||
axios.get('/api/music/bilibili/popular?limit=12'),
|
||||
// 2. NetEase data: recommend playlists work anonymously; daily/user
|
||||
// playlists need login but Promise.allSettled isolates failures.
|
||||
const neteasePromises = [
|
||||
axios.get('/api/music/recommend/playlists', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/music/recommend/songs', { params: { platform: 'netease' } }),
|
||||
axios.get('/api/music/user/playlists', { params: { platform: 'netease' } }),
|
||||
];
|
||||
|
||||
// 3. QQ data: only fetch when QQ is logged in. When not logged in,
|
||||
// resolve to empty payloads so the same indexed handling works.
|
||||
const emptyPlaylists = { data: { playlists: [] } };
|
||||
const emptySongs = { data: { songs: [] } };
|
||||
const qqPromises = this.authStatus.qq
|
||||
? [
|
||||
axios.get('/api/music/recommend/playlists', { params: { platform: 'qq' } }),
|
||||
axios.get('/api/music/recommend/songs', { params: { platform: 'qq' } }),
|
||||
axios.get('/api/music/user/playlists', { params: { platform: 'qq' } }),
|
||||
]
|
||||
: [
|
||||
Promise.resolve(emptyPlaylists),
|
||||
Promise.resolve(emptySongs),
|
||||
Promise.resolve(emptyPlaylists),
|
||||
];
|
||||
|
||||
const biliPromise = axios.get('/api/music/bilibili/popular?limit=12');
|
||||
|
||||
const results = await Promise.allSettled([
|
||||
...neteasePromises,
|
||||
...qqPromises,
|
||||
biliPromise,
|
||||
]);
|
||||
|
||||
if (playlistRes.status === 'fulfilled') {
|
||||
this.recommendPlaylists = playlistRes.value.data.playlists;
|
||||
}
|
||||
if (dailyRes.status === 'fulfilled') {
|
||||
this.dailySongs = dailyRes.value.data.songs;
|
||||
}
|
||||
if (userRes.status === 'fulfilled') {
|
||||
this.userPlaylists = userRes.value.data.playlists;
|
||||
}
|
||||
if (biliRes.status === 'fulfilled') {
|
||||
this.bilibiliPopular = biliRes.value.data.songs;
|
||||
const [neRecPL, neDaily, neUserPL, qqRecPL, qqDaily, qqUserPL, bili] = results;
|
||||
|
||||
this.recommendPlaylists.netease =
|
||||
neRecPL.status === 'fulfilled' ? (neRecPL.value.data.playlists ?? []) : [];
|
||||
this.dailySongs.netease =
|
||||
neDaily.status === 'fulfilled' ? (neDaily.value.data.songs ?? []) : [];
|
||||
this.userPlaylists.netease =
|
||||
neUserPL.status === 'fulfilled' ? (neUserPL.value.data.playlists ?? []) : [];
|
||||
this.recommendPlaylists.qq =
|
||||
qqRecPL.status === 'fulfilled' ? (qqRecPL.value.data.playlists ?? []) : [];
|
||||
this.dailySongs.qq =
|
||||
qqDaily.status === 'fulfilled' ? (qqDaily.value.data.songs ?? []) : [];
|
||||
this.userPlaylists.qq =
|
||||
qqUserPL.status === 'fulfilled' ? (qqUserPL.value.data.playlists ?? []) : [];
|
||||
// bilibili popular: keep previous value on failure (it's an anonymous endpoint
|
||||
// unrelated to user auth state, and stale popular results are harmless)
|
||||
if (bili.status === 'fulfilled') {
|
||||
this.bilibiliPopular = bili.value.data.songs ?? [];
|
||||
}
|
||||
|
||||
this.lastFetchTime = Date.now();
|
||||
// Only mark as fetched if at least the auth-status calls succeeded —
|
||||
// a fully failed fetch (network blip / server down) should NOT be
|
||||
// cached for 5 minutes, otherwise the user has to hard-reload to
|
||||
// recover when connectivity returns.
|
||||
const authOk =
|
||||
neAuthRes.status === 'fulfilled' || qqAuthRes.status === 'fulfilled';
|
||||
if (authOk) {
|
||||
this.lastFetchTime = Date.now();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Source } from './player.js';
|
||||
|
||||
const STORAGE_KEY = 'source-tabs';
|
||||
|
||||
export type TabKey =
|
||||
| 'home.recommend'
|
||||
| 'home.daily'
|
||||
| 'home.user'
|
||||
| 'library.user';
|
||||
|
||||
function readAll(): Partial<Record<TabKey, Source>> {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return {};
|
||||
const parsed = JSON.parse(raw);
|
||||
// typeof null === 'object' and typeof [] === 'object' — both pass a
|
||||
// naive check but neither is a valid record. Reject explicitly so a
|
||||
// corrupted / manipulated value can't smuggle wrong shapes through.
|
||||
if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
|
||||
return {};
|
||||
}
|
||||
return parsed as Partial<Record<TabKey, Source>>;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export function loadTabSource(key: TabKey, fallback: Source = 'netease'): Source {
|
||||
const all = readAll();
|
||||
const v = all[key];
|
||||
return v === 'netease' || v === 'qq' ? v : fallback;
|
||||
}
|
||||
|
||||
export function saveTabSource(key: TabKey, value: Source): void {
|
||||
try {
|
||||
const all = readAll();
|
||||
all[key] = value;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
|
||||
} catch {
|
||||
// localStorage may be unavailable (private browsing); silently no-op
|
||||
}
|
||||
}
|
||||
@@ -1,33 +1,95 @@
|
||||
// YesPlayMusic-inspired design tokens
|
||||
// TSMusicBot Design System — canonical tokens
|
||||
|
||||
:root {
|
||||
// Fonts
|
||||
// Typography
|
||||
--font-primary: 'Barlow', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;
|
||||
|
||||
--fs-hero: 22px;
|
||||
--fs-h1: 20px;
|
||||
--fs-h2: 17px;
|
||||
--fs-h3: 16px;
|
||||
--fs-body: 14px;
|
||||
--fs-sm: 13px;
|
||||
--fs-xs: 12px;
|
||||
--fs-2xs: 11px;
|
||||
--fs-micro: 10px;
|
||||
|
||||
--fw-regular: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-semi: 600;
|
||||
--fw-bold: 700;
|
||||
--fw-black: 800;
|
||||
|
||||
--lh-tight: 1.2;
|
||||
--lh-normal: 1.4;
|
||||
--lh-body: 1.5;
|
||||
|
||||
// Spacing
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 36px;
|
||||
--space-10: 80px;
|
||||
|
||||
// Layout
|
||||
--navbar-height: 56px;
|
||||
--player-height: 56px;
|
||||
--page-gutter: 10vw;
|
||||
|
||||
// Radius
|
||||
--radius-xs: 3px;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
// Transitions
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
|
||||
// Shadows
|
||||
--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);
|
||||
|
||||
// Accent
|
||||
--color-primary: #335eea;
|
||||
--color-primary-bg: #eaeffd;
|
||||
--color-primary-15: rgba(51, 94, 234, 0.15);
|
||||
--color-primary-10: rgba(51, 94, 234, 0.10);
|
||||
--color-primary-12: rgba(51, 94, 234, 0.12);
|
||||
--gradient-fm: linear-gradient(135deg, #335eea, #6366f1);
|
||||
|
||||
// Semantic (theme-invariant)
|
||||
--color-online: #22c55e;
|
||||
--color-online-15: rgba(34, 197, 94, 0.15);
|
||||
--color-paused: #eab308;
|
||||
--color-paused-15: rgba(234, 179, 8, 0.15);
|
||||
|
||||
// Platform brand
|
||||
--brand-netease: #e81123;
|
||||
--brand-netease-15: rgba(232, 17, 35, 0.15);
|
||||
--brand-qq: #12b76a;
|
||||
--brand-qq-15: rgba(18, 183, 106, 0.15);
|
||||
--brand-bilibili: #00a1d6;
|
||||
--brand-bilibili-15: rgba(0, 161, 214, 0.15);
|
||||
--brand-youtube: #ff0000;
|
||||
--brand-youtube-12: rgba(255, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
// Dark theme (default)
|
||||
:root,
|
||||
[data-theme='dark'] {
|
||||
--bg-primary: #222222;
|
||||
--bg-secondary: #323232;
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--bg-navbar: rgba(34, 34, 34, 0.86);
|
||||
--bg-modal-scrim: rgba(0, 0, 0, 0.55);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: rgba(255, 255, 255, 0.58);
|
||||
--text-tertiary: rgba(255, 255, 255, 0.38);
|
||||
@@ -40,6 +102,7 @@
|
||||
--bg-secondary: #f5f5f7;
|
||||
--bg-card: rgba(0, 0, 0, 0.02);
|
||||
--bg-navbar: rgba(255, 255, 255, 0.86);
|
||||
--bg-modal-scrim: rgba(0, 0, 0, 0.35);
|
||||
--text-primary: #000000;
|
||||
--text-secondary: rgba(0, 0, 0, 0.58);
|
||||
--text-tertiary: rgba(0, 0, 0, 0.38);
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
:index="i + 1"
|
||||
:active="store.currentSong?.id === song.id"
|
||||
@play="store.playSong(song)"
|
||||
@playNext="store.playNextSong(song)"
|
||||
@add="store.addSong(song)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+74
-15
@@ -34,11 +34,14 @@
|
||||
</section>
|
||||
|
||||
<!-- 每日推荐 -->
|
||||
<section class="section" v-if="store.dailySongs.length > 0">
|
||||
<h2 class="section-title">每日推荐</h2>
|
||||
<section class="section" v-if="dailyAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
每日推荐
|
||||
<SourceTabs v-model="dailySource" :sources="dailyAvailable" />
|
||||
</h2>
|
||||
<div class="daily-grid">
|
||||
<div
|
||||
v-for="song in store.dailySongs.slice(0, 12)"
|
||||
v-for="song in (store.dailySongs[dailySourceSafe] ?? []).slice(0, 12)"
|
||||
:key="song.id"
|
||||
class="daily-card hover-scale"
|
||||
@click="store.playSong(song)"
|
||||
@@ -51,11 +54,14 @@
|
||||
</section>
|
||||
|
||||
<!-- 推荐歌单 -->
|
||||
<section class="section" v-if="store.recommendPlaylists.length > 0">
|
||||
<h2 class="section-title">推荐歌单</h2>
|
||||
<section class="section" v-if="recommendAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
推荐歌单
|
||||
<SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="playlist in store.recommendPlaylists"
|
||||
v-for="playlist in (store.recommendPlaylists[recommendSourceSafe] ?? [])"
|
||||
:key="playlist.id"
|
||||
:to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
@@ -67,10 +73,11 @@
|
||||
</section>
|
||||
|
||||
<!-- 我的歌单 -->
|
||||
<section class="section" v-if="store.userPlaylists.length > 0">
|
||||
<section class="section" v-if="userAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
我的歌单
|
||||
<span class="section-count">{{ store.userPlaylists.length }}</span>
|
||||
<span v-if="currentUserPlaylists.length > 0" class="section-count">{{ currentUserPlaylists.length }}</span>
|
||||
<SourceTabs v-model="userSource" :sources="userAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
@@ -85,12 +92,12 @@
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button
|
||||
v-if="store.userPlaylists.length > USER_PLAYLIST_LIMIT"
|
||||
v-if="currentUserPlaylists.length > USER_PLAYLIST_LIMIT"
|
||||
class="expand-btn"
|
||||
@click="userPlaylistsExpanded = !userPlaylistsExpanded"
|
||||
>
|
||||
<Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
|
||||
{{ userPlaylistsExpanded ? '收起' : `展开全部 ${store.userPlaylists.length} 个歌单` }}
|
||||
{{ userPlaylistsExpanded ? '收起' : `展开全部 ${currentUserPlaylists.length} 个歌单` }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
@@ -117,19 +124,60 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import axios from 'axios';
|
||||
import { usePlayerStore, type Song } from '../stores/player.js';
|
||||
import { usePlayerStore, type Song, type Source } from '../stores/player.js';
|
||||
import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
|
||||
import CoverArt from '../components/CoverArt.vue';
|
||||
import SourceTabs from '../components/SourceTabs.vue';
|
||||
|
||||
const store = usePlayerStore();
|
||||
const USER_PLAYLIST_LIMIT = 20;
|
||||
const userPlaylistsExpanded = ref(false);
|
||||
|
||||
// Available sources per section.
|
||||
// Recommend playlists work anonymously on netease, so it's always available;
|
||||
// QQ requires login. This intentionally differs from dailyAvailable/userAvailable.
|
||||
const recommendAvailable = computed<Source[]>(() => {
|
||||
const s: Source[] = ['netease'];
|
||||
if (store.authStatus.qq) s.push('qq');
|
||||
return s;
|
||||
});
|
||||
const dailyAvailable = computed<Source[]>(() => store.availableSources);
|
||||
const userAvailable = computed<Source[]>(() => store.availableSources);
|
||||
|
||||
// Persisted active source per section.
|
||||
const recommendSource = ref<Source>(loadTabSource('home.recommend'));
|
||||
const dailySource = ref<Source>(loadTabSource('home.daily'));
|
||||
const userSource = ref<Source>(loadTabSource('home.user'));
|
||||
|
||||
watch(recommendSource, (v) => saveTabSource('home.recommend', v));
|
||||
watch(dailySource, (v) => saveTabSource('home.daily', v));
|
||||
watch(userSource, (v) => saveTabSource('home.user', v));
|
||||
|
||||
// Fallback when persisted source is no longer available.
|
||||
const recommendSourceSafe = computed<Source>(() =>
|
||||
recommendAvailable.value.includes(recommendSource.value)
|
||||
? recommendSource.value
|
||||
: recommendAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
const dailySourceSafe = computed<Source>(() =>
|
||||
dailyAvailable.value.includes(dailySource.value)
|
||||
? dailySource.value
|
||||
: dailyAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
const userSourceSafe = computed<Source>(() =>
|
||||
userAvailable.value.includes(userSource.value)
|
||||
? userSource.value
|
||||
: userAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
|
||||
const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
|
||||
const visibleUserPlaylists = computed(() =>
|
||||
userPlaylistsExpanded.value
|
||||
? store.userPlaylists
|
||||
: store.userPlaylists.slice(0, USER_PLAYLIST_LIMIT)
|
||||
? currentUserPlaylists.value
|
||||
: currentUserPlaylists.value.slice(0, USER_PLAYLIST_LIMIT)
|
||||
);
|
||||
|
||||
async function playFm() {
|
||||
@@ -179,6 +227,10 @@ onMounted(() => {
|
||||
|
||||
.section {
|
||||
margin-bottom: 36px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -188,6 +240,11 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-count {
|
||||
@@ -223,7 +280,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #00a1d6;
|
||||
background: var(--brand-bilibili);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
@@ -317,6 +374,7 @@ onMounted(() => {
|
||||
|
||||
@media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
|
||||
@media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
|
||||
@media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||||
}
|
||||
|
||||
.daily-card {
|
||||
@@ -348,6 +406,7 @@ onMounted(() => {
|
||||
|
||||
@media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
|
||||
@media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
|
||||
@media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||||
}
|
||||
|
||||
.playlist-card {
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="library-page">
|
||||
<h1 class="page-title">音乐库</h1>
|
||||
|
||||
<!-- 我的歌单 -->
|
||||
<section class="section" v-if="userAvailable.length > 0">
|
||||
<h2 class="section-title">
|
||||
我的歌单
|
||||
<span v-if="currentUserPlaylists.length > 0" class="section-count">{{ currentUserPlaylists.length }}</span>
|
||||
<SourceTabs v-model="userSource" :sources="userAvailable" />
|
||||
</h2>
|
||||
<div class="playlist-grid">
|
||||
<RouterLink
|
||||
v-for="pl in currentUserPlaylists"
|
||||
:key="pl.id"
|
||||
:to="`/playlist/${pl.id}?platform=${pl.platform}`"
|
||||
class="playlist-card hover-scale"
|
||||
>
|
||||
<CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
|
||||
<div class="playlist-name">{{ pl.name }}</div>
|
||||
<div class="playlist-count">{{ pl.songCount }} 首</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 最近播放 -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">最近播放</h2>
|
||||
<div v-if="historyLoading" class="loading">加载中...</div>
|
||||
<div v-else-if="history.length === 0" class="empty">暂无播放记录</div>
|
||||
<div v-else class="song-list">
|
||||
<SongCard
|
||||
v-for="(song, i) in history.slice(0, 10)"
|
||||
:key="`hist-${song.id}-${i}`"
|
||||
:song="song"
|
||||
:index="i + 1"
|
||||
:active="store.currentSong?.id === song.id"
|
||||
@play="store.play(song.name, song.platform)"
|
||||
@playNext="store.playNextSong(song)"
|
||||
@add="store.addToQueue(song.name, song.platform)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="!historyLoading && userAvailable.length === 0 && history.length === 0" class="empty-state">
|
||||
<Icon icon="mdi:music-box-outline" class="empty-icon" />
|
||||
<div>登录网易云或QQ音乐后，这里将显示你的歌单和播放记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import axios from 'axios';
|
||||
import { usePlayerStore, type Song, type Source } from '../stores/player.js';
|
||||
import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
|
||||
import CoverArt from '../components/CoverArt.vue';
|
||||
import SongCard from '../components/SongCard.vue';
|
||||
import SourceTabs from '../components/SourceTabs.vue';
|
||||
|
||||
const store = usePlayerStore();
|
||||
|
||||
const history = ref<Song[]>([]);
|
||||
const historyLoading = ref(true);
|
||||
|
||||
const userAvailable = computed<Source[]>(() => store.availableSources);
|
||||
|
||||
const userSource = ref<Source>(loadTabSource('library.user'));
|
||||
watch(userSource, (v) => saveTabSource('library.user', v));
|
||||
|
||||
const userSourceSafe = computed<Source>(() =>
|
||||
userAvailable.value.includes(userSource.value)
|
||||
? userSource.value
|
||||
: userAvailable.value[0] ?? 'netease'
|
||||
);
|
||||
|
||||
const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
|
||||
|
||||
onMounted(async () => {
|
||||
if (!store.activeBotId) {
|
||||
await store.fetchBots();
|
||||
}
|
||||
|
||||
store.fetchHomeData();
|
||||
|
||||
if (store.activeBotId) {
|
||||
try {
|
||||
const res = await axios.get(`/api/player/${store.activeBotId}/history`);
|
||||
history.value = res.data.history ?? [];
|
||||
} catch {
|
||||
// API may not be ready
|
||||
}
|
||||
}
|
||||
|
||||
historyLoading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-title {
|
||||
font-size: var(--fs-hero);
|
||||
font-weight: var(--fw-bold);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--fs-hero);
|
||||
font-weight: var(--fw-bold);
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-count {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.playlist-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 24px;
|
||||
|
||||
@media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
|
||||
@media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.playlist-card {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.playlist-name {
|
||||
margin-top: 8px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: var(--fw-medium);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playlist-count {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.song-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
opacity: 0.3;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
+30
-12
@@ -32,6 +32,7 @@
|
||||
:index="i + 1"
|
||||
:active="store.currentSong?.id === song.id"
|
||||
@play="store.playSong(song)"
|
||||
@playNext="store.playNextSong(song)"
|
||||
@add="store.addSong(song)"
|
||||
/>
|
||||
</div>
|
||||
@@ -77,20 +78,37 @@ onMounted(async () => {
|
||||
const id = route.params.id as string;
|
||||
const platform = (route.query.platform as string) || 'netease';
|
||||
|
||||
try {
|
||||
const [detailRes, songsRes] = await Promise.all([
|
||||
axios.get(`/api/music/playlist/${id}/detail`, { params: { platform } }),
|
||||
axios.get(`/api/music/playlist/${id}`, { params: { platform } }),
|
||||
]);
|
||||
playlist.value = detailRes.data.playlist;
|
||||
songs.value = songsRes.data.songs;
|
||||
} catch (err: any) {
|
||||
console.error('Failed to load playlist:', err?.response?.status, err?.message);
|
||||
// allSettled, not Promise.all — if detail 404s but songs is fine
|
||||
// (e.g., a QQ playlist whose detail endpoint flaked but the song
|
||||
// list resolved), we still want to show the songs rather than
|
||||
// the "歌单不存在" empty state.
|
||||
const [detailRes, songsRes] = await Promise.allSettled([
|
||||
axios.get(`/api/music/playlist/${id}/detail`, { params: { platform } }),
|
||||
axios.get(`/api/music/playlist/${id}`, { params: { platform } }),
|
||||
]);
|
||||
|
||||
const detail = detailRes.status === 'fulfilled' ? detailRes.value.data?.playlist : null;
|
||||
const songList = songsRes.status === 'fulfilled' ? (songsRes.value.data?.songs ?? []) : [];
|
||||
|
||||
if (detail) {
|
||||
playlist.value = detail;
|
||||
} else if (songList.length > 0) {
|
||||
// Fall back to a stub built from the route + first song's cover.
|
||||
playlist.value = {
|
||||
id,
|
||||
name: '歌单',
|
||||
description: '',
|
||||
coverUrl: songList[0]?.coverUrl ?? '',
|
||||
songCount: songList.length,
|
||||
};
|
||||
} else {
|
||||
playlist.value = null;
|
||||
songs.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
if (detailRes.status === 'rejected') {
|
||||
console.error('Failed to load playlist detail:', (detailRes.reason as any)?.response?.status, (detailRes.reason as any)?.message);
|
||||
}
|
||||
}
|
||||
songs.value = songList;
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
:index="i + 1"
|
||||
:active="store.currentSong?.id === song.id"
|
||||
@play="store.playSong(song)"
|
||||
@playNext="store.playNextSong(song)"
|
||||
@add="store.addSong(song)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+306
-9
@@ -397,6 +397,52 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bot Profile (TeamSpeak Behavior) -->
|
||||
<section class="settings-section">
|
||||
<h2 class="section-title">机器人 Profile（TeamSpeak 行为）</h2>
|
||||
<p class="profile-section-hint">控制 bot 在 TeamSpeak 上自动同步歌曲信息的方式。⚠️ 标记的项会触发频道里所有人的提示音。</p>
|
||||
<div v-if="store.bots.length === 0" class="empty-hint">还没有机器人，先在上面创建一个。</div>
|
||||
<div v-else class="profile-bot-list">
|
||||
<div v-for="bot in store.bots" :key="bot.id" class="profile-bot">
|
||||
<button
|
||||
class="profile-bot-header"
|
||||
:class="{ expanded: profileExpanded[bot.id] }"
|
||||
@click="toggleProfileExpanded(bot.id)"
|
||||
>
|
||||
<Icon :icon="profileExpanded[bot.id] ? 'mdi:chevron-down' : 'mdi:chevron-right'" />
|
||||
<span class="profile-bot-name">{{ bot.name }}</span>
|
||||
</button>
|
||||
<div v-if="profileExpanded[bot.id]" class="profile-toggles">
|
||||
<div v-if="profileLoadError[bot.id]" class="profile-loading profile-error">
|
||||
{{ profileLoadError[bot.id] }}
|
||||
<button class="btn-link" @click="loadProfileConfig(bot.id)">重试</button>
|
||||
</div>
|
||||
<div v-else-if="!profileConfigs[bot.id]" class="profile-loading">加载中...</div>
|
||||
<label
|
||||
v-else
|
||||
v-for="t in PROFILE_TOGGLES"
|
||||
:key="t.key"
|
||||
class="profile-toggle"
|
||||
>
|
||||
<div class="profile-toggle-text">
|
||||
<div class="profile-toggle-label">
|
||||
{{ t.label }}
|
||||
<span v-if="t.warning" class="profile-warn-tag">⚠️ {{ t.warning }}</span>
|
||||
</div>
|
||||
<div class="profile-toggle-hint">{{ t.hint }}</div>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="profile-toggle-switch"
|
||||
:checked="profileConfigs[bot.id][t.key]"
|
||||
@change="updateProfile(bot.id, t.key, ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -703,6 +749,72 @@ async function saveIdleTimeout() {
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// --- Bot Profile config ---
|
||||
interface ProfileConfig {
|
||||
avatarEnabled: boolean;
|
||||
descriptionEnabled: boolean;
|
||||
nicknameEnabled: boolean;
|
||||
awayStatusEnabled: boolean;
|
||||
channelDescEnabled: boolean;
|
||||
nowPlayingMsgEnabled: boolean;
|
||||
}
|
||||
|
||||
const PROFILE_TOGGLES: ReadonlyArray<{
|
||||
key: keyof ProfileConfig;
|
||||
label: string;
|
||||
hint: string;
|
||||
warning: string | null;
|
||||
}> = [
|
||||
{ key: 'avatarEnabled', label: '同步头像', hint: '使用专辑封面作为 bot 头像', warning: null },
|
||||
{ key: 'descriptionEnabled', label: '同步个人描述', hint: '在 bot 简介里显示当前播放的歌曲', warning: null },
|
||||
{ key: 'nicknameEnabled', label: '同步昵称', hint: 'bot 昵称跟着歌名变化', warning: null },
|
||||
{ key: 'awayStatusEnabled', label: '走开状态', hint: '停止播放时把 bot 设为"走开"', warning: null },
|
||||
{ key: 'channelDescEnabled', label: '更新频道描述', hint: '把"正在播放"信息写入频道描述', warning: '频道编辑提示音' },
|
||||
{ key: 'nowPlayingMsgEnabled',label: '推送"正在播放"消息', hint: '切歌时在频道里发一条文字消息', warning: '新消息提示音' },
|
||||
];
|
||||
|
||||
const profileConfigs = reactive<Record<string, ProfileConfig>>({});
|
||||
const profileExpanded = reactive<Record<string, boolean>>({});
|
||||
const profileLoadError = reactive<Record<string, string | null>>({});
|
||||
|
||||
async function loadProfileConfig(botId: string) {
|
||||
if (profileConfigs[botId]) return;
|
||||
profileLoadError[botId] = null;
|
||||
try {
|
||||
const res = await axios.get(`/api/player/${botId}/profile`);
|
||||
// Defensive: a 200 response with non-object body (empty / proxy
|
||||
// injection / etc.) would otherwise leave the row stuck on
|
||||
// "加载中..." because profileConfigs[botId] would be falsy.
|
||||
if (!res.data || typeof res.data !== 'object' || typeof res.data.avatarEnabled !== 'boolean') {
|
||||
profileLoadError[botId] = '响应格式异常';
|
||||
return;
|
||||
}
|
||||
profileConfigs[botId] = res.data;
|
||||
} catch (err: any) {
|
||||
profileLoadError[botId] = err?.response?.status === 404
|
||||
? '机器人未加载'
|
||||
: '加载失败，请重试';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleProfileExpanded(botId: string) {
|
||||
profileExpanded[botId] = !profileExpanded[botId];
|
||||
if (profileExpanded[botId]) loadProfileConfig(botId);
|
||||
}
|
||||
|
||||
async function updateProfile(botId: string, key: keyof ProfileConfig, value: boolean) {
|
||||
const cfg = profileConfigs[botId];
|
||||
if (!cfg) return;
|
||||
const prev = cfg[key];
|
||||
cfg[key] = value; // optimistic
|
||||
try {
|
||||
const res = await axios.put(`/api/player/${botId}/profile`, { [key]: value });
|
||||
profileConfigs[botId] = res.data;
|
||||
} catch {
|
||||
cfg[key] = prev; // revert
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchBots(); // Refresh bot status on page visit
|
||||
checkAuthStatus();
|
||||
@@ -820,16 +932,16 @@ onUnmounted(() => {
|
||||
background: var(--border-color);
|
||||
color: var(--text-tertiary);
|
||||
&.online {
|
||||
background: rgba(51, 94, 234, 0.15);
|
||||
background: var(--color-primary-15);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.playing {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
background: var(--color-online-15);
|
||||
color: var(--color-online);
|
||||
}
|
||||
&.paused {
|
||||
background: rgba(255, 152, 0, 0.15);
|
||||
color: #ff9800;
|
||||
background: var(--color-paused-15);
|
||||
color: var(--color-paused);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -853,7 +965,7 @@ onUnmounted(() => {
|
||||
color: var(--color-primary);
|
||||
|
||||
&.bilibili-icon {
|
||||
color: #00a1d6;
|
||||
color: var(--brand-bilibili);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -865,7 +977,7 @@ onUnmounted(() => {
|
||||
.account-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
&.logged { color: #4caf50; }
|
||||
&.logged { color: var(--color-online); }
|
||||
}
|
||||
|
||||
.login-methods {
|
||||
@@ -888,7 +1000,7 @@ onUnmounted(() => {
|
||||
|
||||
&:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
&.active {
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -1012,7 +1124,7 @@ onUnmounted(() => {
|
||||
&:hover { border-color: var(--border-color); }
|
||||
&.active {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1139,4 +1251,189 @@ onUnmounted(() => {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// --- Bot Profile section ---
|
||||
.profile-section-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin: -8px 0 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.profile-bot-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-bot {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-bot-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:hover { background: var(--hover-bg); }
|
||||
&.expanded { background: var(--hover-bg); }
|
||||
}
|
||||
|
||||
.profile-bot-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.profile-toggles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px 8px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.profile-loading {
|
||||
padding: 16px 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-error {
|
||||
color: var(--brand-netease); // re-uses red brand color for error state
|
||||
|
||||
.btn-link {
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
.profile-toggle-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-toggle-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.profile-warn-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
background: var(--color-paused-15);
|
||||
color: var(--color-paused);
|
||||
border-radius: var(--radius-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-toggle-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.profile-toggle-switch {
|
||||
flex-shrink: 0;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), border-color var(--transition-fast);
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
transition: transform var(--transition-fast), background var(--transition-fast);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&::before {
|
||||
transform: translateX(18px);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-bot-header {
|
||||
padding: 14px 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.profile-toggles {
|
||||
padding: 0 12px 6px;
|
||||
}
|
||||
|
||||
.profile-toggle {
|
||||
gap: 12px;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.profile-toggle-switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
|
||||
&::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
&:checked::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user