优化频谱效果：统一透明背景，改进切换交互

- 波形/圆形/粒子渲染器背景改为透明(clearRect)，与柱状效果一致
- 效果切换改为单击循环切换，去掉弹出面板
- 切换按钮改为透明背景+阴影轮廓样式

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

entry/src/main/ets/view/spectrum/CircleSpectrumRenderer.ets

@@ -12,8 +12,7 @@ export class CircleSpectrumRenderer implements SpectrumRenderer {
     const bandCount: number = bands.length
     if (bandCount === 0) return
 
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.20)'
-    ctx.fillRect(0, 0, width, height)
+    ctx.clearRect(0, 0, width, height)
 
     const centerX: number = width / 2
     const centerY: number = height / 2

entry/src/main/ets/view/spectrum/ParticleSpectrumRenderer.ets

@@ -46,9 +46,7 @@ export class ParticleSpectrumRenderer implements SpectrumRenderer {
       this.initPool()
     }
 
-    // 粒子模式采用“模糊光斑”风格，保留轨迹
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.16)'
-    ctx.fillRect(0, 0, width, height)
+    ctx.clearRect(0, 0, width, height)
 
     const palette = buildSpectrumPalette(brandColor)
     const centerY: number = height * 0.62

entry/src/main/ets/view/spectrum/SpectrumView.ets

@@ -27,7 +27,7 @@ export struct SpectrumView {
   @Prop @Watch('onPlayingChange') isPlaying: boolean = false
   @StorageProp('themeColor') themeColor: string = '#FF0050'
   @Prop @Watch('onVisibilityChange') isVisible: boolean = false
-  @State showModePanel: boolean = false
+  private modeCount: number = MODE_NAMES.length
   @State canvasWidth: number = 0
   @State canvasHeight: number = 0
   private renderSettings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -110,11 +110,15 @@ export struct SpectrumView {
     this.currentMode = mode
     AppStorage.setOrCreate<number>('spectrumMode', mode)
     this.fftAnalyzer.reset()
-    // 清空 Canvas
     this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     Logger.info(TAG, 'switchMode to ' + MODE_NAMES[mode])
   }
 
+  private nextMode(): void {
+    const next: number = (this.currentMode + 1) % this.modeCount
+    this.switchMode(next)
+  }
+
   build() {
     Stack({ alignContent: Alignment.TopEnd }) {
       Canvas(this.canvasContext)
@@ -130,38 +134,24 @@ export struct SpectrumView {
           this.canvasHeight = newVal.height as number
         })
 
-      // 特效切换按钮
-      Column() {
-        Text('🎵')
-          .fontSize(22)
-          .fontColor('#FFFFFF')
-          .opacity(0.7)
-          .onClick(() => {
-            this.showModePanel = !this.showModePanel
-          })
-          .padding(8)
-
-        if (this.showModePanel) {
-          Column() {
-            ForEach(MODE_NAMES, (name: string, index: number) => {
-              Text(name)
-                .fontSize(14)
-                .fontColor(index === this.currentMode ? $r('app.color.brand') : '#FFFFFF')
-                .fontWeight(index === this.currentMode ? FontWeight.Bold : FontWeight.Normal)
-                .opacity(index === this.currentMode ? 1.0 : 0.7)
-                .padding({ top: 8, bottom: 8, left: 16, right: 16 })
-                .onClick(() => {
-                  this.switchMode(index)
-                  this.showModePanel = false
-                })
-            })
-          }
-          // .backgroundColor('rgba(0,0,0,0.6)')
-          .borderRadius(12)
-          .padding(4)
-        }
+      // 特效切换按钮（点击循环切换）
+      Row() {
+        SymbolGlyph($r('sys.symbol.music'))
+          .fontSize(14)
+          .fontColor([$r('app.color.brand')])
+        Text(MODE_NAMES[this.currentMode])
+          .fontSize(12)
+          .fontColor($r('app.color.brand'))
+          .margin({ left: 4 })
       }
-      .margin({ top: 16, right: 16 })
+      .padding({ top: 5, bottom: 5, left: 10, right: 10 })
+      .borderRadius(16)
+      .backgroundColor(Color.Transparent)
+      .shadow({ radius: 6, color: 'rgba(0, 0, 0, 0.45)', offsetX: 0, offsetY: 0 })
+      .margin({ top: 8, right: 8 })
+      .onClick(() => {
+        this.nextMode()
+      })
     }
     .width('100%')
     .height('100%')

entry/src/main/ets/view/spectrum/WaveSpectrumRenderer.ets

@@ -10,8 +10,7 @@ export class WaveSpectrumRenderer implements SpectrumRenderer {
     const bandCount: number = bands.length
     if (bandCount === 0) return
 
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.26)'
-    ctx.fillRect(0, 0, width, height)
+    ctx.clearRect(0, 0, width, height)
 
     const palette = buildSpectrumPalette(brandColor)
     const centerY: number = height * 0.5