From 79a7d4c92accaa337ebae07ac4fbf13b88a8e4bc Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 24 Aug 2025 11:24:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(Select):=20=E6=B7=BB=E5=8A=A0=E5=8F=AA?=
 =?UTF-8?q?=E8=AF=BB=E5=B1=9E=E6=80=A7=E5=B9=B6=E4=BC=98=E5=8C=96=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Select 组件的Props中添加 readonly 属性
- 当组件为只读状态时，禁用下拉框的展开和收缩功能
- 在触发器元素上添加 aria-readonly 属性，提高无障碍访问性
- 调整样式，使只读状态下的组件外观保持一致
---
 src/components/Select.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index fd2d7b0..09b6b9e 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -108,6 +108,7 @@ interface SelectProps {
   value?: Option['value'];
   defaultValue?: Option['value'];
   disabled?: boolean;
+  readonly?: boolean;
   onChange?: (value: Option['value']) => void;
 }
 
@@ -118,6 +119,7 @@ const Select: Component<SelectProps> = (props) => {
       placeholder: '',
       options: [],
       disabled: false,
+      readonly: false,
     },
     props,
   );
@@ -209,7 +211,9 @@ const Select: Component<SelectProps> = (props) => {
       return;
     }
     clearTimeout(hideOptionTimer);
-    setOptionVisible((prev) => !prev);
+    if (!mProps.readonly) {
+      setOptionVisible((prev) => !prev);
+    }
   };
   const handleOptionClick = (value: Option['value']) => {
     if (selected() !== value) {
@@ -228,8 +232,9 @@ const Select: Component<SelectProps> = (props) => {
       <div
         ref={trigger}
         aria-disabled={mProps.disabled}
+        aria-readonly={mProps.readonly}
         class={cx(
-          'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed',
+          'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed aria-readonly:cursor-not-allowed',
           mProps.variant === 'normal' &&
             'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover',
           mProps.variant === 'underlined' &&