---
description: PC/移动端响应式与布局（Mobile First）
globs: src/**/*.{vue,scss}
alwaysApply: false
---

# 响应式与布局

完整条文见 `docs/RESPONSIVE_SPEC.md`。实现时必须遵守：

## 断点（勿私自改数值）

| 令牌 | 宽度 |
|------|------|
| sm | 576px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |

- TS 真相：`src/constants/breakpoints.ts`；SCSS：`src/styles/breakpoints.scss`（两处数值一致）。

## 样式

- **移动优先**：默认小屏样式，用 `@include respond-up(md|lg)` 增强。
- **禁止**业务里手写零散 `@media (max-width: 750px)`；Vite 已全局注入 `respond-up/down/between`。
- 颜色/背景用 `var(--color-*)`；页面边距用 `var(--page-padding-x/y)`，勿写死 `padding: 32px`。
- 可点击区域最小 **44×44px**。

## 壳层结构

```
.app-shell > .app-container > AppHeader + 页面
```

- 路由视图根节点包 **`AppPage`**（`src/components/layout/AppPage.vue`）。
- 内容最大宽度 `--layout-max-width`（1280px）。

## 脚本

```ts
import { useBreakpoint } from '@/composables/useBreakpoint'
const { isMobile, isDesktop } = useBreakpoint()
```

- 仅用于布局/组件属性（如表单 `label-position`）；勿用 `width` 驱动业务逻辑。
- 勿在页面重复 `window.addEventListener('resize')`（图表等组件内除外）。

## Element Plus

- 栅格默认 `xs="24"`，再 `sm`/`lg` 分列；`gutter` 移动 12、PC 20 为宜。
- 移动：`label-position="top"`；表格移动优先卡片或 `.app-table-scroll` 横滚。