【需求 21402】 chore: 加入一些rules

.cursor/rules/unocss-first.mdc

+---
+description: 样式编写优先使用 UnoCSS，必要时再写 style 标签
+alwaysApply: true
+---
+
+# UnoCSS First（本仓库样式规则）
+
+## 核心原则
+
+- 默认优先使用 **UnoCSS 原子类**完成样式。
+- 仅在 UnoCSS 难以清晰表达、复用困难、或需要兼容兜底时，才写 `<style>`（含 scoped）。
+
+## 推荐优先使用 UnoCSS 的场景
+
+- 布局与结构：`flex`、`grid`、定位、间距、尺寸、圆角、层级
+- 常规视觉：文字颜色、普通背景色、边框、阴影、过渡
+- 组件状态样式：hover/active/disabled 的常见状态类
+
+## 可以改用 `<style>` 的场景（例外）
+
+- 复杂选择器或嵌套层级关系，使用原子类会明显降低可读性
+- 需要伪元素、复杂 keyframes、媒体查询细分、`@supports` 等
+- 需要写浏览器兼容兜底（例如关键按钮渐变的实色兜底）
+- 同一段长样式在多个页面复用，抽成语义化 class 更清晰
+
+## 代码评审偏好
+
+- 若 UnoCSS 能清楚表达，不新增手写 CSS
+- 新增 `<style>` 时，附一行简短注释说明“为什么不用 UnoCSS”
+- 避免“少量 Uno + 大量零散手写”混搭导致维护成本上升

.cursor/rules/vue-computed-over-watch.mdc

+---
+description: Vue 响应式优先使用 computed，谨慎使用 watch
+alwaysApply: true
+---
+
+# Vue：Prefer computed over watch
+
+## 一句话规则
+
+能用 `computed` 实现，就不要用 `watch`；`watch` 仅用于副作用或外部系统同步。
+副作用优先在显式事件回调中触发；仅当无法显式建模时，才使用 `watch` 承担副作用。
+
+## 选择顺序（按此判断）
+
+1. 这是“值到值”的派生吗？是 -> `computed`
+2. 这是“变化后要做动作”吗（请求/跳路由/打点/DOM/存储）？是 -> `watch`/`watchEffect`
+3. 两者都不是 -> 优先重构数据流，避免堆叠 `watch`
+
+## 为什么这样做
+
+- `computed` 声明式、可推导、可缓存，维护成本低。
+- `watch` 天然偏副作用，链路更隐式，调试成本更高。
+- 响应式状态常有多处修改来源（业务逻辑/组件库/异步回填），`watch` 过多时很容易失控。
+
+## 实践要求
+
+- 纯展示状态：必须优先 `computed`。
+- 使用 `watch` 时，必须满足：
+  - 监听源明确（避免无必要 `deep`）。
+  - 副作用目标明确（建议加 1 行注释说明触发目的）。
+  - 避免在回调里同时隐式修改多个状态，降低连锁触发。
+
+## 允许使用 watch 的典型场景
+
+- 参数变化触发请求（含取消旧请求）
+- 与路由 query / localStorage / sessionStorage 同步
+- 驱动第三方 imperative API（图表、编辑器、播放器等）
+- 需要 old/new 对比做流程控制
+
+## 推荐替代思路（watch 过重时）
+
+- `computed + 显式事件触发`
+- 拆分状态来源，减少“一个 watch 做所有事”