fix(canvas): 创作界面 - 统一素材选择并修复画布顶栏与暗色交互

web/src/lib/app-theme.ts

@@ -41,7 +41,7 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
               active: "#ffffff",
               border: "rgba(255, 255, 255, 0.3)",
               disabledBackground: "rgba(255, 255, 255, 0.06)",
-              focus: "transparent",
+              focus: "rgba(255, 255, 255, 0.22)",
               hover: "#e5e5e5",
               primary: "#f5f5f5",
               surface: "rgba(255, 255, 255, 0.035)",
@@ -151,7 +151,7 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
                 ...(selectionControl
                     ? {
                           buttonBg: selectionControl.surface,
-                          buttonCheckedBg: "rgba(91, 110, 225, 0.12)",
+                          buttonCheckedBg: color.selectSelectedBg,
                           buttonSolidCheckedActiveBg: selectionControl.active,
                           buttonSolidCheckedBg: selectionControl.primary,
                           buttonSolidCheckedHoverBg: selectionControl.hover,

web/src/lib/canvas-theme.ts

@@ -7,7 +7,7 @@ export const canvasThemes = {
             background: "#ffffff",
             dot: "rgba(15,23,42,.14)",
             line: "rgba(15,23,42,.065)",
-            selectionFill: "rgba(79,110,232,.10)",
+            selectionFill: "rgba(17,17,17,.10)",
         },
         node: {
             label: "#4b5563",
@@ -23,8 +23,8 @@ export const canvasThemes = {
         frame: {
             fill: "rgba(17,24,39,.025)",
             stroke: "rgba(17,24,39,.18)",
-            activeFill: "rgba(79,110,232,.05)",
-            activeStroke: "#4f6ee8",
+            activeFill: "rgba(17,17,17,.05)",
+            activeStroke: "#171717",
             preview: "rgba(255,255,255,.82)",
         },
         toolbar: {
@@ -39,8 +39,8 @@ export const canvasThemes = {
             surface: "rgba(255,255,255,.72)",
             elevated: "rgba(255,255,255,.94)",
             dropzone: "rgba(248,250,252,.78)",
-            glow: "rgba(79,110,232,.18)",
-            glowStrong: "rgba(79,110,232,.52)",
+            glow: "rgba(17,17,17,.14)",
+            glowStrong: "rgba(17,17,17,.42)",
             shadow: "rgba(15,23,42,.18)",
         },
         // 时间线/字幕组件语义色：轨道底、按类型区分的片段、标尺与播放头、字幕列表条目态。
@@ -50,17 +50,18 @@ export const canvasThemes = {
             clipVideo: "rgba(79,110,232,.16)",
             clipAudio: "rgba(16,185,129,.14)",
             clipSubtitle: "rgba(245,158,11,.16)",
-            clipSelectedBorder: "#4f6ee8",
+            clipSelectedBorder: "#171717",
             handle: "rgba(255,255,255,.72)",
             rulerTick: "rgba(17,24,39,.28)",
             rulerLabel: "#6b7280",
-            playhead: "#4f6ee8",
-            entryActive: "rgba(79,110,232,.10)",
+            playhead: "#171717",
+            entryActive: "rgba(17,17,17,.10)",
             entryHover: "rgba(17,24,39,.05)",
         },
         accent: {
-            primary: "#4f6ee8",
-            primarySoft: "rgba(79,110,232,.14)",
+            primary: "#171717",
+            primarySoft: "rgba(17,17,17,.10)",
+            onPrimary: "#ffffff",
             danger: "#f87171",
         },
     },
@@ -69,7 +70,7 @@ export const canvasThemes = {
             background: "#090a0c",
             dot: "rgba(174,184,199,.18)",
             line: "rgba(174,184,199,.06)",
-            selectionFill: "rgba(96,126,234,.18)",
+            selectionFill: "rgba(255,255,255,.12)",
         },
         node: {
             label: "#a3a3a3",
@@ -85,8 +86,8 @@ export const canvasThemes = {
         frame: {
             fill: "rgba(255,255,255,.025)",
             stroke: "rgba(190,198,210,.15)",
-            activeFill: "rgba(96,126,234,.1)",
-            activeStroke: "#8f9bd6",
+            activeFill: "rgba(255,255,255,.08)",
+            activeStroke: "#f5f5f5",
             preview: "rgba(20,20,20,.94)",
         },
         toolbar: {
@@ -94,15 +95,15 @@ export const canvasThemes = {
             border: "rgba(255,255,255,.1)",
             item: "#d4d4d4",
             itemHover: "rgba(255,255,255,.07)",
-            activeBg: "rgba(143,155,214,.14)",
+            activeBg: "rgba(255,255,255,.10)",
             activeText: "#f5f6f8",
         },
         spatial: {
             surface: "rgba(22,22,22,.82)",
             elevated: "rgba(15,15,15,.97)",
             dropzone: "rgba(8,8,8,.9)",
-            glow: "rgba(107,120,190,.18)",
-            glowStrong: "rgba(143,155,214,.48)",
+            glow: "rgba(255,255,255,.12)",
+            glowStrong: "rgba(255,255,255,.36)",
             shadow: "rgba(0,0,0,.6)",
         },
         timeline: {
@@ -111,17 +112,18 @@ export const canvasThemes = {
             clipVideo: "rgba(96,126,234,.22)",
             clipAudio: "rgba(16,185,129,.20)",
             clipSubtitle: "rgba(245,158,11,.20)",
-            clipSelectedBorder: "#8f9bd6",
+            clipSelectedBorder: "#f5f5f5",
             handle: "rgba(255,255,255,.5)",
             rulerTick: "rgba(255,255,255,.26)",
             rulerLabel: "#a3a3a3",
-            playhead: "#8f9bd6",
-            entryActive: "rgba(96,126,234,.16)",
+            playhead: "#f5f5f5",
+            entryActive: "rgba(255,255,255,.10)",
             entryHover: "rgba(255,255,255,.06)",
         },
         accent: {
-            primary: "#8f9bd6",
-            primarySoft: "rgba(107,120,190,.2)",
+            primary: "#f5f5f5",
+            primarySoft: "rgba(255,255,255,.11)",
+            onPrimary: "#131313",
             danger: "#fb7185",
         },
     },