feat: Implement features and continuously optimize the proxy service

- Settings page UI - Persist settings data - Proxy server fixes & optimizations: - Fixed download latency caused by Range Seek - Improved cache stability - Implemented a dual-threading model to ensure smooth playback - Optimized styles for the homepage TopBar and SideBar - Added theme switching functionality - Added theme color customization feature
2026-02-04 14:14:40 +08:00
parent c472ec06e5
commit 8eab16cbf5
13 changed files with 1935 additions and 323 deletions
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,9 +1,26 @@
 <template>
  <MainLayout />
+  <Settings v-if="showSettings" @close="showSettings = false" />
 </template>

 <script setup lang="ts">
+import { ref, provide, onMounted } from 'vue';
 import MainLayout from './layout/MainLayout.vue';
+import Settings from './components/Settings.vue';
+
+const showSettings = ref(false);
+
+// Provide to child components
+provide('openSettings', () => { showSettings.value = true; });
+
+// Apply saved theme on app startup
+onMounted(async () => {
+  if (window.electronAPI?.settings) {
+    const settings = await window.electronAPI.settings.getAll();
+    document.documentElement.setAttribute('data-theme', settings.theme);
+    document.documentElement.style.setProperty('--color-accent', settings.accentColor);
+  }
+});
 </script>

 <style>
--- a/src/renderer/components/PlayerBar.vue
+++ b/src/renderer/components/PlayerBar.vue
@@ -180,7 +180,7 @@ const formatTime = (seconds: number) => {
  left: 0;
  width: 100%;
  height: 80px; /* Established height */
-  background-color: rgba(24, 24, 24, 0.95); /* Semi-transparent dark bg */
+  background-color: var(--color-bg-secondary);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  display: flex;
@@ -188,7 +188,8 @@ const formatTime = (seconds: number) => {
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
-  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
+  transition: var(--theme-transition);
 }

 /* Animations */
@@ -216,13 +217,16 @@ const formatTime = (seconds: number) => {
  position: relative;
  width: 64px;
  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
+  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
-  /* Vinyl Background Simulation or Image */
-  background: radial-gradient(circle, #1a1a1a 30%, #333 31%, #111 32%, #181818 100%);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+  /* Dark background for vinyl effect */
+  background: #1a1a1a;
+  box-shadow: var(--shadow-md);
  animation: spin 10s linear infinite;
  animation-play-state: paused;
 }
@@ -231,7 +235,7 @@ const formatTime = (seconds: number) => {
  animation-play-state: running;
 }

-/* Use the user specific path if available, or fallback to CSS vinyl look */
+/* Vinyl overlay (Background) */
 .vinyl-bg {
  position: absolute;
  top: 0;
@@ -239,27 +243,30 @@ const formatTime = (seconds: number) => {
  width: 100%;
  height: 100%;
  border-radius: 50%;
-  background-image: url('@/assets/miniYinyl.png'); /* User requested path */
+  background-image: url('https://s5.music.126.net/static_public/68aea63daca57500bb3fb4b6_68aea63daca57500bb3fb4b7/public/assets/img/play/miniVinyl.png');
  background-size: cover;
  opacity: 1;
  pointer-events: none;
-  z-index: 2;
+  z-index: 1;
 }

+/* Album art (Foreground) */
 .album-art {
-  width: 51px;
-  height: 51px;
+  width: 42px;
+  height: 42px;
  border-radius: 50%;
  object-fit: cover;
-  z-index: 1;
+  z-index: 10;
+  position: relative; /* Ensure z-index applies */
 }

 .album-placeholder {
-  width: 51px;
-  height: 51px;
+  width: 42px;
+  height: 42px;
  border-radius: 50%;
-  background: #333;
-  z-index: 1;
+  background: var(--color-bg-tertiary);
+  z-index: 10;
+  position: relative; /* Ensure z-index applies */
 }

@keyframes spin {
--- a/src/renderer/components/Settings.vue
+++ b/src/renderer/components/Settings.vue
@@ -0,0 +1,680 @@
+<template>
+  <Transition name="fade">
+    <div class="settings-overlay" v-if="isLoaded">
+      <div class="settings-container">
+        <!-- Header -->
+        <div class="settings-header">
+          <h1 class="settings-title">设置</h1>
+          <button class="close-btn" @click="$emit('close')">
+            <Icon icon="lucide:x" class="close-icon" />
+          </button>
+        </div>
+
+        <div class="settings-body">
+          <!-- Left Sidebar -->
+          <nav class="settings-nav">
+            <div
+              v-for="category in categories"
+              :key="category.id"
+              class="nav-item"
+              :class="{ active: activeCategory === category.id }"
+              @click="activeCategory = category.id"
+            >
+              <Icon :icon="category.icon" class="nav-icon" />
+              <span>{{ category.name }}</span>
+            </div>
+          </nav>
+
+          <!-- Right Content -->
+          <div class="settings-content">
+            <!-- 存储设置 -->
+            <div v-if="activeCategory === 'storage'" class="section">
+              <h2 class="section-title">存储设置</h2>
+
+              <!-- 缓存开关 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <div class="setting-label">缓存音乐到本地</div>
+                  <div class="setting-desc">开启后将在本地保存播放过的音乐，加快加载速度</div>
+                </div>
+                <div class="setting-control">
+                  <label class="toggle-switch" :class="{ 'no-transition': !enableTransition }">
+                    <input type="checkbox" v-model="settings.persistCache" @change="onCacheToggle" />
+                    <span class="toggle-slider"></span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- 缓存位置 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <div class="setting-label">缓存位置</div>
+                  <div class="setting-desc path-text">{{ cacheInfo.path || '加载中...' }}</div>
+                </div>
+                <div class="setting-control">
+                  <button class="action-btn" @click="openCacheFolder">
+                    <Icon icon="lucide:folder-open" />
+                    打开目录
+                  </button>
+                </div>
+              </div>
+
+              <!-- 缓存大小 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <div class="setting-label">已占用空间</div>
+                  <div class="setting-desc">{{ cacheInfo.size || '计算中...' }}</div>
+                </div>
+                <div class="setting-control">
+                  <button class="action-btn danger" @click="clearCache">
+                    <Icon icon="lucide:trash-2" />
+                    清理缓存
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- 外观设置 -->
+            <div v-else-if="activeCategory === 'appearance'" class="section">
+              <h2 class="section-title">外观设置</h2>
+
+              <!-- 亮暗模式 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <div class="setting-label">主题模式</div>
+                  <div class="setting-desc">选择深色或浅色主题</div>
+                </div>
+                <div class="setting-control">
+                  <div class="theme-toggle">
+                    <button 
+                      class="theme-btn" 
+                      :class="{ active: appearance.theme === 'dark' }"
+                      @click="setTheme('dark')"
+                    >
+                      <Icon icon="lucide:moon" />
+                      深色
+                    </button>
+                    <button 
+                      class="theme-btn" 
+                      :class="{ active: appearance.theme === 'light' }"
+                      @click="setTheme('light')"
+                    >
+                      <Icon icon="lucide:sun" />
+                      浅色
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 主题色 -->
+              <div class="setting-item">
+                <div class="setting-info">
+                  <div class="setting-label">主题色</div>
+                  <div class="setting-desc">选择你喜欢的强调色</div>
+                </div>
+                <div class="setting-control">
+                  <div class="color-swatches">
+                    <button
+                      v-for="color in accentColors"
+                      :key="color.value"
+                      class="color-swatch"
+                      :class="{ active: appearance.accentColor === color.value }"
+                      :style="{ '--swatch-color': color.value }"
+                      :title="color.name"
+                      @click="setAccentColor(color.value)"
+                    >
+                      <Icon v-if="appearance.accentColor === color.value" icon="lucide:check" class="check-icon" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 播放设置 -->
+            <div v-else-if="activeCategory === 'playback'" class="section">
+              <h2 class="section-title">播放设置</h2>
+              <div class="placeholder-content">
+                <Icon icon="lucide:headphones" class="placeholder-icon" />
+                <p>音质、淡入淡出等设置即将推出</p>
+              </div>
+            </div>
+
+            <!-- 快捷键 -->
+            <div v-else-if="activeCategory === 'shortcuts'" class="section">
+              <h2 class="section-title">快捷键</h2>
+              <div class="placeholder-content">
+                <Icon icon="lucide:keyboard" class="placeholder-icon" />
+                <p>自定义快捷键即将推出</p>
+              </div>
+            </div>
+
+            <!-- 关于 -->
+            <div v-else-if="activeCategory === 'about'" class="section">
+              <h2 class="section-title">关于</h2>
+              <div class="about-content">
+                <div class="app-logo">🎶</div>
+                <h3>QZ Music</h3>
+                <p class="version">版本 1.0.0</p>
+                <p class="copyright">© 2024 QZ Music Team</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount, nextTick } from 'vue';
+import { Icon } from '@iconify/vue';
+
+defineEmits(['close']);
+
+const categories = [
+  { id: 'storage', name: '存储', icon: 'lucide:hard-drive' },
+  { id: 'appearance', name: '外观', icon: 'lucide:palette' },
+  { id: 'playback', name: '播放', icon: 'lucide:headphones' },
+  { id: 'shortcuts', name: '快捷键', icon: 'lucide:keyboard' },
+  { id: 'about', name: '关于', icon: 'lucide:info' },
+];
+
+const accentColors = [
+  { name: '红色', value: '#ec4141' },
+  { name: '橙色', value: '#f97316' },
+  { name: '金色', value: '#eab308' },
+  { name: '绿色', value: '#22c55e' },
+  { name: '青色', value: '#06b6d4' },
+  { name: '蓝色', value: '#3b82f6' },
+  { name: '紫色', value: '#8b5cf6' },
+  { name: '粉色', value: '#ec4899' },
+];
+
+const activeCategory = ref('storage');
+const isLoaded = ref(false);
+const enableTransition = ref(false);
+
+const settings = reactive({
+  persistCache: true,
+});
+
+const appearance = reactive({
+  theme: 'dark' as 'dark' | 'light',
+  accentColor: '#ec4141',
+});
+
+const cacheInfo = reactive({
+  path: '',
+  size: '',
+});
+
+const loadCacheInfo = async () => {
+  if (window.electronAPI) {
+    const info = await window.electronAPI.getCacheInfo();
+    cacheInfo.path = info.path;
+    cacheInfo.size = info.size;
+    settings.persistCache = info.persistCache;
+  }
+};
+
+const loadAppearance = async () => {
+  if (window.electronAPI?.settings) {
+    const allSettings = await window.electronAPI.settings.getAll();
+    appearance.theme = allSettings.theme;
+    appearance.accentColor = allSettings.accentColor;
+    applyTheme(appearance.theme);
+    applyAccentColor(appearance.accentColor);
+  }
+};
+
+const applyTheme = (theme: 'dark' | 'light') => {
+  document.documentElement.setAttribute('data-theme', theme);
+};
+
+const applyAccentColor = (color: string) => {
+  document.documentElement.style.setProperty('--color-accent', color);
+};
+
+const setTheme = async (theme: 'dark' | 'light') => {
+  appearance.theme = theme;
+  applyTheme(theme);
+  if (window.electronAPI?.settings) {
+    await window.electronAPI.settings.setTheme(theme);
+  }
+};
+
+const setAccentColor = async (color: string) => {
+  appearance.accentColor = color;
+  applyAccentColor(color);
+  if (window.electronAPI?.settings) {
+    await window.electronAPI.settings.setAccentColor(color);
+  }
+};
+
+const onCacheToggle = async () => {
+  if (window.electronAPI) {
+    await window.electronAPI.setCachePersist(settings.persistCache);
+  }
+};
+
+const openCacheFolder = async () => {
+  if (window.electronAPI) {
+    await window.electronAPI.openCacheFolder();
+  }
+};
+
+const clearCache = async () => {
+  if (window.electronAPI) {
+    await window.electronAPI.clearCache();
+    await loadCacheInfo();
+  }
+};
+
+// Load settings BEFORE mount to avoid visual flicker
+onBeforeMount(async () => {
+  await Promise.all([loadCacheInfo(), loadAppearance()]);
+  isLoaded.value = true;
+  // Enable transition after initial render
+  nextTick(() => {
+    setTimeout(() => {
+      enableTransition.value = true;
+    }, 50);
+  });
+});
+</script>
+
+<style scoped>
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-bg-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-header {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+}
+
+.settings-title {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.close-btn {
+  -webkit-app-region: no-drag;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.close-btn:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  border-color: var(--color-text-muted);
+}
+
+.close-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.settings-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Left Navigation */
+.settings-nav {
+  width: 200px;
+  padding: 20px 12px;
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  margin-bottom: 4px;
+  border-radius: var(--radius-lg);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.nav-item:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.nav-item.active {
+  background-color: var(--color-accent-soft);
+  color: var(--color-accent);
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* Right Content */
+.settings-content {
+  flex: 1;
+  padding: 32px 48px;
+  overflow-y: auto;
+}
+
+.section-title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Setting Item */
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.setting-info {
+  flex: 1;
+}
+
+.setting-label {
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  margin-bottom: 6px;
+}
+
+.setting-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.setting-desc.path-text {
+  font-family: monospace;
+  background-color: var(--color-bg-tertiary);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  display: inline-block;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-control {
+  margin-left: 24px;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: var(--color-bg-tertiary);
+  border-radius: 26px;
+  transition: var(--transition-base);
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--color-text-secondary);
+  border-radius: 50%;
+  transition: var(--transition-base);
+}
+
+/* Disable transition on initial load */
+.toggle-switch.no-transition .toggle-slider,
+.toggle-switch.no-transition .toggle-slider:before {
+  transition: none;
+}
+
+input:checked + .toggle-slider {
+  background-color: var(--color-accent);
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(22px);
+  background-color: white;
+}
+
+/* Action Button */
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: all var(--transition-base);
+}
+
+.action-btn:hover {
+  background-color: var(--color-bg-elevated);
+  border-color: var(--color-text-muted);
+}
+
+.action-btn.danger {
+  color: #ff6b6b;
+}
+
+.action-btn.danger:hover {
+  background-color: rgba(255, 107, 107, 0.1);
+  border-color: #ff6b6b;
+}
+
+/* Placeholder */
+.placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0;
+  color: var(--color-text-muted);
+}
+
+.placeholder-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+/* About */
+.about-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 0;
+  text-align: center;
+}
+
+.app-logo {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #ec4141, #ff6b6b);
+  border-radius: var(--radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  margin-bottom: 20px;
+  box-shadow: var(--shadow-lg);
+}
+
+.about-content h3 {
+  font-size: var(--font-size-2xl);
+  color: var(--color-text-primary);
+  margin-bottom: 8px;
+}
+
+.version {
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.copyright {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+/* Scrollbar */
+.settings-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.settings-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settings-content::-webkit-scrollbar-thumb {
+  background: var(--color-border-light);
+  border-radius: 3px;
+}
+
+.settings-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* Theme Toggle */
+.theme-toggle {
+  display: flex;
+  gap: 8px;
+  background-color: var(--color-bg-tertiary);
+  padding: 4px;
+  border-radius: var(--radius-md);
+}
+
+.theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: all 0.2s ease;
+}
+
+.theme-btn:hover {
+  color: var(--color-text-primary);
+}
+
+.theme-btn.active {
+  background-color: var(--color-bg-primary);
+  color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Color Swatches */
+.color-swatches {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.color-swatch {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  border: 3px solid transparent;
+  background-color: var(--swatch-color);
+  cursor: pointer;
+  position: relative;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.color-swatch:hover {
+  transform: scale(1.1);
+}
+
+.color-swatch.active {
+  box-shadow: 0 0 16px var(--swatch-color);
+}
+
+.check-icon {
+  width: 18px;
+  height: 18px;
+  color: white;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+}
+</style>
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -104,7 +104,7 @@ const togglePlaylists = () => {
  flex-shrink: 0;
 }

-/* 滚动条样式 */
+/* 滚动条样式 - 默认隐藏，悬停时显示 */
 .sidebar::-webkit-scrollbar {
  width: 6px;
 }
@@ -114,11 +114,16 @@ const togglePlaylists = () => {
 }

 .sidebar::-webkit-scrollbar-thumb {
-  background: var(--color-border-light);
+  background: transparent;
  border-radius: 3px;
+  transition: background 0.2s ease;
 }

-.sidebar::-webkit-scrollbar-thumb:hover {
+.sidebar:hover::-webkit-scrollbar-thumb {
+  background: var(--color-border-light);
+}
+
+.sidebar:hover::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
 }

@@ -184,7 +189,6 @@ const togglePlaylists = () => {
 .nav-item:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
-  transform: translateX(2px);
 }

 .nav-item.active {
@@ -193,17 +197,6 @@ const togglePlaylists = () => {
  font-weight: 500;
 }

-.nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 20px;
-  background-color: var(--color-accent);
-  border-radius: 0 2px 2px 0;
-}

 .nav-icon {
  width: 20px;
@@ -213,9 +206,6 @@ const togglePlaylists = () => {
  transition: transform var(--transition-base);
 }

-.nav-item:hover .nav-icon {
-  transform: scale(1.1);
-}

 .nav-text {
  font-size: var(--font-size-sm);
--- a/src/renderer/components/TopBar.vue
+++ b/src/renderer/components/TopBar.vue
@@ -24,7 +24,7 @@

    <div class="right-controls">
      <div class="app-actions">
-        <button class="action-btn ripple-btn" title="设置">
+        <button class="action-btn ripple-btn" title="设置" @click="openSettings">
          <Icon icon="lucide:settings" class="action-icon" />
        </button>
      </div>
@@ -49,7 +49,7 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';

@@ -59,6 +59,9 @@ const isMaximized = ref(false);
 const goBack = () => router.back();
 const goForward = () => router.forward();

+// Settings
+const openSettings = inject<() => void>('openSettings', () => {});
+
 // --- 窗口控制逻辑 ---
 const handleMinimize = () => window.electronAPI?.minimizeWindow();

@@ -135,7 +138,6 @@ onUnmounted(() => {

  color: var(--color-text-secondary);
  background-color: transparent;
-  border: 1px solid var(--color-border);
  cursor: pointer;

  position: relative;
@@ -151,7 +153,6 @@ onUnmounted(() => {
 .nav-btn:hover,
 .action-btn:hover {
  background-color: var(--color-bg-tertiary);
-  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
 }

--- a/src/renderer/styles/variables.css
+++ b/src/renderer/styles/variables.css
@@ -1,27 +1,12 @@
 :root {
-  /* Colors - 网易云风格配色 */
-  --color-bg-primary: #121212;
-  --color-bg-secondary: #181818;
-  --color-bg-tertiary: #282828;
-  --color-bg-elevated: #2a2a2a;
-  
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #b3b3b3;
-  --color-text-muted: #737373;
-  
+  /* Theme transition */
+  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+
+  /* Dynamic accent color (set via JS) */
  --color-accent: #ec4141;
-  --color-accent-hover: #ff5555;
-  --color-accent-soft: rgba(236, 65, 65, 0.1);
-  
-  --color-border: #2a2a2a;
-  --color-border-light: #3a3a3a;
-  
-  /* Shadows - 柔和阴影效果 */
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
-  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);
-  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.32);
-  
+  --color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, white);
+  --color-accent-soft: color-mix(in srgb, var(--color-accent) 10%, transparent);
+
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-size-xs: 0.75rem;
@@ -30,20 +15,76 @@
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
-  
-  /* Spacing & Radius - 网易云风格大圆角 */
+
+  /* Spacing & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
-  
+
  --sidebar-width: 240px;
  --topbar-height: 64px;
-  
+
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;
 }
+
+/* Dark Theme (default) */
+:root,
+[data-theme="dark"] {
+  --color-bg-primary: #121212;
+  --color-bg-secondary: #181818;
+  --color-bg-tertiary: #282828;
+  --color-bg-elevated: #2a2a2a;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #b3b3b3;
+  --color-text-muted: #737373;
+
+  --color-border: #2a2a2a;
+  --color-border-light: #3a3a3a;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);
+  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.32);
+}
+
+/* Light Theme */
+[data-theme="light"] {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: rgba(40, 50, 72, 0.03);
+  --color-bg-tertiary: #ebebeb;
+  --color-bg-elevated: #e0e0e0;
+
+  --color-text-primary: #1a1a1a;
+  --color-text-secondary: #5c5c5c;
+  --color-text-muted: #8c8c8c;
+
+  --color-border: #e0e0e0;
+  --color-border-light: #d0d0d0;
+
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.16);
+}
+
+/* Apply theme transition to common elements */
+body,
+.sidebar,
+.topbar,
+.settings-overlay,
+.settings-container,
+.settings-nav,
+.settings-content,
+.nav-item,
+.setting-item,
+.action-btn,
+.toggle-slider {
+  transition: var(--theme-transition);
+}
--- a/src/renderer/types/electron.d.ts
+++ b/src/renderer/types/electron.d.ts
@@ -16,6 +16,20 @@ export interface IElectronAPI {
    plugin: {
        call: (pluginId: string, method: string, args: any[]) => Promise<any>;
    };
+    // Cache Control
+    getCacheInfo: () => Promise<{ path: string; size: string; persistCache: boolean }>;
+    setCachePersist: (persist: boolean) => Promise<void>;
+    openCacheFolder: () => Promise<void>;
+    clearCache: () => Promise<void>;
+    // Settings
+    settings: {
+        getAll: () => Promise<{ persistCache: boolean; theme: 'dark' | 'light'; accentColor: string }>;
+        set: (settings: Partial<{ persistCache: boolean; theme: 'dark' | 'light'; accentColor: string }>) => Promise<any>;
+        getTheme: () => Promise<'dark' | 'light'>;
+        setTheme: (theme: 'dark' | 'light') => Promise<void>;
+        getAccentColor: () => Promise<string>;
+        setAccentColor: (color: string) => Promise<void>;
+    };
 }

 declare global {