From dd8c632e6978fc4fde7606a961e8d11fa7e0670e Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 12 Aug 2025 22:31:18 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复组件名称拼写错误，将 HSegmengts 改为 Segmengts
- 增加禁用状态处理，优化用户体验
- 调整样式，确保禁用状态下的视觉反馈
---
 src/components/Segments.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Segments.tsx b/src/components/Segments.tsx
index b1ff166..0ce5c50 100644
--- a/src/components/Segments.tsx
+++ b/src/components/Segments.tsx
@@ -25,7 +25,7 @@ interface SegmentsProps {
   onChange?: (value: Option['value'] | undefined) => void;
 }
 
-export const HSegmengts: Component<SegmentsProps> = (props) => {
+export const Segmengts: Component<SegmentsProps> = (props) => {
   const mProps = mergeProps<SegmentsProps[]>(
     {
       options: [],
@@ -62,12 +62,15 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
   });
 
   const handleSelect = (value: Option['value']) => {
+    if (mProps.disabled) {
+      return;
+    }
     setSelected(value);
     mProps.onChange?.(value);
   };
 
   return (
-    <div class="inline-block overflow-hidden rounded-sm bg-neutral p-1 select-none">
+    <div class="inline-block overflow-hidden rounded-sm p-1 select-none bg-neutral">
       <div
         class={cx(
           'relative flex',
@@ -77,11 +80,12 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
           {(option, index) => (
             <div
               ref={(el) => (optionRefs[index] = el)}
+              aria-disabled={mProps.disabled}
               class={cx(
                 'z-[5] cursor-pointer rounded-sm px-2 py-1',
                 selected() === option().value
-                  ? 'text-on-primary-surface hover:bg-primary-surface-hover/45'
-                  : 'text-on-surface hover:bg-surface/35',
+                  ? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled hover:not-aria-disabled:bg-primary-surface-hover/45'
+                  : 'not-aria-disabled:text-on-surface aria-disabled:text-surface-disabled  hover:not-aria-disabled:bg-surface/35',
               )}
               onClick={() => handleSelect(option().value)}>
               {option().label}