三、核心组件体系

3.1 基础组件
3.1.1 Button 按钮组件
按钮是用户交互中最基础的组件，Arco Design 提供了丰富的按钮样式和状态。

import { Button, Space } from '@arco-design/web-react';

const ButtonDemo = () => (
  <Space direction="vertical" size="large">
    {/* 按钮类型 */}
    <Space>
      <Button type="primary">主要按钮</Button>
      <Button type="default">默认按钮</Button>
      <Button type="secondary">次要按钮</Button>
      <Button type="dashed">虚线按钮</Button>
      <Button type="text">文本按钮</Button>
      <Button type="outline">线框按钮</Button>
    </Space>

    {/* 按钮状态 */}
    <Space>
      <Button type="primary" status="danger">危险按钮</Button>
      <Button type="primary" status="warning">警告按钮</Button>
      <Button type="primary" status="success">成功按钮</Button>
      <Button disabled>禁用按钮</Button>
      <Button loading>加载中</Button>
    </Space>

    {/* 按钮尺寸 */}
    <Space>
      <Button size="mini">迷你按钮</Button>
      <Button size="small">小型按钮</Button>
      <Button>默认按钮</Button>
      <Button size="large">大型按钮</Button>
    </Space>

    {/* 长按钮（宽度100%） */}
    <Button long type="primary">长按钮</Button>

    {/* 圆形按钮（用于图标） */}
    <Button shape="circle" type="primary">
      <IconSearch />
    </Button>

    {/* 按钮组 */}
    <Button.Group>
      <Button type="primary">上一步</Button>
      <Button type="primary">下一步</Button>
    </Button.Group>
  </Space>
);

按钮类型说明：Arco Design 提供了多种按钮类型。其中 primary 用于主要操作，secondary 用于次要操作，dashed 用于虚线边框的辅助操作，text 用于轻量化操作，outline 用于线框风格的辅助操作。status 属性用于表示操作结果状态（成功/警告/危险）。

3.2 数据录入组件
3.2.1 Input 输入框组件
Input 组件是所有表单组件的基础，Arco Design 的 Input 组件功能非常丰富。Arco 组件库在设计 Input 组件时，从四个方面规划了 API：功能、构成、状态和样式。

Input 组件的 API 分类：


基本用法：

import { Input, Space } from '@arco-design/web-react';

const InputDemo = () => {
  const [value, setValue] = useState('');

  return (
    <Space direction="vertical" size="medium">
      {/* 基础输入框 */}
      <Input placeholder="请输入内容" />

      {/* 带清除按钮 */}
      <Input placeholder="可清除的内容" allowClear />

      {/* 受控输入框 */}
      <Input 
        value={value} 
        onChange={setValue}
        placeholder="受控输入框" 
      />

      {/* 密码输入框 */}
      <Input.Password placeholder="请输入密码" />

      {/* 文本域 */}
      <Input.TextArea rows={4} placeholder="请输入详细描述" />

      {/* 带前缀/后缀 */}
      <Input prefix="https://" placeholder="请输入网址" />
      <Input suffix=".com" placeholder="请输入域名" />
      <Input addBefore="http://" addAfter=":8080" placeholder="请输入地址" />

      {/* 字数统计 */}
      <Input maxLength={20} showWordLimit placeholder="最多20个字符" />

      {/* 错误/警告状态 */}
      <Input status="error" defaultValue="错误内容" />
      <Input status="warning" defaultValue="警告内容" />
    </Space>
  );
};

3.3 反馈组件
3.3.1 Modal 模态框

import { Modal, Button } from '@arco-design/web-react';
import { useState } from 'react';

const ModalDemo = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)} type="primary">
        打开模态框
      </Button>

      <Modal
        title="模态框标题"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <p>这是模态框的内容</p>
        <p>可以放置任意自定义内容</p>
      </Modal>
    </>
  );
};

3.3.2 Message 全局提示

import { Message, Button } from '@arco-design/web-react';

const MessageDemo = () => {
  return (
    <Space>
      <Button onClick={() => Message.info('这是一条信息')}>信息</Button>
      <Button onClick={() => Message.success('操作成功')}>成功</Button>
      <Button onClick={() => Message.warning('警告信息')}>警告</Button>
      <Button onClick={() => Message.error('操作失败')}>错误</Button>
      <Button onClick={() => Message.loading('加载中...')}>加载中</Button>
    </Space>
  );
};

3.3.3 Notification 通知

import { Notification, Button } from '@arco-design/web-react';

const NotificationDemo = () => {
  return (
    <Button
      onClick={() =>
        Notification.success({
          title: '操作成功',
          content: '您的数据已保存',
          duration: 3000,
          position: 'topRight',
        })
      }
    >
      显示通知
    </Button>
  );
};

Notification 位置选项：topLeft、topRight、bottomLeft、bottomRight。

3.4 数据展示组件
3.4.1 Table 表格组件

import { Table, Tag, Button, Space } from '@arco-design/web-react';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: '年龄',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (status) => (
      <Tag color={status === 'active' ? 'green' : 'red'}>
        {status === 'active' ? '启用' : '禁用'}
      </Tag>
    ),
  },
  {
    title: '操作',
    dataIndex: 'operations',
    render: () => (
      <Space>
        <Button type="text" size="small">编辑</Button>
        <Button type="text" status="danger" size="small">删除</Button>
      </Space>
    ),
  },
];

const data = [
  { key: '1', name: '张三', age: 25, status: 'active' },
  { key: '2', name: '李四', age: 30, status: 'inactive' },
  { key: '3', name: '王五', age: 28, status: 'active' },
];

const TableDemo = () => (
  <Table 
    columns={columns} 
    data={data} 
    border 
    stripe 
    pagination={
  { pageSize: 10 }}
    rowKey="key"
  />
);

3.5 布局组件
3.5.1 Grid 栅格系统
Arco Design 采用 24 列栅格系统，通过 Row 和 Col 组件实现响应式布局：

import { Row, Col } from '@arco-design/web-react';

const GridDemo = () => (
  <>
    {/* 基础栅格 */}
    <Row gutter={16}>
      <Col span={12}>
        <div className="demo-col">占12列</div>
      </Col>
      <Col span={12}>
        <div className="demo-col">占12列</div>
      </Col>
    </Row>

    {/* 响应式栅格 */}
    <Row gutter={[16, 24]}>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
    </Row>

    {/* 列偏移 */}
    <Row>
      <Col span={6} offset={6}>
        偏移6列的内容
      </Col>
    </Row>
  </>
);

3.6 表单组件
Arco Design 的表单组件与 React Hooks 深度集成，提供了强大的表单管理能力：

import { Form, Input, Select, Button, Message } from '@arco-design/web-react';

const FormItem = Form.Item;

const FormDemo = () => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validate();
      Message.success('提交成功：' + JSON.stringify(values));
    } catch (error) {
      Message.error('请正确填写表单');
    }
  };

  return (
    <Form form={form} autoComplete="off">
      <FormItem 
        label="用户名" 
        field="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="请输入用户名" />
      </FormItem>

      <FormItem 
        label="邮箱" 
        field="email"
        rules={[
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入正确的邮箱格式' }
        ]}
      >
        <Input placeholder="请输入邮箱" />
      </FormItem>

      <FormItem 
        label="角色" 
        field="role"
        rules={[{ required: true, message: '请选择角色' }]}
      >
        <Select placeholder="请选择角色">
          <Select.Option value="admin">管理员</Select.Option>
          <Select.Option value="user">普通用户</Select.Option>
        </Select>
      </FormItem>

      <FormItem wrapperCol={
  { offset: 5 }}>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
        <Button onClick={() => form.resetFields()} style={
  { marginLeft: 12 }}>
          重置
        </Button>
      </FormItem>
    </Form>
  );
};

表单受控/非受控原理：Arco Design 的表单组件通过 Form.Item 的 field 属性自动管理表单项的值。在 Form.Item 内部，会通过 cloneElement 给子组件注入 value 和 onChange 属性，实现表单数据的统一收集和管理。当表单被提交时，onSubmit 回调会接收到经过验证的完整表单数据。

Form.Item 接收的通用属性说明：

来源：
https://vrhyh.cn/