nex_design/docs/drawer-width-standard.md

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

📐 抽屉宽度定义

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

1. 小型抽屉 (Small) - 480px

适用场景：

• 简单的信息展示
• 少量字段的表单（1-3个字段）
• 快速操作面板
• 通知详情

示例：

<Drawer width={480} ... />

2. 中型抽屉 (Medium) - 720px ⭐️ 推荐

适用场景：

• 详细信息展示（如主机详情）
• 中等复杂度的表单（4-10个字段）
• 数据编辑面板
• 配置设置

示例：

<Drawer width={720} ... />

当前主机列表页面使用此宽度模式

3. 大型抽屉 (Large) - 1080px

适用场景：

• 复杂的多步骤表单
• 需要并排展示多列信息
• 包含图表或复杂可视化内容
• 嵌套子表格或列表

示例：

<Drawer width={1080} ... />

📱 响应式建议

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

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

💡 使用建议

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

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

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

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

🎨 设计原则

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