From cbf04fb0dca71c78b2bb525a1de833626e6269bf Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 12 Aug 2025 16:39:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BC=98=E5=8C=96=20Se?=
 =?UTF-8?q?gments=20=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除了 createMemo 创建的 indicatorStyle 信号
- 直接在样式属性中设置指示器的位置和尺寸
- 这种改动减少了不必要的计算和内存使用，提高了组件的性能
---
 src/components/Segments.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Segments.tsx b/src/components/Segments.tsx
index 9d6bf14..b1ff166 100644
--- a/src/components/Segments.tsx
+++ b/src/components/Segments.tsx
@@ -42,12 +42,6 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
   const [indicatorLeft, setIndicatorLeft] = createSignal(0);
   const [indicatorHeight, setIndicatorHeight] = createSignal(0);
   const [indicatorWidth, setIndicatorWidth] = createSignal(0);
-  const indicatorStyle = createMemo(() => ({
-    top: `${indicatorTop()}px`,
-    left: `${indicatorLeft()}px`,
-    height: `${indicatorHeight()}px`,
-    width: `${indicatorWidth()}px`,
-  }));
 
   createEffect(() => {
     if (isNotNil(originalValue()) && originalValue() !== selected()) {
@@ -97,7 +91,12 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
         <Show when={isNotNil(selected())}>
           <div
             class="pointer-events-none absolute z-[2] rounded-sm bg-primary-surface transition-[top,left,height,width] duration-200 ease-in-out"
-            style={indicatorStyle()}
+            style={{
+              top: `${indicatorTop()}px`,
+              left: `${indicatorLeft()}px`,
+              height: `${indicatorHeight()}px`,
+              width: `${indicatorWidth()}px`,
+            }}
           />
         </Show>
       </div>