's'

.cursor/rules/project-principles.mdc

@@ -0,0 +1,35 @@
+---
+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` 等