基础组件

Form

Alune 月光主题下的表单，直接保留 Ant Design 原有属性、类型与行为。

使用方式

表单由宿主传入状态和回调，适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

import { Form } from '@alune/ui';

接入要求见快速开始，选择依据见交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

查看运行源码

源码文件

import { useState } from 'react';
import { Form, Input, Button, Switch } from '@alune/ui';

export default function Example() {
  const [failure, setFailure] = useState(false);
  const [result, setResult] = useState('');
  const [busy, setBusy] = useState(false);
  return (
    <div className="example example--narrow">
      <label className="example-row">
        <Switch aria-label="模拟提交失败" checked={failure} onChange={setFailure} /> 模拟失败
      </label>
      <Form
        layout="vertical"
        disabled={busy}
        onFinish={async (values) => {
          if (busy) return;
          setBusy(true);
          setResult('正在保存…');
          await new Promise((resolve) => setTimeout(resolve, 600));
          setResult(failure ? '保存失败，请保留输入并重试。' : `已保存：${values.name}`);
          setBusy(false);
        }}
      >
        <Form.Item
          name="name"
          label="配置名称"
          rules={[{ required: true, message: '请填写配置名称' }]}
          extra="名称仅在此示例中使用"
        >
          <Input />
        </Form.Item>
        <Form.Item name="description" label="说明">
          <Input.TextArea />
        </Form.Item>
        <Button type="primary" htmlType="submit" loading={busy}>
          保存配置
        </Button>
      </Form>
      <p className="example-status" role="status">
        {result}
      </p>
    </div>
  );
}

API

直接转导出 Ant Design 的 Form，保留原始 Props、泛型、复合成员与回调语义。下表列出常用属性；类型取自当前安装版本，默认值沿用 Ant Design 6。

AluneUIProvider 统一主题与减少动效；宿主维护受控状态、校验和业务回调。

Form 完整 API 与默认值 ↗

Form

FormProps

属性 / 方法	类型	默认值	必填	说明
`layout`	`FormLayout`	`horizontal`	否	horizontal / vertical / inline 表单布局。
`initialValues`	`Store`	`—`	否	初始化或重置值；异步数据用 form.setFieldsValue。
`disabled`	`boolean`	`false`	否	禁用组内 Ant Design 控件。
`onFinish`	`((values: Values) => void)`	`—`	否	校验成功后接收 values；等待和失败状态由宿主维护。
`onFinishFailed`	`((errorInfo: ValidateErrorEntity<Values>) => void)`	`—`	否	校验失败时接收 values、errorFields、outOfDate。

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收