【需求 21096】 feat: 加入rules

.cursor/rules/unocss-vs-handwritten-css.mdc

+---
+description: UnoCSS 与手写 CSS 的分工——渐变按钮、老 WebView、兜底样式
+alwaysApply: true
+---
+
+# UnoCSS vs 手写 CSS（本仓库约定）
+
+## 口诀
+
+**「钱在按钮上、字要看得见」** → 关键交互在 `<style>` 里写 **实色兜底 + 渐变**；Uno 优先管布局与次要样式。
+
+## 不要只靠 Uno 写（改用手写 CSS 或 Uno + 手写兜底）
+
+### 1. 渐变背景（尤其主按钮、发表/提交、支付、关闭弹窗）
+
+- Uno 的 `bg-gradient-to-*`、`from-*`、`to-*` 常编译为 **`linear-gradient` + CSS 变量**。
+- **旧 WebView / 老内核**可能整段渐变失效 → 背景透明或变白，出现「只剩阴影、按钮像白板」。
+- **做法**：在 scoped CSS 中：
+  - 先 **`background-color`** 用 **hex 实色**兜底；
+  - 再 **`background-image: -webkit-linear-gradient(...)`** + **`linear-gradient(...)`**（颜色尽量写死 hex，少依赖变量链）。
+
+### 2. 必须「坏了也能用」的控件
+
+- 除渐变外，建议显式：**`color`**、**`border`**、**`-webkit-appearance: none; appearance: none`**（原生 `button` 重置），不指望仅靠原子类扛兼容。
+
+### 3. 强依赖新特性的装饰（老机可降级）
+
+若需兼容旧环境，用手写 **`@supports`** 或单独降级类，不要只靠 Uno 一条类名：
+
+- **`backdrop-filter`**
+- **`filter: blur` / `drop-shadow`**（大面积）
+- **`min()` / `max()` / `clamp()`** 作为**唯一**尺寸方案（可改为 `width` + `max-width` 兜底）
+- **`inset`**（极老可用 `top/right/bottom/left`）
+
+### 4. 动画里的 CSS 变量
+
+- `@keyframes` 中使用 **`var(--x)`**、**`calc(var(--x) + …)`** 在部分老 WebView 可能无效。
+- 关键动效可接受老机静止；若必须动，keyframes 内尽量用**固定数值**。
+
+### 5. 多层 `background` 叠加
+
+- 一层不渲染可能导致「整块没底」。
+- **至少保留一层 `background-color` 实色**；重要文案区域保证对比度。
+
+## Uno 继续放心用的场景
+
+- 布局：`flex`、`grid`、`gap`、`p`/`m`、`w`/`h`（且不把 `min()` 当唯一依赖时）
+- 普通文字色、间距、圆角
+- **单色**背景：如 `bg-blue-500`（非渐变变量链）
+- 非关键装饰、仅在新浏览器上好看的动效
+
+## 参考实现
+
+- 评论「发表」按钮：`src/components/common/Comment/index.vue` 中 `.comment-publish-btn`
+- 全屏奖励 toast 按钮兜底：`src/views/videoDetail/components/rewardFullSetToast.vue` 中 `.continue-btn` 与样式顶部注释