# Nex Design - 抽屉(Drawer)宽度标准

## 📐 抽屉宽度定义

为了保持设计一致性，我们定义了三种标准抽屉宽度模式：

### 1. 小型抽屉 (Small) - 480px
**适用场景：**
- 简单的信息展示
- 少量字段的表单（1-3个字段）
- 快速操作面板
- 通知详情

**示例：**
```jsx
<Drawer width={480} ... />
```

### 2. 中型抽屉 (Medium) - 720px ⭐️ 推荐
**适用场景：**
- 详细信息展示（如主机详情）
- 中等复杂度的表单（4-10个字段）
- 数据编辑面板
- 配置设置

**示例：**
```jsx
<Drawer width={720} ... />
```
**当前主机列表页面使用此宽度模式**

### 3. 大型抽屉 (Large) - 1080px
**适用场景：**
- 复杂的多步骤表单
- 需要并排展示多列信息
- 包含图表或复杂可视化内容
- 嵌套子表格或列表

**示例：**
```jsx
<Drawer width={1080} ... />
```

## 📱 响应式建议

```css
/* 移动端自适应 */
@media (max-width: 768px) {
  .ant-drawer {
    width: 100% !important;
  }
}

/* 平板端 */
@media (max-width: 1024px) {
  .ant-drawer-large {
    width: 90% !important;
  }
}
```

## 💡 使用建议

1. **优先选择中型抽屉(720px)**：适合大多数场景，既不会太窄导致内容拥挤，也不会太宽浪费空间。

2. **避免自定义宽度**：保持使用标准宽度，确保整个系统的一致性。

3. **移动端优先**：在响应式设计中，小屏幕设备应使用全宽抽屉。

4. **内容决定宽度**：根据内容复杂度选择合适的宽度，而不是随意设置。

## 🎨 设计原则

- **一致性**：相同类型的页面使用相同宽度的抽屉
- **可读性**：确保内容在抽屉中有足够的呼吸空间
- **响应式**：考虑不同设备的显示效果
- **用户体验**：抽屉不应遮挡主要内容过多