From 9eeb223b971cbc30b63c4e452965e413ac70baae Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 24 Aug 2025 11:19:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(Input):=20=E5=A2=9E=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

- 在 Input 组件的属性中添加 readonly
- 实现只读状态下的输入框行为：禁止输入但允许聚焦
- 为只读状态的输入框添加视觉反馈
---
 src/components/Input.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index fa673d9..7e5dbb8 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -11,6 +11,7 @@ interface InputProps {
   defaultValue?: string;
   placeholder?: string;
   disabled?: boolean;
+  readonly?: boolean;
   onInput?: (value: string | null) => void;
   wrapperClass?: JSX.HTMLAttributes<HTMLDivElement>['class'];
   inputClass?: JSX.HTMLAttributes<HTMLInputElement>['class'];
@@ -21,6 +22,7 @@ const Input: Component<InputProps> = (props) => {
     {
       variant: 'normal',
       disabled: false,
+      readonly: false,
       placeholder: '',
     },
     props,
@@ -38,6 +40,9 @@ const Input: Component<InputProps> = (props) => {
   });
 
   const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (evt) => {
+    if (mProps.readonly || mProps.disabled) {
+      return;
+    }
     const value = evt.currentTarget.value;
     setInternalValue(value);
     mProps.onInput?.(value);
@@ -46,8 +51,9 @@ const Input: Component<InputProps> = (props) => {
   return (
     <div
       aria-disabled={mProps.disabled}
+      aria-readonly={mProps.readonly}
       class={cx(
-        'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5',
+        'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5 aria-readonly:cursor-not-allowed',
         mProps.variant === 'normal' &&
           'rounded-sm bg-neutral text-on-neutral aria-disabled:cursor-not-allowed aria-disabled:text-neutral-disabled',
         mProps.variant === 'underlined' &&
@@ -61,6 +67,7 @@ const Input: Component<InputProps> = (props) => {
         type={mProps.type}
         placeholder={mProps.placeholder}
         disabled={mProps.disabled}
+        readonly={mProps.readonly}
         value={internalValue()}
         class={cx(
           'min-h-[1em] grow focus:outline-none placeholder:italic disabled:text-neutral-disabled',