36 lines
1.5 KiB
Plaintext
36 lines
1.5 KiB
Plaintext
---
|
||
description: 项目基本原则 - 响应式、夜间模式、主题与动画
|
||
globs:
|
||
alwaysApply: true
|
||
---
|
||
|
||
# 项目基本原则
|
||
|
||
## 1. 响应式设计 (PC / H5)
|
||
|
||
- **断点**：使用 Tailwind 默认断点 `sm:640px` `md:768px` `lg:1024px` `xl:1280px`
|
||
- **移动优先**：默认样式面向 H5，再用 `sm:` `md:` 等增强 PC 体验
|
||
- **触控友好**：按钮、链接最小点击区域约 44×44px
|
||
- **布局**：`flex` / `grid` 配合 `flex-wrap`、`gap` 实现自适应
|
||
- **字体**：使用 `clamp()` 或 `text-sm sm:text-base md:text-lg` 做响应式字号
|
||
|
||
## 2. 夜间模式切换
|
||
|
||
- **实现**：通过 `ThemeProvider` 与 `ThemeToggle`，在 `html` 上切换 `.light` / `.dark` 类
|
||
- **变量**：使用 CSS 变量 `--background` `--foreground` `--card` `--muted` `--accent` 等
|
||
- **新页面**：必须支持 `.dark` 下的样式，或直接使用 CSS 变量
|
||
- **初始化**：`theme-init.ts` 在首屏渲染前执行，避免主题闪烁
|
||
|
||
## 3. 主题与科技感
|
||
|
||
- **主色**：`--accent: #f59e0b`（琥珀色），用于按钮、链接、强调
|
||
- **背景**：日间 `#fafafa`，夜间 `#0c0c0f`
|
||
- **科技感**：渐变、毛玻璃 `backdrop-blur`、轻微阴影、边框透明度
|
||
|
||
## 4. CSS 动画
|
||
|
||
- **过渡**：`transition` 时长 0.2s–0.3s，`ease` / `ease-out`
|
||
- **已有动画**：`animate-gradient`、`hover-shimmer`、`animate-float-badge`
|
||
- **交互**：悬停时 `hover:-translate-y-0.5`、`hover:scale-105` 等
|
||
- **加载**：使用 `animate.css` 的 `animate__fadeInDown` 等
|