feat(canvas): 画布主题 - 与工作台外观隔离并提高连线对比

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/components/conversation/voice-recording-button.tsx

@@ -4,23 +4,25 @@ import { useState } from "react";
 
 import { Mic } from "lucide-react";
 
+import { cn } from "@/lib/utils";
 import { VoiceRecordingInline } from "./voice-recording-inline";
 import { canvasThemes } from "@/lib/canvas-theme";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
 
 type VoiceRecordingButtonProps = {
     /** 转写完成回调，返回转写文本 */
     onTranscribed: (text: string) => void;
     /** 是否禁用（如发送中或未连接） */
     disabled?: boolean;
+    className?: string;
 };
 
 /**
  * 语音输入按钮：点击后在输入行内展开波形录制条，录制完成自动 STT 转写
  * 使用局部状态，多个输入行可独立使用
  */
-export function VoiceRecordingButton({ onTranscribed, disabled }: VoiceRecordingButtonProps) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+export function VoiceRecordingButton({ onTranscribed, disabled, className }: VoiceRecordingButtonProps) {
+    const theme = canvasThemes[useActiveTheme()];
     const [open, setOpen] = useState(false);
 
     return (
@@ -29,9 +31,9 @@ export function VoiceRecordingButton({ onTranscribed, disabled }: VoiceRecording
                 <Button
                     type="text"
                     shape="circle"
-                    className="!h-8 !w-8 !min-w-8"
+                    className={cn("!h-8 !w-8 !min-w-8", className)}
                     disabled={disabled}
-                    style={{ color: theme.node.muted }}
+                    style={className ? undefined : { color: theme.node.muted }}
                     icon={<Mic className="size-4" />}
                     onClick={() => setOpen(true)}
                     aria-label="实时对话"
@@ -48,4 +50,4 @@ export function VoiceRecordingButton({ onTranscribed, disabled }: VoiceRecording
             ) : null}
         </>
     );
-}
+}

web/src/components/conversation/voice-recording-inline.tsx

@@ -8,7 +8,7 @@ import { AudioWaveform } from "./audio-waveform";
 import { useSpeechRecognition } from "@/hooks/use-speech-recognition";
 import { useVoiceRecording } from "@/hooks/use-voice-recording";
 import { canvasThemes } from "@/lib/canvas-theme";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
 
 type VoiceRecordingInlineProps = {
     /** 转写完成回调，返回转写文本 */
@@ -24,7 +24,7 @@ type TranscribeState = "idle" | "transcribing" | "done" | "error";
  * 挂载后自动开始录音，显示波形动画；点击停止后自动转写为文字（浏览器 Web Speech API，无需后端与 API Key）
  */
 export function VoiceRecordingInline({ onTranscribed, onCancel }: VoiceRecordingInlineProps) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useActiveTheme()];
     const {
         state,
         waveform,