初始化

.cursor/rules/018-responsive.mdc

@@ -0,0 +1,47 @@
+---
+description: "响应式与多端适配规范 — 断点策略/触摸优化/设备测试矩阵。管理端含 Element Plus 适配，用户端纯 Tailwind + Headless UI"
+globs:
+  - "**/*.vue"
+  - "**/*.css"
+  - "**/*.scss"
+alwaysApply: false
+---
+
+# 📱 Responsive Design & Multi-Device Standards (Core)
+
+## 设计原则
+
+- Mobile First：先实现手机，再逐级增强到平板/桌面
+- 内容优先：保证主流程在小屏可达、可读、可操作
+- 组件一致：Tailwind 断点策略统一（管理端同时适配 Element Plus 组件）
+
+## 断点最小约定
+
+- `base`：手机竖屏
+- `sm/md`：手机横屏与平板
+- `lg/xl/2xl`：桌面与大屏
+- 禁止桌面优先 `max-*` 反推写法作为默认策略
+
+## 布局与交互约束
+
+- 列表/卡片/表单在窄屏自动降级布局
+- 触摸目标建议 ≥ 44x44
+- 弹层与抽屉优先适配移动端交互
+- 文本与关键按钮不得被遮挡或截断
+
+## 测试基线
+
+- 至少验证 3 档视口：手机 / 平板 / 桌面
+- 验证横竖屏切换、滚动容器、固定定位元素
+- 关键路径（登录、检索、提交）全端可完成
+
+## 验证清单
+
+- [ ] 小屏主流程可完成
+- [ ] 关键控件触摸可达
+- [ ] 无明显布局溢出/重叠
+- [ ] 核心页面通过多断点截图比对
+
+## Tier 3 深度参考
+
+- `.cursor/rules/references/018-responsive-deep.md` — 完整响应式规范与示例