update at 2025-10-14 21:52:11

web/src/components/DisplaySettings.vue

@@ -377,10 +377,31 @@ const applySettings = () => {
   root.setAttribute('data-theme', actualTheme)
   
   // 应用主色调 - 修复颜色应用逻辑
-  root.style.setProperty('--primary-color', displaySettings.primaryColor)
-  root.style.setProperty('--n-color-primary', displaySettings.primaryColor)
-  root.style.setProperty('--n-color-primary-hover', displaySettings.primaryColor + '20')
-  root.style.setProperty('--n-color-primary-pressed', displaySettings.primaryColor + '40')
+  const primaryColor = displaySettings.primaryColor
+  root.style.setProperty('--primary-color', primaryColor)
+  
+  // Naive UI 主题变量
+  root.style.setProperty('--n-color-primary', primaryColor)
+  root.style.setProperty('--n-color-primary-hover', primaryColor + 'CC') // 80% 透明度
+  root.style.setProperty('--n-color-primary-pressed', primaryColor + '99') // 60% 透明度
+  root.style.setProperty('--n-color-primary-suppl', primaryColor)
+  
+  // 计算颜色变体
+  const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null
+  }
+  
+  const rgb = hexToRgb(primaryColor)
+  if (rgb) {
+    root.style.setProperty('--n-color-primary-hover', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`)
+    root.style.setProperty('--n-color-primary-pressed', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.9)`)
+    root.style.setProperty('--n-border-color-primary', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`)
+  }
   
   // 应用缩放
   if (typeof document !== 'undefined') {
@@ -421,6 +442,10 @@ const applySettings = () => {
 // 监听设置变化并自动应用
 watch(displaySettings, () => {
   applySettings()
+  // 触发主题更新事件
+  window.dispatchEvent(new CustomEvent('theme-color-changed', {
+    detail: displaySettings.primaryColor
+  }))
 }, { deep: true })
 
 // 生命周期