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/styles/variables.scss

@@ -0,0 +1,48 @@
+// YesPlayMusic-inspired design tokens
+
+:root {
+  // Fonts
+  --font-primary: 'Barlow', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+
+  // Spacing
+  --navbar-height: 56px;
+  --player-height: 56px;
+
+  // Radius
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+
+  // Transitions
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+
+  // Accent
+  --color-primary: #335eea;
+  --color-primary-bg: #eaeffd;
+}
+
+[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);
+  --text-primary: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.58);
+  --text-tertiary: rgba(255, 255, 255, 0.38);
+  --border-color: rgba(255, 255, 255, 0.06);
+  --hover-bg: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme='light'] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f7;
+  --bg-card: rgba(0, 0, 0, 0.02);
+  --bg-navbar: rgba(255, 255, 255, 0.86);
+  --text-primary: #000000;
+  --text-secondary: rgba(0, 0, 0, 0.58);
+  --text-tertiary: rgba(0, 0, 0, 0.38);
+  --border-color: rgba(0, 0, 0, 0.06);
+  --hover-bg: rgba(0, 0, 0, 0.04);
+}