mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

3.1 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Input 输入框	用于表单和用户输入的文本输入组件	auto

Input 输入框

概述

输入框组件提供了一个样式化的文本输入字段，扩展了原生 HTML input 元素，具有一致的样式和错误状态支持。

语法演示

:::demo input-variants 展示所有输入框状态，包括默认、错误和禁用 :::

属性

状态

Default（默认）

带有边框和焦点环的标准输入框。

Error（错误）

错误状态，显示破坏性边框颜色。将 error 属性设置为 true。

Disabled（禁用）

禁用状态，透明度降低。将 disabled 属性设置为 true。

Focus（聚焦）

聚焦状态，带有环形轮廓。

使用示例

基础输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return <input type="text" placeholder="输入文本..." />
}

受控输入框

import { Input } from '@/components/ui/Input'

function Example() {
  const [value, setValue] = useState('')

  return (
    <Input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="输入文本..."
    />
  )
}

错误状态输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return (
    <Input
      type="text"
      error
      placeholder="无效输入..."
    />
  )
}

密码输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return <Input type="password" placeholder="输入密码..." />
}

无障碍访问

键盘导航：完全支持原生键盘操作
ARIA 属性：支持所有标准输入框 ARIA 属性
焦点可见：为键盘导航提供清晰的焦点指示器
错误状态：错误状态的视觉指示（与 aria-invalid 和 aria-describedby 配合使用）

3.1 KiB Raw Blame History Unescape Escape