# [元素/页面名称]

## 📋 业务与功能

### 1.1 核心目标
> 简要说明该元素/页面的核心定位、解决的问题、用户价值

[在此描述核心目标...]

### 1.2 功能清单
> 列出所有功能模块及其优先级

- **[功能模块1]**：[功能描述]
- **[功能模块2]**：[功能描述]
- **[功能模块3]**：[功能描述]

### 1.3 交互要点
> 关键的交互触发点、反馈机制、状态变化

- [交互点1]：[触发条件] → [响应行为]
- [交互点2]：[触发条件] → [响应行为]

---

## 📊 内容规划

### 2.1 信息架构
> 模块划分、信息层级、内容组织方式

```
[页面/元素名称]
├── [模块A]
│   ├── [子模块A1]
│   └── [子模块A2]
├── [模块B]
└── [模块C]
```

### 2.2 数据来源
> 数据源优先级：用户提供数据 > 项目数据表 > 生成示例数据

- **数据类型**：[列表/单据/配置/...]
- **数据源**：[用户提供/数据表路径/生成]
- **关键字段**：
  - `field1`: [字段说明]
  - `field2`: [字段说明]

### 2.3 内容示例
> （可选）重要的示例内容、文案语气、术语规范

[示例内容...]

---

## 🎨 布局与结构

### 3.1 整体布局
> 布局模式（单栏/双栏/网格/自由）、模块尺寸、比例约束

- **布局模式**：[单栏/双栏/网格/自由]
- **容器宽度**：[固定/流式/混合]
- **关键尺寸**：
  - [模块A]：[宽度/高度/比例]
  - [模块B]：[宽度/高度/比例]

### 3.2 响应式适配
> （如适用）断点、适配策略

- **桌面端（≥1200px）**：[布局描述]
- **平板端（768-1199px）**：[布局调整]
- **移动端（<768px）**：[布局调整]

---

## 🎨 视觉规范

### 4.1 设计规范来源
> 优先级：用户提供的设计规范 > 主题设计系统（DESIGN-SPEC.md）> 内置设计指导

**本设计基于**：
- [ ] 用户提供的设计规范：[路径/说明]
- [ ] 主题设计系统：`/src/themes/[主题名]/` （DESIGN-SPEC.md + designToken.json + globals.css）
- [ ] 内置设计指导：`/assets/docs/设计指导（简约/风格化）.md`

**说明**：设计令牌（Design Tokens）将从上述规范中动态读取，无需在此列出具体值。

### 4.2 自定义设计要点
> （可选）仅在有特殊的自定义设计要求时填写，如特殊色彩、特殊尺寸等

**自定义色彩**（如有）：
- [自定义色1]：[色值] - [用途]

**自定义尺寸**（如有）：
- [自定义尺寸1]：[值] - [用途]

**其他自定义规范**（如有）：
- [说明...]

### 4.3 组件状态
> 交互元素的状态定义

- **默认态（default）**：[描述]
- **悬停态（hover）**：[描述]
...
- **加载态（loading）**：[描述，如适用]

---

## ⚙️ Axure API 说明
> 如果不使用 Axure API，可删除此部分

### 5.1 事件列表（eventList）
> 组件对外暴露的事件

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `event_name` | `string` | [触发时机] | [说明] |

### 5.2 动作列表（actionList）
> 组件可被调用的动作

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `action_name` | `string` | [参数说明] | [功能描述] |

### 5.3 变量列表（varList）
> 组件内部状态变量

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `var_name` | `string/number/boolean/object` | [默认值] | [说明] |

**命名规范**：使用 snake_case（小写字母、数字、下划线）

### 5.4 配置项列表（configList）
> 组件配置项

| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `config_name` | `string/number/boolean/object` | [默认值] | [说明] |

### 5.5 数据项列表（dataList）
> 组件数据结构定义

**数据结构**：
```typescript
{
  field1: string;      // [字段说明]
  field2: number;      // [字段说明]
  field3: {            // [嵌套对象说明]
    subField1: string;
    subField2: boolean;
  };
}
```