@captain_z/zsk-skills 0.1.0

package/frontend/nfr-web/SKILL.md

@@ -0,0 +1,258 @@
+---
+name: zsk:nfr-web
+description: Web-side NFR thresholds for the 7-category framework — Core Web
+  Vitals (LCP/INP/CLS/TTFB/TTI targets), WCAG 2.1 AA itemized rules, Web
+  security NFR items, i18n language list + baseline + entry + RTL,
+  browser/OS/device compatibility matrix, responsive breakpoints, observability
+  (web-vitals + error reporting), reliability (ErrorBoundary + timeout + retry).
+  Inherits system/nfr-baseline; modules declare deviations only.
+category: resource
+domain: frontend
+tier: optional
+related:
+  - ../performance-web/SKILL.md
+  - ../a11y-web/SKILL.md
+  - ../security-web/SKILL.md
+  - ../i18n/SKILL.md
+  - ../testing-web/SKILL.md
+  - ../../system/nfr-baseline/SKILL.md
+  - ../../quality/a11y-principles/SKILL.md
+  - ../../quality/security-owasp/SKILL.md
+triggers:
+  - Web NFR
+  - CWV thresholds
+  - WCAG AA rules
+  - browser matrix
+  - responsive breakpoints
+  - web-vitals reporting
+  - ErrorBoundary placement
+  - NFR deviation declaration
+---
+
+# NFR Web · Web 非功能需求具体阈值
+
+> **定位**：[`system/nfr-baseline`](../../system/nfr-baseline/SKILL.md) 7 类框架的 **Web 具体化**
+> **继承规则**：模块 `spec.md` NFR 章节继承本文件，**只声明偏离**
+> **Web 实现细节**：性能 → [`performance-web`](../performance-web/SKILL.md) · a11y → [`a11y-web`](../a11y-web/SKILL.md) · 安全 → [`security-web`](../security-web/SKILL.md) · i18n → [`i18n`](../i18n/SKILL.md) · 测试 → [`testing-web`](../testing-web/SKILL.md)
+
+## 1. 性能（NFR-1）
+
+### Core Web Vitals 目标（线上 p75）
+
+| 指标 | Good | 需改进 | 差 |
+| --- | --- | --- | --- |
+| **LCP** | ≤ 2.5s | ≤ 4.0s | > 4.0s |
+| **INP** | ≤ 200ms | ≤ 500ms | > 500ms |
+| **CLS** | ≤ 0.1 | ≤ 0.25 | > 0.25 |
+| **TTFB** | ≤ 800ms | ≤ 1.8s | > 1.8s |
+| **TTI** | ≤ 3.5s | ≤ 7.3s | > 7.3s |
+| **TBT**（实验室） | ≤ 200ms | ≤ 600ms | > 600ms |
+
+### Bundle 预算
+
+| 维度 | 基线 |
+| --- | --- |
+| 单 chunk（gzip） | ≤ 500KB |
+| 首屏 JS 总（gzip） | ≤ 1MB |
+| 首屏 CSS 总（gzip） | ≤ 100KB |
+| PR 新增首屏 JS | ≤ 10% 增量（`size-limit` 门禁） |
+
+### 网络并发
+
+| 维度 | 基线 |
+| --- | --- |
+| 首屏并发请求 | ≤ 6 |
+| 同参数请求去重率 | 100% |
+| 超过预算 → `design.md` 记 ADR | — |
+
+### 运行时性能
+
+| 维度 | 基线 |
+| --- | --- |
+| 列表渲染一帧内 | ≤ 16ms（60fps）|
+| 节点数 ≥ 200 必须虚拟化 | — |
+| 输入防抖 | ≥ 300ms |
+
+详见 [`performance-web`](../performance-web/SKILL.md)。
+
+## 2. 可访问性（NFR-2）
+
+### 基线：WCAG 2.1 Level AA
+
+（原则层见 [`quality/a11y-principles`](../../quality/a11y-principles/SKILL.md)；此处列 Web 侧可被工具直接校验的条目）
+
+| WCAG 条目 | 工具校验 |
+| --- | --- |
+| 1.1.1 Non-text Content（alt） | `jsx-a11y/alt-text` |
+| 1.3.1 Info and Relationships（语义 HTML）| `jsx-a11y/*` |
+| 1.4.3 Contrast (Minimum)（4.5:1 / 3:1） | axe-core |
+| 1.4.4 Resize text（200%） | 手工 |
+| 2.1.1 Keyboard | `jsx-a11y/click-events-have-key-events` + 手工 |
+| 2.1.2 No Keyboard Trap | 手工（焦点测试）|
+| 2.4.3 Focus Order | 手工 |
+| 2.4.7 Focus Visible | CSS `:focus-visible` |
+| 3.3.2 Labels or Instructions | `jsx-a11y/label-has-associated-control` |
+| 4.1.2 Name/Role/Value | axe-core |
+| 4.1.3 Status Messages | `aria-live` 用法 |
+
+### 工具链硬门禁
+
+- `eslint-plugin-jsx-a11y` 零 error
+- `axe-core` / `@axe-core/react` 零 `critical` / `serious` violation
+- `jest-axe` 每组件 ≥ 1 条断言
+- `@axe-core/playwright` 关键页面扫描
+
+### 键盘操作矩阵
+
+见 [`quality/a11y-principles`](../../quality/a11y-principles/SKILL.md) 键盘矩阵；组件特有键位在模块 `spec.md` UE 状态矩阵声明。
+
+## 3. 安全（NFR-3）
+
+### Web 侧必达红线
+
+| 项 | 基线 |
+| --- | --- |
+| `dangerouslySetInnerHTML` | 无新增（或 ADR + DOMPurify） |
+| 敏感字段进 Storage | 绝对禁止 |
+| CSRF Token 注入修改类请求 | 100% |
+| 生产 `console.log` | 0 |
+| 日志 / 上报敏感字段 | 0（经脱敏） |
+| URL / 跳转协议 | 白名单校验 |
+| 第三方 CDN 脚本 | 带 SRI |
+| `postMessage` 源校验 | 100% |
+| `npm audit` `high` / `critical` | 0 |
+| 环境变量敏感值暴露前端 | 0 |
+
+详见 [`security-web`](../security-web/SKILL.md)；跨栈原则见 [`quality/security-owasp`](../../quality/security-owasp/SKILL.md)。
+
+### CSP / 响应 header（需后端配合）
+
+| header | 期望 |
+| --- | --- |
+| Content-Security-Policy | 严格白名单（见 `security-web` 第 5 节） |
+| Strict-Transport-Security | `max-age=31536000; includeSubDomains` |
+| X-Content-Type-Options | `nosniff` |
+| X-Frame-Options | `DENY`（或 CSP `frame-ancestors 'none'`） |
+| Referrer-Policy | `strict-origin-when-cross-origin` |
+| Permissions-Policy | 按需收敛 |
+
+## 4. 国际化（NFR-4）
+
+### 语言清单
+
+| 项 | 基线 |
+| --- | --- |
+| 支持语言 | `{{config.i18n.languages}}`（通常 `zh_CN` / `zh_TW` / `en_US`） |
+| 基线语言 | `{{config.i18n.languages}}` 的第一个（通常 `zh_CN`） |
+| fallback 必须 = 基线 | 100% |
+| 同 commit 三语同步 | 硬门禁 |
+| key 命名 | `{{config.i18n.namespace}}.<module>.<leaf_key>` |
+| 复数 / 选择 | ICU MessageFormat |
+| 日期 / 数字 / 货币 | `Intl.*`（不硬编码） |
+
+### RTL
+
+- 当前模块**不支持 RTL**（语言清单不含 `ar` / `he`）→ 在 `spec.md` NFR 声明
+- 若启用：逻辑属性（`margin-inline-*`）+ 图标方向适配 + `dir="rtl"` 注入
+
+详见 [`i18n`](../i18n/SKILL.md)。
+
+## 5. 兼容性（NFR-5）
+
+**浏览器矩阵**（默认基线）：Chrome / Edge / Safari / Firefox 桌面端最近 2 个大版本；iOS Safari / Android Chrome 最近 2 个大版本；**IE 11 不支持**。在 `package.json` 配 `browserslist` 对齐（`last 2 <browser> versions` + `not dead`）。
+
+**响应式断点**（引自 token，详见 [`css-bem`](../css-bem/SKILL.md) 第 7 节）：
+
+| 断点 | ≤ px | 说明 |
+| --- | ---: | --- |
+| xs | 480 | 小手机 |
+| sm | 768 | 大手机 / 小平板 |
+| md | 1024 | 平板横 / 小笔记本 |
+| lg | 1280 | 笔记本 |
+| xl | 1536 | 桌面 / 大屏 |
+
+**策略**：Mobile-first（`min-width` 向上叠加）。
+
+**输入设备**：鼠标 / 键盘 / 触摸（移动端断点内）必须支持；手写笔不在基线。
+
+**离线 / 弱网**：默认无离线能力；需要时 `spec.md` 声明 + Service Worker / 缓存策略。弱网（慢 3G）首屏可用（骨架屏 / 懒加载）。
+
+## 6. 可观测性（NFR-6）
+
+**Web Vitals 上报**：用 `web-vitals` 库订阅 `onLCP` / `onINP` / `onCLS` / `onTTFB`，回调里 `navigator.sendBeacon('/api/metrics', payload)` 上报（PII 脱敏）。
+
+**错误上报**：
+
+| 维度 | 基线 |
+| --- | --- |
+| JS 错误 | 100% 捕获（`window.onerror` + `unhandledrejection`） |
+| 上报平台 | `{{config.stack.error_reporter}}`（Sentry / 自研） |
+| 上报前脱敏 | 100%（含 breadcrumbs） |
+| Source Map | 私有上传（不公网） |
+| 采样率 | 生产 100% error / performance 采样 |
+
+**埋点**：统一 SDK（`{{config.stack.tracking}}`）；PII hash / 脱敏；GDPR 拒绝时不上报。**Trace**（可选）：入口注入 `traceparent`，前后端日志关联。
+
+## 7. 可靠性（NFR-7）
+
+**ErrorBoundary 放置**：App 根（兜底降级页）+ 路由级（单页崩溃不污染全站）+ 关键组件（图表 / 富文本等第三方重依赖）。
+
+```tsx
+<ErrorBoundary fallback={<GlobalErrorFallback />}>
+  <Router>
+    <Route path="/user" element={
+      <ErrorBoundary fallback={<RouteErrorFallback />}><UserPage /></ErrorBoundary>
+    }/>
+  </Router>
+</ErrorBoundary>
+```
+
+**请求层基线**：默认超时 10s；幂等请求（GET / HEAD）最多 2 次指数退避重试，POST 等不重试；`AbortController` 在 effect cleanup 调用；loading / empty / error 三态 UI 必须齐。
+
+**降级**：第三方不可用 → 本地 fallback；图表加载失败 → data table 替代；字体失败 → `font-display: swap`。
+
+## 8. 模块 `spec.md` NFR 章节模板
+
+继承本基线，只列**偏离项**（未偏离项不重复）。完整模板见 [`dor-dod-frontend`](../dor-dod-frontend/SKILL.md) DoR 定义。
+
+```md
+## NFR · 非功能需求
+
+本模块继承 `frontend/nfr-web.md` 基线。偏离项：
+
+- NFR-1 性能：INP 收紧为 100ms（业务对输入响应敏感）；首屏 JS 收紧 800KB
+- NFR-3 安全：富文本编辑器用 `dangerouslySetInnerHTML`（ADR-015 + DOMPurify）
+- NFR-5 兼容性：新增 IE Edge Legacy（内部系统；ADR-016）
+- NFR-7 可靠性：`<UserTable>` 组件级 ErrorBoundary（依赖 AG Grid）
+```
+
+## 9. 证据要求
+
+| NFR 类别 | 证据 |
+| --- | --- |
+| 性能 | Lighthouse 报告 + `size-limit` CI log + 线上 p75 截图 |
+| a11y | axe-core 扫描 0 critical/serious + 键盘回归记录 |
+| 安全 | `npm audit` 报告 + PR diff 搜索关键红线 |
+| i18n | 语言文件 diff + 三语截图 |
+| 兼容 | BrowserStack / Playwright 多浏览器报告 |
+| 可观测 | Sentry / 埋点平台 dashboard 截图 |
+| 可靠性 | 错误注入测试 + ErrorBoundary 截图 |
+
+## 反模式（禁止）
+
+- ❌ "性能 / a11y / 安全后期再补"（必须随 PR 交付）
+- ❌ NFR 偏离不声明（静默降低基线）
+- ❌ 只过了 Lighthouse 实验室却无线上 RUM 数据
+- ❌ 浏览器矩阵在 PR 中被悄悄缩减
+- ❌ 断点散落各模块（必须引自 token）
+
+## 质量门禁（聚合）
+
+- [ ] Web Vitals p75 达标（NFR-1）
+- [ ] `eslint-plugin-jsx-a11y` + axe 零 critical/serious（NFR-2）
+- [ ] 安全红线全绿 + `npm audit` 无 high（NFR-3）
+- [ ] 三语同 commit 同步（NFR-4）
+- [ ] 浏览器矩阵 CI 通过（NFR-5）
+- [ ] Web Vitals + 错误上报就位（NFR-6）
+- [ ] ErrorBoundary + 超时 / 竞态 / 失败 UI 齐全（NFR-7）
+- [ ] `spec.md` NFR 偏离清单完整 + ADR 链接

package/frontend/performance-web/SKILL.md

@@ -0,0 +1,299 @@
+---
+name: zsk:performance-web
+description: React / Web frontend performance for Core Web Vitals — CWV
+  thresholds (LCP/INP/CLS/TTFB/TTI), React memoization discipline (when to memo
+  vs not), virtualization for lists ≥ 200, lazy loading via React.lazy +
+  Suspense + IntersectionObserver, bundle splitting + tree-shaking, image srcset
+  + loading="lazy", debounce/throttle, re-render diagnosis with React DevTools
+  Profiler. Implementation layer; budget framework in system/nfr-baseline +
+  frontend/nfr-web.
+category: standard
+domain: frontend
+tier: optional
+related:
+  - ../react-components/SKILL.md
+  - ../nfr-web/SKILL.md
+  - ../../system/nfr-baseline/SKILL.md
+triggers:
+  - Core Web Vitals
+  - LCP INP CLS
+  - React memo
+  - virtual scrolling
+  - React.lazy Suspense
+  - code splitting
+  - bundle size
+  - image lazy loading
+  - debounce throttle
+  - re-render diagnosis
+---
+
+# Performance Web · Web 性能实现
+
+> **范围**：React + Web 的**性能实现手法** — CWV 预算 / memo 纪律 / 虚拟化 / 懒加载 / Bundle / 图片 / 防抖节流 / 诊断
+> **预算框架**：见 [`system/nfr-baseline`](../../system/nfr-baseline/SKILL.md) 第 1 节
+> **具体阈值**：见 [`nfr-web`](../nfr-web/SKILL.md)
+> **不含**：跨栈性能原则（RAIL、服务端性能）
+
+## 1. Core Web Vitals 阈值
+
+| 指标 | 含义 | 目标（Good） | 警戒（Needs Improvement） | 差 |
+| --- | --- | --- | --- | --- |
+| **LCP** | 最大内容绘制 | ≤ 2.5s | ≤ 4.0s | > 4.0s |
+| **INP** | 交互→下次绘制（替代 FID） | ≤ 200ms | ≤ 500ms | > 500ms |
+| **CLS** | 累积布局偏移 | ≤ 0.1 | ≤ 0.25 | > 0.25 |
+| **TTFB** | 首字节时间 | ≤ 800ms | ≤ 1.8s | > 1.8s |
+| **TTI** | 可交互时间 | ≤ 3.5s | ≤ 7.3s | > 7.3s |
+| **TBT** | 总阻塞时间 | ≤ 200ms | ≤ 600ms | > 600ms |
+
+**监测**：`web-vitals` 库上报 → 观测平台（见 `{{config.stack.error_reporter}}`）。
+
+## 2. 性能预算（模块级）
+
+| 维度 | 基线 | 模块可收紧 |
+| --- | --- | --- |
+| 首屏时间（LCP） | ≤ 2.5s | 视功能 |
+| 交互响应（INP） | ≤ 200ms | 需 ≤ 100ms 写入 design.md |
+| 单 chunk 体积（gzip） | ≤ 500KB | — |
+| 首屏 JS 总体积（gzip） | ≤ 1MB | — |
+| 同屏并发请求 | ≤ 6 | 同参数 100% 去重 |
+| 单次列表渲染 | ≤ 16ms | 一帧内 |
+
+超标必须在 `design.md` 记 ADR + 缓解方案。
+
+## 3. React memoization 纪律
+
+**判定表**：
+
+| 场景 | 用 | 理由 |
+| --- | --- | --- |
+| 子组件接收稳定引用才能避免重渲染 | `memo` + `useCallback` | 否则每次父渲染子也重渲染 |
+| 计算成本 > 渲染成本 | `useMemo` | 否则每次计算浪费 |
+| 依赖基本不变、内容简单 / 叶子节点 / 函数只用一次 | **不用** | memo 本身有开销 |
+
+**常见误用**：
+
+```tsx
+// ❌ memo 但 prop 每次都是新引用（memo 无效）
+<Child onChange={(v) => setValue(v)} />
+// ✅ 稳定引用
+const handleChange = useCallback((v) => setValue(v), []);
+<Child onChange={handleChange} />
+
+// ❌ useMemo 包简单值 / 每个变量都 useCallback
+```
+
+**诊断**：React DevTools Profiler "Highlight updates" 观察重渲染；DEV 环境启用 `why-did-you-render`。
+
+## 4. 列表虚拟化
+
+### 硬规则
+
+**节点数 ≥ 200 必须虚拟化**（或 ADR 豁免）。
+
+### 选型
+
+| 场景 | 库 |
+| --- | --- |
+| 定高列表 | `react-window` (`FixedSizeList`) |
+| 动态高度列表 | `react-virtuoso` 或 `react-window` + `CellMeasurer` |
+| 表格 | `@tanstack/react-virtual` |
+| 树（可展开） | `react-arborist` / 自研 flatten + `react-window` |
+
+### 最小例子
+
+```tsx
+import { FixedSizeList } from 'react-window';
+
+<FixedSizeList height={600} itemCount={items.length} itemSize={48} width="100%">
+  {({ index, style }) => (
+    <div style={style}>{items[index].name}</div>
+  )}
+</FixedSizeList>
+```
+
+### 注意
+
+- 虚拟化内部**不做**昂贵计算（会每次滚动重跑）
+- 键盘导航 / 焦点管理要和虚拟化库的 `scrollToItem` 配合
+- a11y：若丢失语义，需补 `role="list"` + `role="listitem"`
+
+## 5. 懒加载（代码拆分）
+
+### 路由级
+
+```tsx
+const UserProfilePage = lazy(() => import('./pages/UserProfile'));
+
+<Suspense fallback={<PageSkeleton />}>
+  <Route path="/user/:id" element={<UserProfilePage />} />
+</Suspense>
+```
+
+### 组件级（非首屏或条件渲染）
+
+```tsx
+const HeavyChart = lazy(() => import('./HeavyChart'));
+{showChart && (
+  <Suspense fallback={<Spinner />}>
+    <HeavyChart data={data} />
+  </Suspense>
+)}
+```
+
+### 图片懒加载（浏览器原生）
+
+```tsx
+<img
+  src={src}
+  loading="lazy"        // 原生懒加载
+  decoding="async"      // 异步解码
+  width={800}
+  height={600}          // 显式尺寸防 CLS
+  alt={t('...')}
+/>
+```
+
+### IntersectionObserver（视口进入再加载其他资源）
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+useEffect(() => {
+  const obs = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting) {
+      // 触发加载
+      obs.disconnect();
+    }
+  });
+  if (ref.current) obs.observe(ref.current);
+  return () => obs.disconnect();
+}, []);
+```
+
+## 6. Bundle 优化
+
+### 构建层
+
+- **Tree-shaking**：ESM 导入（`import { x } from 'lib'`），避免整库引入（`import _ from 'lodash'` → 改 `import debounce from 'lodash/debounce'` 或用 `lodash-es`）
+- **代码拆分**：
+  - 路由级 lazy（如上）
+  - 动态 import 大依赖（`charting`, `PDF`, `编辑器`）
+- **Polyfill 按需**：`@vitejs/plugin-legacy` / `core-js` + browserslist
+- **压缩**：gzip + brotli（后端配置）
+
+### 监测
+
+- **`rollup-plugin-visualizer`** / **`webpack-bundle-analyzer`**：发布前看 bundle 组成
+- **`size-limit`**：CI 门禁，首屏 JS 超 10% 阻断（见 `feature-tasks-frontend` 7.5）
+
+### 依赖替代
+
+| 重 | 轻替代 |
+| --- | --- |
+| `moment` | `date-fns` / `dayjs` |
+| `lodash` 全量 | `lodash-es` 按需 / 原生 ES |
+| `axios`（若只用基础） | 原生 `fetch` + 小封装 |
+| `jquery` | 移除 |
+
+## 7. 图片与媒体
+
+- **尺寸属性必填**（`width` / `height`）：防 CLS
+- **srcset + sizes**：响应式图片
+  ```html
+  <img
+    srcset="img-480.webp 480w, img-960.webp 960w, img-1440.webp 1440w"
+    sizes="(max-width: 768px) 100vw, 50vw"
+    src="img-960.webp"
+  />
+  ```
+- **格式**：优先 `webp` / `avif`，降级 `png` / `jpg`
+- **视频**：`preload="none"` 默认不加载；`poster` 属性提供静态占位
+- **字体**：`font-display: swap` 防止白屏
+
+## 8. 防抖 / 节流
+
+### 何时用
+
+| 场景 | 用 | 时长 |
+| --- | --- | --- |
+| 输入搜索 | `debounce` | 300ms 起步 |
+| 按钮防重复点击 | `debounce` | 500ms |
+| 窗口 resize / scroll | `throttle` | 100-200ms |
+| 拖拽 / 滚动加载 | `throttle` | 16ms（一帧） |
+
+### React 实现
+
+```tsx
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+
+// 稳定引用
+const onSearch = useMemo(
+  () => debounce((q: string) => doSearch(q), 300),
+  []
+);
+
+useEffect(() => () => onSearch.cancel(), [onSearch]); // 卸载清理
+```
+
+`useDeferredValue` / `useTransition`（React 18+）可替代部分场景：
+
+```tsx
+const [query, setQuery] = useState('');
+const deferredQuery = useDeferredValue(query);  // 非紧急更新延迟
+// 渲染用 deferredQuery
+```
+
+## 9. Context 性能
+
+### 禁用
+
+- ❌ 把频繁变动的值（鼠标位置 / 滚动偏移 / 每帧更新）放 Context
+- ❌ 大对象整体传 Context（导致订阅者全量重渲染）
+
+### 拆分
+
+```tsx
+// 按变化频率切分
+<UserInfoContext.Provider value={userInfo}>         // 低频
+  <CursorPositionContext.Provider value={pos}>     // 高频 → 用 ref + 订阅
+    ...
+  </CursorPositionContext.Provider>
+</UserInfoContext.Provider>
+```
+
+高频值用 ref + 手动订阅 / `zustand` / `jotai` 等外部状态库。
+
+## 10. 诊断工具链
+
+| 工具 | 用途 |
+| --- | --- |
+| Lighthouse | 线下评估 CWV |
+| `web-vitals` 库 | 线上上报 |
+| React DevTools Profiler | 重渲染分析 |
+| Chrome DevTools Performance | Flame chart + Long Task |
+| Chrome DevTools Coverage | 未使用代码比例 |
+| `why-did-you-render` | 意外重渲染告警 |
+| `size-limit` | CI bundle 门禁 |
+| `rollup-plugin-visualizer` | Bundle 组成可视化 |
+
+## 反模式（禁止）
+
+- ❌ 默认所有组件套 `memo` / 所有函数套 `useCallback`（认知负担 > 收益）
+- ❌ 长列表不虚拟化（≥ 200 节点）
+- ❌ 首屏加载所有路由代码
+- ❌ 全量 import 大库（`lodash` / `moment`）
+- ❌ 图片无 `width/height` 导致 CLS
+- ❌ Context 放频繁变动的值
+- ❌ 搜索 / scroll handler 不防抖 / 节流
+- ❌ 声称"性能 OK"而没 Lighthouse / 实测数据
+
+## 质量门禁
+
+- [ ] CWV 线上 p75 达标（LCP/INP/CLS 均 Good）
+- [ ] 长列表虚拟化（或 ADR 豁免）
+- [ ] 首屏 JS 增量 < 10%（`size-limit` CI）
+- [ ] 图片有 `width/height` + `loading="lazy"`
+- [ ] 无全量导入大库
+- [ ] Context 无高频变动值
+- [ ] 搜索 handler 防抖 ≥ 300ms
+- [ ] Lighthouse score ≥ 90（性能）