# 按钮组件

## 📋 业务与功能

### 1.1 核心目标

该组件提供可配置的按钮交互能力，适用于轻量操作场景。

该元素强调简单清晰的交互反馈与可配置性。

### 1.2 功能清单

- **标题区域**：展示组件标题
- **控制区域**：主按钮（计数 + 图标）与重置按钮
- **消息区域**：展示可配置消息文本
- **数据展示区域**：展示 data1 数据列表

### 1.3 交互要点

- 点击主按钮：计数 +1，触发 `onClick` 与 `onCountChange` 事件
- 点击重置按钮：计数回到初始值，触发 `onCountChange` 事件
- 动作 `increment`/`reset` 可外部调用
- 动作 `setMessage` 可动态更新消息内容

---

## 📊 内容规划

### 2.1 信息架构

```
按钮组件
├── 标题
├── 控制区域
│   ├── 主按钮
│   └── 重置按钮
├── 消息区域
└── 数据展示区域
```

### 2.2 数据来源

- **数据类型**：基础数据列表（`data1`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `name`: 名称
  - `value`: 值

### 2.3 内容示例

**数据示例**：

- name: `示例项` / value: `123`

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：单栏卡片式
- **容器宽度**：流式
- **关键尺寸**：
  - 容器内边距：`16px`
  - 按钮高度：`40px`
  - 圆角：`6-8px`

### 3.2 响应式适配

- **桌面端（≥1200px）**：自适应容器宽度
- **平板端（768-1199px）**：自适应容器宽度
- **移动端（<768px）**：自适应容器宽度，内容溢出可滚动

---

## 🎨 视觉规范

### 4.1 设计规范来源

**设计依据**：

- [x] 用户提供的设计规范：`/docs/设计规范.UIGuidelines.md`

### 4.2 自定义设计要点

**自定义色彩**（如有）：

- `primaryColor`：主按钮背景色

**自定义尺寸**（如有）：

- 无

**其他自定义规范**（如有）：

- 按钮与卡片阴影强调轻量层次

### 4.3 组件状态

- **默认态（default）**：按钮与卡片正常显示
- **悬停态（hover）**：主按钮加深阴影与轻微上浮
- **按压态（active）**：主按钮压下、亮度降低
- **禁用态（disabled）**：未定义（可由业务扩展）

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）

### 5.2 动作列表（actionList）

### 5.3 变量列表（varList）

### 5.4 配置项列表（configList）

### 5.5 数据项列表（dataList）

**数据结构**：

```typescript
{
  data1: Array<{
    name: string;  // 名称
    value: any;    // 值
  }>;
}
```

&nbsp;