feat: add Vue.js WebUI — YesPlayMusic-inspired SPA with all pages and components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/stores/player.ts

@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia';
+import axios from 'axios';
+
+export interface Song {
+  id: string;
+  name: string;
+  artist: string;
+  album: string;
+  duration: number;
+  coverUrl: string;
+  platform: 'netease' | 'qq';
+}
+
+export interface BotStatus {
+  id: string;
+  name: string;
+  connected: boolean;
+  playing: boolean;
+  paused: boolean;
+  currentSong: Song | null;
+  queueSize: number;
+  volume: number;
+  playMode: string;
+}
+
+export const usePlayerStore = defineStore('player', {
+  state: () => ({
+    bots: [] as BotStatus[],
+    activeBotId: null as string | null,
+    queue: [] as Song[],
+    theme: 'dark' as 'dark' | 'light',
+  }),
+
+  getters: {
+    activeBot(): BotStatus | null {
+      return this.bots.find((b) => b.id === this.activeBotId) ?? this.bots[0] ?? null;
+    },
+    currentSong(): Song | null {
+      return this.activeBot?.currentSong ?? null;
+    },
+    isPlaying(): boolean {
+      return this.activeBot?.playing ?? false;
+    },
+    isPaused(): boolean {
+      return this.activeBot?.paused ?? false;
+    },
+  },
+
+  actions: {
+    setActiveBotId(id: string) {
+      this.activeBotId = id;
+    },
+
+    updateBotStatus(botId: string, status: BotStatus) {
+      const index = this.bots.findIndex((b) => b.id === botId);
+      if (index >= 0) {
+        this.bots[index] = status;
+      } else {
+        this.bots.push(status);
+      }
+    },
+
+    removeBotStatus(botId: string) {
+      this.bots = this.bots.filter((b) => b.id !== botId);
+    },
+
+    setQueue(queue: Song[]) {
+      this.queue = queue;
+    },
+
+    toggleTheme() {
+      this.theme = this.theme === 'dark' ? 'light' : 'dark';
+      localStorage.setItem('theme', this.theme);
+    },
+
+    loadTheme() {
+      const saved = localStorage.getItem('theme') as 'dark' | 'light' | null;
+      if (saved) this.theme = saved;
+    },
+
+    async fetchBots() {
+      const res = await axios.get('/api/bot');
+      this.bots = res.data.bots;
+      if (!this.activeBotId && this.bots.length > 0) {
+        this.activeBotId = this.bots[0].id;
+      }
+    },
+
+    async play(query: string, platform = 'netease') {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/play`, { query, platform });
+    },
+
+    async addToQueue(query: string, platform = 'netease') {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/add`, { query, platform });
+    },
+
+    async pause() {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/pause`);
+    },
+
+    async resume() {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/resume`);
+    },
+
+    async next() {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/next`);
+    },
+
+    async prev() {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/prev`);
+    },
+
+    async stop() {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/stop`);
+    },
+
+    async setVolume(volume: number) {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/volume`, { volume });
+    },
+
+    async setMode(mode: string) {
+      if (!this.activeBotId) return;
+      await axios.post(`/api/player/${this.activeBotId}/mode`, { mode });
+    },
+  },
+});