52 lines
1.5 KiB
Plaintext
52 lines
1.5 KiB
Plaintext
---
|
||
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` 横滚。
|