feat(electron): split view drag indicator bg (#10175)

fix PD-2309

packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const indicatorWrapper = style({
@@ -25,27 +26,33 @@ export const menuTrigger = style({
 });
 
 export const indicator = style({
-  padding: '6px 20px',
-  height: 15,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: 3,
+  padding: '0px 20px',
   cursor: 'grab',
   ['WebkitAppRegion' as string]: 'no-drag',
   color: cssVar('placeholderColor'),
   transition: 'all 0.2s',
-
+  gap: 2,
   selectors: {
     '&:hover, &[data-active="true"], &[data-dragging="true"]': {
       color: cssVar('brandColor'),
     },
     '&[data-dragging="true"]': {
-      gap: 4,
+      gap: 3,
     },
   },
 });
 
+export const indicatorInnerWrapper = style({
+  padding: '3px 4px',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'inherit',
+  backgroundColor: cssVarV2('layer/background/primary'),
+  borderRadius: 8,
+});
+
 export const indicatorDot = style({
   width: 4,
   height: 4,

packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx

@@ -41,9 +41,11 @@ export const SplitViewDragHandle = memo(
           {...attrs}
         >
           <div className={styles.indicatorGradient} />
-          <div data-idx={0} className={styles.indicatorDot} />
-          <div data-idx={1} className={styles.indicatorDot} />
-          <div data-idx={2} className={styles.indicatorDot} />
+          <div className={styles.indicatorInnerWrapper}>
+            <div data-idx={0} className={styles.indicatorDot} />
+            <div data-idx={1} className={styles.indicatorDot} />
+            <div data-idx={2} className={styles.indicatorDot} />
+          </div>
         </div>
       );
     }