feat: 桌面歌词添加主题颜色面板组件

2026-04-03 14:20:50 +08:00 · 2025-07-23 22:47:22 +08:00
parent d5ba218b10
commit d1f5c8af84
6 changed files with 1092 additions and 20 deletions
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -222,6 +222,26 @@ export default {
    lyricLines: 'Lyric Lines',
    mobileUnavailable: 'This setting is only available on mobile devices'
  },
+  themeColor: {
+    title: 'Lyric Theme Color',
+    presetColors: 'Preset Colors',
+    customColor: 'Custom Color',
+    preview: 'Preview',
+    previewText: 'Lyric Effect',
+    colorNames: {
+      'spotify-green': 'Spotify Green',
+      'apple-blue': 'Apple Blue',
+      'youtube-red': 'YouTube Red',
+      'orange': 'Vibrant Orange',
+      'purple': 'Mystic Purple',
+      'pink': 'Cherry Pink'
+    },
+    tooltips: {
+      openColorPicker: 'Open Color Picker',
+      closeColorPicker: 'Close Color Picker'
+    },
+    placeholder: '#1db954'
+  },
  shortcutSettings: {
    title: 'Shortcut Settings',
    shortcut: 'Shortcut',
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -222,6 +222,26 @@ export default {
    lyricLines: '歌词行数',
    mobileUnavailable: '此设置仅在移动端可用'
  },
+  themeColor: {
+    title: '歌词主题色',
+    presetColors: '预设颜色',
+    customColor: '自定义颜色',
+    preview: '预览效果',
+    previewText: '歌词效果',
+    colorNames: {
+      'spotify-green': 'Spotify 绿',
+      'apple-blue': '苹果蓝',
+      'youtube-red': 'YouTube 红',
+      'orange': '活力橙',
+      'purple': '神秘紫',
+      'pink': '樱花粉'
+    },
+    tooltips: {
+      openColorPicker: '打开色板',
+      closeColorPicker: '关闭色板'
+    },
+    placeholder: '#1db954'
+  },
  shortcutSettings: {
    title: '快捷键设置',
    shortcut: '快捷键',
--- a/src/i18n/lang/zh-Hant/settings.ts
+++ b/src/i18n/lang/zh-Hant/settings.ts
@@ -201,5 +201,25 @@ export default {
      default: '預設',
      loose: '寬鬆'
    }
+  },
+  themeColor: {
+    title: '歌詞主題色',
+    presetColors: '預設顏色',
+    customColor: '自訂顏色',
+    preview: '預覽效果',
+    previewText: '歌詞效果',
+    colorNames: {
+      'spotify-green': 'Spotify 綠',
+      'apple-blue': '蘋果藍',
+      'youtube-red': 'YouTube 紅',
+      'orange': '活力橙',
+      'purple': '神秘紫',
+      'pink': '櫻花粉'
+    },
+    tooltips: {
+      openColorPicker: '開啟色板',
+      closeColorPicker: '關閉色板'
+    },
+    placeholder: '#1db954'
  }
 };
--- a/src/renderer/components/lyric/ThemeColorPanel.vue
+++ b/src/renderer/components/lyric/ThemeColorPanel.vue
@@ -0,0 +1,480 @@
+<template>
+  <div
+    v-show="visible"
+    class="theme-color-panel"
+    :class="{ visible: visible, hidden: !visible }"
+    @click.stop
+  >
+    <div class="panel-header">
+      <span class="panel-title">{{ t('settings.themeColor.title') }}</span>
+      <div class="close-button" @click="handleClose">
+        <i class="ri-close-line"></i>
+      </div>
+    </div>
+
+    <div class="panel-content">
+      <!-- 横向紧凑布局 -->
+      <div class="compact-layout">
+        <!-- 预设颜色 -->
+        <div class="preset-section">
+          <div class="section-label">{{ t('settings.themeColor.presetColors') }}</div>
+          <div class="preset-colors">
+            <div
+              v-for="color in presetColors"
+              :key="color.id"
+              class="color-dot"
+              :class="{ active: isColorActive(color) }"
+              :style="{ backgroundColor: getColorValue(color) }"
+              :title="getColorName(color)"
+              @click="handlePresetColorSelect(color)"
+            >
+              <i v-if="isColorActive(color)" class="ri-check-line"></i>
+            </div>
+          </div>
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="divider"></div>
+
+        <!-- 自定义颜色 -->
+        <div class="custom-section">
+          <div class="section-label">{{ t('settings.themeColor.customColor') }}</div>
+          <div class="custom-controls">
+            <div
+              class="color-preview"
+              :style="{ backgroundColor: currentColor }"
+              @click="showColorPicker = !showColorPicker"
+              :title="showColorPicker ? t('settings.themeColor.tooltips.closeColorPicker') : t('settings.themeColor.tooltips.openColorPicker')"
+            >
+              <i class="ri-palette-line"></i>
+            </div>
+            <input
+              v-model="colorInput"
+              type="text"
+              class="color-input"
+              :placeholder="t('settings.themeColor.placeholder')"
+              @input="handleColorInput"
+              @keyup.enter="handleColorInputConfirm"
+            />
+          </div>
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="divider"></div>
+
+        <!-- 效果预览 -->
+        <div class="preview-section">
+          <div class="section-label">{{ t('settings.themeColor.preview') }}</div>
+          <div class="preview-text" :style="getPreviewStyle()">
+            {{ t('settings.themeColor.previewText') }}
+          </div>
+        </div>
+      </div>
+      
+      <!-- 颜色选择器（展开时显示） -->
+      <div v-if="showColorPicker" class="color-picker-dropdown">
+        <n-color-picker
+          v-model:value="pickerColor"
+          :show-alpha="false"
+          :modes="['hex']"
+          size="small"
+          @update:value="handlePickerColorChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { NColorPicker } from 'naive-ui';
+
+import {
+  getLyricThemeColors,
+  getPresetColorValue,
+  validateColor,
+  optimizeColorForTheme,
+  type LyricThemeColor
+} from '@/utils/linearColor';
+
+interface Props {
+  visible: boolean;
+  currentColor: string;
+  theme: 'light' | 'dark';
+}
+
+interface Emits {
+  (e: 'colorChange', color: string): void;
+  (e: 'close'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  currentColor: '#1db954',
+  theme: 'dark'
+});
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+
+// 响应式数据
+const presetColors = ref<LyricThemeColor[]>(getLyricThemeColors());
+const showColorPicker = ref(false);
+const colorInput = ref('');
+const pickerColor = ref(props.currentColor);
+
+// 计算属性
+const getColorValue = (color: LyricThemeColor): string => {
+  return getPresetColorValue(color.id, props.theme);
+};
+
+const isColorActive = (color: LyricThemeColor): boolean => {
+  const colorValue = getColorValue(color);
+  return colorValue === props.currentColor;
+};
+
+const getColorName = (color: LyricThemeColor): string => {
+  return t(`settings.themeColor.colorNames.${color.id}`) || color.name;
+};
+
+const getPreviewStyle = () => {
+  const progress = 60; // 模拟60%的播放进度
+  return {
+    background: `linear-gradient(to right, ${props.currentColor} ${progress}%, var(--text-color) ${progress}%)`,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    fontSize: '18px',
+    fontWeight: '600'
+  };
+};
+
+// 事件处理
+const handleClose = () => {
+  showColorPicker.value = false;
+  emit('close');
+};
+
+const handlePresetColorSelect = (color: LyricThemeColor) => {
+  const colorValue = getColorValue(color);
+  const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
+  emit('colorChange', optimizedColor);
+  
+  // 更新输入框和选择器
+  colorInput.value = optimizedColor;
+  pickerColor.value = optimizedColor;
+};
+
+const handleColorInput = () => {
+  if (validateColor(colorInput.value)) {
+    try {
+      const optimizedColor = optimizeColorForTheme(colorInput.value, props.theme);
+      pickerColor.value = optimizedColor;
+      emit('colorChange', optimizedColor);
+    } catch (error) {
+      console.error('Failed to optimize color:', error);
+      // 恢复到当前有效颜色
+      colorInput.value = props.currentColor;
+      pickerColor.value = props.currentColor;
+    }
+  }
+};
+
+const handleColorInputConfirm = () => {
+  if (validateColor(colorInput.value)) {
+    try {
+      const optimizedColor = optimizeColorForTheme(colorInput.value, props.theme);
+      emit('colorChange', optimizedColor);
+    } catch (error) {
+      console.error('Failed to optimize color:', error);
+      // 恢复到当前有效颜色
+      colorInput.value = props.currentColor;
+      pickerColor.value = props.currentColor;
+    }
+  } else {
+    console.warn('Invalid color input:', colorInput.value);
+    // 恢复到当前有效颜色
+    colorInput.value = props.currentColor;
+    pickerColor.value = props.currentColor;
+  }
+};
+
+const handlePickerColorChange = (color: string) => {
+  if (validateColor(color)) {
+    try {
+      const optimizedColor = optimizeColorForTheme(color, props.theme);
+      colorInput.value = optimizedColor;
+      emit('colorChange', optimizedColor);
+    } catch (error) {
+      console.error('Failed to optimize picker color:', error);
+      // 恢复到当前有效颜色
+      colorInput.value = props.currentColor;
+      pickerColor.value = props.currentColor;
+    }
+  } else {
+    console.warn('Invalid picker color:', color);
+  }
+};
+
+// 监听属性变化
+watch(
+  () => props.currentColor,
+  (newColor) => {
+    colorInput.value = newColor;
+    pickerColor.value = newColor;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      showColorPicker.value = false;
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.theme-color-panel {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  min-width: 480px;
+  max-width: calc(100vw - 40px);
+  background: var(--control-bg);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) translateY(-10px) scale(0.95);
+    pointer-events: none;
+  }
+  
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0) scale(1);
+    pointer-events: auto;
+  }
+  
+  // 小屏幕适配
+  @media (max-width: 520px) {
+    min-width: calc(100vw - 40px);
+    left: 20px;
+    transform: none;
+    
+    &.hidden {
+      transform: translateY(-10px) scale(0.95);
+    }
+    
+    &.visible {
+      transform: translateY(0) scale(1);
+    }
+  }
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  
+  .panel-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-color);
+    opacity: 0.9;
+  }
+  
+  .close-button {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 6px;
+    color: var(--text-color);
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: #ff6b6b;
+    }
+    
+    i {
+      font-size: 14px;
+    }
+  }
+}
+
+.panel-content {
+  .compact-layout {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  
+  .section-label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-color);
+    opacity: 0.7;
+    margin-bottom: 6px;
+    text-align: center;
+  }
+  
+  .divider {
+    width: 1px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+// 预设颜色区域
+.preset-section {
+  .preset-colors {
+    display: flex;
+    gap: 6px;
+    
+    .color-dot {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &:hover {
+        transform: scale(1.1);
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+      
+      &.active {
+        border-color: var(--text-color);
+        box-shadow: 0 0 0 2px var(--control-bg);
+      }
+      
+      i {
+        color: white;
+        font-size: 10px;
+        text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+}
+
+// 自定义颜色区域
+.custom-section {
+  .custom-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    
+    .color-preview {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: rgba(255, 255, 255, 0.4);
+        transform: scale(1.05);
+      }
+      
+      i {
+        color: white;
+        font-size: 12px;
+        text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
+      }
+    }
+    
+    .color-input {
+      width: 80px;
+      height: 24px;
+      background: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+      padding: 0 6px;
+      color: var(--text-color);
+      font-size: 11px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      outline: none;
+      transition: all 0.2s ease;
+      
+      &:focus {
+        border-color: var(--highlight-color, rgba(255, 255, 255, 0.4));
+        background: rgba(255, 255, 255, 0.12);
+      }
+      
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+}
+
+// 预览区域
+.preview-section {
+  .preview-text {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
+}
+
+// 颜色选择器下拉
+.color-picker-dropdown {
+  margin-top: 8px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  
+  :deep(.n-color-picker) {
+    width: 100%;
+  }
+}
+
+// 小屏幕适配
+@media (max-width: 520px) {
+  .compact-layout {
+    flex-direction: column;
+    gap: 12px;
+    
+    .divider {
+      width: 100%;
+      height: 1px;
+    }
+  }
+  
+  .preset-section .preset-colors {
+    justify-content: center;
+  }
+}
+</style>
--- a/src/renderer/utils/linearColor.ts
+++ b/src/renderer/utils/linearColor.ts
@@ -12,6 +12,20 @@ interface ITextColors {
  theme: string;
 }

+export interface LyricThemeColor {
+  id: string;
+  name: string;
+  light: string;
+  dark: string;
+}
+
+interface LyricSettings {
+  isTop: boolean;
+  theme: 'light' | 'dark';
+  isLock: boolean;
+  highlightColor?: string;
+}
+
 export const getImageLinearBackground = async (imageSrc: string): Promise<IColor> => {
  try {
    const primaryColor = await getImagePrimaryColor(imageSrc);
@@ -296,3 +310,235 @@ export const createGradientString = (
    .map((color, i) => `rgb(${color.r}, ${color.g}, ${color.b}) ${percentages[i]}%`)
    .join(', ')})`;
 };
+
+// ===== 歌词主题色相关工具函数 =====
+
+/**
+ * 预设歌词主题色配置
+ * 注意：name 字段将通过国际化系统动态获取，这里的值仅作为后备
+ */
+const PRESET_LYRIC_COLORS: LyricThemeColor[] = [
+  {
+    id: 'spotify-green',
+    name: 'Spotify Green', // 后备名称，实际使用时会被国际化替换
+    light: '#1db954',
+    dark: '#1ed760'
+  },
+  {
+    id: 'apple-blue',
+    name: 'Apple Blue',
+    light: '#007aff',
+    dark: '#0a84ff'
+  },
+  {
+    id: 'youtube-red',
+    name: 'YouTube Red',
+    light: '#ff0000',
+    dark: '#ff4444'
+  },
+  {
+    id: 'orange',
+    name: 'Vibrant Orange',
+    light: '#ff6b35',
+    dark: '#ff8c42'
+  },
+  {
+    id: 'purple',
+    name: 'Mystic Purple',
+    light: '#8b5cf6',
+    dark: '#a78bfa'
+  },
+  {
+    id: 'pink',
+    name: 'Cherry Pink',
+    light: '#ec4899',
+    dark: '#f472b6'
+  }
+];
+
+/**
+ * 验证颜色是否有效
+ */
+export const validateColor = (color: string): boolean => {
+  if (!color || typeof color !== 'string') return false;
+  const tc = tinycolor(color);
+  return tc.isValid() && tc.getAlpha() > 0;
+};
+
+/**
+ * 检查颜色对比度是否符合可读性标准
+ */
+export const validateColorContrast = (color: string, theme: 'light' | 'dark'): boolean => {
+  if (!validateColor(color)) return false;
+  
+  const backgroundColor = theme === 'dark' ? '#000000' : '#ffffff';
+  const contrast = tinycolor.readability(color, backgroundColor);
+  return contrast >= 4.5; // WCAG AA 标准
+};
+
+/**
+ * 为特定主题优化颜色
+ */
+export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): string => {
+  if (!validateColor(color)) {
+    return getDefaultHighlightColor(theme);
+  }
+
+  const tc = tinycolor(color);
+  const hsl = tc.toHsl();
+  
+  if (theme === 'dark') {
+    // 暗色主题：增加亮度和饱和度
+    const optimized = tinycolor({
+      h: hsl.h,
+      s: Math.min(hsl.s * 1.1, 1),
+      l: Math.max(hsl.l, 0.4) // 确保最小亮度
+    });
+    
+    // 检查对比度，如果不够则进一步调整
+    if (!validateColorContrast(optimized.toHexString(), theme)) {
+      return tinycolor({
+        h: hsl.h,
+        s: Math.min(hsl.s * 1.2, 1),
+        l: Math.max(hsl.l * 1.3, 0.5)
+      }).toHexString();
+    }
+    
+    return optimized.toHexString();
+  } else {
+    // 亮色主题：适当降低亮度
+    const optimized = tinycolor({
+      h: hsl.h,
+      s: Math.min(hsl.s * 1.05, 1),
+      l: Math.min(hsl.l, 0.6) // 确保最大亮度
+    });
+    
+    // 检查对比度
+    if (!validateColorContrast(optimized.toHexString(), theme)) {
+      return tinycolor({
+        h: hsl.h,
+        s: Math.min(hsl.s * 1.1, 1),
+        l: Math.min(hsl.l * 0.8, 0.5)
+      }).toHexString();
+    }
+    
+    return optimized.toHexString();
+  }
+};
+
+/**
+ * 获取默认高亮颜色
+ */
+export const getDefaultHighlightColor = (theme?: 'light' | 'dark'): string => {
+  const defaultColor = PRESET_LYRIC_COLORS[0]; // Spotify 绿
+  if (!theme) return defaultColor.light;
+  return theme === 'dark' ? defaultColor.dark : defaultColor.light;
+};
+
+/**
+ * 获取预设主题色列表
+ */
+export const getLyricThemeColors = (): LyricThemeColor[] => {
+  return [...PRESET_LYRIC_COLORS];
+};
+
+/**
+ * 根据主题获取预设颜色的实际值
+ */
+export const getPresetColorValue = (colorId: string, theme: 'light' | 'dark'): string => {
+  const color = PRESET_LYRIC_COLORS.find(c => c.id === colorId);
+  if (!color) return getDefaultHighlightColor(theme);
+  return theme === 'dark' ? color.dark : color.light;
+};
+
+
+
+/**
+ * 安全加载歌词设置
+ */
+const safeLoadLyricSettings = (): LyricSettings => {
+  try {
+    const stored = localStorage.getItem('lyricData');
+    if (stored) {
+      const parsed = JSON.parse(stored) as LyricSettings;
+      
+      // 验证 highlightColor 字段
+      if (parsed.highlightColor && !validateColor(parsed.highlightColor)) {
+        console.warn('Invalid stored highlight color, removing it');
+        delete parsed.highlightColor;
+      }
+      
+      return parsed;
+    }
+  } catch (error) {
+    console.error('Failed to load lyric settings:', error);
+  }
+  
+  // 返回默认设置
+  return {
+    isTop: false,
+    theme: 'dark',
+    isLock: false
+  };
+};
+
+/**
+ * 安全保存歌词设置
+ */
+const safeSaveLyricSettings = (settings: LyricSettings): void => {
+  try {
+    localStorage.setItem('lyricData', JSON.stringify(settings));
+  } catch (error) {
+    console.error('Failed to save lyric settings:', error);
+  }
+};
+
+/**
+ * 保存歌词主题色
+ */
+export const saveLyricThemeColor = (color: string): void => {
+  if (!validateColor(color)) {
+    console.warn('Attempted to save invalid color:', color);
+    return;
+  }
+  
+  const settings = safeLoadLyricSettings();
+  settings.highlightColor = color;
+  safeSaveLyricSettings(settings);
+};
+
+/**
+ * 加载歌词主题色
+ */
+export const loadLyricThemeColor = (): string => {
+  const settings = safeLoadLyricSettings();
+  
+  if (settings.highlightColor && validateColor(settings.highlightColor)) {
+    return settings.highlightColor;
+  }
+  
+  // 如果没有保存的颜色或颜色无效，返回默认颜色
+  return getDefaultHighlightColor(settings.theme);
+};
+
+/**
+ * 重置歌词主题色到默认值
+ */
+export const resetLyricThemeColor = (): void => {
+  const settings = safeLoadLyricSettings();
+  delete settings.highlightColor;
+  safeSaveLyricSettings(settings);
+};
+
+/**
+ * 获取当前有效的歌词主题色
+ */
+export const getCurrentLyricThemeColor = (theme: 'light' | 'dark'): string => {
+  const savedColor = loadLyricThemeColor();
+  
+  if (savedColor && validateColor(savedColor)) {
+    return optimizeColorForTheme(savedColor, theme);
+  }
+  
+  return getDefaultHighlightColor(theme);
+};
--- a/src/renderer/views/lyric/index.vue
+++ b/src/renderer/views/lyric/index.vue
@@ -37,6 +37,13 @@
          <i v-if="lyricSetting.theme === 'light'" class="ri-sun-line"></i>
          <i v-else class="ri-moon-line"></i>
        </div>
+        <div 
+          class="control-button theme-color-button" 
+          :class="{ active: showThemeColorPanel }"
+          @click="toggleThemeColorPanel"
+        >
+          <i class="ri-palette-line"></i>
+        </div>
        <!-- <div class="control-button" @click="handleTop">
          <i class="ri-pushpin-line" :class="{ active: lyricSetting.isTop }"></i>
        </div> -->
@@ -50,6 +57,15 @@
      </div>
    </div>

+    <!-- 主题色选择面板 -->
+    <ThemeColorPanel
+      :visible="showThemeColorPanel"
+      :current-color="currentHighlightColor"
+      :theme="lyricSetting.theme"
+      @color-change="handleColorChange"
+      @close="handleThemeColorPanelClose"
+    />
+
    <!-- 歌词显示区域 -->
    <div ref="containerRef" class="lyric-container">
      <div class="lyric-scroll">
@@ -91,6 +107,13 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

 import { SongResult } from '@/type/music';
+import ThemeColorPanel from '@/components/lyric/ThemeColorPanel.vue';
+import {
+  getCurrentLyricThemeColor,
+  loadLyricThemeColor,
+  saveLyricThemeColor,
+  validateColor
+} from '@/utils/linearColor';

 defineOptions({
  name: 'Lyric'
@@ -127,20 +150,51 @@ const dynamicData = ref({
  isPlay: true
 });

-const lyricSetting = ref({
-  ...(localStorage.getItem('lyricData')
-    ? JSON.parse(localStorage.getItem('lyricData') || '')
-    : {
-        isTop: false,
-        theme: 'dark',
-        isLock: false
-      })
-});
+// 安全加载歌词设置
+const loadLyricSettings = () => {
+  try {
+    const stored = localStorage.getItem('lyricData');
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      
+      // 验证 highlightColor 字段
+      let validatedHighlightColor = parsed.highlightColor;
+      if (validatedHighlightColor && !validateColor(validatedHighlightColor)) {
+        console.warn('Invalid stored highlight color, removing it');
+        validatedHighlightColor = undefined;
+      }
+      
+      // 确保所有必需字段存在并有效
+      return {
+        isTop: parsed.isTop ?? false,
+        theme: (parsed.theme === 'light' || parsed.theme === 'dark') ? parsed.theme : 'dark',
+        isLock: parsed.isLock ?? false,
+        highlightColor: validatedHighlightColor
+      };
+    }
+  } catch (error) {
+    console.error('Failed to load lyric settings:', error);
+  }
+  
+  // 返回默认设置
+  return {
+    isTop: false,
+    theme: 'dark' as 'light' | 'dark',
+    isLock: false,
+    highlightColor: undefined as string | undefined
+  };
+};
+
+const lyricSetting = ref(loadLyricSettings());

 let hideControlsTimer: number | null = null;

 const isHovering = ref(false);

+// 主题色相关状态
+const showThemeColorPanel = ref(false);
+const currentHighlightColor = ref('#1db954');
+
 // 计算是否栏
 const showControls = computed(() => {
  if (lyricSetting.value.isLock) {
@@ -364,11 +418,20 @@ const getLyricStyle = (index: number) => {
  if (index !== currentIndex.value) return {};

  const progress = currentProgress.value * 100;
+  
+  // 使用更清晰的渐变实现
  return {
    background: `linear-gradient(to right, var(--highlight-color) ${progress}%, var(--text-color) ${progress}%)`,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
-    transition: 'all 0.1s linear'
+    // 优化字体渲染，减少发虚
+    textRendering: 'optimizeLegibility' as const,
+    WebkitFontSmoothing: 'antialiased' as const,
+    MozOsxFontSmoothing: 'grayscale' as const,
+    // 使用 transform 而不是直接的 transition 来提高性能
+    transform: 'translateZ(0)', // 启用硬件加速
+    backfaceVisibility: 'hidden' as const, // 减少渲染问题
+    transition: 'background 0.1s linear'
  };
 };

@@ -520,6 +583,140 @@ const checkTheme = () => {
  }
 };

+// 主题色相关函数
+const toggleThemeColorPanel = () => {
+  showThemeColorPanel.value = !showThemeColorPanel.value;
+};
+
+const handleColorChange = (color: string) => {
+  // 验证颜色有效性
+  if (!validateColor(color)) {
+    console.error('Invalid color received:', color);
+    return;
+  }
+  
+  try {
+    currentHighlightColor.value = color;
+    updateThemeColorWithTransition(color);
+    
+    // 更新 lyricSetting 中的 highlightColor
+    lyricSetting.value.highlightColor = color;
+    
+    // 同时保存到专用的主题色存储
+    saveLyricThemeColor(color);
+  } catch (error) {
+    console.error('Failed to handle color change:', error);
+    // 恢复到默认颜色
+    const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+    currentHighlightColor.value = defaultColor;
+    updateThemeColorWithTransition(defaultColor);
+  }
+};
+
+const handleThemeColorPanelClose = () => {
+  showThemeColorPanel.value = false;
+};
+
+// 导出重置函数以供将来使用
+const resetThemeColor = () => {
+  // 重置到默认颜色
+  const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+  
+  // 更新所有相关状态
+  currentHighlightColor.value = defaultColor;
+  lyricSetting.value.highlightColor = undefined;
+  updateThemeColorWithTransition(defaultColor);
+  
+  // 清除专用存储
+  try {
+    const settings = loadLyricSettings();
+    delete settings.highlightColor;
+    saveLyricSettings(settings);
+  } catch (error) {
+    console.error('Failed to reset theme color:', error);
+  }
+};
+
+// 验证和修复颜色设置
+const validateAndFixColorSettings = () => {
+  try {
+    // 检查当前高亮颜色是否有效
+    if (currentHighlightColor.value && !validateColor(currentHighlightColor.value)) {
+      console.warn('Current highlight color is invalid, resetting to default');
+      const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+      currentHighlightColor.value = defaultColor;
+      lyricSetting.value.highlightColor = undefined;
+      updateCSSVariable('--lyric-highlight-color', defaultColor);
+    }
+    
+    // 检查 lyricSetting 中的颜色是否有效
+    if (lyricSetting.value.highlightColor && !validateColor(lyricSetting.value.highlightColor)) {
+      console.warn('Stored highlight color is invalid, removing it');
+      lyricSetting.value.highlightColor = undefined;
+    }
+  } catch (error) {
+    console.error('Failed to validate color settings:', error);
+    // 完全重置到默认状态
+    const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+    currentHighlightColor.value = defaultColor;
+    lyricSetting.value.highlightColor = undefined;
+    updateCSSVariable('--lyric-highlight-color', defaultColor);
+  }
+};
+
+// 暴露函数
+defineExpose({
+  resetThemeColor,
+  validateAndFixColorSettings
+});
+
+const updateCSSVariable = (name: string, value: string) => {
+  document.documentElement.style.setProperty(name, value);
+};
+
+const updateThemeColorWithTransition = (newColor: string) => {
+  // 添加过渡类
+  const lyricWindow = document.querySelector('.lyric-window');
+  if (lyricWindow) {
+    lyricWindow.classList.add('color-transitioning');
+  }
+  
+  // 更新CSS变量
+  updateCSSVariable('--lyric-highlight-color', newColor);
+  
+  // 移除过渡类
+  setTimeout(() => {
+    if (lyricWindow) {
+      lyricWindow.classList.remove('color-transitioning');
+    }
+  }, 300);
+};
+
+const initializeThemeColor = () => {
+  // 优先从 lyricSetting 中读取颜色
+  let savedColor = lyricSetting.value.highlightColor;
+  
+  // 如果 lyricSetting 中没有，则从专用存储中读取
+  if (!savedColor) {
+    savedColor = loadLyricThemeColor();
+    // 如果从专用存储中读取到了颜色，同步到 lyricSetting
+    if (savedColor) {
+      lyricSetting.value.highlightColor = savedColor;
+    }
+  }
+  
+  if (savedColor) {
+    const optimizedColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+    currentHighlightColor.value = optimizedColor;
+    updateCSSVariable('--lyric-highlight-color', optimizedColor);
+  } else {
+    // 如果没有保存的颜色，使用默认颜色
+    const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
+    currentHighlightColor.value = defaultColor;
+    updateCSSVariable('--lyric-highlight-color', defaultColor);
+  }
+};
+
 // const handleTop = () => {
 //   lyricSetting.value.isTop = !lyricSetting.value.isTop;
 //   windowData.electron.ipcRenderer.send('top-lyric', lyricSetting.value.isTop);
@@ -534,14 +731,35 @@ const handleClose = () => {
  windowData.electron.ipcRenderer.send('close-lyric');
 };

+// 安全保存歌词设置
+const saveLyricSettings = (settings: typeof lyricSetting.value) => {
+  try {
+    localStorage.setItem('lyricData', JSON.stringify(settings));
+  } catch (error) {
+    console.error('Failed to save lyric settings:', error);
+  }
+};
+
 watch(
  () => lyricSetting.value,
-  (newValue: any) => {
-    localStorage.setItem('lyricData', JSON.stringify(newValue));
+  (newValue) => {
+    saveLyricSettings(newValue);
  },
  { deep: true }
 );

+// 监听主题切换，自动调整颜色
+watch(
+  () => lyricSetting.value.theme,
+  (newTheme) => {
+    if (currentHighlightColor.value) {
+      const optimizedColor = getCurrentLyricThemeColor(newTheme);
+      currentHighlightColor.value = optimizedColor;
+      updateThemeColorWithTransition(optimizedColor);
+    }
+  }
+);
+
 // 添加拖动相关变量
 const isDragging = ref(false);
 const startPosition = ref({ x: 0, y: 0 });
@@ -626,6 +844,12 @@ onMounted(() => {
      }
    };
  }
+  
+  // 初始化主题色
+  initializeThemeColor();
+  
+  // 验证和修复颜色设置
+  validateAndFixColorSettings();
 });

 // 添加播放控制相关的函数
@@ -663,6 +887,18 @@ body,
  transition: background-color 0.3s ease;
  cursor: default;
  border-radius: 14px;
+  
+  &.color-transitioning {
+    .lyric-text-inner {
+      transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+    
+    .control-button {
+      i {
+        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+    }
+  }

  &:hover {
    .control-bar {
@@ -680,7 +916,7 @@ body,
  &.dark {
    --text-color: #ffffff;
    --text-secondary: #ffffffea;
-    --highlight-color: #1db954;
+    --highlight-color: var(--lyric-highlight-color, #1ed760);
    --control-bg: rgba(124, 124, 124, 0.3);
    &:hover:not(.lyric_lock) {
      background: rgba(44, 44, 44, 0.466) !important;
@@ -688,10 +924,10 @@ body,
  }

  &.light {
-    --text-color: #333333;
-    --text-secondary: #39393989;
-    --highlight-color: #1db954;
-    --control-bg: rgba(255, 255, 255, 0.3);
+    --text-color: #383838;
+    --text-secondary: #282828ae;
+    --highlight-color: var(--lyric-highlight-color, #1db954);
+    --control-bg: rgba(38, 38, 38, 0.532);
    &:hover:not(.lyric_lock) {
      background: rgba(0, 0, 0, 0.434) !important;
    }
@@ -775,6 +1011,16 @@ body,
      color: var(--highlight-color);
    }
  }
+  
+  &.theme-color-button {
+    &.active {
+      background: var(--control-bg);
+      
+      i {
+        color: var(--highlight-color);
+      }
+    }
+  }
 }

 .lyric-container {
@@ -816,6 +1062,19 @@ body,
  &.lyric-line-current {
    transform: scale(1.05);
    opacity: 1;
+    
+    // 当前播放歌词的特殊样式
+    .lyric-text {
+      // 移除阴影，避免干扰渐变效果
+      text-shadow: none;
+      
+      .lyric-text-inner {
+        // 为渐变文字添加轻微的外发光
+        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+        // 确保渐变效果清晰
+        -webkit-font-smoothing: antialiased;
+      }
+    }
  }

  &.lyric-line-passed {
@@ -829,9 +1088,22 @@ body,
  color: var(--text-color);
  white-space: pre-wrap;
  word-break: break-all;
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease;
  line-height: 1.4;
-  -webkit-text-stroke: 0.5px #0000008a;
+  // 优化字体渲染
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  // 为非当前播放的歌词添加阴影效果
+  text-shadow: 
+    0 0 2px rgba(0, 0, 0, 0.8),
+    0 1px 1px rgba(0, 0, 0, 0.6),
+    0 0 4px rgba(255, 255, 255, 0.2);
+  
+  .lyric-text-inner {
+    transition: background 0.3s ease;
+  }
 }

 .lyric-translation {
@@ -839,7 +1111,15 @@ body,
  white-space: pre-wrap;
  word-break: break-all;
  transition: font-size 0.2s ease;
-  line-height: 1.4; // 添加行高比例
+  line-height: 1.4;
+  
+  // 为翻译文本也添加阴影效果，但稍微轻一些
+  text-shadow: 
+    0 0 2px rgba(0, 0, 0, 0.7),
+    0 1px 1px rgba(0, 0, 0, 0.5),
+    0 0 4px rgba(255, 255, 255, 0.2),
+    1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 1px rgba(0, 0, 0, 0.4);
 }

 .lyric-empty {
@@ -847,6 +1127,12 @@ body,
  color: var(--text-secondary);
  font-size: 16px;
  padding: 20px;
+  
+  // 为空歌词提示也添加阴影效果
+  text-shadow: 
+    0 0 2px rgba(0, 0, 0, 0.7),
+    0 1px 1px rgba(0, 0, 0, 0.5),
+    0 0 4px rgba(255, 255, 255, 0.2);
 }

 body {