From 1f6ac4b1fe6658fca9c86c365b40da7e6eb84bd4 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Fri, 14 Feb 2025 03:43:54 +0000
Subject: [PATCH] feat(electron): split view drag indicator bg (#10175)

fix PD-2309
---
 .../view/split-view/indicator.css.ts          | 23 ++++++++++++-------
 .../workbench/view/split-view/indicator.tsx   |  8 ++++---
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts b/packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts
index 2b80e207d..ab906bb9d 100644
--- a/packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts
+++ b/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,
diff --git a/packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx b/packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx
index 55846993e..176d50f7a 100644
--- a/packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx
+++ b/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>
       );
     }