初始化

2026-03-05 21:27:11 +08:00
commit 130de0fd5d
140 changed files with 21972 additions and 0 deletions
--- a/.cursor/skills/performance-audit/SKILL.md
+++ b/.cursor/skills/performance-audit/SKILL.md
@@ -0,0 +1,79 @@
+---
+name: performance-audit
+version: 1.0.0
+description: "分析并优化应用性能。当用户报告页面慢、加载卡或包体积大时使用。涵盖前端渲染、网络、打包和数据库四个维度。"
+---
+
+> ⚠️ 核心执行流程已在 `.cursor/rules/022-performance.mdc` 中由 Cursor 自动注入。
+> 本文件提供完整模板、代码示例和边缘场景处理，供 Agent 按需深入 Read。
+
+# Performance Audit
+
+## 触发条件
+
+用户报告性能问题、请求性能优化或要求性能审计。
+
+## 执行流程
+
+### 1. 性能基线
+
+收集当前数据：
+```bash
+# 前端打包分析 (Vite)
+for dir in Case-Database-Frontend-user Case-Database-Frontend-admin; do
+  echo "=== $dir ==="
+  cd $dir && npm run build 2>&1 | tail -20
+  du -sh dist/
+  cd ..
+done
+
+# 后端状态
+cd Case-Database-Backend && php bin/hyperf.php describe:routes | wc -l
+```
+
+### 2. 四维度审计
+
+**前端渲染**
+- Vue DevTools 分析不必要的重渲染
+- 检查大列表是否缺少 `v-memo` / `shallowRef`
+- 检查大列表是否使用虚拟化（`@tanstack/vue-virtual`）
+- 检查图片是否压缩（WebP 格式 + CDN）
+- 管理端：Element Plus 是否按需导入（用户端不使用 Element Plus）
+
+**网络请求**
+- 是否有瀑布式请求（串行 → 并行）
+- API 响应是否有 Redis 缓存策略
+- Axios 是否配置请求/响应拦截
+- 静态内容是否配置 Nginx 缓存
+
+**打包体积**
+- 是否有不必要的大依赖
+- 是否使用 dynamic import 进行代码分割
+- 是否 tree-shaking 有效
+- 检查 barrel exports 是否导致全量导入
+
+**数据库查询**
+- N+1 查询检测
+- 缺少索引的慢查询
+- 未使用 `select` 限制字段
+- 大数据集未分页
+
+### 3. Core Web Vitals 目标
+
+| 指标 | 目标 | 说明 |
+|------|------|------|
+| LCP | < 2.5s | Largest Contentful Paint |
+| INP | < 200ms | Interaction to Next Paint |
+| CLS | < 0.1 | Cumulative Layout Shift |
+| FCP | < 1.8s | First Contentful Paint |
+| TTFB | < 800ms | Time to First Byte |
+
+### 4. 输出优化建议
+
+按影响力排序，每个建议包含：预期收益 + 实施难度 + 具体代码。
+
+## 验证
+
+1. [ ] 优化前后有可量化对比
+2. [ ] 未引入功能回归
+3. [ ] Core Web Vitals 达标
--- a/.cursor/skills/performance-audit/references/optimization-patterns.md
+++ b/.cursor/skills/performance-audit/references/optimization-patterns.md
@@ -0,0 +1,87 @@
+# 性能优化模式
+
+## Vue 3 前端优化
+
+```vue
+<!-- 1. v-memo — 防止不必要的重渲染 -->
+<template>
+  <div v-memo="[item.id, item.name]">
+    {{ item.name }}
+  </div>
+</template>
+
+<!-- 2. computed — 缓存计算结果 -->
+<script setup>
+const sorted = computed(() => [...items.value].sort(compareFn))
+
+// 3. shallowRef — 大型对象避免深层响应
+const heavyData = shallowRef(null)
+
+// 4. 异步组件 — 代码分割
+const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))
+
+// 5. 虚拟化 — 大列表
+import { useVirtualizer } from '@tanstack/vue-virtual'
+
+// 6. keep-alive — 页面缓存
+// <keep-alive :include="cachedViews"><router-view /></keep-alive>
+</script>
+```
+
+## Vite 构建优化
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  build: {
+    target: 'es2015',
+    minify: 'terser',
+    terserOptions: {
+      compress: { drop_console: true, drop_debugger: true },
+    },
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          // 仅管理端：'element-plus': ['element-plus'],
+          'echarts': ['echarts'],
+        },
+      },
+    },
+  },
+})
+```
+
+## Hyperf 后端优化
+
+```php
+// 1. 协程并发 — 并行无依赖 I/O
+$parallel = new Parallel(10);
+$parallel->add(fn() => $this->orderService->getStatistics($id));
+$parallel->add(fn() => $this->paymentService->getPayments($id));
+[$stats, $payments] = $parallel->wait();
+
+// 2. 连接池调优
+'pool' => [
+    'min_connections' => 5,
+    'max_connections' => 50,
+    'wait_timeout'    => 3.0,
+],
+
+// 3. 缓存注解
+#[Cacheable(prefix: 'user', ttl: 3600)]
+public function getById(int $id): ?User { ... }
+```
+
+## 数据库优化
+
+```sql
+-- 复合索引：遵循最左前缀原则
+CREATE INDEX idx_orders_status_created ON production_orders(status, created_at);
+
+-- 覆盖索引：避免回表
+CREATE INDEX idx_orders_cover ON production_orders(status, total_amount, paid_amount);
+
+-- 游标分页（百万级数据）
+SELECT * FROM orders WHERE id > ? ORDER BY id ASC LIMIT 20;
+```