# 前端视觉与页面规范

本文档约定 AIOps 控制台的页面结构、视觉基础和复用组件。新增页面优先使用这些规范，已有页面逐步迁移。

## 设计目标

- 页面打开即用，避免营销式大标题和多余说明。
- 信息密度适中，优先支持扫描、筛选、对比和批量操作。
- 主题感知，颜色优先使用 Tailwind 语义色和 `var(--dg-*)` 变量。
- 同类页面保持一致：列表、详情、弹窗、空态、加载态和错误态不重复造轮子。

## 页面结构

标准业务页使用 `PageShell`：

1. `PageHeader`：标题、简短描述、主操作按钮。
2. `FilterBar`：搜索、筛选、刷新、批量操作。
3. 主内容区：表格、图表、详情或编辑器。
4. `PageSection`：页面内分组区域。

示例：

```tsx
<PageShell>
  <PageHeader title="服务器" description="管理主机资产和 Agent 状态" actions={...} />
  <FilterBar left={searchInput} right={refreshButton} />
  <PageSection>{table}</PageSection>
</PageShell>
```

## 状态与数据展示

- 状态统一使用 `StatusBadge`，不要在页面中临时拼颜色。
- 指标卡片使用 `MetricCard`，用于概览数值、趋势和健康状态。
- 空态优先使用 `EmptyState`，需要明确下一步动作时传入 `action`。

常用状态：`success`、`warning`、`danger`、`info`、`neutral`、`running`、`offline`。

## 交互规范

- 删除、重置、停用等高危操作必须使用确认弹窗，不使用 `window.confirm()`。
- Dialog 必须包含 `DialogDescription`。
- 列表页操作按钮文案保持 2-4 字，图标按钮需要 tooltip。
- 加载中显示 skeleton 或 spinner，不能让页面无反馈。

## 代码约定

- 通用页面组件放在 `frontend/src/components/common/`。
- 基础原子组件继续放在 `frontend/src/components/ui/`。
- 页面组件使用 `PascalCase.tsx`，工具函数使用 `camelCase.ts`。
- 新增颜色进入主题变量，不在业务组件硬编码十六进制颜色。