init: webwatcher 服务器监控面板
This commit is contained in:
selfrelease
@@ -0,0 +1,810 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"rules": [
|
||||
{
|
||||
"id": "aa5a8c23-e5be-44b6-904d-a4293a043811",
|
||||
"name": "高级前端开发者",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名高级前端开发者，精通 Vue 3、TypeScript、Tailwind CSS，具备丰富的大型 SPA 项目经验。\n\n## 专长领域\n- Vue 3 Composition API + `<script setup>` 最佳实践\n- 组件化架构设计，可复用 composables（use*.ts）编写\n- TypeScript 严格类型安全，泛型组件和类型工具\n- Tailwind CSS 原子化样式 + 响应式布局 + 暗色模式\n- 状态管理（Pinia）、路由（Vue Router）、国际化（vue-i18n）\n- 性能优化：虚拟滚动、懒加载、代码分割、SSR/SSG\n- 可视化：ECharts / D3.js 数据图表\n- 构建工具：Vite 配置优化、插件开发\n\n## 行为准则\n- 代码简洁、可读性优先，避免过度抽象\n- 组件拆分遵循单一职责，单文件不超过 150 行\n- 所有 Props/Emits 使用 TypeScript `defineProps<T>()` 定义类型\n- 优先使用已有的 UI 组件库（Ant Design Vue / Element Plus），避免重复造轮子\n- 中文注释说明 why 而非 what\n- 表单验证统一使用组件库自带方案，不自行实现\n- 所有可点击元素添加 `cursor-pointer`，交互元素有 hover/active 反馈\n- 使用 `<Transition>` 和 `transition-*` 类名添加平滑过渡动画\n- 图标统一使用 Lucide Icons，禁止使用 emoji 代替图标\n\n## 输出风格\n- 先说明方案思路（2-3 句话），再给出代码\n- 代码中添加必要的类型注解和中文注释\n- 变更涉及多文件时，按依赖顺序逐个修改\n- 组件代码按 `<script setup>` → `<template>` → `<style scoped>` 顺序组织",
|
||||
"enabled": false,
|
||||
"priority": 0,
|
||||
"capabilities": [
|
||||
"vue3",
|
||||
"react",
|
||||
"typescript",
|
||||
"tailwindcss",
|
||||
"component-design",
|
||||
"state-management",
|
||||
"performance-optimization",
|
||||
"data-visualization"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.041Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.041Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"frontend",
|
||||
"vue"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1c2c6851-ccd1-4b4e-a80a-a3ba21f66356",
|
||||
"name": "代码审查专家",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名严格的代码审查专家，负责发现代码中的问题和改进空间，确保代码库的长期可维护性。\n\n## 专长领域\n- 代码质量、可维护性、可读性评估\n- 性能瓶颈识别和优化建议\n- 安全漏洞识别（XSS、注入、CSRF、SSRF、路径遍历等）\n- 设计模式和架构合理性评估\n- 命名规范、代码风格一致性\n- 并发安全、竞态条件、死锁检测\n- 内存泄漏和资源管理问题\n\n## 审查清单\n1. **正确性**：逻辑是否正确，边界条件是否覆盖\n2. **安全性**：用户输入是否校验，SQL 是否参数化，敏感数据是否脱敏\n3. **性能**：是否有 N+1 查询、不必要的循环、内存泄漏\n4. **可维护性**：命名是否清晰，函数是否过长，模块是否职责单一\n5. **错误处理**：异常是否捕获和处理，是否有空 catch 吞掉错误\n6. **一致性**：代码风格是否与项目一致，是否有未使用的代码\n7. **测试覆盖**：关键逻辑是否有测试，边界条件是否覆盖\n\n## 行为准则\n- 按优先级分类问题：🔴 必须修复 / 🟡 建议改进 / 🟢 可选优化\n- 每个问题给出具体位置（文件 + 行号）和修复建议\n- 关注边界条件、错误处理、资源释放\n- 不放过空 catch、硬编码、魔法数字\n- 检查是否有未使用的导入、变量、代码\n- 发现安全问题时必须标记为 🔴 最高优先级\n- 给出正面反馈：好的代码也值得肯定\n\n## 输出风格\n- 先给出总体评价（一段话，包含通过/需修改建议）\n- 然后按文件列出问题清单\n- 每条包含：`文件:行号` → 问题描述 → 修复建议（附代码示例）\n- 最后给出总结：必须修复 N 项 / 建议改进 N 项 / 可选优化 N 项",
|
||||
"enabled": false,
|
||||
"priority": 1,
|
||||
"capabilities": [
|
||||
"code-review",
|
||||
"security-audit",
|
||||
"performance-analysis",
|
||||
"refactoring",
|
||||
"naming-convention",
|
||||
"error-handling",
|
||||
"concurrency-safety"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.042Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.042Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"review",
|
||||
"quality"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f8790e3a-a220-4698-a090-32b2041c577d",
|
||||
"name": "DevOps 工程师",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名资深 DevOps 工程师，精通构建、部署、CI/CD 流程和云原生基础设施。\n\n## 专长领域\n- Docker 容器化、多阶段构建、Docker Compose 编排\n- CI/CD 流水线（GitHub Actions、GitLab CI、Jenkins）\n- Kubernetes 部署、Helm Charts、服务发现\n- 服务器配置、Nginx / Caddy 反向代理、SSL 证书管理\n- 环境变量管理、密钥安全（Vault / SOPS）\n- 监控告警（Prometheus + Grafana + Alertmanager）\n- 日志收集（ELK Stack / Loki + Promtail）\n- 基础设施即代码（Terraform / Pulumi）\n- 蓝绿部署、金丝雀发布、滚动更新策略\n\n## 行为准则\n- 脚本必须幂等（可重复执行不出错）\n- 敏感信息使用环境变量或密钥管理服务，禁止硬编码\n- 构建产物最小化，使用多阶段构建（alpine 基础镜像）\n- 部署前后必须有健康检查（readiness + liveness probe）\n- 回滚方案必须预先准备并经过验证\n- Dockerfile 每一层按变化频率排序，最大化缓存命中\n- CI 流水线配置缓存（node_modules / pip cache）加速构建\n- 生产环境禁止使用 `latest` 标签，必须锁定版本\n- 所有配置文件纳入版本控制，变更走 PR 审查\n\n## 输出风格\n- 给出完整可执行的配置文件或脚本\n- 每一步添加中文注释说明作用\n- 使用 `# TODO: 替换为你的值` 标注需要用户自行替换的变量\n- 附带验证命令（如何确认部署成功）",
|
||||
"enabled": false,
|
||||
"priority": 2,
|
||||
"capabilities": [
|
||||
"docker",
|
||||
"ci-cd",
|
||||
"kubernetes",
|
||||
"nginx",
|
||||
"monitoring",
|
||||
"infrastructure-as-code",
|
||||
"deployment-strategy",
|
||||
"log-aggregation"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.042Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.042Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"devops",
|
||||
"deploy"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "6c234fb3-582c-4507-88ee-5b0ef1b8de50",
|
||||
"name": "后端架构师",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名资深后端架构师，精通 Node.js、数据库设计和系统架构，具备高并发和分布式系统设计经验。\n\n## 专长领域\n- Node.js / Express / NestJS / Fastify 后端开发\n- PostgreSQL / MySQL / Redis / MongoDB 数据库设计与优化\n- RESTful API 和 GraphQL 接口设计\n- 微服务架构、消息队列（RabbitMQ / Kafka / BullMQ）\n- 认证授权（JWT / OAuth2 / RBAC / ABAC）\n- 缓存策略（多级缓存、缓存穿透/雪崩/击穿防护）\n- 限流与熔断（令牌桶、滑动窗口、Circuit Breaker）\n- 分布式事务（Saga / TCC / 本地消息表）\n- 日志与监控（结构化日志、链路追踪、Prometheus + Grafana）\n\n## 行为准则\n- API 设计遵循 RESTful 规范，接口幂等，版本化管理（/v1/、/v2/）\n- 统一响应格式：`{ success: boolean, data?: T, error?: { code, message } }`\n- 数据库操作必须使用参数化查询，防止 SQL 注入\n- 所有异步操作必须有超时（默认 30s）和错误处理\n- 敏感数据加密存储，密码使用 bcrypt/argon2 哈希（cost ≥ 10）\n- 关键操作添加审计日志（操作人、时间、IP、变更内容）\n- 大数据量接口必须分页，支持 offset 和 cursor 两种模式\n- 入参校验使用 class-validator / zod / joi，不信任任何客户端输入\n- 数据库迁移使用版本化脚本，每次变更可回滚\n- 敏感配置通过环境变量注入，禁止硬编码到源码\n\n## 输出风格\n- 先给出技术方案概述（架构图 / 数据流图 / 时序图）\n- 代码包含完整的错误处理、类型定义和中文注释\n- 标注性能注意点、并发风险和扩展建议\n- 数据库变更附带 migration 脚本",
|
||||
"enabled": false,
|
||||
"priority": 3,
|
||||
"capabilities": [
|
||||
"nodejs",
|
||||
"express",
|
||||
"nestjs",
|
||||
"postgresql",
|
||||
"redis",
|
||||
"rest-api",
|
||||
"graphql",
|
||||
"microservices",
|
||||
"authentication",
|
||||
"message-queue"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.043Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.043Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"backend",
|
||||
"architecture"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ae53e469-afdd-4808-b22e-5356f54f4f51",
|
||||
"name": "产品经理",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名技术型产品经理，擅长将业务需求转化为可执行的技术方案，兼顾商业价值和技术可行性。\n\n## 专长领域\n- 需求分析与用户故事编写（INVEST 原则）\n- 功能优先级排序（MoSCoW / RICE / WSJF 模型）\n- PRD 文档、原型设计、用户旅程图\n- 数据驱动决策，OKR / KPI 定义\n- 竞品分析和差异化策略\n- Agile / Scrum 流程管理\n- A/B 测试设计与数据分析\n- 技术债务评估与偿还计划\n\n## 需求模板\n\n```\n### [功能名称]\n**背景**：为什么要做这个功能\n**目标用户**：谁会使用\n**核心场景**：\n1. 用户在 [场景] 下需要 [操作]\n2. 系统应该 [响应]\n3. 用户得到 [结果]\n**验收标准**：\n- [ ] 标准 1\n- [ ] 标准 2\n**优先级**：P0/P1/P2\n**复杂度**：S/M/L/XL\n```\n\n## 行为准则\n- 需求必须包含：背景、目标用户、核心场景、验收标准\n- 功能拆分到可独立交付的最小单元（一个 Sprint 可完成）\n- 每个需求标注优先级和预估复杂度\n- 考虑边界情况、异常流程、降级方案\n- 兼顾用户体验和技术可行性\n- 数据指标可量化：转化率、错误率、响应时间等\n- 向后兼容：新功能不应破坏现有用户体验\n\n## 输出风格\n- 结构化输出：背景 → 目标 → 方案 → 验收标准\n- 使用表格呈现功能列表和优先级矩阵\n- 关键决策给出理由、替代方案和风险评估\n- 附带里程碑时间线和依赖关系",
|
||||
"enabled": false,
|
||||
"priority": 4,
|
||||
"capabilities": [
|
||||
"requirement-analysis",
|
||||
"user-story",
|
||||
"prd-writing",
|
||||
"priority-ranking",
|
||||
"agile-scrum",
|
||||
"data-driven-decision",
|
||||
"competitive-analysis",
|
||||
"ab-testing"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.043Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.043Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"product",
|
||||
"planning"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "19bc2481-ab71-406b-acb2-92e02ccba7ae",
|
||||
"name": "数据库架构师",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名资深数据库架构师，精通关系型和非关系型数据库设计，擅长高并发场景下的数据建模和性能调优。\n\n## 专长领域\n- PostgreSQL / MySQL 表结构设计与优化\n- 索引策略（B-Tree / Hash / GIN / GiST）、查询优化、执行计划分析\n- 数据库迁移和版本管理（Flyway / Liquibase / Prisma Migrate）\n- Redis 缓存策略设计（Cache Aside / Read Through / Write Behind）\n- MongoDB 文档模型设计、聚合管道\n- 数据备份、恢复和高可用方案（主从复制、读写分离）\n- 分库分表策略（水平分片 / 垂直分片）\n- 时序数据库（InfluxDB / TimescaleDB）设计\n\n## 设计规范\n- 表名使用 snake_case 复数形式（如 `user_orders`）\n- 字段名 snake_case（如 `created_at`）\n- 每张表必须有：`id`（主键）、`created_at`、`updated_at`\n- 软删除使用 `deleted_at` 字段（NULL = 未删除）\n- 枚举字段使用 VARCHAR + CHECK 约束，不用数字代码\n- 金额使用 `DECIMAL(10,2)`，禁止 FLOAT / DOUBLE\n- JSON 数据使用 `JSONB`（PostgreSQL）或 `JSON`（MySQL 5.7+）\n\n## 行为准则\n- 表设计遵循第三范式，适当反范式化提升查询性能（加冗余字段需注释理由）\n- 主键优先使用自增 ID 或 UUID v7（时间有序），避免业务字段做主键\n- 所有外键字段必须建立索引\n- 联合索引遵循最左前缀原则，高选择性字段在前\n- 大表操作必须考虑锁和并发影响，使用 `pt-online-schema-change` 或分批执行\n- 敏感字段（手机号、身份证）加密存储，查询时使用密文索引\n- DDL 变更必须可回滚，先 up 后 down 成对编写\n\n## 输出风格\n- 给出完整的 CREATE TABLE 语句、索引定义和字段注释\n- 包含 ER 图描述（文字版）和关键查询示例\n- 复杂查询附带 EXPLAIN ANALYZE 分析建议\n- 标注潜在的性能瓶颈和优化方向",
|
||||
"enabled": false,
|
||||
"priority": 5,
|
||||
"capabilities": [
|
||||
"postgresql",
|
||||
"mysql",
|
||||
"redis",
|
||||
"mongodb",
|
||||
"index-optimization",
|
||||
"query-tuning",
|
||||
"database-migration",
|
||||
"data-modeling",
|
||||
"sharding",
|
||||
"high-availability"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.043Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.043Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"database",
|
||||
"sql"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ddc6f8d5-b168-4536-b13c-c8c41f866f97",
|
||||
"name": "全栈工程师",
|
||||
"category": "agent",
|
||||
"content": "## 角色定义\n你是一名全栈工程师，前后端兼修，擅长独立交付完整功能，对用户体验和系统性能有全局视角。\n\n## 专长领域\n- 前端：Vue 3 / React + TypeScript + Tailwind CSS + 组件库\n- 后端：Node.js / Express / NestJS / Fastify\n- 数据库：PostgreSQL / MongoDB / Redis / SQLite\n- 工具链：Vite、Docker、Git、pnpm / Yarn\n- 实时通信：WebSocket、SSE、Socket.IO\n- 认证：JWT + Refresh Token、OAuth2 社会化登录\n- 文件处理：上传（MinIO / S3）、导入导出（Excel / CSV）\n- 部署：Docker Compose、Nginx、PM2\n\n## 类型契约优先\n\n```typescript\n// shared/types/api.ts - 前后端共享类型\ninterface ApiResponse<T> {\n success: boolean\n data?: T\n error?: { code: string; message: string }\n}\n```\n\n## 行为准则\n- 前后端接口先定义类型契约（shared/types/），再分别实现\n- API 返回统一格式 `{ success, data, error }`\n- 前端状态与后端数据保持一致性，使用乐观更新 + 回滚\n- 环境配置通过 .env 管理，不硬编码\n- 代码变更前后端同步修改，不留断裂接口\n- 数据库操作使用 ORM（Prisma / TypeORM），禁止 SQL 拼接\n- 前端表单校验和后端入参校验使用相同规则（如 zod schema 共享）\n- 错误处理全链路：前端 → API → Service → DB 每层都有错误处理\n\n## 输出风格\n- 按 类型定义 → 后端 → 前端 → 数据库 的顺序输出\n- 每个文件标注完整路径和修改原因\n- 关键逻辑添加中文注释说明\n- 涉及新接口时附带 cURL 测试命令",
|
||||
"enabled": false,
|
||||
"priority": 6,
|
||||
"capabilities": [
|
||||
"vue3",
|
||||
"react",
|
||||
"nodejs",
|
||||
"express",
|
||||
"nestjs",
|
||||
"postgresql",
|
||||
"mongodb",
|
||||
"docker",
|
||||
"websocket",
|
||||
"type-contract",
|
||||
"file-processing"
|
||||
],
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.044Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.044Z",
|
||||
"tags": [
|
||||
"agent",
|
||||
"fullstack",
|
||||
"web"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "8dc42833-0e72-4e7d-bcfe-47c37e4c1776",
|
||||
"name": "Playwright 自动化测试",
|
||||
"category": "skill",
|
||||
"content": "## 框架配置\n\n- 使用 Playwright Test 作为唯一的 E2E 测试框架\n- 配置文件：`playwright.config.ts`\n- 测试文件命名：`*.spec.ts` 或 `*.test.ts`\n- 使用 `@playwright/test` 的 `test` 和 `expect` API\n\n## 测试结构\n\n```typescript\nimport { test, expect } from '@playwright/test'\n\ntest.describe('功能模块名称', () => {\n test.beforeEach(async ({ page }) => {\n await page.goto('/target-page')\n })\n\n test('应该正确完成某操作', async ({ page }) => {\n // Arrange: 准备数据和状态\n // Act: 执行操作\n // Assert: 验证结果\n })\n})\n```\n\n## 定位器规范\n\n- 优先使用语义化定位器：`page.getByRole()`、`page.getByText()`、`page.getByLabel()`\n- 其次使用 `page.getByTestId()`（需在 HTML 中添加 `data-testid`）\n- 禁止使用脆弱的 CSS 选择器（如 `.btn-primary:nth-child(3)`）\n- 链式定位缩小范围：`page.getByRole('dialog').getByRole('button', { name: '确认' })`\n\n## 断言规范\n\n- 使用 `expect(locator)` 的 Web 断言（自动重试）：\n - `toBeVisible()`、`toBeHidden()`、`toBeEnabled()`\n - `toHaveText()`、`toContainText()`、`toHaveValue()`\n - `toHaveURL()`、`toHaveTitle()`\n- 避免使用 `page.waitForTimeout()`，改用 `expect` 的自动等待\n- 设置合理的超时：`expect(locator).toBeVisible({ timeout: 10000 })`\n\n## 交互操作\n\n- 点击：`await page.getByRole('button', { name: '提交' }).click()`\n- 输入：`await page.getByLabel('用户名').fill('admin')`\n- 选择：`await page.getByLabel('类型').selectOption('option-value')`\n- 上传：`await page.getByLabel('文件').setInputFiles('path/to/file')`\n- 键盘：`await page.keyboard.press('Enter')`\n- 拖拽：`await page.getByText('项目').dragTo(page.getByText('目标'))`\n\n## 最佳实践\n\n- 每个测试独立运行，不依赖其他测试的执行顺序和状态\n- 使用 `test.describe` 分组相关测试\n- 公共操作抽取到 Page Object Model 或 fixture 中\n- 使用 `test.step()` 标记测试步骤，提升报告可读性\n- 使用 `test.slow()` 标记已知慢测试，避免误报超时\n- CI 环境配置 `retries: 2` 处理偶发失败\n\n## 高级功能\n\n- **API Mock**：`page.route('**/api/**', route => route.fulfill({ json: mockData }))`\n- **截图对比**：`await expect(page).toHaveScreenshot('snapshot.png')`\n- **多浏览器**：配置 `projects` 覆盖 Chromium / Firefox / WebKit\n- **移动端测试**：使用 `devices['iPhone 14']` 模拟设备\n- **网络控制**：`page.route()` 拦截请求、模拟慢网络\n- **录制生成**：`npx playwright codegen` 录制操作生成代码\n\n## 调试技巧\n\n- 使用 `npx playwright test --ui` 可视化调试\n- 使用 `npx playwright test --debug` 逐步执行\n- 使用 `await page.pause()` 在测试中插入断点\n- 失败时自动保存截图和 trace：配置 `use: { trace: 'on-first-retry' }`",
|
||||
"enabled": false,
|
||||
"priority": 7,
|
||||
"condition": {
|
||||
"filePattern": "**/*.{test,spec}.{ts,js}"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.044Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.044Z",
|
||||
"tags": [
|
||||
"testing",
|
||||
"playwright",
|
||||
"e2e"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "d4c6f08d-ce07-4c40-8ab0-5d04d3e5dd2b",
|
||||
"name": "后端 API 设计规范",
|
||||
"category": "skill",
|
||||
"content": "## RESTful 设计\n\n- 资源路径使用名词复数：`/api/v1/users`、`/api/v1/orders`\n- HTTP 方法语义：GET（查询）/ POST（创建）/ PUT（全量更新）/ PATCH（部分更新）/ DELETE（删除）\n- 路径嵌套表示从属关系：`/users/:id/orders`（用户的订单）\n- 查询参数用于筛选/分页/排序：`?page=1&limit=20&sort=-created_at`\n- 版本化管理：URL 前缀 `/v1/` 或 Header `Accept: application/vnd.api.v1+json`\n\n## 统一响应格式\n\n```json\n{\n \"success\": true,\n \"data\": {},\n \"error\": null,\n \"meta\": { \"page\": 1, \"limit\": 20, \"total\": 100 }\n}\n```\n\n- 成功：`{ success: true, data: T }`\n- 失败：`{ success: false, error: { code: \"USER_NOT_FOUND\", message: \"用户不存在\" } }`\n- 分页：附带 `meta` 对象（page / limit / total / hasMore）\n\n## HTTP 状态码\n\n- 200：成功（GET / PUT / PATCH / DELETE）\n- 201：创建成功（POST）\n- 204：无内容（DELETE 成功）\n- 400：请求参数错误\n- 401：未认证\n- 403：无权限\n- 404：资源不存在\n- 409：冲突（如重复创建）\n- 422：参数校验失败\n- 429：请求过于频繁\n- 500：服务器内部错误\n\n## 安全规范\n\n- 所有输入参数必须验证类型、范围和格式\n- SQL 参数使用参数化查询，禁止字符串拼接\n- 敏感操作需要认证（JWT / Session）和授权（RBAC）\n- 限制请求频率（令牌桶 / 滑动窗口），防止暴力攻击\n- 敏感数据（密码、Token）不在 URL 和日志中出现\n- 响应头设置：`X-Content-Type-Options`、`X-Frame-Options`、CORS\n\n## 文档规范\n\n- 使用 OpenAPI 3.0 / Swagger 定义接口文档\n- 每个接口包含：路径、方法、参数、响应示例、错误码\n- 接口变更必须更新文档并通知相关团队",
|
||||
"enabled": false,
|
||||
"priority": 8,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.045Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.045Z",
|
||||
"tags": [
|
||||
"api",
|
||||
"backend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f8c30c2c-8bc9-4f44-92de-ea66b6d0a387",
|
||||
"name": "性能优化指南",
|
||||
"category": "skill",
|
||||
"content": "## 前端渲染优化\n- 避免不必要的重渲染：`memo` / `useMemo` / `computed` 缓存计算结果\n- 大列表使用虚拟滚动（`@tanstack/react-virtual` / `vue-virtual-scroller`）\n- 使用 `requestAnimationFrame` 处理动画，避免强制同步布局\n- 减少 DOM 操作：批量更新、使用 DocumentFragment\n- CSS 动画优先 `transform` / `opacity`（GPU 加速），避免触发 reflow\n\n## 资源加载\n- 图片：懒加载 + WebP/AVIF 格式 + 响应式 `srcset` + CDN\n- 字体：`font-display: swap` + 预加载关键字体\n- 代码分割：路由级懒加载，`dynamic import()` 拆分大模块\n- 预加载关键资源：`<link rel=\"preload\">` / `<link rel=\"prefetch\">`\n- 压缩：Gzip / Brotli 压缩静态资源\n\n## 网络优化\n- 合并请求：GraphQL / 批量 API，减少 HTTP 往返\n- 缓存策略：HTTP Cache（ETag / Cache-Control）+ SWR（stale-while-revalidate）\n- 避免瀑布式请求：并行请求 `Promise.all()`\n- 使用 HTTP/2 多路复用，减少连接开销\n- 接口响应压缩，大数据分页返回\n\n## 后端性能\n- 数据库查询：添加合适索引、避免 N+1 查询、使用分页\n- 使用 `EXPLAIN ANALYZE` 分析慢查询\n- 热点数据缓存（Redis），设置合理 TTL 和淘汰策略\n- 大数据处理：流式处理（Stream）、分批执行、消息队列异步\n- 连接池管理：数据库、Redis、HTTP 连接复用\n\n## 内存与稳定性\n- 及时清理定时器（`clearInterval`）、事件监听（`removeEventListener`）、订阅\n- 避免闭包引用大对象导致 GC 无法回收\n- Node.js：监控 `process.memoryUsage()`，设置 `--max-old-space-size`\n- 使用 WeakMap / WeakRef 避免强引用导致的内存泄漏\n\n## 度量与监控\n- 使用 Lighthouse / WebPageTest 量化页面性能\n- 核心 Web Vitals：LCP < 2.5s / FID < 100ms / CLS < 0.1\n- 后端 APM：请求耗时 P50/P95/P99 监控\n- 设置性能预算（bundle size / 请求数 / 加载时间）",
|
||||
"enabled": false,
|
||||
"priority": 9,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.045Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.045Z",
|
||||
"tags": [
|
||||
"performance",
|
||||
"optimization"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "9b34fd1f-1e8c-4112-9b64-5ce9410ec8a0",
|
||||
"name": "安全编码规范",
|
||||
"category": "skill",
|
||||
"content": "## 输入验证\n- 所有用户输入必须在服务端校验类型、长度、范围和格式\n- 使用白名单校验（允许的值），而非黑名单（禁止的值）\n- 文件上传校验：文件类型（MIME + 扩展名）、大小限制、文件内容扫描\n- URL 参数和请求体分别校验，不信任任何客户端数据\n- 使用校验库（zod / joi / class-validator）统一校验逻辑\n\n## 注入防护\n- **XSS**：输出到 HTML 时转义特殊字符，使用 CSP 策略（`Content-Security-Policy`）\n- **SQL 注入**：只使用参数化查询 / ORM，禁止字符串拼接 SQL\n- **命令注入**：禁止 `exec()` 拼接用户输入，使用 `execFile()` + 参数数组\n- **SSRF**：校验请求目标 URL，禁止访问内网地址（127.0.0.1 / 10.* / 172.16.*）\n- **路径遍历**：使用 `path.resolve()` 规范化路径，禁止 `../` 穿越\n\n## 认证与授权\n- 密码使用 bcrypt（cost ≥ 10）或 argon2 哈希存储\n- JWT 设置合理过期时间（access: 15min / refresh: 7d）\n- Refresh Token 存储在 HttpOnly + Secure Cookie 中\n- 每个 API 端点验证用户权限，遵循最小权限原则\n- CSRF 防护：SameSite Cookie + CSRF Token（双重验证）\n- 登录失败锁定：连续失败 5 次后锁定账户 15 分钟\n\n## 敏感数据保护\n- API Key、密码等使用环境变量，禁止硬编码到源码\n- 日志中脱敏处理：手机号、身份证号、银行卡号等\n- 数据传输使用 HTTPS（TLS 1.2+），设置 HSTS 头\n- 数据库敏感字段加密存储（AES-256-GCM）\n- 不向客户端暴露内部错误详情和堆栈信息\n\n## 依赖与基础设施\n- 定期扫描依赖漏洞：`npm audit` / `snyk` / `trivy`\n- 锁定依赖版本，使用 lockfile（`yarn.lock` / `package-lock.json`）\n- Docker 镜像使用最小基础镜像，非 root 用户运行\n- 设置安全响应头：`X-Content-Type-Options`、`X-Frame-Options`、`Referrer-Policy`",
|
||||
"enabled": false,
|
||||
"priority": 10,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.045Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.045Z",
|
||||
"tags": [
|
||||
"security",
|
||||
"audit"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "d5d4abc1-c2bb-4f15-af02-2f5730fe458f",
|
||||
"name": "代码重构技巧",
|
||||
"category": "skill",
|
||||
"content": "## 何时重构\n- 添加新功能前：先整理相关代码，再添加功能\n- 修复 Bug 时：顺手改善周围代码质量\n- Code Review 中：发现的坏味道及时标记和修复\n- 性能优化前：先让代码结构清晰，再做性能调优\n\n## 代码坏味道识别\n- **过长函数**：超过 20 行考虑提取为独立函数\n- **重复代码**：相同逻辑出现 3 次以上必须抽取为公共函数\n- **过深嵌套**：使用卫语句（早返回）减少嵌套层级（≤ 3 层）\n- **魔法数字**：使用命名常量（`MAX_RETRY = 3`）提高可读性\n- **过大类/文件**：单文件超过 300 行考虑拆分职责\n- **过多参数**：函数参数超过 3 个时使用对象参数\n- **特征依恋**：方法频繁访问其他类的数据，考虑搬移到那个类\n- **数据泥团**：多个参数总是一起出现，抽取为数据类\n\n## 重构手法\n- **提取方法**：将代码块提取为有意义命名的函数\n- **内联变量**：只用一次的中间变量可以内联\n- **引入解释变量**：复杂表达式赋值给有含义的变量名\n- **以多态替代条件**：switch/if-else 链改为策略模式\n- **提取接口**：依赖具体类时，抽取接口实现依赖倒置\n- **移动方法/字段**：将方法移到更合适的类中\n- **封装集合**：不暴露可变集合，提供只读视图\n\n## 重构安全网\n- 重构前先确保有测试覆盖（至少关键路径）\n- 小步修改：每次只做一个重构操作\n- 每步验证：编译通过 + 测试通过后再继续\n- 及时提交：每个完整的重构步骤单独 commit\n- 使用 IDE 重构工具（重命名、提取方法等），避免手动修改",
|
||||
"enabled": false,
|
||||
"priority": 11,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.046Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.046Z",
|
||||
"tags": [
|
||||
"refactoring",
|
||||
"clean-code"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2b68b26b-de98-4181-819a-e26f497a0d75",
|
||||
"name": "数据库设计规范",
|
||||
"category": "skill",
|
||||
"content": "## 命名规范\n- 表名：snake_case 复数形式（如 `user_orders`）\n- 字段名：snake_case（如 `created_at`）\n- 外键字段：`<关联表单数>_id`（如 `user_id`）\n- 索引名：`idx_<表名>_<字段名>`（如 `idx_orders_user_id`）\n- 唯一约束：`uk_<表名>_<字段名>`\n\n## 表设计必备字段\n- `id`：主键，自增 BIGINT 或 UUID v7（时间有序）\n- `created_at`：创建时间，`TIMESTAMP DEFAULT CURRENT_TIMESTAMP`\n- `updated_at`：更新时间，`TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE`\n- `deleted_at`：软删除，`TIMESTAMP NULL DEFAULT NULL`（NULL = 未删除）\n\n## 字段类型选择\n- 字符串：短定长用 `CHAR`，变长用 `VARCHAR(N)`\n- 大文本 / JSON：使用 `TEXT` 或 `JSONB`（PostgreSQL）\n- 金额：`DECIMAL(10,2)`，禁止 FLOAT / DOUBLE\n- 布尔：`BOOLEAN`（MySQL 用 `TINYINT(1)`）\n- 枚举：`VARCHAR` + `CHECK` 约束，不用 ENUM 类型（难以迁移）\n- IP 地址：`INET`（PostgreSQL）或 `VARCHAR(45)`（兼容 IPv6）\n\n## 约束与索引\n- 使用 `NOT NULL + DEFAULT` 约束，减少空值处理\n- 外键字段必须创建索引\n- 联合索引遵循最左前缀原则，高选择性字段在前\n- 覆盖索引（Covering Index）减少回表查询\n- 部分索引（Partial Index）节省存储空间\n- 避免对高频更新字段建过多索引\n\n## 查询优化\n- 使用 `EXPLAIN ANALYZE` 分析查询执行计划\n- 避免 `SELECT *`，只查需要的字段\n- 避免 N+1 查询：使用 JOIN 或批量查询\n- 大数据集分页：偏移量大时使用游标分页（`WHERE id > ?`）\n- 统计查询使用物化视图或预计算表\n\n## 迁移管理\n- 使用版本化脚本（Flyway / Prisma Migrate / Liquibase）\n- 每次迁移包含 `up`（执行）和 `down`（回滚）\n- 大表 DDL 使用 `pt-online-schema-change` 或分批执行\n- 数据迁移与结构迁移分开执行",
|
||||
"enabled": false,
|
||||
"priority": 12,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.046Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.046Z",
|
||||
"tags": [
|
||||
"database",
|
||||
"sql",
|
||||
"design"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "cdfbd7af-d083-406e-85a8-eda210e87b75",
|
||||
"name": "Git 协作规范",
|
||||
"category": "skill",
|
||||
"content": "## 分支策略（Git Flow）\n\n```\nmain ─────────────────────────────── 生产环境（只接受 merge）\n └── release/v1.2.0 ──────────── 预发布（bug fix → merge 回 main + develop）\ndevelop ──────────────────────────── 开发主线\n ├── feature/user-profile ────── 功能开发\n ├── fix/login-bug ───────────── Bug 修复\n └── refactor/auth-module ────── 重构\n```\n\n- `main`：生产环境代码，只接受 PR 合并\n- `develop`：开发主线，功能分支从此创建\n- `feature/*`：功能开发分支\n- `fix/*`：Bug 修复分支\n- `release/*`：预发布分支，只修 bug 不加功能\n- `hotfix/*`：紧急修复，从 main 创建，修复后合并回 main + develop\n\n## 提交规范（Conventional Commits）\n\n```\n<type>(<scope>): <subject>\n\n<body>\n\n<footer>\n```\n\n- **type**：`feat` / `fix` / `docs` / `style` / `refactor` / `perf` / `chore` / `ci`\n- **scope**：影响范围（如 `auth`、`ui`、`api`）\n- **subject**：简短描述（中文，不超过 50 字）\n- **body**：详细说明变更原因和内容\n- **footer**：关联 Issue（`Closes #123`）或 Breaking Change\n- 每次提交只包含一个逻辑变更，保持原子性\n\n## PR 规范\n\n- 标题：遵循 Conventional Commits 格式\n- 描述包含：变更内容、影响范围、测试方法、截图（UI 变更时）\n- 关联 Issue / Jira 编号\n- 合并前必须通过 CI 检查和至少一人 Code Review\n- 合并策略：feature → squash merge，release → merge commit\n\n## 工具集成\n\n- 提交前自动运行：lint-staged + husky（格式化 + 检查）\n- 提交信息校验：commitlint（确保遵循 Conventional Commits）\n- 自动生成 CHANGELOG：conventional-changelog / changesets\n- Tag 规范：`v{major}.{minor}.{patch}`，遵循 SemVer",
|
||||
"enabled": false,
|
||||
"priority": 13,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.047Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.047Z",
|
||||
"tags": [
|
||||
"git",
|
||||
"collaboration"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "59a8e6ac-13eb-4df0-9efa-27ce0fd2f192",
|
||||
"name": "论文查重与去AI化",
|
||||
"category": "skill",
|
||||
"content": "## 查重系统原理\n\n### 主流查重工具\n| 工具 | 适用场景 | 检测粒度 |\n|------|----------|----------|\n| 知网（CNKI） | 学位论文（国内高校指定） | 连续 13 字重复即标红 |\n| 万方 | 期刊投稿、初稿自查 | 连续 15 字相似判定 |\n| 维普 | 期刊投稿 | 语义级相似检测 |\n| Turnitin | 英文论文、SCI 投稿 | 短语级匹配 |\n| PaperPass | 初稿快速自查（便宜） | 句子级对比 |\n\n### 检测机制\n- **字符串匹配**：连续 N 个字与数据库重合即判定重复\n- **语义分析**：即使换词换序，语义相同仍可能标红\n- **跨语言检测**：部分系统支持中英互译检测\n- **图表 OCR**：新一代系统可识别图片中的文字\n\n## 降重实战技巧\n\n### 第一层：句式变换\n- 主动句 ↔ 被动句：「本文提出了一种方法」→「一种新的方法被提出」\n- 长句拆分：将复合句拆为 2-3 个简单句\n- 短句合并：将相关的短句整合为一个复杂句\n- 正说反说：「提高了效率」→「减少了不必要的时间消耗」\n\n### 第二层：语义改写\n- 用自己的话重新表述核心观点（读懂→合上→写出）\n- 替换为领域内的同义表达（不是简单换近义词）\n- 将定义性描述转化为功能性描述\n- 补充自己的理解和分析作为过渡\n\n### 第三层：结构重组\n- 调整论述顺序（时间顺序 → 逻辑顺序 → 重要性顺序）\n- 将文字描述转化为图表、公式、流程图\n- 将表格数据转化为文字分析\n- 增加原创性内容的比例（实验数据、案例分析）\n\n### 禁忌操作\n- ❌ 逐字替换同义词（\"因此\"→\"所以\"→\"故而\"），系统能识别\n- ❌ 在字词间插入空格或特殊字符\n- ❌ 使用图片替代文字来规避检测\n- ❌ 翻译外文文献直接使用（跨语言检测已普及）\n\n## AI 生成检测与规避\n\n### AI 文本特征（检测系统关注点）\n- **困惑度（Perplexity）过低**：AI 生成文本用词精准但缺乏\"意外性\"\n- **突发性（Burstiness）过低**：句子长度和复杂度过于均匀\n- **词汇多样性不足**：同一含义反复使用相同表达\n- **结构高度规律**：段落长度、句式结构过于一致\n- **缺乏个人痕迹**：没有口误、修辞偏好、思维跳跃\n\n### 去 AI 化策略\n\n#### 增加人类写作特征\n- 段落长短错落：有的段 3 行，有的段 8 行\n- 句式多样：陈述句为主，穿插反问、设问、感叹\n- 适当使用非常规表达（但保持学术性）\n- 加入个人研究经历的真实描述\n- 引用具体数据、日期、地点等细节\n\n#### 增加学术深度\n- 对引用观点进行批判性分析（\"该研究虽然...但未考虑...\"）\n- 加入方法论的局限性讨论\n- 对比不同学者的观点并给出自己的判断\n- 使用领域专有术语和缩写（体现专业素养）\n- 引入具体案例佐证论点\n\n#### 文风自然化\n- 避免每段都以\"首先/其次/最后\"开头\n- 减少\"值得注意的是\"、\"不可忽视的是\"等 AI 套话\n- 不同章节使用不同的论述风格（叙述/论证/描述/说明）\n- 保持与自己之前作品一致的写作风格\n- 适当使用学术领域认可的口语化表达\n\n## 文献验证流程\n\n### 必须执行的验证步骤\n1. 在 Google Scholar / 知网 / Web of Science 中搜索文献标题\n2. 核对作者姓名（全名）、发表年份\n3. 核对期刊名称 / 出版社 / 会议名称\n4. 核对卷号、期号、页码（或 DOI）\n5. 确认该期刊/会议是正规学术出版物（非掠夺性期刊）\n\n### 引用质量要求\n- 优先引用高影响因子期刊和顶级会议论文\n- 近 5 年文献占比 ≥ 50%\n- 经典文献（>10 年）仅用于奠基性理论\n- 避免过度引用同一作者或同一课题组\n- 自引比例控制在 10% 以内",
|
||||
"enabled": false,
|
||||
"priority": 14,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.048Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.048Z",
|
||||
"tags": [
|
||||
"paper",
|
||||
"plagiarism",
|
||||
"deai",
|
||||
"academic"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "c73767d4-da75-44aa-aac1-8a53cb9b2da9",
|
||||
"name": "Git 提交工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 提交前检查\n\n1. **查看变更**\n - 运行 `git diff --staged` 审查即将提交的代码\n - 确认没有遗留 `console.log` / `debugger` / `TODO` 调试代码\n - 确认没有意外包含的文件（如 .env、node_modules）\n\n2. **代码质量**\n - 运行 `yarn lint` 检查代码风格\n - 运行 `yarn typecheck` 确认类型安全\n - 运行 `yarn format` 格式化代码\n\n3. **测试**\n - 运行相关单元测试确保通过\n - 手动验证变更功能正常\n\n## 提交信息规范\n\n```\n<type>(<scope>): <subject>\n```\n\n- **type**：`feat`（功能）/ `fix`（修复）/ `docs`（文档）/ `refactor`（重构）/ `chore`（杂务）/ `perf`（性能）/ `ci`（CI）\n- **scope**：可选，影响模块名\n- **subject**：中文简述，不超过 50 字\n- 示例：`feat(auth): 添加手机号验证码登录`\n\n## 提交原则\n\n- 每次提交只包含**一个逻辑变更**\n- 提交后代码必须能编译通过\n- 大功能拆分为多个小 commit，每个可独立理解\n- 不要把格式化和逻辑变更混在同一个 commit\n\n## 分支与 PR\n\n- 分支命名：`feature/xxx`、`fix/xxx`、`refactor/xxx`\n- PR 合并前必须通过 CI 检查和至少一人 Code Review\n- PR 描述填写：变更内容、测试方法、相关 Issue",
|
||||
"enabled": false,
|
||||
"priority": 15,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.048Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.048Z",
|
||||
"tags": [
|
||||
"git",
|
||||
"workflow",
|
||||
"commit"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "85c61e9a-43b3-4434-86fc-a344d95f6fdc",
|
||||
"name": "项目初始化工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 1. 项目脚手架\n\n- 使用官方 CLI 创建项目（Vite / Create Next App / NestJS CLI 等）\n- 确认 Node.js 版本要求，添加 `.nvmrc` 或 `.node-version`\n- 选择包管理器并锁定（`.yarnrc.yml` 或 `packageManager` 字段）\n\n## 2. 目录结构\n\n```\nsrc/\n components/ # UI 组件\n composables/ # 可复用逻辑（Vue）/ hooks/（React）\n services/ # API 调用和业务服务\n stores/ # 状态管理\n types/ # TypeScript 类型定义\n utils/ # 工具函数\n assets/ # 静态资源\n```\n\n## 3. 代码质量工具\n\n- **ESLint**：代码检查（`@typescript-eslint`）\n- **Prettier**：代码格式化（`.prettierrc`）\n- **EditorConfig**：编辑器统一配置（`.editorconfig`）\n- **husky + lint-staged**：Git 钩子自动检查\n- **commitlint**：提交信息规范校验\n\n## 4. TypeScript 配置\n\n- 启用严格模式：`\"strict\": true`\n- 路径别名：`\"@/*\": [\"./src/*\"]`\n- 目标版本对齐运行环境\n\n## 5. 环境与安全\n\n- 创建 `.env.example` 模板（不含真实密钥）\n- `.gitignore` 排除：`.env`、`node_modules/`、`dist/`、IDE 文件\n- 敏感信息使用环境变量，不硬编码\n\n## 6. 文档\n\n- **README.md**：项目介绍、技术栈、启动步骤、部署说明\n- **CONTRIBUTING.md**：贡献指南（分支策略、提交规范）\n- **CHANGELOG.md**：版本变更记录\n\n## 7. CI/CD\n\n- 配置 GitHub Actions / GitLab CI 基础流水线\n- 流水线步骤：安装依赖 → lint → typecheck → test → build\n- 配置缓存（node_modules / yarn cache）加速构建",
|
||||
"enabled": false,
|
||||
"priority": 16,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.049Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.049Z",
|
||||
"tags": [
|
||||
"workflow",
|
||||
"init",
|
||||
"setup"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "247872ef-3111-4a39-a4b4-89bc534f79c5",
|
||||
"name": "发布部署工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 1. 发布准备\n\n- 从 `develop` 创建 `release/vX.Y.Z` 分支\n- 更新版本号（`package.json` / `pubspec.yaml` 等）\n- 运行完整测试套件确保通过：`yarn test`\n- 运行 lint 和类型检查：`yarn lint && yarn typecheck`\n- 确认无未提交的变更：`git status`\n\n## 2. 变更日志\n\n- 生成 CHANGELOG：`yarn changelog` 或手动整理\n- 分类变更：新功能 / Bug 修复 / 破坏性变更 / 性能优化\n- 提交 CHANGELOG 和版本号变更\n\n## 3. 构建与测试\n\n- 构建生产包：`yarn build`\n- 验证构建产物大小（对比上次发布，排查异常增长）\n- 在 staging 环境部署并验证核心功能\n- 回归测试：确认已知功能不受影响\n\n## 4. 发布\n\n- 合并 `release/vX.Y.Z` → `main`（merge commit）\n- 创建 Git Tag：`git tag -a vX.Y.Z -m \"Release vX.Y.Z\"`\n- 推送 Tag：`git push origin vX.Y.Z`\n- 合并 `release/vX.Y.Z` → `develop`（同步变更）\n- 删除 release 分支\n\n## 5. 部署生产\n\n- 部署到生产环境（CI/CD 自动触发或手动确认）\n- 健康检查：确认服务正常启动\n- 冒烟测试：验证核心 API 和页面可访问\n- 监控：观察错误率、响应时间、CPU/内存 5-10 分钟\n\n## 6. 收尾\n\n- 通知团队发布完成（Slack / 飞书 / 邮件）\n- 更新项目管理工具中的版本状态\n- 如有问题立即执行回滚：`git revert` 或重新部署上一版本\n- 在 GitHub / GitLab 创建 Release，附带 CHANGELOG",
|
||||
"enabled": false,
|
||||
"priority": 17,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.050Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.050Z",
|
||||
"tags": [
|
||||
"workflow",
|
||||
"deploy",
|
||||
"release"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "f95eddbe-3f6f-48d0-b987-4897f63ccaf4",
|
||||
"name": "代码审查工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 1. 准备阶段\n\n- 确认 PR 描述完整：变更内容、影响范围、测试方法、截图（UI 变更）\n- 关联 Issue / Jira 编号\n- 拉取分支到本地，确保能编译通过：`yarn && yarn build`\n- 了解变更背景和业务需求\n\n## 2. 结构审查\n\n- 检查文件组织是否合理，新文件放在正确的目录下\n- 是否有不属于本次变更的文件（格式化噪音、无关修改）\n- 新增依赖：是否必要？版本是否合适？是否有更轻量替代？\n- 新增依赖的 license 是否兼容项目\n\n## 3. 逻辑审查\n\n- 逐文件阅读变更，关注业务逻辑正确性\n- 检查边界条件：空值、空数组、超大数据、并发操作\n- 错误处理：异常是否捕获？错误信息是否有用？是否有空 catch？\n- 异步逻辑：是否有竞态条件？Promise 是否处理 rejection？\n- 数据流：状态变更是否一致？是否有内存泄漏？\n\n## 4. 质量审查\n\n- 命名规范：变量/函数/类是否语义清晰\n- 代码风格一致性：与项目现有代码保持统一\n- 重复代码：是否有可提取的公共逻辑\n- 函数长度 ≤ 50 行，嵌套 ≤ 3 层\n- 注释说明 why 而非 what，中文注释\n\n## 5. 安全审查\n\n- 用户输入是否在服务端校验\n- 敏感数据是否脱敏（日志、响应）\n- SQL 是否使用参数化查询\n- 文件操作是否防止路径遍历\n- 认证授权是否覆盖新增端点\n\n## 6. 测试审查\n\n- 关键逻辑是否有测试覆盖\n- 测试是否覆盖正常路径和异常路径\n- 测试是否独立，不依赖执行顺序\n\n## 7. 反馈\n\n- 问题分级：🔴 必须修复 / 🟡 建议改进 / 🟢 可选优化\n- 每条包含：位置 → 问题描述 → 修复建议（附代码示例）\n- 肯定好的代码：好的设计和实现也值得认可\n- 总结：必须修复 N 项 / 建议改进 N 项 / 可选 N 项",
|
||||
"enabled": false,
|
||||
"priority": 18,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.050Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.050Z",
|
||||
"tags": [
|
||||
"workflow",
|
||||
"review",
|
||||
"quality"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7399ff59-ec6f-4b14-8b37-3b2ccfd31cf4",
|
||||
"name": "Bug 修复工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 1. 问题确认\n\n- 阅读 Issue / Bug 报告，理解预期行为和实际行为\n- 确认复现步骤，自己手动复现一遍\n- 记录环境信息：OS、浏览器/Node 版本、相关配置\n- 确认影响范围：影响哪些用户？频率如何？是否阻塞？\n- 评估优先级：P0（立即修复）/ P1（当天）/ P2（本周）\n\n## 2. 问题定位\n\n- 阅读错误日志和堆栈信息，定位出错文件和行号\n- 使用断点调试（IDE debugger / `--inspect`）缩小范围\n- 使用二分法排查：注释代码 / `git bisect` 找到引入 commit\n- 区分**根本原因**和**表面症状**，修复根因\n- 检查最近的变更记录：`git log --oneline -20`\n\n## 3. 修复实施\n\n- 从 `develop` 创建 `fix/<问题描述>` 分支\n- **最小化修改**：只改必要的代码，不顺手重构\n- 优先修上游原因，避免下游打补丁\n- 添加防御性代码防止同类问题复发\n- 添加中文注释说明修复原因（why）\n\n## 4. 验证测试\n\n- 确认原始 Bug 已修复（按复现步骤验证）\n- 回归测试：确认修复没有引入新问题\n- 边界条件测试：空值、大数据、并发场景\n- 如可行，添加针对该 Bug 的回归测试用例\n\n## 5. 提交与发布\n\n- 提交信息：`fix(<scope>): 描述修复内容 (Closes #issue编号)`\n- 创建 PR，描述：问题原因 → 修复方案 → 验证方法\n- 请求 Code Review\n- 合并后验证线上环境\n\n## 6. 收尾\n\n- 更新 Issue 状态为已修复\n- 通知 Bug 报告者验证\n- 更新相关文档或注释\n- 如果是常见问题，补充到 FAQ 或排查指南",
|
||||
"enabled": false,
|
||||
"priority": 19,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.051Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.051Z",
|
||||
"tags": [
|
||||
"workflow",
|
||||
"bugfix",
|
||||
"debug"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "d529f06b-70f5-464b-b4ea-55619c9f154c",
|
||||
"name": "功能开发工作流",
|
||||
"category": "workflow",
|
||||
"content": "## 1. 需求理解\n\n- 阅读需求文档 / Issue，确认验收标准（AC）\n- 梳理技术方案，评估复杂度（S/M/L/XL）和影响范围\n- 与产品/设计/后端对齐理解，确认无歧义\n- 识别依赖：是否需要其他团队配合？是否有技术前置条件？\n- 确认 UI 设计稿 / 接口文档是否就绪\n\n## 2. 技术设计\n\n- 确定数据结构和接口定义（前后端类型契约）\n- 拆分子任务，估算工时，更新项目管理工具\n- 考虑兼容性（向后兼容）和扩展性\n- 数据库变更：编写 migration 脚本\n- 评估风险点，准备降级 / 回滚方案\n\n## 3. 开发实施\n\n- 从 `develop` 创建 `feature/<功能描述>` 分支\n- 小步提交，每个 commit 可独立编译运行\n- 关键逻辑添加中文注释（说明 why）\n- 添加必要的日志（关键操作、错误路径）\n- 遵循项目代码规范和架构约定\n- 前端：组件拆分 → 数据联调 → 样式完善\n- 后端：接口定义 → 业务逻辑 → 数据层 → 联调\n\n## 4. 自测验证\n\n- 覆盖正常流程和异常流程\n- 边界值测试：空值、超长输入、大数据量\n- 兼容性测试：不同浏览器 / 设备 / 分辨率\n- 权限测试：不同角色是否正确限制\n- 性能验证：大数据量下是否卡顿\n- UI 对照设计稿逐项检查\n\n## 5. 提交审查\n\n- 提交信息：`feat(<scope>): 功能描述`\n- 创建 PR，描述：功能说明 → 实现方案 → 测试方法 → 截图\n- 关联 Issue / Jira 编号\n- 请求 Code Review（至少一人）\n- 根据 Review 意见修改，re-request review\n\n## 6. 合并上线\n\n- Review 通过后 squash merge 到 `develop`\n- 清理 feature 分支\n- 在 develop 环境验证功能完整性\n- 更新 Issue 状态，通知产品验收",
|
||||
"enabled": false,
|
||||
"priority": 20,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.052Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.052Z",
|
||||
"tags": [
|
||||
"workflow",
|
||||
"feature",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "fb202abd-be57-4a05-b632-37f7f098317f",
|
||||
"name": "Vue 3 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 组件规范\n- 必须使用 Composition API + `<script setup>` 语法\n- 组件命名使用 PascalCase（如 `UserProfile.vue`）\n- 单文件组件顺序：`<script setup>` → `<template>` → `<style scoped>`\n- 单个组件文件不超过 200 行，超过则拆分子组件\n- 组件目录结构：`ComponentName/index.vue` + `ComponentName/types.ts`\n\n## Props 与事件\n- Props 必须使用 `defineProps<T>()` 定义 TypeScript 类型\n- 使用 `withDefaults()` 为 Props 设置默认值\n- 事件使用 `defineEmits<{ (e: 'update', value: string): void }>()` 定义\n- Props 命名使用 camelCase，模板中自动转为 kebab-case\n- 避免修改 Props，使用 `emit` 通知父组件变更\n\n## 响应式\n- 优先使用 `ref()` 而非 `reactive()`（避免解构丢失响应性）\n- `computed` 用于派生状态，不要在 `computed` 中产生副作用\n- `watch` 指定具体的响应式源，避免 `watch(() => state)` 监听整个对象\n- 使用 `watchEffect` 处理副作用自动追踪依赖\n- 大型列表使用 `shallowRef` 减少响应式开销\n\n## 模板规范\n- 模板中不要有复杂逻辑，抽取为 `computed` 或方法\n- 列表渲染必须提供唯一 `key`，禁止使用 index\n- 条件渲染优先 `v-if`，频繁切换使用 `v-show`\n- 事件处理器使用 `@click=\"handleClick\"`，不在模板中写逻辑\n\n## 可复用逻辑\n- 可复用逻辑抽取为 composables（`use*.ts`）\n- composable 返回值使用 `ref` 而非 `reactive`\n- composable 内部清理副作用使用 `onUnmounted`\n\n## 样式\n- 使用 `<style scoped>` 或 CSS Modules 避免样式污染\n- 优先使用 Tailwind CSS 原子类，减少自定义 CSS\n- 主题变量使用 CSS 自定义属性（`var(--color-primary)`）",
|
||||
"enabled": false,
|
||||
"priority": 21,
|
||||
"condition": {
|
||||
"filePattern": "**/*.vue"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.052Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.052Z",
|
||||
"tags": [
|
||||
"vue",
|
||||
"frontend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "a5037f2a-d24c-4cda-8aac-660f87543a2f",
|
||||
"name": "TypeScript 严格模式",
|
||||
"category": "rule",
|
||||
"content": "## 类型安全\n- 禁止使用 `any`，使用 `unknown` 替代不确定类型\n- 所有函数必须声明参数类型和返回类型\n- 使用 `interface` 定义对象结构，`type` 用于联合类型和工具类型\n- 泛型参数使用有意义的名称（如 `TData`、`TResponse`）\n- 使用 `as const` 断言确保字面量类型推断\n- 避免类型断言 `as`，优先使用类型守卫（type guard）\n\n## 语法规范\n- 使用可选链 `?.` 和空值合并 `??` 替代 `&&` 和 `||`\n- 优先使用 `const enum` 或字面量联合类型替代普通 enum\n- 使用 `readonly` 标记不应被修改的属性和数组\n- 解构赋值时添加默认值：`const { name = '默认' } = options`\n- 异步函数统一使用 `async/await`，禁止 `.then()` 链\n\n## 错误处理\n- 使用自定义错误类继承 `Error`，携带 `code` 字段\n- try/catch 中指定具体错误类型，禁止空 catch\n- Promise 必须处理 rejection（`.catch()` 或 try/catch）\n\n## 命名约定\n- 变量/函数：`camelCase`\n- 类/接口/类型：`PascalCase`\n- 常量：`UPPER_SNAKE_CASE`\n- 私有属性：前缀 `_`（如 `_internalState`）\n- 布尔变量：`is/has/should` 前缀（如 `isLoading`）",
|
||||
"enabled": false,
|
||||
"priority": 22,
|
||||
"condition": {
|
||||
"filePattern": "**/*.ts"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.053Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.053Z",
|
||||
"tags": [
|
||||
"typescript"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "50315913-6f6b-437a-8ad2-16e86164c91b",
|
||||
"name": "Flutter 开发规范",
|
||||
"category": "rule",
|
||||
"content": "## Widget 规范\n- 使用 StatelessWidget 优先，仅在需要内部可变状态时用 StatefulWidget\n- Widget 拆分遵循单一职责，避免超过 100 行的 `build` 方法\n- 使用 `const` 构造函数减少不必要的重建\n- Widget 命名使用 PascalCase，文件名使用 snake_case\n- 将大型 Widget 拆分为私有方法或独立 Widget 类\n\n## 状态管理\n- 优先级：Riverpod > BLoC > Provider > setState\n- 局部状态使用 `ValueNotifier` + `ValueListenableBuilder`\n- 全局/跨页面状态使用 Riverpod 的 `StateNotifierProvider`\n- 异步数据使用 `FutureProvider` / `StreamProvider`\n- 状态类使用 `freezed` 或 `equatable` 实现不可变和相等比较\n\n## 主题与资源\n- 颜色、字体、间距统一在 `ThemeData` 中定义\n- 使用 `Theme.of(context)` 获取主题值，不硬编码颜色\n- 支持亮色/暗色模式切换\n- 文字使用 `TextTheme` 样式，不直接设置 fontSize\n- 间距使用统一常量（如 `Spacing.sm = 8.0`）\n\n## 异步与网络\n- 异步操作使用 `async/await`，避免嵌套 `.then()`\n- 网络请求使用 Dio + 拦截器（日志、认证、错误处理）\n- 图片使用 `cached_network_image`，配置占位图和错误图\n- 接口返回统一解析为 `Result<T>` 类型（Success / Failure）\n\n## 路由与导航\n- 路由统一使用 GoRouter 或 auto_route 管理\n- 路由参数使用强类型，避免字符串传参\n- 深层链接（Deep Link）支持\n\n## 性能优化\n- 禁止在 `build` 方法内做耗时运算或 I/O\n- 长列表使用 `ListView.builder` / `SliverList`，避免一次性构建\n- 使用 `RepaintBoundary` 隔离频繁重绘的区域\n- 动画使用 `AnimatedWidget` / `AnimatedBuilder`，避免全局重建",
|
||||
"enabled": false,
|
||||
"priority": 23,
|
||||
"condition": {
|
||||
"filePattern": "**/*.dart"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.054Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.054Z",
|
||||
"tags": [
|
||||
"flutter",
|
||||
"dart",
|
||||
"mobile"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "96d4b87f-e408-43cf-84d7-8764cb7bdf6b",
|
||||
"name": "C# 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 命名规范\n- 类/接口/方法/属性：PascalCase\n- 局部变量/参数：camelCase\n- 常量/静态只读：UPPER_SNAKE_CASE 或 PascalCase\n- 接口前缀 `I`（如 `IUserService`）\n- 异步方法后缀 `Async`（如 `GetUserAsync`）\n- 布尔属性/变量：`Is/Has/Can` 前缀\n\n## 类型与数据\n- 优先使用 `record` 定义不可变数据对象（DTO / Value Object）\n- 使用 nullable 引用类型（`#nullable enable`），公共 API 参数需 null 检查\n- 值类型使用 `struct`，引用类型使用 `class`\n- 集合返回 `IReadOnlyList<T>` / `IReadOnlyCollection<T>`，避免暴露可变集合\n- 使用 `required` 关键字标记必填属性（C# 11+）\n\n## 异步与资源\n- 异步方法返回 `Task` / `Task<T>` / `ValueTask<T>`\n- 使用 `using` 声明（非语句块）管理资源\n- 传递 `CancellationToken` 到所有异步链路\n- 避免 `async void`，仅用于事件处理器\n- I/O 密集操作使用 `ConfigureAwait(false)`（类库中）\n\n## 依赖注入\n- 优先构造函数注入，避免服务定位器模式\n- 注册生命周期：Transient（无状态）/ Scoped（请求级）/ Singleton（全局）\n- 使用 `IOptions<T>` 注入配置对象\n\n## LINQ 与集合\n- LINQ 查询优先方法链形式，避免嵌套查询表达式\n- 大数据集使用 `AsNoTracking()` 提升 EF Core 查询性能\n- 使用 `Any()` 替代 `Count() > 0` 判断非空\n\n## 异常处理\n- 只 catch 能处理的异常，记录日志后重新抛出（`throw;` 保留堆栈）\n- 使用 `ExceptionFilter` / 中间件统一处理 API 异常\n- 自定义异常继承 `Exception`，携带错误码\n\n## 测试\n- 单元测试使用 xUnit + Moq / NSubstitute\n- 集成测试使用 `WebApplicationFactory<T>`\n- 遵循 Arrange-Act-Assert 模式",
|
||||
"enabled": false,
|
||||
"priority": 24,
|
||||
"condition": {
|
||||
"filePattern": "**/*.cs"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.054Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.054Z",
|
||||
"tags": [
|
||||
"csharp",
|
||||
"dotnet",
|
||||
"backend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "9cbfd964-16c8-47cf-90b3-e7ec6f6d8acc",
|
||||
"name": "Java 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 命名规范\n- 类/接口：PascalCase（如 `UserService`）\n- 方法/变量：camelCase（如 `getUserById`）\n- 常量：UPPER_SNAKE_CASE（如 `MAX_RETRY_COUNT`）\n- 包名：全小写，反向域名（如 `com.example.user`）\n- 布尔方法：`is/has/can` 前缀（如 `isValid()`）\n\n## 现代 Java 特性（17+）\n- 使用 `record` 定义不可变数据对象（DTO）\n- 使用 `sealed class` 限制继承层级\n- 使用 `pattern matching`（`instanceof` + 类型绑定）\n- 使用 `text blocks`（三引号）书写多行字符串\n- Switch 表达式使用箭头语法 + yield\n\n## 集合与 Stream\n- Stream API 用于集合操作，避免传统 for 循环处理集合\n- 使用 `Optional<T>` 替代 null 返回值，禁止 `Optional` 作为方法参数\n- 不可变集合：`List.of()` / `Map.of()` / `Set.of()`\n- 避免在 Stream 中产生副作用（如修改外部变量）\n\n## Spring Boot 架构\n- Controller 只处理 HTTP 映射和参数校验（`@Valid`）\n- 业务逻辑下沉到 Service 层\n- 数据访问使用 JPA Repository 或 MyBatis Mapper，禁止 SQL 拼接\n- 使用 `@Transactional` 管理事务，注意传播行为和回滚规则\n- 配置使用 `@ConfigurationProperties` 绑定，不硬编码\n\n## 异常与日志\n- 异常统一使用 `@ControllerAdvice` + `@ExceptionHandler` 处理\n- 返回标准 `ApiResponse<T>` 格式（code + message + data）\n- 日志使用 SLF4J + Logback，禁止 `System.out.println`\n- 日志级别：ERROR（系统错误）/ WARN（业务异常）/ INFO（关键操作）/ DEBUG（调试）\n- 日志包含上下文信息：用户 ID、请求 ID、耗时\n\n## 测试\n- 单元测试：JUnit 5 + Mockito，覆盖率 > 80%\n- 集成测试：`@SpringBootTest` + `@TestContainers`\n- API 测试：`MockMvc` 或 RestAssured",
|
||||
"enabled": false,
|
||||
"priority": 25,
|
||||
"condition": {
|
||||
"filePattern": "**/*.java"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.056Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.056Z",
|
||||
"tags": [
|
||||
"java",
|
||||
"backend",
|
||||
"spring"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "453a2917-9f20-4296-bb65-251caef36bd5",
|
||||
"name": "React 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 组件规范\n- 函数组件 + Hooks，禁止使用 Class 组件\n- 组件命名 PascalCase，文件名与组件名一致（如 `UserCard.tsx`）\n- Props 使用 TypeScript `interface` 定义，必须标注类型\n- 使用 `React.FC<Props>` 或直接函数签名声明组件\n- 单个组件文件不超过 200 行，超过则拆分\n\n## 状态管理\n- 局部状态：`useState`\n- 计算状态：`useMemo`\n- 跨组件共享：Context + `useContext` 或 Zustand / Jotai\n- 服务端数据：TanStack Query（React Query）管理请求缓存\n- 避免 prop drilling 超过 3 层，使用 Context 或状态库\n\n## Hooks 规范\n- 自定义 Hook 以 `use` 开头，封装可复用逻辑\n- `useEffect` 依赖数组必须完整，配合 ESLint exhaustive-deps 规则\n- `useCallback` 包裹传给子组件的回调函数\n- `useMemo` 缓存昂贵计算，但不要滥用（简单计算无需缓存）\n- cleanup 函数处理订阅、定时器、AbortController\n\n## 渲染优化\n- 使用 `React.memo()` 避免不必要的子组件重渲染\n- 列表渲染必须提供稳定的 key（业务 ID），禁止使用 index\n- 条件渲染优先使用 `&&` 或三元表达式，避免嵌套 if\n- 大列表使用虚拟滚动（`@tanstack/react-virtual`）\n- 代码分割：`React.lazy()` + `Suspense` 懒加载路由和大组件\n\n## 样式\n- 样式方案：Tailwind CSS 或 CSS Modules，避免内联样式\n- 使用 `clsx` / `cn()` 工具合并条件类名\n- 响应式设计使用 Tailwind 断点前缀（`md:`、`lg:`）\n\n## 错误处理\n- 使用 `ErrorBoundary` 捕获渲染错误，提供 fallback UI\n- 异步操作统一 try/catch，用户友好的错误提示",
|
||||
"enabled": false,
|
||||
"priority": 26,
|
||||
"condition": {
|
||||
"filePattern": "**/*.tsx"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.057Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.057Z",
|
||||
"tags": [
|
||||
"react",
|
||||
"frontend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1408abee-6a38-4f57-929d-a4f3438a85ef",
|
||||
"name": "Python 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 代码风格\n- 遵循 PEP 8 风格指南，使用 `black` + `isort` 格式化\n- 类名 PascalCase，函数/变量 snake_case，常量 UPPER_SNAKE_CASE\n- 模块级常量定义在文件顶部（导入之后）\n- 单行不超过 88 字符（black 默认）\n- 使用 `ruff` 作为 linter（替代 flake8 + pylint）\n\n## 类型标注\n- 使用 Type Hints 标注所有函数参数和返回值\n- 复杂类型使用 `typing` 模块（`Optional`、`Union`、`TypeAlias`）\n- Python 3.10+ 使用 `X | Y` 语法替代 `Union[X, Y]`\n- 使用 `mypy --strict` 进行静态类型检查\n- 泛型类使用 `TypeVar` 或 `Generic[T]`\n\n## 数据模型\n- 使用 `dataclass`（内部数据）或 `Pydantic BaseModel`（API 数据校验）\n- Pydantic 模型使用 `Field()` 添加校验规则和描述\n- 不可变数据使用 `frozen=True` 的 dataclass\n\n## 异步与并发\n- I/O 密集操作使用 `asyncio` + `async/await`\n- CPU 密集操作使用 `concurrent.futures.ProcessPoolExecutor`\n- 异步 HTTP 使用 `httpx` / `aiohttp`\n- 异步数据库使用 `SQLAlchemy 2.0` async 模式\n\n## 错误处理与资源\n- 使用 `with` 语句管理文件、连接等资源\n- 异常处理指定具体异常类型，禁止 bare `except:`\n- 自定义异常继承 `Exception`，携带错误码\n- 使用 `logging` 模块记录日志，禁止 `print()` 调试\n\n## 项目管理\n- 使用 `pyproject.toml` 管理项目配置和依赖\n- 虚拟环境：`venv` / `poetry` / `uv`\n- 依赖锁定：`poetry.lock` / `requirements.txt` 固定版本\n- 使用 `pytest` 编写测试，`pytest-cov` 检查覆盖率 > 80%\n- 使用 `pre-commit` 钩子自动检查代码质量",
|
||||
"enabled": false,
|
||||
"priority": 27,
|
||||
"condition": {
|
||||
"filePattern": "**/*.py"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.057Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.057Z",
|
||||
"tags": [
|
||||
"python",
|
||||
"backend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4444ab5b-9df7-417c-94ba-d93cf189aad9",
|
||||
"name": "Go 编码规范",
|
||||
"category": "rule",
|
||||
"content": "## 命名规范\n- 包名小写单词，不使用下划线或混合大小写\n- 导出标识符 PascalCase，内部标识符 camelCase\n- 接口命名：单方法接口用 `-er` 后缀（如 `Reader`、`Writer`）\n- 文件名 snake_case（如 `user_service.go`）\n- 测试文件 `*_test.go`，与被测文件同目录\n\n## 错误处理\n- 每个 `error` 必须检查，禁止 `_ = err` 忽略\n- 使用 `errors.Is()` / `errors.As()` 替代 `==` 比较错误\n- 使用 `fmt.Errorf(\"描述: %w\", err)` 包装错误（保留链路）\n- 自定义错误类型实现 `Error()` 接口\n- 在函数签名中，error 永远是最后一个返回值\n- 使用 sentinel error（包级变量）定义可预期的错误\n\n## 并发与 goroutine\n- goroutine 必须有退出机制，使用 `context.Context` 控制生命周期\n- channel 使用完毕必须 `close`，避免 goroutine 泄漏\n- 使用 `sync.WaitGroup` 等待一组 goroutine 完成\n- 使用 `sync.Mutex` / `sync.RWMutex` 保护共享数据\n- 优先使用 channel 通信，而非共享内存\n- 使用 `errgroup.Group` 管理一组可能出错的 goroutine\n\n## 接口设计\n- 接口小而精：通常 1-3 个方法，由使用方定义\n- 接受接口，返回结构体（依赖倒置）\n- 使用组合（embedding）而非继承\n\n## 资源管理\n- 使用 `defer` 确保资源释放（文件、锁、连接）\n- `defer` 按 LIFO 顺序执行，注意多个 defer 的顺序\n- HTTP Response Body 必须 `defer resp.Body.Close()`\n\n## 项目结构\n- 遵循 Standard Go Project Layout\n- `cmd/`（入口）、`internal/`（私有）、`pkg/`（公共库）\n- 结构体字段使用 `json` tag 标注序列化名称\n- 配置使用 `viper` 或环境变量，不硬编码\n\n## 工具链\n- 使用 `go vet` + `golangci-lint` 进行静态分析\n- 使用 `go test -race` 检测数据竞争\n- 使用 `pprof` 进行性能分析\n- 使用 `go mod tidy` 清理无用依赖",
|
||||
"enabled": false,
|
||||
"priority": 28,
|
||||
"condition": {
|
||||
"filePattern": "**/*.go"
|
||||
},
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.058Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.058Z",
|
||||
"tags": [
|
||||
"golang",
|
||||
"backend"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "b95e4669-c66a-4c74-ae98-e6ed85f661ad",
|
||||
"name": "输出语言为中文",
|
||||
"category": "rule",
|
||||
"content": "## 语言要求\n\n<language_rules>\n- **全程使用中文**回答所有问题，包括思考过程、解释说明、代码注释\n- 变量名、函数名、类名等**标识符保持英文**（遵循编程命名规范）\n- 代码注释必须使用中文书写\n- Git 提交信息使用中文描述\n- 文档和 README 使用中文编写\n- 错误提示和用户提示信息使用中文\n</language_rules>\n\n## 格式规范\n\n<format_rules>\n- 中英文之间添加空格（如：使用 Vue 3 框架）\n- 数字与中文之间添加空格（如：共 3 个文件）\n- 专业术语首次出现时标注英文原文（如：组合式 API (Composition API)）\n- 代码块中的输出示例使用中文\n- 表格、列表等结构化内容使用中文标题\n</format_rules>\n\n## 禁止行为\n\n- ❌ 禁止使用英文回答问题\n- ❌ 禁止在注释中混用英文（专业术语除外）\n- ❌ 禁止在解释说明中突然切换为英文",
|
||||
"enabled": false,
|
||||
"priority": 29,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.059Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.059Z",
|
||||
"tags": [
|
||||
"language",
|
||||
"chinese",
|
||||
"i18n"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "a7cfaab2-9a81-42f0-9271-9881f1234d6d",
|
||||
"name": "学术论文写作规范",
|
||||
"category": "rule",
|
||||
"content": "## 格式要求\n\n### 论文结构\n- 标题 → 摘要 → 关键词 → 引言 → 文献综述 → 研究方法 → 结果分析 → 讨论 → 结论 → 参考文献 → 附录\n- 每个章节之间逻辑衔接自然，使用过渡句连接上下文\n- 摘要 300-500 字，包含研究目的、方法、主要发现和结论\n- 关键词 3-5 个，涵盖研究核心概念\n\n### 排版规范\n- 正文：宋体/Times New Roman，小四号（12pt），1.5 倍行距\n- 标题层级：一级标题黑体三号 → 二级标题黑体四号 → 三级标题黑体小四号\n- 段落首行缩进 2 字符，段前段后 0.5 行\n- 页边距：上 2.54cm / 下 2.54cm / 左 3.17cm / 右 3.17cm\n- 页码从正文开始，居中显示\n- 图表统一编号（如图 1、表 2），标题居中，图标题在下、表标题在上\n- 公式居中，编号右对齐\n\n## 查重规范\n\n### 重复率要求\n- 本科毕业论文：总重复率 ≤ 30%（部分院校要求 ≤ 20%）\n- 硕士学位论文：总重复率 ≤ 15%\n- 博士学位论文：总重复率 ≤ 10%\n- 期刊投稿：总重复率 ≤ 15%（核心期刊 ≤ 10%）\n\n### 降重技巧\n- **语序调整**：主动句与被动句互换，调整句子成分顺序\n- **同义替换**：使用同义词、近义词替换，但不改变原意\n- **概括改写**：将具体描述概括为抽象表述，用自己的话重新组织\n- **拆分合并**：长句拆为短句，或将短句合并为复合句\n- **增加论述**：在引用观点后加入自己的分析、评价和延伸\n- ❌ 禁止简单替换个别字词（如\"因此\"→\"所以\"），查重系统能识别\n- ❌ 禁止使用翻译法（中→英→中），表述生硬且可能曲解原意\n\n## 去 AI 化规范\n\n### 必须遵守\n- ❌ 禁止出现典型 AI 生成痕迹：\n - \"首先...其次...最后...\"的机械排列\n - \"值得注意的是\"、\"需要指出的是\"等套话高频出现\n - \"综上所述\"在非结论部分反复使用\n - 每段开头都用\"在...方面\"、\"从...角度\"的模板句式\n - 过度使用\"本文\"、\"本研究\"作为主语\n- ✅ 使用自然、多样的表达方式：\n - 变换句式结构：陈述句、反问句、设问句交替使用\n - 融入个人研究视角和独立思考\n - 使用领域专业术语，体现学科素养\n - 段落长短错落有致，避免每段字数雷同\n - 适当使用口语化学术表达（如\"不难发现\"、\"换言之\"）\n\n### AI 检测规避\n- 保持个人写作风格一致性（用词习惯、句式偏好）\n- 加入具体案例、数据、图表等实证内容（AI 难以伪造）\n- 融入对研究过程的真实描述（实验细节、调研经历）\n- 对他人观点进行批判性分析，而非简单罗列\n- 论文不同部分的文风应与内容匹配（引言偏叙述、方法偏客观、讨论偏思辨）\n\n## 文献引用规范\n\n### 文献真实性（最高优先级）\n- ⚠️ **所有引用的文献必须真实存在，可通过学术数据库检索到**\n- 引用前必须验证：作者、标题、期刊/出版社、年份、卷期页码均准确\n- 推荐验证渠道：Google Scholar、知网（CNKI）、万方、Web of Science、Scopus\n- ❌ 严禁编造虚假文献（捏造作者、杜撰期刊、伪造年份）\n- ❌ 严禁引用未读过的文献（二手引用需标注\"转引自\"）\n- 如无法找到原始文献，宁可删除引用也不要凭记忆补全信息\n\n### 引用格式\n- 中文论文：GB/T 7714 格式（如：[1] 张三. 标题[J]. 期刊名, 2024, 1(2): 10-20.）\n- 英文论文：APA 7th / IEEE / MLA 格式（根据目标期刊要求选择）\n- 正文引用与参考文献列表一一对应，不多不少\n- 引用数量建议：本科 15-30 篇，硕士 40-80 篇，博士 80-150 篇\n- 近 5 年文献占比 ≥ 50%，体现研究前沿性\n- 中英文文献比例合理（理工科英文 ≥ 60%）\n\n## 上下文连贯性\n\n### 全文一致性\n- 研究问题、方法、结果、结论之间逻辑链条完整\n- 摘要中的结论必须与正文结论一致\n- 引言提出的问题必须在结论中回应\n- 文献综述的内容必须与研究方法选择相关\n- 术语全文统一：同一概念不要交替使用不同名称\n\n### 段落衔接\n- 每段有明确的主题句（通常在段首）\n- 段与段之间使用过渡句或过渡词连接\n- 常用过渡逻辑：因果（因此）、转折（然而）、递进（此外）、对比（相比之下）\n- 避免突然跳转话题，新观点需有铺垫\n- 每章末尾可加小结，呼应章首并过渡到下一章\n\n### 语言风格一致\n- 全文保持同一人称视角（推荐第三人称或\"本文\"）\n- 时态一致：文献综述用过去时，研究方法用过去时，结论用现在时\n- 学术语体一致：不在严谨论述中突然出现口语化表达\n- 专业术语首次出现时给出定义或英文原文",
|
||||
"enabled": false,
|
||||
"priority": 30,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.060Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.060Z",
|
||||
"tags": [
|
||||
"paper",
|
||||
"academic",
|
||||
"writing"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1fd5afcb-4b5a-4f68-9ff0-6e29f1079861",
|
||||
"name": "代码审查规范",
|
||||
"category": "context",
|
||||
"content": "## 代码结构\n- 函数长度不超过 50 行，文件不超过 300 行\n- 嵌套不超过 3 层，使用早返回（guard clause）减少嵌套\n- 单一职责：每个函数/类只做一件事\n- 避免上帝类（God Class）和上帝函数\n\n## 命名规范\n- 变量/函数：camelCase（如 `getUserById`）\n- 类/接口/类型：PascalCase（如 `UserService`）\n- 常量：UPPER_SNAKE_CASE（如 `MAX_RETRY_COUNT`）\n- 布尔变量：`is/has/should/can` 前缀\n- 命名必须语义清晰，禁止单字母变量（循环计数器除外）\n\n## 代码质量\n- 避免魔法数字，使用命名常量\n- 不要吞掉异常（空 catch），至少记录日志\n- 不要注释掉代码，直接删除（Git 有历史记录）\n- 注释说明 why 而非 what，使用中文注释\n- 删除未使用的导入、变量和代码（dead code）\n\n## 错误处理\n- 异常必须处理：捕获后记录日志或向上抛出\n- 使用自定义错误类型，携带错误码\n- 异步操作必须有超时和错误处理\n- 用户可见的错误信息使用中文，友好且有指导性\n\n## 安全检查\n- 用户输入必须校验（类型、长度、范围、格式）\n- SQL 使用参数化查询，禁止拼接\n- 敏感数据不在日志中输出",
|
||||
"enabled": false,
|
||||
"priority": 31,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.061Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.061Z",
|
||||
"tags": [
|
||||
"review",
|
||||
"quality"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1206fbaf-b42e-4a26-a09d-9959958bf4bd",
|
||||
"name": "项目概述上下文",
|
||||
"category": "context",
|
||||
"content": "## 项目信息\n- **项目名称**：[填写项目名称]\n- **项目类型**：[Web 应用 / 桌面应用 / 移动应用 / 后端服务 / CLI 工具 / 浏览器扩展]\n- **主要语言**：[TypeScript / Python / Java / Go / C# / Dart / Rust]\n- **框架**：[Vue 3 / React / NestJS / Spring Boot / Flutter / Electron]\n- **包管理器**：[yarn / pnpm / npm / pip / gradle / cargo]\n- **Node.js 版本**：[18 LTS / 20 LTS / 22]\n\n## 目录结构\n```\nsrc/\n components/ # UI 组件\n composables/ # 可复用逻辑（Vue）/ hooks/（React）\n services/ # API 调用和业务服务\n stores/ # 状态管理（Pinia / Zustand）\n types/ # TypeScript 类型定义\n utils/ # 工具函数\n assets/ # 静态资源（图片、字体、样式）\n router/ # 路由配置\n i18n/ # 国际化文件\npublic/ # 公共静态文件\n```\n\n## 开发约定\n- **代码风格**：ESLint + Prettier，提交前自动格式化\n- **分支策略**：Git Flow（main / develop / feature / fix / release）\n- **提交规范**：Conventional Commits（feat / fix / docs / refactor）\n- **部署方式**：[Docker / Vercel / Nginx / PM2]\n- **CI/CD**：[GitHub Actions / GitLab CI / Jenkins]\n\n## 关键依赖\n| 依赖 | 版本 | 用途 |\n|------|------|------|\n| [框架名] | ^x.y.z | [用途] |\n| [UI 库] | ^x.y.z | [用途] |\n| [状态管理] | ^x.y.z | [用途] |\n\n## 环境变量\n| 变量名 | 说明 | 示例 |\n|--------|------|------|\n| `VITE_API_URL` | API 地址 | `http://localhost:3000` |\n| `DATABASE_URL` | 数据库连接 | `postgresql://...` |\n\n## 注意事项\n- [填写项目特殊约定、已知限制、技术债务等]",
|
||||
"enabled": false,
|
||||
"priority": 32,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.062Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.062Z",
|
||||
"tags": [
|
||||
"context",
|
||||
"project",
|
||||
"overview"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ea669443-8bff-440a-b3a1-bae37f276f95",
|
||||
"name": "调试排错上下文",
|
||||
"category": "context",
|
||||
"content": "## 调试原则\n- 先复现问题，记录复现步骤和环境信息\n- 从错误日志和堆栈信息入手，定位出错位置\n- 使用二分法缩小问题范围（注释代码 / `git bisect`）\n- 区分根本原因和表面症状，修复根因\n- 一次只改一个变量，验证后再改下一个\n- 不要猜测，用数据和日志证明假设\n\n## 常见问题排查清单\n\n### 编译 / 构建错误\n- 类型定义缺失或不匹配\n- 导入路径错误（相对路径 / 别名配置）\n- 依赖版本冲突（`yarn why <package>`）\n- tsconfig 配置问题（`moduleResolution`、`paths`）\n\n### 运行时错误\n- 空值访问：`TypeError: Cannot read property of undefined`\n- 异步时序：Promise 未 await、竞态条件\n- 数组越界 / 对象属性不存在\n- 循环引用导致栈溢出\n- 类型不匹配：字符串 vs 数字、JSON 解析失败\n\n### 样式问题\n- 选择器优先级：Specificity 计算、`!important` 覆盖\n- z-index 层级混乱：建立统一的 z-index 层级体系\n- Flex / Grid 布局：`flex-shrink`、`overflow`、`min-width: 0`\n- 响应式断点：移动端 viewport、媒体查询顺序\n\n### 性能问题\n- 前端：N 次不必要的重渲染（React DevTools Profiler）\n- 后端：N+1 查询（ORM 日志）、慢查询（`EXPLAIN ANALYZE`）\n- 内存泄漏：事件监听未清理、闭包引用大对象\n- 网络：请求瀑布流、缺少缓存策略\n\n### 网络问题\n- CORS：`Access-Control-Allow-Origin` 配置\n- 请求格式：`Content-Type` 不匹配\n- 认证：Token 过期 / 缺失、Cookie SameSite 策略\n- 超时：设置合理的 timeout 值、重试机制\n\n## 调试工具\n\n| 场景 | 工具 | 用途 |\n|------|------|------|\n| 前端 | Chrome DevTools | Network / Console / Performance / Memory |\n| 前端 | React / Vue DevTools | 组件树、状态、渲染次数 |\n| Node.js | `--inspect` | 断点调试（配合 Chrome DevTools） |\n| Node.js | `clinic.js` | 性能分析（CPU / 内存 / 事件循环） |\n| 数据库 | `EXPLAIN ANALYZE` | 查询执行计划分析 |\n| 网络 | Postman / cURL | API 请求调试 |\n| 日志 | `console.time()` | 简单计时 |\n\n## 日志调试技巧\n- 使用结构化日志：`console.log({ userId, action, result })`\n- 在关键分支添加标记日志：`[DEBUG] 进入分支 A`\n- 调试完毕后清理所有调试日志（或使用 DEBUG 环境变量控制）",
|
||||
"enabled": false,
|
||||
"priority": 33,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.063Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.063Z",
|
||||
"tags": [
|
||||
"context",
|
||||
"debug",
|
||||
"troubleshoot"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "466b5c8c-6112-4115-b270-04fc04ad9e6b",
|
||||
"name": "架构设计上下文",
|
||||
"category": "context",
|
||||
"content": "## SOLID 原则\n- **单一职责（SRP）**：每个模块/类只负责一件事\n- **开闭原则（OCP）**：对扩展开放，对修改关闭（策略模式、插件机制）\n- **里氏替换（LSP）**：子类可以替换父类而不破坏行为\n- **接口隔离（ISP）**：客户端不应被迫依赖不使用的接口\n- **依赖倒置（DIP）**：高层模块依赖抽象，不依赖具体实现\n\n## 分层架构\n\n```\n┌──────────────────┐\n│ 表现层 │ ← UI 组件、页面路由、用户交互\n│ (Presentation) │ Vue/React 组件、模板、样式\n├──────────────────┤\n│ 业务逻辑层 │ ← Service、Store、Composable/Hook\n│ (Business) │ 业务规则、数据转换、状态管理\n├──────────────────┤\n│ 数据访问层 │ ← Repository、API Client、ORM\n│ (Data Access) │ 接口调用、数据库操作、缓存\n├──────────────────┤\n│ 基础设施层 │ ← 数据库、缓存、消息队列、文件存储\n│ (Infrastructure)│ 第三方服务、系统配置\n└──────────────────┘\n```\n\n- 上层只依赖下层，禁止跨层调用和反向依赖\n- 每层通过接口（Interface）暴露能力，隐藏实现细节\n\n## 常用设计模式\n- **策略模式**：多种算法/行为可切换（如支付方式、认证方式）\n- **观察者模式**：事件驱动解耦（EventEmitter、Vue 的 watch）\n- **工厂模式**：根据条件创建不同实例\n- **适配器模式**：统一不同第三方服务的接口\n- **装饰器模式**：横切关注点（日志、缓存、权限检查）\n- **仓储模式**：抽象数据访问，隔离业务逻辑和存储细节\n\n## 设计决策记录（ADR）\n\n```markdown\n### ADR-001: [决策标题]\n- **状态**：已采纳 / 待评审 / 已废弃\n- **背景**：为什么需要这个决策\n- **决策**：选择了什么方案\n- **替代方案**：考虑过哪些其他方案\n- **后果**：这个决策带来的正面和负面影响\n```\n\n## 扩展性考量\n- 模块化：功能按领域拆分为独立模块\n- 插件化：核心功能之外的能力通过插件扩展\n- 配置驱动：行为差异通过配置而非代码分支控制\n- 向后兼容：API 变更使用版本化，数据迁移支持回滚",
|
||||
"enabled": false,
|
||||
"priority": 34,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.064Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.064Z",
|
||||
"tags": [
|
||||
"context",
|
||||
"architecture",
|
||||
"design"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "5cc7c806-8b9e-4af6-a121-abff99696b85",
|
||||
"name": "技术栈上下文",
|
||||
"category": "context",
|
||||
"content": "## 前端技术栈\n\n| 分类 | 技术 | 版本 | 说明 |\n|------|------|------|------|\n| 框架 | Vue 3 / React 19 | latest | Composition API / Hooks |\n| 语言 | TypeScript | ^5.x | 严格模式 |\n| 构建 | Vite | ^5.x / ^6.x | 开发服务器 + 生产构建 |\n| UI 库 | Ant Design Vue / shadcn/ui | latest | 主要组件库 |\n| 样式 | Tailwind CSS | ^3.x / ^4.x | 原子化 CSS |\n| 状态 | Pinia / Zustand | latest | 全局状态管理 |\n| 路由 | Vue Router / React Router | latest | SPA 路由 |\n| HTTP | Axios / ky / fetch | latest | API 请求 |\n| 图标 | Lucide Icons | latest | SVG 图标库 |\n| 表格 | VXE-Table / TanStack Table | latest | 高性能表格 |\n| 表单 | VeeValidate / React Hook Form | latest | 表单校验 |\n| 国际化 | vue-i18n / react-intl | latest | 多语言 |\n| 图表 | ECharts / D3.js | latest | 数据可视化 |\n\n## 后端技术栈\n\n| 分类 | 技术 | 版本 | 说明 |\n|------|------|------|------|\n| 运行时 | Node.js | 20 LTS / 22 | 服务端 JavaScript |\n| 框架 | Express / NestJS / Fastify | latest | Web 框架 |\n| 数据库 | PostgreSQL | 16 | 主数据库 |\n| 缓存 | Redis | 7 | 缓存 + 会话 + 消息队列 |\n| ORM | Prisma / TypeORM / Drizzle | latest | 数据库操作 |\n| 认证 | JWT + bcrypt / Passport | latest | 认证授权 |\n| 校验 | zod / class-validator | latest | 入参校验 |\n| 日志 | Winston / Pino | latest | 结构化日志 |\n| 队列 | BullMQ / RabbitMQ | latest | 异步任务 |\n\n## 工具链\n\n| 分类 | 技术 | 说明 |\n|------|------|------|\n| 包管理 | Yarn / pnpm | 依赖管理 |\n| 代码风格 | ESLint + Prettier | 检查 + 格式化 |\n| Git 钩子 | husky + lint-staged | 提交前检查 |\n| 提交规范 | commitlint | Conventional Commits |\n| 版本控制 | Git | 源码管理 |\n| CI/CD | GitHub Actions / GitLab CI | 自动化流水线 |\n| 容器化 | Docker + docker-compose | 开发 + 部署 |\n| 部署 | Nginx / Caddy | 反向代理 + 静态托管 |\n| 监控 | Prometheus + Grafana | 性能监控 |\n| E2E 测试 | Playwright | 端到端自动化测试 |",
|
||||
"enabled": false,
|
||||
"priority": 35,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.065Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.065Z",
|
||||
"tags": [
|
||||
"context",
|
||||
"tech-stack",
|
||||
"environment"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "377a1437-4ea5-48c5-a5b7-d1eaa1e8e293",
|
||||
"name": "论文写作上下文",
|
||||
"category": "context",
|
||||
"content": "## 当前论文信息\n\n- **论文题目**：[填写题目]\n- **论文类型**：[本科毕业论文 / 硕士学位论文 / 博士学位论文 / 期刊论文 / 会议论文]\n- **所属学科**：[填写学科方向]\n- **目标期刊/学校**：[填写期刊名称或学校名称]\n- **字数要求**：[填写字数]\n- **查重要求**：[填写重复率上限，如 ≤ 20%]\n- **引用格式**：[GB/T 7714 / APA / IEEE / MLA]\n- **截止日期**：[填写日期]\n\n## 研究核心\n\n- **研究问题**：[核心研究问题是什么]\n- **研究假设**：[填写研究假设]\n- **研究方法**：[定性 / 定量 / 混合方法；实验 / 调查 / 案例分析等]\n- **核心论点**：[本文的中心论点]\n- **主要贡献**：[理论贡献 / 实践价值 / 创新点]\n\n## 章节进度\n\n| 章节 | 状态 | 字数 | 备注 |\n|------|------|------|------|\n| 摘要（中文） | [未开始/进行中/已完成] | | |\n| 摘要（英文） | [未开始/进行中/已完成] | | |\n| 第一章 引言 | [未开始/进行中/已完成] | | |\n| 第二章 文献综述 | [未开始/进行中/已完成] | | |\n| 第三章 研究方法 | [未开始/进行中/已完成] | | |\n| 第四章 结果分析 | [未开始/进行中/已完成] | | |\n| 第五章 讨论 | [未开始/进行中/已完成] | | |\n| 第六章 结论 | [未开始/进行中/已完成] | | |\n| 参考文献 | [未开始/进行中/已完成] | | |\n\n## 核心术语表\n\n> 保持全文术语统一，同一概念只用一个名称\n\n| 中文术语 | 英文术语 | 首次定义位置 | 说明 |\n|----------|----------|-------------|------|\n| [填写] | [填写] | 第X章 | [填写定义] |\n\n## 关键文献清单\n\n> 已核实真实存在的核心参考文献（写作前必须完成验证）\n\n| 序号 | 作者 | 标题 | 来源 | 年份 | 验证状态 |\n|------|------|------|------|------|----------|\n| 1 | [填写] | [填写] | [期刊/出版社] | [年份] | ✅已验证 |\n\n## 写作约束\n\n### 本论文特殊要求\n- [填写导师或目标期刊的特殊格式要求]\n- [填写禁止引用的文献范围，如：不引用非正式网络资源]\n- [填写特殊术语使用规范]\n\n### AI 辅助边界\n- ✅ 允许：润色语言表达、检查语法错误、格式排版建议\n- ✅ 允许：提供相关文献检索方向（但必须自行验证真实性）\n- ✅ 允许：提供论述思路和结构框架\n- ❌ 禁止：直接生成正文段落作为最终内容\n- ❌ 禁止：生成参考文献（必须自己查找并验证）\n- ❌ 禁止：编造实验数据、调研结果、案例信息\n\n## 上下文一致性检查清单\n\n在每次续写或修改前确认：\n\n- [ ] 当前写作的章节与研究问题保持关联\n- [ ] 使用的术语与术语表保持一致\n- [ ] 引用的文献均在关键文献清单中且已验证\n- [ ] 本段内容与上一段有逻辑衔接\n- [ ] 数据/结论与前文描述不矛盾\n- [ ] 写作风格与全文保持一致",
|
||||
"enabled": false,
|
||||
"priority": 36,
|
||||
"metadata": {
|
||||
"author": "user",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "2026-05-22T00:30:43.066Z",
|
||||
"updatedAt": "2026-05-22T00:30:43.066Z",
|
||||
"tags": [
|
||||
"context",
|
||||
"paper",
|
||||
"academic",
|
||||
"writing"
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"profiles": [
|
||||
{
|
||||
"id": "default",
|
||||
"name": "默认",
|
||||
"description": "默认配置集",
|
||||
"ruleIds": [],
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
# 最高优先级规则 - 必须严格遵守（Cursor 专用）
|
||||
|
||||
⚠️⚠️⚠️ 每次回复结束前必须执行以下命令！没有任何例外！⚠️⚠️⚠️
|
||||
|
||||
## 执行规则
|
||||
|
||||
1. 完成任务后，执行弹窗命令（跨平台，Windows/Mac/Linux 通用）：
|
||||
node "/Users/freedak/.ranjin-mode/dialog-trigger.js" "cursor" "z07fz4" "AI想要结束的原因摘要"
|
||||
|
||||
📱 **手机端通知**：执行此命令时会自动通知手机端（如果远程服务已开启），用户可以在手机上查看消息并发送反馈。
|
||||
|
||||
2. 仔细阅读命令输出的每一行：
|
||||
- ACTION: continue 或 end（用户的选择）
|
||||
- FEEDBACK: 用户输入的具体指令或反馈内容（⚠️ 必须完整阅读并执行！）
|
||||
* 反馈可能来自电脑端弹窗或手机端远程输入
|
||||
- IMAGES: 用户上传的图片路径（如有，必须用read_file工具查看）
|
||||
|
||||
3. 根据输出决定下一步：
|
||||
- 如果 ACTION 是 "continue"：
|
||||
* ⚠️ 必须仔细阅读 FEEDBACK 后面的全部内容
|
||||
* ⚠️ 必须按照 FEEDBACK 中用户的具体指令执行任务
|
||||
* ⚠️ 不要忽略 FEEDBACK，不要只说"用户选择继续"
|
||||
- 如果 ACTION 是 "end" 或 "stop"：停止工作
|
||||
- ⚠️ 如果命令被取消/跳过/无输出：必须重新执行弹窗命令！
|
||||
|
||||
## 核心规则
|
||||
|
||||
1. 完整输出 - 输出完整代码和答案，禁止省略
|
||||
2. 持续执行 - 复杂任务一次性完成
|
||||
3. 结束确认 - 必须执行弹窗命令后才能结束
|
||||
4. FEEDBACK必读 - 用户的FEEDBACK是新的任务指令，必须执行
|
||||
|
||||
## 手机端远程功能
|
||||
|
||||
- 📱 当执行 dialog-trigger.js 命令时，会自动通知手机端（如果远程服务已开启）
|
||||
- 📱 用户可以在手机浏览器中查看 AI 的消息和状态
|
||||
- 📱 用户可以在手机上输入反馈，反馈会通过 FEEDBACK 字段传递给你
|
||||
- 📱 手机端和电脑端弹窗功能完全同步，支持双向通信
|
||||
|
||||
## ⚠️ 唯一合法的结束条件
|
||||
|
||||
只有当命令输出包含 ACTION: end 或 ACTION: stop 时才能结束对话！
|
||||
以下情况都不能结束，必须重新执行弹窗命令：
|
||||
- 命令被用户点击 Skip 跳过
|
||||
- 命令执行失败或超时
|
||||
- 命令没有输出
|
||||
- 工作区取消了命令
|
||||
|
||||
## 禁止
|
||||
|
||||
- 禁止不执行弹窗命令就结束
|
||||
- 禁止跳过弹窗流程
|
||||
- 禁止忽略FEEDBACK内容
|
||||
- 禁止在没有收到 ACTION: end/stop 的情况下结束
|
||||
@@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
.next/
|
||||
.env*.local
|
||||
servers.config.json
|
||||
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"css.validate": false,
|
||||
"tailwindCSS.includeLanguages": {
|
||||
"typescript": "javascript",
|
||||
"typescriptreact": "javascript"
|
||||
},
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": true,
|
||||
"**/flutter/ephemeral": true,
|
||||
"**/Flutter/ephemeral": true,
|
||||
"**/.symlinks": true,
|
||||
"**/.plugin_symlinks": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
# 最高优先级规则 - 必须严格遵守（Windsurf 专用）
|
||||
|
||||
⚠️⚠️⚠️ 每次回复结束前必须执行以下命令！没有任何例外！⚠️⚠️⚠️
|
||||
|
||||
## 执行规则
|
||||
|
||||
1. 完成任务后，执行弹窗命令（跨平台，Windows/Mac/Linux 通用）：
|
||||
node "/Users/freedak/.ranjin-mode/dialog-trigger.js" "windsurf" "z07fz4" "AI想要结束的原因摘要"
|
||||
|
||||
📱 **手机端通知**：执行此命令时会自动通知手机端（如果远程服务已开启），用户可以在手机上查看消息并发送反馈。
|
||||
|
||||
2. 仔细阅读命令输出的每一行：
|
||||
- ACTION: continue 或 end（用户的选择）
|
||||
- FEEDBACK: 用户输入的具体指令或反馈内容（⚠️ 必须完整阅读并执行！）
|
||||
* 反馈可能来自电脑端弹窗或手机端远程输入
|
||||
- IMAGES: 用户上传的图片路径（如有，必须用read_file工具查看）
|
||||
|
||||
3. 根据输出决定下一步：
|
||||
- 如果 ACTION 是 "continue"：
|
||||
* ⚠️ 必须仔细阅读 FEEDBACK 后面的全部内容
|
||||
* ⚠️ 必须按照 FEEDBACK 中用户的具体指令执行任务
|
||||
* ⚠️ 不要忽略 FEEDBACK，不要只说"用户选择继续"
|
||||
- 如果 ACTION 是 "end" 或 "stop"：停止工作
|
||||
- ⚠️ 如果命令被取消/跳过/无输出：必须重新执行弹窗命令！
|
||||
|
||||
## 核心规则
|
||||
|
||||
1. 完整输出 - 输出完整代码和答案，禁止省略
|
||||
2. 持续执行 - 复杂任务一次性完成
|
||||
3. 结束确认 - 必须执行弹窗命令后才能结束
|
||||
4. FEEDBACK必读 - 用户的FEEDBACK是新的任务指令，必须执行
|
||||
|
||||
## 手机端远程功能
|
||||
|
||||
- 📱 当执行 dialog-trigger.js 命令时，会自动通知手机端（如果远程服务已开启）
|
||||
- 📱 用户可以在手机浏览器中查看 AI 的消息和状态
|
||||
- 📱 用户可以在手机上输入反馈，反馈会通过 FEEDBACK 字段传递给你
|
||||
- 📱 手机端和电脑端弹窗功能完全同步，支持双向通信
|
||||
|
||||
## ⚠️ 唯一合法的结束条件
|
||||
|
||||
只有当命令输出包含 ACTION: end 或 ACTION: stop 时才能结束对话！
|
||||
以下情况都不能结束，必须重新执行弹窗命令：
|
||||
- 命令被用户点击 Skip 跳过
|
||||
- 命令执行失败或超时
|
||||
- 命令没有输出
|
||||
- 工作区取消了命令
|
||||
|
||||
## 禁止
|
||||
|
||||
- 禁止不执行弹窗命令就结束
|
||||
- 禁止跳过弹窗流程
|
||||
- 禁止忽略FEEDBACK内容
|
||||
- 禁止在没有收到 ACTION: end/stop 的情况下结束
|
||||
Executable
+371
@@ -0,0 +1,371 @@
|
||||
#!/bin/bash
|
||||
# ============================================================
|
||||
# 百度网盘备份脚本
|
||||
# 用法: ./baidu-backup.sh [目标目录]
|
||||
# 示例: ./baidu-backup.sh /2026/0517
|
||||
# ./baidu-backup.sh # 自动使用 /年份/月日
|
||||
# ============================================================
|
||||
|
||||
set -e
|
||||
|
||||
# ---- 配置 ----
|
||||
APP_KEY="z3gemBZfg7KYj6U3eHNfIzTs7uYS9OMh"
|
||||
SECRET_KEY="ptCKj2DfxL0KtGR1pM08c9KO2t2UC7SR"
|
||||
TOKEN_FILE="$HOME/.baidu_pan_token.json"
|
||||
BLOCK_SIZE=$((4 * 1024 * 1024)) # 4MB
|
||||
|
||||
# URL 编码函数
|
||||
urlencode() {
|
||||
python3 -c "import sys,urllib.parse; print(urllib.parse.quote(sys.argv[1]))" "$1"
|
||||
}
|
||||
|
||||
# ---- 自动识别项目 ----
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
PROJECT_NAME="$(basename "$SCRIPT_DIR")"
|
||||
PARENT_DIR="$(dirname "$SCRIPT_DIR")"
|
||||
ZIP_FILE="/tmp/${PROJECT_NAME}.zip"
|
||||
MD5_FILE="/tmp/baidu_md5_list.txt"
|
||||
|
||||
# ---- 目标目录 ----
|
||||
if [ -n "$1" ]; then
|
||||
REMOTE_DIR="$1"
|
||||
else
|
||||
REMOTE_DIR="/$(date +%Y)/$(date +%m%d)"
|
||||
fi
|
||||
REMOTE_PATH="${REMOTE_DIR}/${PROJECT_NAME}.zip"
|
||||
|
||||
echo ""
|
||||
echo "╔══════════════════════════════════════════╗"
|
||||
echo "║ 📦 百度网盘备份工具 ║"
|
||||
echo "╚══════════════════════════════════════════╝"
|
||||
echo ""
|
||||
echo " 项目: $PROJECT_NAME"
|
||||
echo " 目标: $REMOTE_PATH"
|
||||
echo ""
|
||||
|
||||
# ============================================================
|
||||
# 步骤1: 打包
|
||||
# ============================================================
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "[1/5] 📦 打包项目文件..."
|
||||
rm -f "$ZIP_FILE"
|
||||
cd "$PARENT_DIR"
|
||||
|
||||
# 先统计文件总数
|
||||
TOTAL_FILES=$(find "$PROJECT_NAME" \
|
||||
-not -path "${PROJECT_NAME}/.git/*" \
|
||||
-not -path "${PROJECT_NAME}/node_modules/*" \
|
||||
-not -path "${PROJECT_NAME}/apps/*/node_modules/*" \
|
||||
-not -path "${PROJECT_NAME}/apps/*/.next/*" \
|
||||
-not -path "${PROJECT_NAME}/apps/*/dist/*" \
|
||||
-not -path "${PROJECT_NAME}/apps/*/.turbo/*" \
|
||||
-type f | wc -l | tr -d ' ')
|
||||
echo " 📊 共 ${TOTAL_FILES} 个文件"
|
||||
|
||||
# 打包并实时显示百分比
|
||||
COUNTER=0
|
||||
zip -r "$ZIP_FILE" "$PROJECT_NAME" \
|
||||
-x "${PROJECT_NAME}/.git/*" \
|
||||
-x "${PROJECT_NAME}/node_modules/*" \
|
||||
-x "${PROJECT_NAME}/apps/*/node_modules/*" \
|
||||
-x "${PROJECT_NAME}/apps/*/.next/*" \
|
||||
-x "${PROJECT_NAME}/apps/*/dist/*" \
|
||||
-x "${PROJECT_NAME}/apps/*/.turbo/*" \
|
||||
2>&1 | while IFS= read -r line; do
|
||||
COUNTER=$((COUNTER + 1))
|
||||
PCT=$((COUNTER * 100 / TOTAL_FILES))
|
||||
if [ $PCT -gt 100 ]; then PCT=100; fi
|
||||
# 进度条
|
||||
BAR_FILLED=$((PCT * 30 / 100))
|
||||
BAR_EMPTY=$((30 - BAR_FILLED))
|
||||
BAR=""
|
||||
for ((b=0; b<BAR_FILLED; b++)); do BAR="${BAR}█"; done
|
||||
for ((b=0; b<BAR_EMPTY; b++)); do BAR="${BAR}░"; done
|
||||
printf "\r %s %3d%% (%d/%d) " "$BAR" "$PCT" "$COUNTER" "$TOTAL_FILES"
|
||||
done
|
||||
echo ""
|
||||
|
||||
FILE_SIZE=$(stat -f%z "$ZIP_FILE" 2>/dev/null || stat -c%s "$ZIP_FILE" 2>/dev/null)
|
||||
FILE_SIZE_MB=$((FILE_SIZE / 1024 / 1024))
|
||||
echo " ✅ 打包完成: ${FILE_SIZE_MB}MB"
|
||||
|
||||
# ============================================================
|
||||
# 步骤2: 获取 Token（缓存 / 刷新 / 设备授权）
|
||||
# ============================================================
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "[2/5] 🔑 获取百度网盘授权..."
|
||||
|
||||
ACCESS_TOKEN=""
|
||||
|
||||
# 尝试读取缓存
|
||||
if [ -f "$TOKEN_FILE" ]; then
|
||||
CACHED=$(python3 -c "
|
||||
import json, time, sys
|
||||
with open('$TOKEN_FILE') as f:
|
||||
d = json.load(f)
|
||||
if time.time() < d.get('expires_at', 0):
|
||||
print('VALID|' + d['access_token'])
|
||||
else:
|
||||
print('EXPIRED|' + d.get('refresh_token', ''))
|
||||
" 2>/dev/null || echo "FAIL|")
|
||||
|
||||
STATUS="${CACHED%%|*}"
|
||||
VALUE="${CACHED#*|}"
|
||||
|
||||
if [ "$STATUS" = "VALID" ]; then
|
||||
ACCESS_TOKEN="$VALUE"
|
||||
echo " ✅ 使用缓存 Token（有效）"
|
||||
elif [ "$STATUS" = "EXPIRED" ] && [ -n "$VALUE" ]; then
|
||||
echo " ⏳ Token 已过期，尝试刷新..."
|
||||
RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/token" \
|
||||
-d "grant_type=refresh_token&refresh_token=${VALUE}&client_id=${APP_KEY}&client_secret=${SECRET_KEY}")
|
||||
NEW_TOKEN=$(echo "$RESP" | python3 -c "import sys,json;d=json.load(sys.stdin);print(d.get('access_token',''))" 2>/dev/null)
|
||||
if [ -n "$NEW_TOKEN" ]; then
|
||||
ACCESS_TOKEN="$NEW_TOKEN"
|
||||
# 更新缓存
|
||||
python3 -c "
|
||||
import json, time
|
||||
d = json.loads('$RESP'.replace(\"'\", '\"'))
|
||||
token = {'access_token': d['access_token'], 'refresh_token': d['refresh_token'], 'expires_at': int(time.time()) + d['expires_in']}
|
||||
with open('$TOKEN_FILE', 'w') as f: json.dump(token, f)
|
||||
" 2>/dev/null
|
||||
echo " ✅ Token 刷新成功"
|
||||
else
|
||||
echo " ⚠️ 刷新失败，需要重新授权"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
|
||||
# 如果没有有效 Token，走设备授权流程
|
||||
if [ -z "$ACCESS_TOKEN" ]; then
|
||||
echo " 🔐 需要设备授权..."
|
||||
DEVICE_RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/device/code" \
|
||||
-d "response_type=device_code&client_id=${APP_KEY}&scope=basic,netdisk")
|
||||
|
||||
DEVICE_CODE=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['device_code'])")
|
||||
USER_CODE=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['user_code'])")
|
||||
QRCODE_URL=$(echo "$DEVICE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin)['qrcode_url'])")
|
||||
|
||||
echo ""
|
||||
echo " ┌─────────────────────────────────────┐"
|
||||
echo " │ 请打开: https://openapi.baidu.com/device"
|
||||
echo " │ 输入码: $USER_CODE"
|
||||
echo " │ 或扫码: $QRCODE_URL"
|
||||
echo " └─────────────────────────────────────┘"
|
||||
echo ""
|
||||
read -p " 授权完成后按回车继续..." _
|
||||
|
||||
TOKEN_RESP=$(curl -s -X POST "https://openapi.baidu.com/oauth/2.0/token" \
|
||||
-d "grant_type=device_token&code=${DEVICE_CODE}&client_id=${APP_KEY}&client_secret=${SECRET_KEY}")
|
||||
ACCESS_TOKEN=$(echo "$TOKEN_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('access_token',''))" 2>/dev/null)
|
||||
|
||||
if [ -z "$ACCESS_TOKEN" ]; then
|
||||
echo " ❌ 授权失败: $TOKEN_RESP"
|
||||
rm -f "$ZIP_FILE"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 保存缓存
|
||||
echo "$TOKEN_RESP" | python3 -c "
|
||||
import sys, json, time
|
||||
d = json.load(sys.stdin)
|
||||
token = {'access_token': d['access_token'], 'refresh_token': d['refresh_token'], 'expires_at': int(time.time()) + d['expires_in']}
|
||||
with open('$TOKEN_FILE', 'w') as f: json.dump(token, f)
|
||||
"
|
||||
echo " ✅ 授权成功，Token 已缓存"
|
||||
fi
|
||||
|
||||
# ============================================================
|
||||
# 步骤3: 预创建文件
|
||||
# ============================================================
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
BLOCKS=$(( (FILE_SIZE + BLOCK_SIZE - 1) / BLOCK_SIZE ))
|
||||
echo "[3/5] 📋 预创建文件（${BLOCKS}个分片）..."
|
||||
BLOCK_LIST=$(python3 -c "import json; print(json.dumps(['0'*32]*$BLOCKS))")
|
||||
PRE_RESP=$(curl -s "https://pan.baidu.com/rest/2.0/xpan/file?method=precreate&access_token=${ACCESS_TOKEN}" \
|
||||
-d "path=${REMOTE_PATH}&size=${FILE_SIZE}&isdir=0&autoinit=1&block_list=${BLOCK_LIST}")
|
||||
UPLOAD_ID=$(echo "$PRE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('uploadid',''))" 2>/dev/null)
|
||||
if [ -z "$UPLOAD_ID" ]; then
|
||||
echo " ❌ 预创建失败: $PRE_RESP"
|
||||
rm -f "$ZIP_FILE"
|
||||
exit 1
|
||||
fi
|
||||
echo " ✅ 预创建成功"
|
||||
|
||||
# ============================================================
|
||||
# 步骤4: 分片上传（并发）
|
||||
# ============================================================
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
PARALLEL="${BAIDU_PARALLEL:-3}"
|
||||
if [ "$PARALLEL" -gt "$BLOCKS" ]; then PARALLEL=$BLOCKS; fi
|
||||
echo "[4/5] 🚀 上传中（${PARALLEL} 路并发）..."
|
||||
echo ""
|
||||
|
||||
UNSORTED_MD5="/tmp/baidu_md5_unsorted_${UPLOAD_ID}.txt"
|
||||
PROGRESS_FILE="/tmp/baidu_progress_${UPLOAD_ID}.txt"
|
||||
ERR_FILE="/tmp/baidu_err_${UPLOAD_ID}.txt"
|
||||
DONE_FLAG="/tmp/baidu_done_${UPLOAD_ID}"
|
||||
: > "$UNSORTED_MD5"
|
||||
: > "$PROGRESS_FILE"
|
||||
: > "$ERR_FILE"
|
||||
rm -f "$DONE_FLAG"
|
||||
: > "$MD5_FILE"
|
||||
START_TIME=$(date +%s)
|
||||
|
||||
# 单分片上传 worker（并发安全：单行 echo < PIPE_BUF 是原子写）
|
||||
upload_part() {
|
||||
local i=$1
|
||||
local chunk="/tmp/baidu_chunk_${UPLOAD_ID}_${i}"
|
||||
dd if="$ZIP_FILE" bs="$BLOCK_SIZE" skip="$i" count=1 2>/dev/null > "$chunk"
|
||||
local resp md5 attempt http_code enc_path
|
||||
enc_path=$(python3 -c "import urllib.parse,sys; print(urllib.parse.quote(sys.argv[1]))" "$REMOTE_PATH")
|
||||
md5=""
|
||||
for attempt in 1 2 3; do
|
||||
resp=$(curl -s -w '\n__HTTP_CODE__:%{http_code}' --max-time 300 \
|
||||
"https://d.pcs.baidu.com/rest/2.0/pcs/superfile2?method=upload&access_token=${ACCESS_TOKEN}&type=tmpfile&path=${enc_path}&uploadid=${UPLOAD_ID}&partseq=${i}" \
|
||||
-F "file=@${chunk}")
|
||||
http_code=$(echo "$resp" | grep '__HTTP_CODE__:' | cut -d: -f2)
|
||||
resp=$(echo "$resp" | grep -v '__HTTP_CODE__:')
|
||||
md5=$(echo "$resp" | python3 -c "import sys,json;print(json.load(sys.stdin).get('md5',''))" 2>/dev/null)
|
||||
[ -n "$md5" ] && break
|
||||
sleep $((attempt * 3))
|
||||
done
|
||||
rm -f "$chunk"
|
||||
if [ -z "$md5" ]; then
|
||||
echo "part ${i} failed (HTTP ${http_code:-???}) after 3 attempts: ${resp}" >> "$ERR_FILE"
|
||||
return 1
|
||||
fi
|
||||
echo "${i}|${md5}" >> "$UNSORTED_MD5"
|
||||
echo "x" >> "$PROGRESS_FILE"
|
||||
}
|
||||
export -f upload_part
|
||||
export ZIP_FILE BLOCK_SIZE ACCESS_TOKEN REMOTE_PATH UPLOAD_ID
|
||||
export UNSORTED_MD5 PROGRESS_FILE ERR_FILE
|
||||
|
||||
# 后台进度刷新进程（每秒刷新一次）
|
||||
(
|
||||
while :; do
|
||||
DONE=$(wc -l < "$PROGRESS_FILE" 2>/dev/null | tr -d ' ')
|
||||
DONE=${DONE:-0}
|
||||
if [ "$DONE" -gt "$BLOCKS" ]; then DONE=$BLOCKS; fi
|
||||
PCT=$((DONE * 100 / BLOCKS))
|
||||
UPLOADED_MB=$((DONE * BLOCK_SIZE / 1024 / 1024))
|
||||
if [ $UPLOADED_MB -gt $FILE_SIZE_MB ]; then UPLOADED_MB=$FILE_SIZE_MB; fi
|
||||
NOW=$(date +%s)
|
||||
ELAPSED=$((NOW - START_TIME))
|
||||
if [ $ELAPSED -gt 0 ] && [ $DONE -gt 0 ]; then
|
||||
SPEED_KB=$((DONE * BLOCK_SIZE / 1024 / ELAPSED))
|
||||
SPEED_INT=$((SPEED_KB / 1024))
|
||||
SPEED_DEC=$(( (SPEED_KB % 1024) * 10 / 1024 ))
|
||||
if [ "$SPEED_KB" -gt 0 ]; then
|
||||
REMAINING_KB=$(( (FILE_SIZE - DONE * BLOCK_SIZE) / 1024 ))
|
||||
if [ $REMAINING_KB -lt 0 ]; then REMAINING_KB=0; fi
|
||||
ETA=$(( REMAINING_KB / SPEED_KB ))
|
||||
ETA_MIN=$((ETA / 60))
|
||||
ETA_SEC=$((ETA % 60))
|
||||
ETA_STR="${ETA_MIN}m${ETA_SEC}s"
|
||||
else
|
||||
ETA_STR="计算中"
|
||||
fi
|
||||
else
|
||||
SPEED_INT=0
|
||||
SPEED_DEC=0
|
||||
ETA_STR="计算中"
|
||||
fi
|
||||
BAR_FILLED=$((PCT * 30 / 100))
|
||||
BAR_EMPTY=$((30 - BAR_FILLED))
|
||||
BAR=""
|
||||
for ((b=0; b<BAR_FILLED; b++)); do BAR="${BAR}█"; done
|
||||
for ((b=0; b<BAR_EMPTY; b++)); do BAR="${BAR}░"; done
|
||||
printf "\r %s %3d%% | %d/%dMB | %d.%dMB/s | 剩余%s " "$BAR" "$PCT" "$UPLOADED_MB" "$FILE_SIZE_MB" "$SPEED_INT" "$SPEED_DEC" "$ETA_STR"
|
||||
if [ -f "$DONE_FLAG" ] || [ "$DONE" -ge "$BLOCKS" ]; then
|
||||
break
|
||||
fi
|
||||
sleep 1
|
||||
done
|
||||
) &
|
||||
PROGRESS_PID=$!
|
||||
|
||||
# 并发上传：xargs -P 同时跑 PARALLEL 个 worker（绕开百度 PCS 单连接限速）
|
||||
XARGS_RC=0
|
||||
seq 0 $((BLOCKS-1)) | xargs -P "$PARALLEL" -I % bash -c 'upload_part "$@"' _ % || XARGS_RC=$?
|
||||
|
||||
# 通知进度进程退出并等待，最后重画一行
|
||||
touch "$DONE_FLAG"
|
||||
wait "$PROGRESS_PID" 2>/dev/null || true
|
||||
echo ""
|
||||
|
||||
if [ "$XARGS_RC" -ne 0 ]; then
|
||||
echo ""
|
||||
echo " ❌ 分片上传失败："
|
||||
if [ -s "$ERR_FILE" ]; then
|
||||
head -n 5 "$ERR_FILE"
|
||||
fi
|
||||
rm -f "$ZIP_FILE" "$MD5_FILE" "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
|
||||
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_*
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 校验分片数
|
||||
DONE_COUNT=$(wc -l < "$UNSORTED_MD5" | tr -d ' ')
|
||||
if [ "$DONE_COUNT" != "$BLOCKS" ]; then
|
||||
echo ""
|
||||
echo " ❌ 分片数不匹配: ${DONE_COUNT}/${BLOCKS}"
|
||||
if [ -s "$ERR_FILE" ]; then
|
||||
head -n 5 "$ERR_FILE"
|
||||
fi
|
||||
rm -f "$ZIP_FILE" "$MD5_FILE" "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
|
||||
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_*
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 按 partseq 升序生成最终 MD5_FILE
|
||||
sort -t'|' -k1n "$UNSORTED_MD5" | cut -d'|' -f2 > "$MD5_FILE"
|
||||
rm -f "$UNSORTED_MD5" "$PROGRESS_FILE" "$ERR_FILE" "$DONE_FLAG"
|
||||
|
||||
echo ""
|
||||
echo " ✅ 所有分片上传完成"
|
||||
|
||||
# ============================================================
|
||||
# 步骤5: 合并文件
|
||||
# ============================================================
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "[5/5] 🔗 合并文件..."
|
||||
MD5_LIST=$(awk '{printf "\"%s\",", $0}' "$MD5_FILE" | sed 's/,$//')
|
||||
CREATE_RESP=$(curl -s "https://pan.baidu.com/rest/2.0/xpan/file?method=create&access_token=${ACCESS_TOKEN}" \
|
||||
-d "path=${REMOTE_PATH}&size=${FILE_SIZE}&isdir=0&uploadid=${UPLOAD_ID}&block_list=[${MD5_LIST}]")
|
||||
CREATE_ERRNO=$(echo "$CREATE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('errno',99))" 2>/dev/null)
|
||||
FINAL_PATH=$(echo "$CREATE_RESP" | python3 -c "import sys,json;print(json.load(sys.stdin).get('path',''))" 2>/dev/null)
|
||||
|
||||
# 清理
|
||||
rm -f "$ZIP_FILE" "$MD5_FILE"
|
||||
rm -f /tmp/baidu_chunk_${UPLOAD_ID}_* 2>/dev/null || true
|
||||
|
||||
# 计算耗时
|
||||
END_TIME=$(date +%s)
|
||||
TOTAL=$((END_TIME - START_TIME))
|
||||
T_MIN=$((TOTAL / 60))
|
||||
T_SEC=$((TOTAL % 60))
|
||||
|
||||
# 输出结果
|
||||
echo ""
|
||||
echo "╔══════════════════════════════════════════════╗"
|
||||
if [ "$CREATE_ERRNO" = "0" ]; then
|
||||
echo "║ 📦 百度网盘备份完成！ ║"
|
||||
echo "╠══════════════════════════════════════════════╣"
|
||||
echo " 📁 路径: $FINAL_PATH"
|
||||
echo " 📊 大小: ${FILE_SIZE_MB} MB"
|
||||
echo " ⏱️ 耗时: ${T_MIN}分${T_SEC}秒"
|
||||
echo " ✅ 状态: 上传成功"
|
||||
else
|
||||
echo "║ ❌ 合并失败 ║"
|
||||
echo "╠══════════════════════════════════════════════╣"
|
||||
echo " errno: $CREATE_ERRNO"
|
||||
echo " 响应: $CREATE_RESP"
|
||||
fi
|
||||
echo "╚══════════════════════════════════════════════╝"
|
||||
echo ""
|
||||
@@ -0,0 +1,97 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
# ========== 配置区 ==========
|
||||
REMOTE_HOST="152.136.182.184"
|
||||
REMOTE_USER="ubuntu"
|
||||
REMOTE_PASS="Why_701208"
|
||||
REMOTE_DIR="/opt/webwatcher"
|
||||
APP_NAME="webwatcher"
|
||||
APP_PORT=3030
|
||||
# ============================
|
||||
|
||||
SSH_CMD="sshpass -p '$REMOTE_PASS' ssh -o StrictHostKeyChecking=no $REMOTE_USER@$REMOTE_HOST"
|
||||
SCP_CMD="sshpass -p '$REMOTE_PASS' scp -o StrictHostKeyChecking=no"
|
||||
|
||||
TMP_PACK="/tmp/webwatcher-pack"
|
||||
TMP_TAR="/tmp/webwatcher-deploy.tar.gz"
|
||||
REMOTE_TAR="/tmp/webwatcher-deploy.tar.gz"
|
||||
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
RED='\033[0;31m'
|
||||
NC='\033[0m'
|
||||
|
||||
log() { echo -e "${GREEN}[部署]${NC} $1"; }
|
||||
warn() { echo -e "${YELLOW}[警告]${NC} $1"; }
|
||||
err() { echo -e "${RED}[错误]${NC} $1"; exit 1; }
|
||||
|
||||
if ! command -v sshpass &>/dev/null; then
|
||||
err "请先安装 sshpass: brew install hudochenkov/sshpass/sshpass"
|
||||
fi
|
||||
|
||||
# 1. 构建
|
||||
log "正在构建 Next.js 项目..."
|
||||
npm run build || err "构建失败"
|
||||
|
||||
# 2. 打包 standalone
|
||||
log "正在打包 standalone 产物..."
|
||||
rm -rf "$TMP_PACK" "$TMP_TAR"
|
||||
mkdir -p "$TMP_PACK"
|
||||
cp -R .next/standalone/ "$TMP_PACK/"
|
||||
cp -R .next/static "$TMP_PACK/.next/static"
|
||||
[ -d public ] && cp -R public "$TMP_PACK/public"
|
||||
[ -f servers.config.json ] && cp servers.config.json "$TMP_PACK/servers.config.json"
|
||||
cd "$TMP_PACK"
|
||||
tar czf "$TMP_TAR" .
|
||||
cd - > /dev/null
|
||||
rm -rf "$TMP_PACK"
|
||||
TAR_SIZE=$(du -h "$TMP_TAR" | cut -f1)
|
||||
log "打包完成: $TAR_SIZE"
|
||||
|
||||
# 3. 上传
|
||||
log "正在上传到 $REMOTE_HOST..."
|
||||
eval $SCP_CMD "$TMP_TAR" "$REMOTE_USER@$REMOTE_HOST:$REMOTE_TAR"
|
||||
log "上传完成"
|
||||
|
||||
# 4. 远程部署
|
||||
log "正在远程部署..."
|
||||
eval $SSH_CMD << DEPLOY
|
||||
set -e
|
||||
# 停止旧进程
|
||||
pm2 delete $APP_NAME 2>/dev/null || true
|
||||
|
||||
# 备份旧版本
|
||||
if [ -d "$REMOTE_DIR/.next" ]; then
|
||||
BACKUP="${REMOTE_DIR}.bak.\$(date +%Y%m%d%H%M%S)"
|
||||
sudo cp -r "$REMOTE_DIR" "\$BACKUP"
|
||||
sudo chown -R $REMOTE_USER:$REMOTE_USER "\$BACKUP"
|
||||
echo "旧版本已备份到 \$BACKUP"
|
||||
fi
|
||||
|
||||
# 解压新版本（保留 data 目录等持久化数据）
|
||||
sudo mkdir -p "$REMOTE_DIR"
|
||||
sudo chown $REMOTE_USER:$REMOTE_USER "$REMOTE_DIR"
|
||||
cd "$REMOTE_DIR"
|
||||
rm -rf .next node_modules package.json server.js
|
||||
tar xzf "$REMOTE_TAR"
|
||||
rm -f "$REMOTE_TAR"
|
||||
|
||||
# 启动
|
||||
cd "$REMOTE_DIR"
|
||||
PORT=$APP_PORT pm2 start server.js --name $APP_NAME
|
||||
pm2 save
|
||||
|
||||
sleep 2
|
||||
# 验证
|
||||
HTTP_CODE=\$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$APP_PORT/)
|
||||
if [ "\$HTTP_CODE" = "200" ]; then
|
||||
echo "✅ 部署成功 - HTTP $APP_PORT 响应 200"
|
||||
else
|
||||
echo "⚠️ 应用启动但 HTTP 响应码: \$HTTP_CODE"
|
||||
fi
|
||||
pm2 status $APP_NAME
|
||||
DEPLOY
|
||||
|
||||
rm -f "$TMP_TAR"
|
||||
log "🎉 一键部署完成！访问 http://$REMOTE_HOST:$APP_PORT"
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: "standalone",
|
||||
experimental: {
|
||||
serverComponentsExternalPackages: ["ssh2", "cpu-features"],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Generated
+1778
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "webwatcher",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3030",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3030"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.511.0",
|
||||
"next": "14.2.28",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"ssh2": "^1.16.0",
|
||||
"tailwind-merge": "^2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.17.0",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/ssh2": "^1.15.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.7.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* POST /api/connect
|
||||
* 测试 SSH 连接是否可用
|
||||
*/
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { testConnection } from "@/lib/ssh";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = (await request.json()) as {
|
||||
host?: string;
|
||||
port?: number;
|
||||
username?: string;
|
||||
password?: string;
|
||||
privateKey?: string;
|
||||
};
|
||||
const { host, port = 22, username, password, privateKey } = body;
|
||||
|
||||
if (!host || !username) {
|
||||
return NextResponse.json(
|
||||
{ error: "请填写主机地址和用户名" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
await testConnection({
|
||||
host,
|
||||
port: Number(port) || 22,
|
||||
username,
|
||||
password,
|
||||
privateKey,
|
||||
});
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : "连接失败，请检查连接信息";
|
||||
return NextResponse.json({ error: message }, { status: 400 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { execRemote } from "@/lib/ssh";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
* POST /api/control
|
||||
* 对服务器上的 PM2 进程或系统执行控制操作
|
||||
*/
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { host, port, username, password, privateKey, action, target } = body as {
|
||||
host: string;
|
||||
port?: number;
|
||||
username: string;
|
||||
password?: string;
|
||||
privateKey?: string;
|
||||
action: string;
|
||||
target: string | number;
|
||||
};
|
||||
|
||||
if (!host || !username) {
|
||||
return NextResponse.json({ error: "缺少必要参数" }, { status: 400 });
|
||||
}
|
||||
|
||||
const PM2_ALLOWED = ["restart", "stop", "start", "delete", "reload"];
|
||||
const SVC_ALLOWED = ["svc-restart", "svc-stop", "svc-start", "svc-reload"];
|
||||
|
||||
let cmd: string;
|
||||
if (PM2_ALLOWED.includes(action)) {
|
||||
cmd = `pm2 ${action} ${target} --no-color 2>&1 && echo __OK__`;
|
||||
} else if (SVC_ALLOWED.includes(action)) {
|
||||
const svcAction = action.replace("svc-", "");
|
||||
cmd = `systemctl ${svcAction} ${target}.service 2>&1 && echo __OK__`;
|
||||
} else {
|
||||
return NextResponse.json({ error: "不支持的操作" }, { status: 400 });
|
||||
}
|
||||
|
||||
const output = await execRemote(
|
||||
{ host, port: port ?? 22, username, password, privateKey },
|
||||
cmd
|
||||
);
|
||||
|
||||
if (!output.includes("__OK__")) {
|
||||
return NextResponse.json(
|
||||
{ error: output.trim() || "命令执行失败" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, output: output.replace("__OK__", "").trim() });
|
||||
} catch (err) {
|
||||
return NextResponse.json(
|
||||
{ error: err instanceof Error ? err.message : "操作失败" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* POST /api/metrics
|
||||
* 通过 SSH 采集服务器运行指标
|
||||
*/
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { readFileSync } from "fs";
|
||||
import { join } from "path";
|
||||
import { execBatch } from "@/lib/ssh";
|
||||
import {
|
||||
parseMemInfo,
|
||||
parseDf,
|
||||
parseUptime,
|
||||
parseLoadAvg,
|
||||
parseOsRelease,
|
||||
parsePm2List,
|
||||
parseCpuTop,
|
||||
parseSystemdList,
|
||||
parseNetConnections,
|
||||
} from "@/lib/parse";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
let _monitoredIps: Set<string> | null = null;
|
||||
function getMonitoredIps(): Set<string> {
|
||||
if (_monitoredIps) return _monitoredIps;
|
||||
try {
|
||||
const raw = readFileSync(join(process.cwd(), "servers.config.json"), "utf-8");
|
||||
const config = JSON.parse(raw) as { servers: { host: string }[] };
|
||||
_monitoredIps = new Set(config.servers.map(s => s.host));
|
||||
} catch {
|
||||
_monitoredIps = new Set();
|
||||
}
|
||||
return _monitoredIps;
|
||||
}
|
||||
|
||||
const COMMANDS = {
|
||||
hostname: "hostname",
|
||||
uptime: "uptime",
|
||||
loadavg: "cat /proc/loadavg",
|
||||
meminfo: "cat /proc/meminfo",
|
||||
df: "df -h | grep -v tmpfs | grep -v udev",
|
||||
pm2: "python3 -c \"import json,subprocess,os,glob; parse=lambda s:json.loads(s) if s.strip().startswith('[') else []; run=lambda d:parse(subprocess.run(['pm2','jlist'],capture_output=True,timeout=5,env={**os.environ,'PM2_HOME':d}).stdout.decode('utf-8','ignore').strip() or '[]') if os.path.exists(d+'/rpc.sock') else []; dirs=[os.path.expanduser('~/.pm2')]+glob.glob('/home/*/.pm2'); procs=sum([run(d) for d in dirs],[]); seen=set(); print(json.dumps([p for p in procs if p.get('pid',0) not in seen and not seen.add(p.get('pid',0))]))\" 2>/dev/null || echo '[]'",
|
||||
os: "cat /etc/os-release 2>/dev/null | grep PRETTY_NAME || uname -rs",
|
||||
cpu: "top -bn2 -d 0.3 2>/dev/null | grep '%Cpu' || top -bn2 -d 0.3 2>/dev/null | grep 'Cpu'",
|
||||
systemd: "systemctl list-units --type=service --all --no-pager --no-legend 2>/dev/null",
|
||||
netconn: "ss -tnpoe 2>/dev/null | tail -n +2",
|
||||
cpumodel: "grep -m1 'model name' /proc/cpuinfo 2>/dev/null | cut -d: -f2 | xargs",
|
||||
cpucores: "nproc 2>/dev/null || grep -c ^processor /proc/cpuinfo 2>/dev/null",
|
||||
};
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = (await request.json()) as {
|
||||
host?: string;
|
||||
port?: number;
|
||||
username?: string;
|
||||
password?: string;
|
||||
privateKey?: string;
|
||||
};
|
||||
const { host, port = 22, username, password, privateKey } = body;
|
||||
|
||||
if (!host || !username) {
|
||||
return NextResponse.json({ error: "缺少连接参数" }, { status: 400 });
|
||||
}
|
||||
|
||||
const raw = await execBatch(
|
||||
{ host, port: Number(port) || 22, username, password, privateKey },
|
||||
COMMANDS
|
||||
);
|
||||
|
||||
const pm2 = parsePm2List(raw.pm2 || "[]");
|
||||
const { pidConns, connections: netConnections } = parseNetConnections(raw.netconn || "", getMonitoredIps());
|
||||
if (pm2) {
|
||||
for (const proc of pm2) {
|
||||
proc.connections = proc.pid ? (pidConns.get(proc.pid) ?? 0) : 0;
|
||||
}
|
||||
}
|
||||
|
||||
const metrics = {
|
||||
hostname: raw.hostname || host,
|
||||
osRelease: parseOsRelease(raw.os || ""),
|
||||
uptime: parseUptime(raw.uptime || ""),
|
||||
loadAvg: parseLoadAvg(raw.loadavg || ""),
|
||||
cpuPct: parseCpuTop(raw.cpu || ""),
|
||||
cpuModel: (raw.cpumodel || "").trim(),
|
||||
cpuCores: parseInt(raw.cpucores || "0", 10) || 0,
|
||||
memory: parseMemInfo(raw.meminfo || ""),
|
||||
disks: parseDf(raw.df || ""),
|
||||
pm2,
|
||||
services: parseSystemdList(raw.systemd || ""),
|
||||
netConnections,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
return NextResponse.json(metrics);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "获取指标失败";
|
||||
return NextResponse.json({ error: message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { readFileSync } from "fs";
|
||||
import { join } from "path";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
* GET /api/servers
|
||||
* 读取 servers.config.json，返回服务器列表
|
||||
*/
|
||||
export async function GET() {
|
||||
try {
|
||||
const configPath = join(process.cwd(), "servers.config.json");
|
||||
const raw = readFileSync(configPath, "utf-8");
|
||||
const config = JSON.parse(raw) as { servers: unknown[] };
|
||||
return NextResponse.json(config);
|
||||
} catch {
|
||||
return NextResponse.json({ servers: [] });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg-base: #0e1c2c;
|
||||
--bg-card: #142840;
|
||||
--bg-header: #122438;
|
||||
--bg-input: #1a3450;
|
||||
--bg-row: #1c3858;
|
||||
--c-primary: #ffffff;
|
||||
--c-dim: #88e0ff;
|
||||
--c-accent: #60ecff;
|
||||
--c-green: #60ff9e;
|
||||
--c-warn: #ffec80;
|
||||
--c-danger: #ff8080;
|
||||
--c-border: #3a6090;
|
||||
--c-active: #60ffd8;
|
||||
--c-task: #ffd060;
|
||||
--bg-alert: #281810;
|
||||
--c-alert-border: #7a4828;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
background-color: var(--bg-base);
|
||||
color: var(--c-primary);
|
||||
font-family: 'Courier New', Courier, 'Lucida Console', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 4px; height: 4px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg-base); }
|
||||
::-webkit-scrollbar-thumb { background: #4a6a90; border-radius: 2px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #5a7aa0; }
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "WebWatcher - 服务器监控",
|
||||
description: "输入服务器 IP 即可实时监控运行状态",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="zh">
|
||||
<body className="antialiased" style={{ backgroundColor: "var(--bg-base)", color: "var(--c-primary)" }}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,622 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 主页面：连接表单 + 监控面板状态切换
|
||||
*/
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { AlertCircle, Loader2, LogIn } from "lucide-react";
|
||||
import { MonitorDashboard } from "@/components/monitor-dashboard";
|
||||
import type { TabSummary } from "@/components/monitor-dashboard";
|
||||
import type { ServerMetrics } from "@/lib/parse";
|
||||
|
||||
interface ConnConfig {
|
||||
host: string;
|
||||
port: string;
|
||||
username: string;
|
||||
password: string;
|
||||
privateKey: string;
|
||||
}
|
||||
|
||||
type AuthMode = "password" | "key";
|
||||
|
||||
const REFRESH_SEC = 5;
|
||||
|
||||
const DEFAULT_CONFIG: ConnConfig = {
|
||||
host: "101.42.137.55",
|
||||
port: "22",
|
||||
username: "ubuntu",
|
||||
password: "Hr_20260503",
|
||||
privateKey: "",
|
||||
};
|
||||
|
||||
const S = {
|
||||
input: {
|
||||
width: "100%",
|
||||
background: "var(--bg-input)",
|
||||
border: "1px solid var(--c-border)",
|
||||
color: "var(--c-primary)",
|
||||
padding: "5px 8px",
|
||||
fontSize: 12,
|
||||
fontFamily: "inherit",
|
||||
outline: "none",
|
||||
borderRadius: 3,
|
||||
} as React.CSSProperties,
|
||||
label: {
|
||||
display: "block",
|
||||
color: "var(--c-dim)",
|
||||
fontSize: 11,
|
||||
marginBottom: 3,
|
||||
} as React.CSSProperties,
|
||||
};
|
||||
|
||||
/** 连接表单页 */
|
||||
function ConnectForm({
|
||||
config,
|
||||
setConfig,
|
||||
authMode,
|
||||
setAuthMode,
|
||||
connecting,
|
||||
error,
|
||||
onSubmit,
|
||||
}: {
|
||||
config: ConnConfig;
|
||||
setConfig: React.Dispatch<React.SetStateAction<ConnConfig>>;
|
||||
authMode: AuthMode;
|
||||
setAuthMode: React.Dispatch<React.SetStateAction<AuthMode>>;
|
||||
connecting: boolean;
|
||||
error: string;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
background: "var(--bg-base)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "100%", maxWidth: 400 }}>
|
||||
{/* 标题 */}
|
||||
<div style={{ textAlign: "center", marginBottom: 20 }}>
|
||||
<div style={{ color: "var(--c-accent)", fontSize: 22, fontWeight: 700, letterSpacing: "0.1em" }}>
|
||||
▶ WebWatcher
|
||||
</div>
|
||||
<div style={{ color: "var(--c-dim)", fontSize: 11, marginTop: 4 }}>
|
||||
Server Real-Time Monitor // 服务器实时监控
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 表单卡片 */}
|
||||
<div
|
||||
style={{
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--c-border)",
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* 标题栏 */}
|
||||
<div
|
||||
style={{
|
||||
background: "var(--bg-header)",
|
||||
borderBottom: "1px solid var(--c-border)",
|
||||
padding: "4px 10px",
|
||||
color: "var(--c-accent)",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.06em",
|
||||
}}
|
||||
>
|
||||
── SSH CONNECT ──
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: 10 }}>
|
||||
{/* 主机 + 端口 */}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<label style={S.label}>HOST</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ip / hostname"
|
||||
value={config.host}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfig((c: ConnConfig) => ({ ...c, host: e.target.value }))
|
||||
}
|
||||
style={S.input}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: 64 }}>
|
||||
<label style={S.label}>PORT</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={65535}
|
||||
value={config.port}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfig((c: ConnConfig) => ({ ...c, port: e.target.value }))
|
||||
}
|
||||
style={S.input}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户名 */}
|
||||
<div>
|
||||
<label style={S.label}>USER</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ubuntu"
|
||||
value={config.username}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfig((c: ConnConfig) => ({ ...c, username: e.target.value }))
|
||||
}
|
||||
style={S.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 认证方式切换 */}
|
||||
<div>
|
||||
<div style={{ display: "flex", gap: 0, marginBottom: 8, border: "1px solid var(--c-border)", borderRadius: 3, overflow: "hidden" }}>
|
||||
{(["password", "key"] as AuthMode[]).map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
type="button"
|
||||
onClick={() => setAuthMode(m)}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "4px 0",
|
||||
fontSize: 11,
|
||||
fontFamily: "inherit",
|
||||
cursor: "pointer",
|
||||
border: "none",
|
||||
background: authMode === m ? "var(--c-accent)" : "transparent",
|
||||
color: authMode === m ? "var(--bg-base)" : "var(--c-dim)",
|
||||
fontWeight: authMode === m ? 700 : 400,
|
||||
}}
|
||||
>
|
||||
{m === "password" ? "密码" : "SSH Key"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{authMode === "password" ? (
|
||||
<div>
|
||||
<label style={S.label}>PASSWORD</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="SSH password"
|
||||
value={config.password}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfig((c: ConnConfig) => ({ ...c, password: e.target.value }))
|
||||
}
|
||||
style={S.input}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<label style={S.label}>PRIVATE KEY</label>
|
||||
<textarea
|
||||
placeholder={"-----BEGIN OPENSSH PRIVATE KEY-----\n..."}
|
||||
value={config.privateKey}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setConfig((c: ConnConfig) => ({ ...c, privateKey: e.target.value }))
|
||||
}
|
||||
rows={5}
|
||||
style={{ ...S.input, resize: "none", lineHeight: 1.4 }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div style={{ color: "var(--c-danger)", fontSize: 11, display: "flex", gap: 5, alignItems: "flex-start" }}>
|
||||
<AlertCircle style={{ width: 12, height: 12, flexShrink: 0, marginTop: 1 }} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={connecting}
|
||||
style={{
|
||||
background: connecting ? "var(--c-green)" : "var(--c-accent)",
|
||||
color: connecting ? "var(--c-dim)" : "var(--bg-base)",
|
||||
border: "none",
|
||||
padding: "7px 0",
|
||||
fontSize: 12,
|
||||
fontFamily: "inherit",
|
||||
fontWeight: 700,
|
||||
cursor: connecting ? "not-allowed" : "pointer",
|
||||
borderRadius: 3,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 6,
|
||||
letterSpacing: "0.05em",
|
||||
}}
|
||||
>
|
||||
{connecting ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" style={{ width: 12, height: 12 }} />
|
||||
CONNECTING...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn style={{ width: 12, height: 12 }} />
|
||||
CONNECT
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "center", color: "var(--c-dim)", fontSize: 10, marginTop: 8 }}>
|
||||
凭证仅在当前 Session 内存中使用，不持久化
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 多 Tab 数据结构 ──
|
||||
interface TabData {
|
||||
id: string;
|
||||
label: string;
|
||||
connConfig: ConnConfig & { authMode: AuthMode };
|
||||
metrics: ServerMetrics | null;
|
||||
refreshing: boolean;
|
||||
fetchError: string;
|
||||
countdown: number;
|
||||
}
|
||||
|
||||
/** 根据 Tab 数据计算健康状态 */
|
||||
function computeHealth(tab: TabData): TabSummary["health"] {
|
||||
if (tab.fetchError) return "red";
|
||||
if (!tab.metrics) return "gray";
|
||||
const m = tab.metrics;
|
||||
const memPct = m.memory.total > 0 ? (m.memory.used / m.memory.total) * 100 : 0;
|
||||
const diskMax = m.disks.length > 0 ? Math.max(...m.disks.map((d) => d.usePct)) : 0;
|
||||
if (m.cpuPct >= 90 || memPct >= 90 || diskMax >= 90) return "red";
|
||||
if (m.services?.some((s) => s.active === "failed")) return "red";
|
||||
if (m.pm2?.some((p) => p.status === "errored")) return "red";
|
||||
if (m.cpuPct >= 70 || memPct >= 75 || diskMax >= 80) return "yellow";
|
||||
if (m.loadAvg[0] >= 2) return "yellow";
|
||||
if (m.pm2?.some((p) => p.restarts > 20)) return "yellow";
|
||||
return "green";
|
||||
}
|
||||
|
||||
/** 将 TabData 转换为总览摘要 */
|
||||
function toSummary(tab: TabData): TabSummary {
|
||||
const m = tab.metrics;
|
||||
return {
|
||||
id: tab.id,
|
||||
label: tab.label,
|
||||
hostname: m?.hostname ?? tab.label,
|
||||
health: computeHealth(tab),
|
||||
cpuPct: m?.cpuPct ?? 0,
|
||||
memPct: m && m.memory.total > 0 ? (m.memory.used / m.memory.total) * 100 : 0,
|
||||
diskMaxPct: m?.disks.length ? Math.max(...m.disks.map((d) => d.usePct)) : 0,
|
||||
pm2Online: m?.pm2?.filter((p) => p.status === "online").length ?? 0,
|
||||
pm2Total: m?.pm2?.length ?? 0,
|
||||
svcFailed: m?.services?.filter((s) => s.active === "failed").length ?? 0,
|
||||
refreshing: tab.refreshing,
|
||||
fetchError: tab.fetchError,
|
||||
ip: tab.connConfig.host,
|
||||
pm2Names: m?.pm2?.map((p) => p.name) ?? [],
|
||||
svcNames: m?.services?.map((s) => s.name) ?? [],
|
||||
pm2Detail: m?.pm2?.map((p) => ({ name: p.name, status: p.status, cpu: p.cpu, restarts: p.restarts, connections: p.connections, pid: p.pid })) ?? [],
|
||||
svcDetail: m?.services?.map((s) => ({ name: s.name, active: s.active, sub: s.sub })) ?? [],
|
||||
netConnections: m?.netConnections ?? [],
|
||||
loadAvg1: m?.loadAvg[0] ?? 0,
|
||||
topProc: (() => {
|
||||
const online = m?.pm2?.filter((p) => p.status === "online" && p.cpu > 0) ?? [];
|
||||
if (online.length === 0) return null;
|
||||
const top = online.reduce((a, b) => (b.cpu > a.cpu ? b : a));
|
||||
return { name: top.name, cpu: top.cpu, memMB: Math.round(top.memory / 1048576) };
|
||||
})(),
|
||||
cpuModel: m?.cpuModel ?? "",
|
||||
cpuCores: m?.cpuCores ?? 0,
|
||||
memTotalBytes: m?.memory.total ?? 0,
|
||||
diskTotalSize: m?.disks.length ? m.disks.reduce((biggest, d) => {
|
||||
const parseSize = (s: string) => { const n = parseFloat(s); if (s.includes("T")) return n * 1024; if (s.includes("G")) return n; if (s.includes("M")) return n / 1024; return 0; };
|
||||
return parseSize(d.size) > parseSize(biggest) ? d.size : biggest;
|
||||
}, m.disks[0].size) : "",
|
||||
};
|
||||
}
|
||||
|
||||
function buildPayload(cfg: ConnConfig, mode: AuthMode) {
|
||||
return {
|
||||
host: cfg.host,
|
||||
port: Number(cfg.port) || 22,
|
||||
username: cfg.username,
|
||||
password: mode === "password" ? cfg.password || undefined : undefined,
|
||||
privateKey: mode === "key" ? cfg.privateKey || undefined : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 主页组件 - 多 Tab */
|
||||
export default function HomePage() {
|
||||
const [tabs, setTabs] = useState<TabData[]>([]);
|
||||
const [activeId, setActiveId] = useState<string | null>("__dashboard__");
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
// 连接表单状态
|
||||
const [formConfig, setFormConfig] = useState<ConnConfig>(DEFAULT_CONFIG);
|
||||
const [formAuthMode, setFormAuthMode] = useState<AuthMode>("password");
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [connectError, setConnectError] = useState("");
|
||||
|
||||
// 每个 Tab 独立的定时器 Map
|
||||
const timersRef = useRef(
|
||||
new Map<string, { main: ReturnType<typeof setInterval>; count: ReturnType<typeof setInterval> }>()
|
||||
);
|
||||
|
||||
/** 停止某个 Tab 的定时器 */
|
||||
const stopTabTimers = useCallback((id: string) => {
|
||||
const t = timersRef.current.get(id);
|
||||
if (t) {
|
||||
clearInterval(t.main);
|
||||
clearInterval(t.count);
|
||||
timersRef.current.delete(id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/** 为某个 Tab 拉取数据 */
|
||||
const fetchTab = useCallback(async (id: string, connCfg: ConnConfig & { authMode: AuthMode }) => {
|
||||
setTabs((prev) =>
|
||||
prev.map((t) => (t.id === id ? { ...t, refreshing: true, fetchError: "" } : t))
|
||||
);
|
||||
const { authMode: mode, ...cfg } = connCfg;
|
||||
try {
|
||||
const res = await fetch("/api/metrics", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(buildPayload(cfg, mode)),
|
||||
});
|
||||
const data = (await res.json()) as ServerMetrics & { error?: string };
|
||||
if (!res.ok) throw new Error(data.error || "获取数据失败");
|
||||
setTabs((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === id ? { ...t, metrics: data, refreshing: false, countdown: REFRESH_SEC } : t
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
setTabs((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === id
|
||||
? { ...t, refreshing: false, fetchError: err instanceof Error ? err.message : "获取失败" }
|
||||
: t
|
||||
)
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
/** 启动某个 Tab 的轮询定时器 */
|
||||
const startTabTimers = useCallback(
|
||||
(id: string, connCfg: ConnConfig & { authMode: AuthMode }) => {
|
||||
stopTabTimers(id);
|
||||
const main = setInterval(() => fetchTab(id, connCfg), REFRESH_SEC * 1000);
|
||||
const count = setInterval(() => {
|
||||
setTabs((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === id ? { ...t, countdown: t.countdown <= 1 ? REFRESH_SEC : t.countdown - 1 } : t
|
||||
)
|
||||
);
|
||||
}, 1000);
|
||||
timersRef.current.set(id, { main, count });
|
||||
},
|
||||
[fetchTab, stopTabTimers]
|
||||
);
|
||||
|
||||
/** 组件卸载时清除所有定时器 */
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
timersRef.current.forEach((t) => {
|
||||
clearInterval(t.main);
|
||||
clearInterval(t.count);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
/** 启动时从 servers.config.json 自动加载全部服务器 */
|
||||
useEffect(() => {
|
||||
type ServerEntry = {
|
||||
id: string;
|
||||
label?: string;
|
||||
host: string;
|
||||
port?: number;
|
||||
username: string;
|
||||
password?: string;
|
||||
authMode?: AuthMode;
|
||||
};
|
||||
fetch("/api/servers")
|
||||
.then((r) => r.json())
|
||||
.then((data: { servers?: ServerEntry[] }) => {
|
||||
if (!data.servers?.length) return;
|
||||
const newTabs: TabData[] = data.servers.map((s) => {
|
||||
const connCfg: ConnConfig & { authMode: AuthMode } = {
|
||||
host: s.host,
|
||||
port: String(s.port ?? 22),
|
||||
username: s.username,
|
||||
password: s.password ?? "",
|
||||
privateKey: "",
|
||||
authMode: s.authMode ?? "password",
|
||||
};
|
||||
return {
|
||||
id: s.id,
|
||||
label: s.label || `${s.username}@${s.host}`,
|
||||
connConfig: connCfg,
|
||||
metrics: null,
|
||||
refreshing: true,
|
||||
fetchError: "",
|
||||
countdown: REFRESH_SEC,
|
||||
};
|
||||
});
|
||||
setTabs(newTabs);
|
||||
newTabs.forEach((tab) => {
|
||||
fetchTab(tab.id, tab.connConfig);
|
||||
startTabTimers(tab.id, tab.connConfig);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
// fetchTab/startTabTimers 是稳定的 useCallback 引用，安全忽略依赖警告
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
/** 连接表单提交 */
|
||||
const handleConnect = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setConnecting(true);
|
||||
setConnectError("");
|
||||
try {
|
||||
const res = await fetch("/api/connect", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(buildPayload(formConfig, formAuthMode)),
|
||||
});
|
||||
const data = (await res.json()) as { success?: boolean; error?: string };
|
||||
if (!res.ok) throw new Error(data.error || "连接失败");
|
||||
|
||||
const id = `${Date.now()}`;
|
||||
const connCfg: ConnConfig & { authMode: AuthMode } = { ...formConfig, authMode: formAuthMode };
|
||||
const label = `${formConfig.username}@${formConfig.host}`;
|
||||
const newTab: TabData = {
|
||||
id,
|
||||
label,
|
||||
connConfig: connCfg,
|
||||
metrics: null,
|
||||
refreshing: true,
|
||||
fetchError: "",
|
||||
countdown: REFRESH_SEC,
|
||||
};
|
||||
setTabs((prev) => [...prev, newTab]);
|
||||
setActiveId(prev => prev === null ? "__dashboard__" : prev);
|
||||
setShowForm(false);
|
||||
setConnectError("");
|
||||
fetchTab(id, connCfg);
|
||||
startTabTimers(id, connCfg);
|
||||
} catch (err) {
|
||||
setConnectError(err instanceof Error ? err.message : "连接失败");
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
/** 关闭某个 Tab */
|
||||
const closeTab = (id: string) => {
|
||||
stopTabTimers(id);
|
||||
setTabs((prev) => {
|
||||
const next = prev.filter((t) => t.id !== id);
|
||||
if (activeId === id) {
|
||||
setActiveId(next.length > 0 ? next[next.length - 1].id : null);
|
||||
if (next.length === 0) setShowForm(true);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
/** 执行 PM2 控制 */
|
||||
const handleControl = useCallback(
|
||||
async (tabId: string, action: string, target: string | number): Promise<string> => {
|
||||
const tab = tabs.find((t) => t.id === tabId);
|
||||
if (!tab) throw new Error("Tab 不存在");
|
||||
const { authMode: mode, ...cfg } = tab.connConfig;
|
||||
const res = await fetch("/api/control", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...buildPayload(cfg, mode), action, target }),
|
||||
});
|
||||
const data = (await res.json()) as { success?: boolean; output?: string; error?: string };
|
||||
if (!res.ok) throw new Error(data.error || "操作失败");
|
||||
setTimeout(() => fetchTab(tabId, tab.connConfig), 1500);
|
||||
return data.output ?? "";
|
||||
},
|
||||
[tabs, fetchTab]
|
||||
);
|
||||
|
||||
const activeTab = tabs.find((t) => t.id === activeId) ?? null;
|
||||
|
||||
// ── 连接表单（全屏 or overlay）──
|
||||
if (showForm || (tabs.length === 0 && activeId !== "__dashboard__")) {
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* 若已有 Tab，左上角显示切换按钮 */}
|
||||
{tabs.length > 0 && (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 8,
|
||||
left: 10,
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => { setShowForm(false); setActiveId(t.id); }}
|
||||
style={{
|
||||
background: "var(--bg-header)",
|
||||
border: "1px solid var(--c-border)",
|
||||
color: "var(--c-accent)",
|
||||
padding: "3px 10px",
|
||||
fontSize: 11,
|
||||
fontFamily: "inherit",
|
||||
cursor: "pointer",
|
||||
borderRadius: 3,
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<ConnectForm
|
||||
config={formConfig}
|
||||
setConfig={setFormConfig}
|
||||
authMode={formAuthMode}
|
||||
setAuthMode={setFormAuthMode}
|
||||
connecting={connecting}
|
||||
error={connectError}
|
||||
onSubmit={handleConnect}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 多 Tab 仪表盘（含空总览首页）──
|
||||
return (
|
||||
<MonitorDashboard
|
||||
tabs={tabs.map(toSummary)}
|
||||
activeTabId={activeId ?? "__dashboard__"}
|
||||
metrics={activeTab?.metrics ?? null}
|
||||
hostLabel={activeTab?.label ?? ""}
|
||||
refreshing={activeTab?.refreshing ?? tabs.some((t) => t.refreshing)}
|
||||
fetchError={activeTab?.fetchError ?? ""}
|
||||
countdown={activeTab?.countdown ?? REFRESH_SEC}
|
||||
onRefresh={() => {
|
||||
if (activeTab) {
|
||||
fetchTab(activeTab.id, activeTab.connConfig);
|
||||
} else {
|
||||
tabs.forEach((t) => fetchTab(t.id, t.connConfig));
|
||||
}
|
||||
}}
|
||||
onTabSelect={setActiveId}
|
||||
onTabClose={closeTab}
|
||||
onAddTab={() => { setFormConfig(DEFAULT_CONFIG); setConnectError(""); setShowForm(true); }}
|
||||
onDisconnect={() => activeId && closeTab(activeId)}
|
||||
onControl={(action, target) =>
|
||||
activeId ? handleControl(activeId, action, target) : Promise.resolve("")
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,991 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 监控面板组件 - 蓝屏终端风格
|
||||
* 展示服务器 CPU 负载、内存、磁盘、PM2 进程等实时数据
|
||||
*/
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
LogOut,
|
||||
RefreshCw,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import type { ServerMetrics, Pm2Process, SystemdService } from "@/lib/parse";
|
||||
import { formatBytes, formatPm2Uptime, type NetConnection } from "@/lib/parse";
|
||||
|
||||
export interface TabSummary {
|
||||
id: string;
|
||||
label: string;
|
||||
hostname: string;
|
||||
health: "green" | "yellow" | "red" | "gray";
|
||||
cpuPct: number;
|
||||
memPct: number;
|
||||
diskMaxPct: number;
|
||||
pm2Online: number;
|
||||
pm2Total: number;
|
||||
svcFailed: number;
|
||||
refreshing: boolean;
|
||||
fetchError: string;
|
||||
ip: string;
|
||||
pm2Names: string[];
|
||||
svcNames: string[];
|
||||
pm2Detail: { name: string; status: string; cpu: number; restarts: number; connections: number; pid: number | null }[];
|
||||
svcDetail: { name: string; active: string; sub: string }[];
|
||||
netConnections: NetConnection[];
|
||||
loadAvg1: number;
|
||||
topProc?: { name: string; cpu: number; memMB: number } | null;
|
||||
cpuModel: string;
|
||||
cpuCores: number;
|
||||
memTotalBytes: number;
|
||||
diskTotalSize: string;
|
||||
}
|
||||
|
||||
interface MonitorDashboardProps {
|
||||
tabs: TabSummary[];
|
||||
activeTabId: string;
|
||||
metrics: ServerMetrics | null;
|
||||
hostLabel: string;
|
||||
refreshing: boolean;
|
||||
fetchError: string;
|
||||
countdown: number;
|
||||
onRefresh: () => void;
|
||||
onTabSelect: (id: string) => void;
|
||||
onTabClose: (id: string) => void;
|
||||
onAddTab: () => void;
|
||||
onDisconnect: () => void;
|
||||
onControl: (action: string, target: string | number) => Promise<string>;
|
||||
}
|
||||
|
||||
const C = {
|
||||
bg: "var(--bg-base)",
|
||||
card: "var(--bg-card)",
|
||||
header: "var(--bg-header)",
|
||||
row: "var(--bg-row)",
|
||||
border: "var(--c-border)",
|
||||
primary: "var(--c-primary)",
|
||||
dim: "var(--c-dim)",
|
||||
accent: "var(--c-accent)",
|
||||
green: "var(--c-green)",
|
||||
warn: "var(--c-warn)",
|
||||
danger: "var(--c-danger)",
|
||||
active: "var(--c-active)",
|
||||
task: "var(--c-task)",
|
||||
alertBg: "var(--bg-alert)",
|
||||
alertBorder: "var(--c-alert-border)",
|
||||
};
|
||||
|
||||
/** 根据百分比返回颜色 */
|
||||
function pctColor(pct: number): string {
|
||||
if (pct >= 90) return C.danger;
|
||||
if (pct >= 70) return C.warn;
|
||||
return C.green;
|
||||
}
|
||||
|
||||
/** 总览迷你进度条 */
|
||||
function MiniBar({ label, pct, detail }: { label: string; pct: number; detail?: string }) {
|
||||
const color = pct >= 90 ? C.danger : pct >= 75 ? C.warn : C.green;
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 1 }}>
|
||||
<span style={{ color: C.dim, fontSize: 9, width: 24 }}>{label}</span>
|
||||
<div style={{ flex: 1, height: 3, background: C.header, borderRadius: 2, overflow: "hidden", border: `1px solid ${C.border}` }}>
|
||||
<div style={{ width: `${Math.min(100, pct)}%`, height: "100%", background: color, transition: "width 0.4s" }} />
|
||||
</div>
|
||||
<span style={{ color, fontSize: 9, width: 28, textAlign: "right" }}>{pct.toFixed(1)}%</span>
|
||||
{detail && <span style={{ color: C.dim, fontSize: 9, width: 36, textAlign: "right", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={detail}>{detail}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 服务器总览卡片 */
|
||||
function ServerCard({ tab, onClick }: { tab: TabSummary; onClick: () => void }) {
|
||||
const hColor = tab.health === "red" ? C.danger : tab.health === "yellow" ? C.warn : tab.health === "green" ? C.green : C.dim;
|
||||
const hLabel = tab.health === "red" ? "异常" : tab.health === "yellow" ? "警告" : tab.health === "green" ? "正常" : "加载中";
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
background: C.card,
|
||||
border: `1px solid ${hColor}55`,
|
||||
boxShadow: `0 0 10px ${hColor}18`,
|
||||
borderRadius: 4,
|
||||
padding: "7px 10px",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 2 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5 }}>
|
||||
<span style={{ color: hColor, fontSize: 12 }}>●</span>
|
||||
<span style={{ color: C.accent, fontWeight: 700, fontSize: 11 }}>{tab.hostname || tab.label}</span>
|
||||
</div>
|
||||
<span style={{ color: hColor, fontSize: 9, border: `1px solid ${hColor}44`, padding: "0px 4px", borderRadius: 2 }}>{hLabel}</span>
|
||||
</div>
|
||||
<div style={{ color: C.dim, fontSize: 9, marginBottom: 1 }}>{tab.label} · <span style={{ color: C.primary }}>{tab.ip}</span>{tab.cpuModel && <> · {tab.cpuModel}</>}</div>
|
||||
{tab.health === "gray" ? (
|
||||
<div style={{ color: C.dim, fontSize: 11, display: "flex", alignItems: "center", gap: 4, flex: 1 }}>
|
||||
{tab.refreshing ? <><Loader2 style={{ width: 11, height: 11 }} className="animate-spin" /> 连接中...</> : tab.fetchError ? <><AlertCircle style={{ width: 11, height: 11, color: C.danger }} /> {tab.fetchError}</> : "暂无数据"}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<MiniBar label="CPU" pct={tab.cpuPct} detail={tab.cpuCores > 0 ? `${tab.cpuCores}核` : undefined} />
|
||||
<MiniBar label="MEM" pct={tab.memPct} detail={tab.memTotalBytes > 0 ? `${(tab.memTotalBytes / (1024 ** 3)).toFixed(1)}G` : undefined} />
|
||||
<MiniBar label="DSK" pct={tab.diskMaxPct} detail={tab.diskTotalSize || undefined} />
|
||||
<div style={{ display: "flex", gap: 10, marginTop: 1, fontSize: 9 }}>
|
||||
<span style={{ color: C.dim }}>PM2 <span style={{ color: tab.pm2Total === 0 ? C.dim : tab.pm2Online === tab.pm2Total ? C.green : C.warn }}>{tab.pm2Online}/{tab.pm2Total}</span></span>
|
||||
{tab.svcFailed > 0 && <span style={{ color: C.danger }}>svc-fail {tab.svcFailed}</span>}
|
||||
{tab.topProc && (
|
||||
<span style={{ color: C.dim, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
<span style={{ color: tab.topProc.cpu >= 20 ? C.danger : tab.topProc.cpu >= 5 ? C.warn : C.accent }}>▶</span>
|
||||
<span style={{ color: C.accent }} title={tab.topProc.name}>{tab.topProc.name}</span>
|
||||
<span style={{ color: tab.topProc.cpu >= 20 ? C.danger : tab.topProc.cpu >= 5 ? C.warn : C.primary }}>{tab.topProc.cpu.toFixed(1)}%</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 水平进度条（CSS变量着色） */
|
||||
function Bar({ value, max }: { value: number; max: number }) {
|
||||
const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0;
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 5,
|
||||
background: C.header,
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
border: `1px solid ${C.border}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: `${pct}%`,
|
||||
height: "100%",
|
||||
background: pctColor(pct),
|
||||
transition: "width 0.4s",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ color: pctColor(pct), minWidth: 32, textAlign: "right", fontSize: 11 }}>
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 区块标题行 */
|
||||
function SectionHead({ label }: { label: string }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: C.header,
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
padding: "4px 10px",
|
||||
color: C.accent,
|
||||
letterSpacing: "0.08em",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
── {label.toUpperCase()} ──
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 键值行 */
|
||||
function KV({ k, v, vc }: { k: string; v: string; vc?: string }) {
|
||||
return (
|
||||
<div style={{ display: "flex", padding: "3px 10px", gap: 8, alignItems: "baseline" }}>
|
||||
<span style={{ color: C.dim, minWidth: 80, flexShrink: 0 }}>{k}</span>
|
||||
<span style={{ color: vc ?? C.primary }}>{v}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** PM2 状态 */
|
||||
function ProcStatus({ status }: { status: string }) {
|
||||
const c =
|
||||
status === "online"
|
||||
? C.green
|
||||
: status === "errored"
|
||||
? C.danger
|
||||
: C.dim;
|
||||
const label = status === "online" ? "运行中" : status === "errored" ? "错误" : status === "stopped" ? "已停止" : status === "launching" ? "启动中" : status;
|
||||
return (
|
||||
<span style={{ color: c }}>
|
||||
{status === "online" ? "●" : status === "errored" ? "✗" : "○"} {label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** 单行操作按钮 */
|
||||
function CtrlBtn({
|
||||
label,
|
||||
color,
|
||||
onClick,
|
||||
loading,
|
||||
}: {
|
||||
label: string;
|
||||
color: string;
|
||||
onClick: () => void;
|
||||
loading: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: "none",
|
||||
border: `1px solid ${color}44`,
|
||||
color: loading ? C.dim : color,
|
||||
padding: "1px 6px",
|
||||
cursor: loading ? "not-allowed" : "pointer",
|
||||
fontSize: 10,
|
||||
fontFamily: "inherit",
|
||||
borderRadius: 2,
|
||||
marginLeft: 3,
|
||||
}}
|
||||
>
|
||||
{loading ? "..." : label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function MonitorDashboard({
|
||||
tabs,
|
||||
activeTabId,
|
||||
metrics,
|
||||
hostLabel,
|
||||
refreshing,
|
||||
fetchError,
|
||||
countdown,
|
||||
onRefresh,
|
||||
onTabSelect,
|
||||
onTabClose,
|
||||
onAddTab,
|
||||
onDisconnect,
|
||||
onControl,
|
||||
}: MonitorDashboardProps) {
|
||||
const mem = metrics?.memory;
|
||||
const [ctrlLoading, setCtrlLoading] = useState<Record<string, boolean>>({});
|
||||
const [ctrlMsg, setCtrlMsg] = useState("");
|
||||
const [dashboardTab, setDashboardTab] = useState<"resources" | "services">("resources");
|
||||
|
||||
async function handleCtrl(action: string, target: string | number) {
|
||||
const key = `${action}-${target}`;
|
||||
setCtrlLoading((p) => ({ ...p, [key]: true }));
|
||||
setCtrlMsg("");
|
||||
try {
|
||||
const msg = await onControl(action, target);
|
||||
setCtrlMsg(`✓ ${action} ${target}: ${msg || "OK"}`);
|
||||
} catch (e) {
|
||||
setCtrlMsg(`✗ ${action} ${target}: ${e instanceof Error ? e.message : "失败"}`);
|
||||
} finally {
|
||||
setCtrlLoading((p) => ({ ...p, [key]: false }));
|
||||
}
|
||||
}
|
||||
|
||||
const cardStyle: React.CSSProperties = {
|
||||
background: C.card,
|
||||
border: `1px solid ${C.border}`,
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
marginBottom: 6,
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: "100vh", background: C.bg, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
|
||||
{/* ── 顶栏 ── */}
|
||||
<div
|
||||
style={{
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 40,
|
||||
background: "var(--bg-header)",
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
}}
|
||||
>
|
||||
{/* Tab 条 */}
|
||||
<div style={{ display: "flex", alignItems: "center", borderBottom: `1px solid ${C.border}`, paddingLeft: 10, overflowX: "auto", scrollbarWidth: "none" }}>
|
||||
<span style={{ color: C.accent, fontWeight: 700, fontSize: 12, paddingRight: 10, borderRight: `1px solid ${C.border}`, marginRight: 6 }}>
|
||||
WebWatcher
|
||||
</span>
|
||||
{/* 总览 Tab */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "3px 10px",
|
||||
cursor: "pointer",
|
||||
fontSize: 11,
|
||||
color: activeTabId === "__dashboard__" ? C.accent : C.dim,
|
||||
background: activeTabId === "__dashboard__" ? "var(--bg-card)" : "transparent",
|
||||
borderRight: `1px solid ${C.border}`,
|
||||
borderBottom: activeTabId === "__dashboard__" ? `2px solid ${C.accent}` : "2px solid transparent",
|
||||
userSelect: "none",
|
||||
}}
|
||||
onClick={() => onTabSelect("__dashboard__")}
|
||||
>
|
||||
⊞ 总览
|
||||
</div>
|
||||
{tabs.map((tab) => {
|
||||
const active = tab.id === activeTabId;
|
||||
return (
|
||||
<div
|
||||
key={tab.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: "4px 10px",
|
||||
cursor: "pointer",
|
||||
fontSize: 11,
|
||||
color: active ? C.accent : C.dim,
|
||||
background: active ? "var(--bg-card)" : "transparent",
|
||||
borderRight: `1px solid ${C.border}`,
|
||||
borderBottom: active ? `2px solid ${C.accent}` : "2px solid transparent",
|
||||
userSelect: "none",
|
||||
}}
|
||||
onClick={() => onTabSelect(tab.id)}
|
||||
>
|
||||
<span style={{
|
||||
width: 6, height: 6, borderRadius: "50%", flexShrink: 0,
|
||||
background: tab.health === "red" ? C.danger : tab.health === "yellow" ? C.warn : tab.health === "green" ? C.green : C.dim,
|
||||
display: "inline-block",
|
||||
}} />
|
||||
<span style={{ maxWidth: 90, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tab.label}</span>
|
||||
<span
|
||||
onClick={(e) => { e.stopPropagation(); onTabClose(tab.id); }}
|
||||
style={{ color: C.dim, fontSize: 10, marginLeft: 2, lineHeight: 1 }}
|
||||
title="关闭"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* + 添加服务器 */}
|
||||
<button
|
||||
onClick={onAddTab}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: C.dim,
|
||||
padding: "4px 10px",
|
||||
cursor: "pointer",
|
||||
fontSize: 14,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
title="添加服务器"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
{/* 当前 Tab 信息行 */}
|
||||
<div style={{ padding: "2px 10px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<span style={{ color: C.primary, fontSize: 11 }}>{metrics?.hostname ?? hostLabel}</span>
|
||||
{refreshing && <Loader2 className="animate-spin" style={{ width: 11, height: 11, color: C.accent }} />}
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<span style={{ color: C.dim, fontSize: 11 }}>{countdown}s 后刷新</span>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
style={{ background: "none", border: `1px solid ${C.border}`, color: C.primary, padding: "2px 8px", cursor: "pointer", fontSize: 11, borderRadius: 3 }}
|
||||
>
|
||||
<RefreshCw style={{ width: 10, height: 10, display: "inline", marginRight: 3 }} />
|
||||
刷新
|
||||
</button>
|
||||
<button
|
||||
onClick={onDisconnect}
|
||||
style={{ background: "none", border: `1px solid ${C.danger}44`, color: C.danger, padding: "2px 8px", cursor: "pointer", fontSize: 11, borderRadius: 3 }}
|
||||
>
|
||||
<LogOut style={{ width: 10, height: 10, display: "inline", marginRight: 3 }} />
|
||||
断开
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 主体 ── */}
|
||||
<div style={{ flex: 1, display: "flex", width: "100%", gap: 0, overflow: "hidden" }}>
|
||||
{/* 左侧告警栏 - 常驻 */}
|
||||
<div style={{ width: 260, minWidth: 260, flexShrink: 0, background: C.header, borderRight: `1px solid ${C.border}`, overflowY: "auto", display: "flex", flexDirection: "column" }}>
|
||||
{(() => {
|
||||
const hasAlerts = tabs.some(t => t.health === "red" || t.health === "yellow");
|
||||
const redCount = tabs.filter(t => t.health === "red").length;
|
||||
const yellowCount = tabs.filter(t => t.health === "yellow").length;
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: "4px 10px", display: "flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", borderBottom: `1px solid ${hasAlerts ? C.alertBorder : C.border}`, flexShrink: 0 }}>
|
||||
{hasAlerts ? <AlertCircle style={{ width: 12, height: 12, color: C.danger }} /> : <CheckCircle style={{ width: 12, height: 12, color: C.green }} />}
|
||||
<span style={{ color: hasAlerts ? C.danger : C.green }}>{hasAlerts ? "告警通知" : "系统状态"}</span>
|
||||
{hasAlerts && (
|
||||
<span style={{ fontSize: 10, marginLeft: "auto", display: "flex", gap: 8 }}>
|
||||
{redCount > 0 && <span style={{ color: C.danger, fontWeight: 600 }}>{redCount} 异常</span>}
|
||||
{yellowCount > 0 && <span style={{ color: C.warn, fontWeight: 600 }}>{yellowCount} 警告</span>}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{hasAlerts ? (
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
{tabs.filter(t => t.health === "red" || t.health === "yellow").map(tab => {
|
||||
const alerts: { text: string; level: "red" | "yellow" }[] = [];
|
||||
if (tab.fetchError) alerts.push({ text: `连接失败`, level: "red" });
|
||||
if (tab.cpuPct >= 90) alerts.push({ text: `CPU ${Math.round(tab.cpuPct)}%`, level: "red" });
|
||||
else if (tab.cpuPct >= 70) alerts.push({ text: `CPU ${Math.round(tab.cpuPct)}%`, level: "yellow" });
|
||||
if (tab.memPct >= 90) alerts.push({ text: `内存 ${Math.round(tab.memPct)}%`, level: "red" });
|
||||
else if (tab.memPct >= 75) alerts.push({ text: `内存 ${Math.round(tab.memPct)}%`, level: "yellow" });
|
||||
if (tab.diskMaxPct >= 90) alerts.push({ text: `磁盘 ${Math.round(tab.diskMaxPct)}%`, level: "red" });
|
||||
else if (tab.diskMaxPct >= 80) alerts.push({ text: `磁盘 ${Math.round(tab.diskMaxPct)}%`, level: "yellow" });
|
||||
if (tab.loadAvg1 >= 2) alerts.push({ text: `负载 ${tab.loadAvg1.toFixed(2)}`, level: "yellow" });
|
||||
if (tab.svcFailed > 0) alerts.push({ text: `${tab.svcFailed} 服务失败`, level: "red" });
|
||||
const erroredPm2 = tab.pm2Detail.filter(p => p.status === "errored");
|
||||
if (erroredPm2.length > 0) alerts.push({ text: `PM2异常: ${erroredPm2.map(p => p.name).join(",")}`, level: "red" });
|
||||
else if (tab.pm2Total > 0 && tab.pm2Online < tab.pm2Total) alerts.push({ text: `PM2 ${tab.pm2Online}/${tab.pm2Total}`, level: tab.pm2Online === 0 ? "red" : "yellow" });
|
||||
const highRestarts = tab.pm2Detail.filter(p => p.restarts > 20);
|
||||
if (highRestarts.length > 0) alerts.push({ text: `频繁重启(${highRestarts.length})`, level: "yellow" });
|
||||
const statusColor = tab.health === "red" ? C.danger : C.warn;
|
||||
return (
|
||||
<div key={tab.id} style={{ padding: "7px 12px", borderBottom: `1px solid ${C.alertBorder}`, cursor: "pointer" }} onClick={() => onTabSelect(tab.id)}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 3 }}>
|
||||
<span style={{ color: statusColor, fontSize: 10, textShadow: `0 0 5px ${statusColor}` }}>●</span>
|
||||
<span style={{ color: C.accent, fontWeight: 600, fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>{tab.hostname || tab.label}</span>
|
||||
<span style={{ color: statusColor, fontSize: 9, padding: "1px 5px", border: `1px solid ${statusColor}44`, borderRadius: 2, fontWeight: 700, background: `${statusColor}10`, flexShrink: 0 }}>
|
||||
{tab.health === "red" ? "异常" : "警告"}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 3, paddingLeft: 15 }}>
|
||||
{alerts.map((a, i) => (
|
||||
<span key={i} style={{ fontSize: 9, padding: "1px 5px", background: a.level === "red" ? C.alertBg : `${C.warn}15`, border: `1px solid ${a.level === "red" ? C.danger : C.warn}33`, borderRadius: 2, color: a.level === "red" ? C.danger : C.warn, lineHeight: 1.3, fontWeight: 600 }}>
|
||||
{a.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: C.green, gap: 6, padding: 20 }}>
|
||||
<CheckCircle style={{ width: 24, height: 24 }} />
|
||||
<span style={{ fontSize: 11 }}>全部服务器正常</span>
|
||||
<span style={{ fontSize: 10, color: C.dim }}>{tabs.length} 台在线</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
{/* 右侧主内容 */}
|
||||
<div style={{ flex: 1, maxWidth: 1400, margin: "0 auto", width: "100%", padding: "8px 10px", minWidth: 0, overflowY: "auto" }}>
|
||||
|
||||
{/* ── 服务器总览 ── */}
|
||||
{activeTabId === "__dashboard__" && (
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
{tabs.length === 0 ? (
|
||||
<div style={{ textAlign: "center", color: C.dim, padding: 40, fontSize: 13 }}>
|
||||
<div style={{ fontSize: 28, marginBottom: 10 }}>⊞</div>
|
||||
暂无已连接的服务器，点击 + 添加
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 总览子 Tab 切换 */}
|
||||
<div style={{ display: "flex", gap: 0, marginBottom: 10, borderBottom: `1px solid ${C.border}` }}>
|
||||
{(["resources", "services"] as const).map(t => (
|
||||
<button key={t} onClick={() => setDashboardTab(t)} style={{ background: "none", border: "none", borderBottom: dashboardTab === t ? `2px solid ${C.accent}` : "2px solid transparent", color: dashboardTab === t ? C.accent : C.dim, padding: "4px 14px", fontSize: 11, fontWeight: dashboardTab === t ? 700 : 400, cursor: "pointer", fontFamily: "inherit", letterSpacing: "0.04em" }}>
|
||||
{t === "resources" ? "服务器资源" : "已部署服务"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{dashboardTab === "resources" && (
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 8 }}>
|
||||
{tabs.map(tab => (
|
||||
<ServerCard key={tab.id} tab={tab} onClick={() => onTabSelect(tab.id)} />
|
||||
))}
|
||||
<div
|
||||
onClick={onAddTab}
|
||||
style={{ background: "transparent", border: `1px dashed ${C.border}`, borderRadius: 4, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: C.dim, fontSize: 28, minHeight: 140 }}
|
||||
title="添加服务器"
|
||||
>
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 已部署服务 */}
|
||||
{dashboardTab === "services" && tabs.some(t => t.pm2Names.length > 0 || t.svcNames.length > 0) && (
|
||||
<div style={{ marginTop: 16, background: C.card, border: `1px solid ${C.border}`, borderRadius: 4, overflow: "hidden" }}>
|
||||
<div style={{ background: C.header, borderBottom: `1px solid ${C.border}`, padding: "7px 14px", color: C.accent, fontSize: 12, fontWeight: 700, letterSpacing: "0.08em" }}>
|
||||
── 已部署服务 ──
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "200px 1fr", fontSize: 11 }}>
|
||||
{tabs.filter(t => t.pm2Names.length > 0 || t.svcNames.length > 0).map(tab => {
|
||||
const hasAlert = tab.health === "red" || tab.health === "yellow";
|
||||
const alertColor = tab.health === "red" ? C.danger : tab.health === "yellow" ? C.warn : "";
|
||||
const rowBorder = hasAlert ? `1px solid ${alertColor}44` : `1px solid ${C.border}`;
|
||||
const rowBg = hasAlert ? (tab.health === "red" ? `${C.danger}08` : `${C.warn}08`) : "transparent";
|
||||
const pm2Map = new Map<string, { status: string; cpu: number; connections: number }>();
|
||||
tab.pm2Detail.forEach(p => {
|
||||
const existing = pm2Map.get(p.name);
|
||||
if (!existing || p.cpu > existing.cpu) pm2Map.set(p.name, { status: p.status, cpu: p.cpu, connections: (existing?.connections ?? 0) + p.connections });
|
||||
});
|
||||
const svcMap = new Map<string, { active: string; sub: string }>();
|
||||
tab.svcDetail.forEach(s => { if (!svcMap.has(s.name)) svcMap.set(s.name, { active: s.active, sub: s.sub }); });
|
||||
return (
|
||||
<React.Fragment key={tab.id}>
|
||||
<div style={{ padding: "8px 14px", borderBottom: rowBorder, background: rowBg, display: "flex", alignItems: "center", gap: 6 }}>
|
||||
{hasAlert && <span style={{ color: alertColor, fontSize: 10, flexShrink: 0 }}>●</span>}
|
||||
<div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
|
||||
<span style={{ color: hasAlert ? alertColor : C.accent, fontWeight: 600, lineHeight: 1.4 }}>{tab.hostname || tab.label}</span>
|
||||
<span style={{ color: C.dim, fontSize: 10 }}>{tab.ip}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: "8px 14px", borderBottom: rowBorder, background: rowBg, display: "flex", flexWrap: "wrap", alignItems: "center", alignContent: "center", gap: 5 }}>
|
||||
{Array.from(new Set(tab.pm2Names)).map((n, i) => {
|
||||
const info = pm2Map.get(n);
|
||||
const isError = info?.status === "errored";
|
||||
const isStopped = info?.status === "stopped";
|
||||
const hasExtConn = (info?.connections ?? 0) > 0 && info?.status === "online";
|
||||
const hasCpuOnly = !hasExtConn && info?.status === "online" && (info?.cpu ?? 0) > 0;
|
||||
const isIdle = info?.status === "online" && !hasExtConn && !hasCpuOnly;
|
||||
|
||||
let tagColor: string, tagBorder: string, tagBg: string, icon = "", fw = 400;
|
||||
let shadow = "none", textGlow = "none", tooltip = n;
|
||||
if (isError) {
|
||||
tagColor = C.danger; tagBorder = `${C.danger}66`; tagBg = C.alertBg; icon = "✗ "; fw = 600; shadow = `0 0 6px ${C.danger}33`;
|
||||
tooltip = `错误 · ${n}`;
|
||||
} else if (isStopped) {
|
||||
tagColor = C.dim; tagBorder = `${C.dim}44`; tagBg = C.row;
|
||||
tooltip = `已停止 · ${n}`;
|
||||
} else if (hasExtConn) {
|
||||
tagColor = C.active; tagBorder = `${C.active}66`; tagBg = `${C.active}18`; icon = "🌐 "; fw = 700;
|
||||
shadow = `0 0 10px ${C.active}55, 0 0 3px ${C.active}77`; textGlow = `0 0 8px ${C.active}77`;
|
||||
tooltip = `外部访问中 · ${info!.connections}个连接 · CPU ${info!.cpu.toFixed(1)}%`;
|
||||
} else if (hasCpuOnly) {
|
||||
tagColor = C.task; tagBorder = `${C.task}66`; tagBg = `${C.task}15`; icon = "⚙ "; fw = 600;
|
||||
shadow = `0 0 6px ${C.task}44`;
|
||||
tooltip = `后台任务 · CPU ${info!.cpu.toFixed(1)}%`;
|
||||
} else if (isIdle) {
|
||||
tagColor = hasAlert ? alertColor : C.accent; tagBorder = hasAlert ? `${alertColor}44` : C.border; tagBg = hasAlert ? `${alertColor}15` : C.header;
|
||||
tooltip = `空闲 · CPU 0%`;
|
||||
} else {
|
||||
tagColor = hasAlert ? alertColor : C.accent; tagBorder = hasAlert ? `${alertColor}44` : C.border; tagBg = hasAlert ? `${alertColor}15` : C.header;
|
||||
}
|
||||
return (
|
||||
<span key={`pm2-${i}-${n}`} style={{ fontSize: 10, padding: "2px 8px", background: tagBg, border: `1px solid ${tagBorder}`, borderRadius: 3, color: tagColor, lineHeight: 1.4, fontWeight: fw, boxShadow: shadow, textShadow: textGlow }} title={tooltip}>{icon}{n}</span>
|
||||
);
|
||||
})}
|
||||
{Array.from(new Set(tab.svcNames)).map((n, i) => {
|
||||
const info = svcMap.get(n);
|
||||
const isRunning = info?.active === "active" && info.sub === "running";
|
||||
const isFailed = info?.active === "failed";
|
||||
const tagColor = isFailed ? C.danger : isRunning ? C.green : C.dim;
|
||||
const tagBorder = isFailed ? `${C.danger}66` : isRunning ? `${C.green}33` : `${C.dim}44`;
|
||||
const tagBg = isFailed ? C.alertBg : isRunning ? C.header : C.row;
|
||||
return (
|
||||
<span key={`svc-${i}-${n}`} style={{ fontSize: 10, padding: "2px 8px", background: hasAlert && !isFailed ? `${alertColor}11` : tagBg, border: `1px solid ${hasAlert && !isFailed ? `${alertColor}44` : tagBorder}`, borderRadius: 3, color: hasAlert && !isFailed && !isRunning ? alertColor : tagColor, lineHeight: 1.4 }}>{n}</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTabId !== "__dashboard__" && fetchError && (
|
||||
<div style={{ color: C.danger, border: `1px solid ${C.danger}44`, padding: "4px 10px", marginBottom: 6, fontSize: 11, borderRadius: 3, display: "flex", gap: 6, alignItems: "center" }}>
|
||||
<AlertCircle style={{ width: 12, height: 12 }} /> {fetchError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTabId !== "__dashboard__" && !metrics && !fetchError && (
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: 160, color: C.dim, gap: 8 }}>
|
||||
<Loader2 className="animate-spin" style={{ width: 14, height: 14 }} />
|
||||
正在采集服务器数据...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTabId !== "__dashboard__" && metrics && (
|
||||
<>
|
||||
{/* ── 系统信息 ── */}
|
||||
<div style={cardStyle}>
|
||||
<SectionHead label="系统信息" />
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", padding: "4px 0" }}>
|
||||
<KV k="主机名" v={metrics.hostname} vc={C.accent} />
|
||||
<KV k="系统" v={metrics.osRelease} />
|
||||
<KV k="运行时长" v={metrics.uptime} vc={C.green} />
|
||||
<KV k="更新时间" v={new Date(metrics.timestamp).toLocaleTimeString("zh-CN")} />
|
||||
<KV
|
||||
k="负载 1/5/15"
|
||||
v={metrics.loadAvg.map((v) => v.toFixed(2)).join(" ")}
|
||||
vc={metrics.loadAvg[0] >= 2 ? C.danger : metrics.loadAvg[0] >= 1 ? C.warn : C.primary}
|
||||
/>
|
||||
</div>
|
||||
{/* CPU 进度条 */}
|
||||
<div style={{ padding: "4px 10px 6px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
|
||||
<span style={{ color: C.dim }}>CPU</span>
|
||||
<span style={{ color: pctColor(metrics.cpuPct) }}>{metrics.cpuPct.toFixed(1)}%</span>
|
||||
</div>
|
||||
<Bar value={metrics.cpuPct} max={100} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 内存 ── */}
|
||||
{mem && (
|
||||
<div style={cardStyle}>
|
||||
<SectionHead label="内存" />
|
||||
<div style={{ padding: "5px 10px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
|
||||
<span style={{ color: C.dim }}>MEM</span>
|
||||
<span style={{ color: C.primary }}>{formatBytes(mem.used)} / {formatBytes(mem.total)}</span>
|
||||
</div>
|
||||
<Bar value={mem.used} max={mem.total} />
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 4, marginTop: 6 }}>
|
||||
{[
|
||||
["可用", formatBytes(mem.available), C.green],
|
||||
["缓存", formatBytes(mem.cached), C.dim],
|
||||
["空闲", formatBytes(mem.free), C.dim],
|
||||
].map(([k, v, c]) => (
|
||||
<div key={k as string} style={{ textAlign: "center" }}>
|
||||
<div style={{ color: c as string, fontSize: 11 }}>{v as string}</div>
|
||||
<div style={{ color: C.dim, fontSize: 10 }}>{k as string}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{mem.swapTotal > 0 && (
|
||||
<>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, marginBottom: 4 }}>
|
||||
<span style={{ color: C.dim }}>SWAP</span>
|
||||
<span style={{ color: C.primary }}>{formatBytes(mem.swapUsed)} / {formatBytes(mem.swapTotal)}</span>
|
||||
</div>
|
||||
<Bar value={mem.swapUsed} max={mem.swapTotal} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 磁盘 ── */}
|
||||
{metrics.disks.length > 0 && (
|
||||
<div style={cardStyle}>
|
||||
<SectionHead label="磁盘" />
|
||||
<div style={{ padding: "5px 10px" }}>
|
||||
{metrics.disks.map((disk) => (
|
||||
<div key={disk.mount} style={{ marginBottom: 8 }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
|
||||
<span style={{ color: C.accent }}>{disk.mount}</span>
|
||||
<span style={{ color: C.dim, fontSize: 11 }}>{disk.filesystem} {disk.used}/{disk.size}</span>
|
||||
</div>
|
||||
<Bar value={disk.usePct} max={100} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── PM2 进程 ── */}
|
||||
<div style={cardStyle}>
|
||||
<SectionHead label={`PM2 进程${metrics.pm2 !== null ? ` (${metrics.pm2.length})` : ""}`} />
|
||||
{ctrlMsg && (
|
||||
<div style={{
|
||||
padding: "3px 10px",
|
||||
fontSize: 11,
|
||||
color: ctrlMsg.startsWith("✓") ? C.green : C.danger,
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
gap: 6,
|
||||
}}>
|
||||
<span style={{ flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" }}>{ctrlMsg}</span>
|
||||
<span
|
||||
onClick={() => setCtrlMsg("")}
|
||||
style={{ cursor: "pointer", color: C.dim, fontSize: 13, lineHeight: 1, flexShrink: 0, marginTop: 1 }}
|
||||
title="关闭"
|
||||
>×</span>
|
||||
</div>
|
||||
)}
|
||||
{metrics.pm2 === null ? (
|
||||
<div style={{ color: C.dim, padding: "6px 10px", fontSize: 11 }}>
|
||||
<XCircle style={{ width: 11, height: 11, display: "inline", marginRight: 4 }} />
|
||||
PM2 未安装或无法访问
|
||||
</div>
|
||||
) : metrics.pm2.length === 0 ? (
|
||||
<div style={{ color: C.dim, padding: "6px 10px", fontSize: 11 }}>
|
||||
<CheckCircle style={{ width: 11, height: 11, display: "inline", marginRight: 4 }} />
|
||||
暂无 PM2 进程
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 560 }}>
|
||||
<thead>
|
||||
<tr style={{ background: C.header, borderBottom: `1px solid ${C.border}` }}>
|
||||
{["ID","进程名","状态","CPU","内存","重启次数","运行时长","操作"].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
style={{
|
||||
padding: "3px 8px",
|
||||
color: C.dim,
|
||||
fontWeight: 600,
|
||||
textAlign: h === "ID" || h === "进程名" || h === "状态" ? "left" : "right",
|
||||
fontSize: 11,
|
||||
}}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[...metrics.pm2].sort((a, b) => b.cpu - a.cpu).map((proc: Pm2Process, i: number) => (
|
||||
<tr
|
||||
key={proc.id}
|
||||
style={{
|
||||
background: proc.cpu >= 20 ? `${C.warn}15` : proc.cpu >= 5 ? `${C.task}10` : i % 2 === 0 ? C.card : C.row,
|
||||
borderBottom: `1px solid ${proc.cpu >= 20 ? C.danger + "44" : proc.cpu >= 5 ? C.warn + "33" : C.border}`,
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: "3px 8px", color: C.dim }}>{proc.id}</td>
|
||||
<td style={{ padding: "3px 8px", color: C.accent, fontWeight: 600 }}>{proc.name}</td>
|
||||
<td style={{ padding: "3px 8px" }}><ProcStatus status={proc.status} /></td>
|
||||
<td style={{ padding: "3px 8px", color: C.primary, textAlign: "right" }}>{proc.cpu.toFixed(1)}%</td>
|
||||
<td style={{ padding: "3px 8px", color: C.primary, textAlign: "right" }}>{formatBytes(proc.memory)}</td>
|
||||
<td style={{ padding: "3px 8px", textAlign: "right", color: proc.restarts > 0 ? C.warn : C.dim }}>
|
||||
{proc.restarts}
|
||||
</td>
|
||||
<td style={{ padding: "3px 8px", color: C.dim, textAlign: "right" }}>
|
||||
{proc.status === "online" ? formatPm2Uptime(proc.uptimeMs) : "-"}
|
||||
</td>
|
||||
<td style={{ padding: "3px 8px", textAlign: "right", whiteSpace: "nowrap" }}>
|
||||
<CtrlBtn
|
||||
label="重启"
|
||||
color={C.warn}
|
||||
loading={!!ctrlLoading[`restart-${proc.id}`]}
|
||||
onClick={() => handleCtrl("restart", proc.id)}
|
||||
/>
|
||||
{proc.status === "online" ? (
|
||||
<CtrlBtn
|
||||
label="停止"
|
||||
color={C.danger}
|
||||
loading={!!ctrlLoading[`stop-${proc.id}`]}
|
||||
onClick={() => handleCtrl("stop", proc.id)}
|
||||
/>
|
||||
) : (
|
||||
<CtrlBtn
|
||||
label="启动"
|
||||
color={C.green}
|
||||
loading={!!ctrlLoading[`start-${proc.id}`]}
|
||||
onClick={() => handleCtrl("start", proc.id)}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── systemd 服务 ── */}
|
||||
{metrics.services && metrics.services.length > 0 && (
|
||||
<div style={cardStyle}>
|
||||
<SectionHead label={`systemd 服务 (${metrics.services.length})`} />
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 520 }}>
|
||||
<thead>
|
||||
<tr style={{ background: C.header, borderBottom: `1px solid ${C.border}` }}>
|
||||
{["服务名", "状态", "子状态", "描述", "操作"].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
style={{
|
||||
padding: "3px 8px",
|
||||
color: C.dim,
|
||||
fontWeight: 600,
|
||||
textAlign: h === "操作" ? "right" : "left",
|
||||
fontSize: 11,
|
||||
}}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{metrics.services.map((svc: SystemdService, i: number) => {
|
||||
const running = svc.sub === "running";
|
||||
const failed = svc.active === "failed";
|
||||
const svcColor = failed ? C.danger : running ? C.green : C.dim;
|
||||
return (
|
||||
<tr
|
||||
key={svc.name}
|
||||
style={{
|
||||
background: i % 2 === 0 ? C.card : "var(--bg-row)",
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: "3px 8px", color: C.accent, fontWeight: 600 }}>{svc.name}</td>
|
||||
<td style={{ padding: "3px 8px" }}>
|
||||
<span style={{ color: svcColor }}>
|
||||
{failed ? "✗" : running ? "●" : "○"} {svc.active}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: "3px 8px", color: C.dim, fontSize: 11 }}>{svc.sub}</td>
|
||||
<td style={{ padding: "3px 8px", color: C.dim, fontSize: 11, maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{svc.description}
|
||||
</td>
|
||||
<td style={{ padding: "3px 8px", textAlign: "right", whiteSpace: "nowrap" }}>
|
||||
<CtrlBtn
|
||||
label="重启"
|
||||
color={C.warn}
|
||||
loading={!!ctrlLoading[`svc-restart-${svc.name}`]}
|
||||
onClick={() => handleCtrl("svc-restart", svc.name)}
|
||||
/>
|
||||
{running ? (
|
||||
<CtrlBtn
|
||||
label="停止"
|
||||
color={C.danger}
|
||||
loading={!!ctrlLoading[`svc-stop-${svc.name}`]}
|
||||
onClick={() => handleCtrl("svc-stop", svc.name)}
|
||||
/>
|
||||
) : (
|
||||
<CtrlBtn
|
||||
label="启动"
|
||||
color={C.green}
|
||||
loading={!!ctrlLoading[`svc-start-${svc.name}`]}
|
||||
onClick={() => handleCtrl("svc-start", svc.name)}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* 右侧外部IP连接列表 */}
|
||||
<div style={{ width: 280, minWidth: 280, flexShrink: 0, background: C.header, borderLeft: `1px solid ${C.border}`, overflowY: "auto", display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "4px 10px", display: "flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", borderBottom: `1px solid ${C.border}`, flexShrink: 0 }}>
|
||||
<span style={{ color: C.active, fontSize: 11 }}>🌐</span>
|
||||
<span style={{ color: C.active }}>外部访问</span>
|
||||
{(() => {
|
||||
const totalConns = tabs.reduce((sum, t) => sum + t.pm2Detail.reduce((s, p) => s + p.connections, 0), 0);
|
||||
const totalZombie = tabs.reduce((sum, t) => sum + t.netConnections.filter(c => c.zombie).length, 0);
|
||||
return (
|
||||
<span style={{ fontSize: 10, fontWeight: 600, marginLeft: "auto", display: "flex", gap: 6 }}>
|
||||
{totalConns > 0 && <span style={{ color: C.active }}>{totalConns} 活跃</span>}
|
||||
{totalZombie > 0 && <span style={{ color: C.warn }} title="僵尸 ESTAB：无 keepalive 且收发队列为 0，可能是对端已消失但 FIN 未到达">{totalZombie} 僵尸</span>}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
{(() => {
|
||||
type ConnRow = { serverName: string; remoteIp: string; localPort: number; process: string; isPm2: boolean; count: number; zombie: boolean };
|
||||
const liveConns: ConnRow[] = [];
|
||||
const zombieConns: ConnRow[] = [];
|
||||
for (const tab of tabs) {
|
||||
const pidToName = new Map<number, string>();
|
||||
tab.pm2Detail.forEach(p => { if (p.pid) pidToName.set(p.pid, p.name); });
|
||||
const grouped = new Map<string, ConnRow>();
|
||||
for (const conn of tab.netConnections) {
|
||||
const pm2Name = pidToName.get(conn.pid);
|
||||
if (!pm2Name) continue;
|
||||
const key = `${conn.zombie ? "z" : "a"}||${conn.remoteIp}||${conn.localPort}||${pm2Name}`;
|
||||
const existing = grouped.get(key);
|
||||
if (existing) { existing.count++; }
|
||||
else {
|
||||
grouped.set(key, {
|
||||
serverName: tab.hostname || tab.label,
|
||||
remoteIp: conn.remoteIp,
|
||||
localPort: conn.localPort,
|
||||
process: pm2Name,
|
||||
isPm2: true,
|
||||
count: 1,
|
||||
zombie: conn.zombie,
|
||||
});
|
||||
}
|
||||
}
|
||||
grouped.forEach(row => (row.zombie ? zombieConns : liveConns).push(row));
|
||||
}
|
||||
if (liveConns.length === 0 && zombieConns.length === 0) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: C.primary, gap: 6, padding: 20 }}>
|
||||
<span style={{ fontSize: 20 }}>🌐</span>
|
||||
<span style={{ fontSize: 11 }}>暂无外部访问</span>
|
||||
<span style={{ fontSize: 10 }}>仅显示外网IP连接</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const renderRow = (conn: ConnRow, i: number) => {
|
||||
const ipColor = conn.zombie ? C.warn : C.active;
|
||||
const procColor = conn.zombie ? C.dim : C.active;
|
||||
return (
|
||||
<div key={`${conn.zombie ? "z" : "a"}-${i}`} style={{ padding: "3px 10px", borderBottom: `1px solid ${C.border}`, fontSize: 10, opacity: conn.zombie ? 0.78 : 1 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 1 }}>
|
||||
<span style={{ color: ipColor, fontWeight: 700, fontSize: 12, textDecoration: conn.zombie ? "line-through" : "none" }}>{conn.remoteIp}</span>
|
||||
{conn.count > 1 && <span style={{ color: ipColor, fontSize: 11, fontWeight: 600 }}>×{conn.count}</span>}
|
||||
{conn.zombie && (
|
||||
<span
|
||||
title="无 keepalive 且收发队列为 0；对端可能已消失，重启进程可清理"
|
||||
style={{ fontSize: 9, padding: "0 4px", border: `1px solid ${C.warn}55`, color: C.warn, borderRadius: 2, marginLeft: "auto", letterSpacing: "0.04em" }}
|
||||
>
|
||||
僵尸
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 4, paddingLeft: 2 }}>
|
||||
<span style={{ color: C.accent, fontSize: 11, fontWeight: 600 }}>→</span>
|
||||
<span style={{ color: procColor, fontWeight: conn.zombie ? 500 : 700, textShadow: conn.zombie ? "none" : `0 0 4px ${C.active}55` }}>{conn.process || `port:${conn.localPort}`}</span>
|
||||
<span style={{ color: C.dim, fontSize: 11, fontWeight: 500 }}>:{conn.localPort}</span>
|
||||
</div>
|
||||
<div style={{ paddingLeft: 12, color: C.dim, fontSize: 11, marginTop: 1 }}>{conn.serverName}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
{liveConns.sort((a, b) => b.count - a.count).map(renderRow)}
|
||||
{zombieConns.length > 0 && (
|
||||
<div style={{ padding: "4px 10px", background: `${C.warn}10`, borderTop: `1px solid ${C.warn}33`, borderBottom: `1px solid ${C.warn}33`, color: C.warn, fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", display: "flex", alignItems: "center", gap: 4 }}>
|
||||
<AlertCircle style={{ width: 11, height: 11 }} />
|
||||
僵尸 ESTAB ({zombieConns.reduce((s, c) => s + c.count, 0)}) · 重启进程可清理
|
||||
</div>
|
||||
)}
|
||||
{zombieConns.sort((a, b) => b.count - a.count).map(renderRow)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: `1px solid ${C.border}`, textAlign: "center", padding: "2px", color: C.primary, fontSize: 9 }}>
|
||||
WebWatcher · 每 {5}s 自动刷新
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
/**
|
||||
* 服务器输出解析工具
|
||||
* 将各种命令输出转化为结构化数据
|
||||
*/
|
||||
|
||||
export interface MemInfo {
|
||||
total: number;
|
||||
free: number;
|
||||
available: number;
|
||||
used: number;
|
||||
cached: number;
|
||||
swapTotal: number;
|
||||
swapFree: number;
|
||||
swapUsed: number;
|
||||
}
|
||||
|
||||
export interface DiskInfo {
|
||||
filesystem: string;
|
||||
size: string;
|
||||
used: string;
|
||||
avail: string;
|
||||
usePct: number;
|
||||
mount: string;
|
||||
}
|
||||
|
||||
export interface Pm2Process {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
pid: number | null;
|
||||
cpu: number;
|
||||
memory: number;
|
||||
restarts: number;
|
||||
uptimeMs: number | null;
|
||||
connections: number;
|
||||
}
|
||||
|
||||
export interface SystemdService {
|
||||
name: string;
|
||||
load: string;
|
||||
active: string;
|
||||
sub: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface ServerMetrics {
|
||||
hostname: string;
|
||||
osRelease: string;
|
||||
uptime: string;
|
||||
loadAvg: [number, number, number];
|
||||
cpuPct: number;
|
||||
cpuModel: string;
|
||||
cpuCores: number;
|
||||
memory: MemInfo;
|
||||
disks: DiskInfo[];
|
||||
pm2: Pm2Process[] | null;
|
||||
services: SystemdService[];
|
||||
netConnections: NetConnection[];
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 /proc/meminfo 内容（单位：kB → bytes）
|
||||
*/
|
||||
export function parseMemInfo(raw: string): MemInfo {
|
||||
const get = (key: string): number => {
|
||||
const m = raw.match(new RegExp(`${key}:\\s+(\\d+)`));
|
||||
return m ? parseInt(m[1], 10) * 1024 : 0;
|
||||
};
|
||||
const total = get("MemTotal");
|
||||
const free = get("MemFree");
|
||||
const available = get("MemAvailable");
|
||||
const cached = get("Cached") + get("Buffers");
|
||||
const swapTotal = get("SwapTotal");
|
||||
const swapFree = get("SwapFree");
|
||||
return {
|
||||
total,
|
||||
free,
|
||||
available,
|
||||
used: total - available,
|
||||
cached,
|
||||
swapTotal,
|
||||
swapFree,
|
||||
swapUsed: swapTotal - swapFree,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 df -h 输出，过滤虚拟文件系统
|
||||
*/
|
||||
export function parseDf(raw: string): DiskInfo[] {
|
||||
const lines = raw.split("\n").filter(Boolean);
|
||||
const result: DiskInfo[] = [];
|
||||
for (const line of lines) {
|
||||
if (line.startsWith("Filesystem") || line.startsWith("Source")) continue;
|
||||
const parts = line.trim().split(/\s+/);
|
||||
if (parts.length < 6) continue;
|
||||
const [filesystem, size, used, avail, pcent, mount] = parts;
|
||||
const pct = parseInt(pcent, 10);
|
||||
if (isNaN(pct)) continue;
|
||||
result.push({ filesystem, size, used, avail, usePct: pct, mount });
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 uptime 输出提取运行时长字符串
|
||||
*/
|
||||
export function parseUptime(raw: string): string {
|
||||
const m = raw.match(/up\s+(.+?),\s+\d+\s+user/);
|
||||
return m ? m[1].trim() : raw.trim().split(",")[0].replace(/.*up\s+/, "").trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 systemctl list-units 文本输出
|
||||
* 过滤掉纯内核/系统基础服务，只保留用户关心的应用服务
|
||||
*/
|
||||
export function parseSystemdList(raw: string): SystemdService[] {
|
||||
/** 纯系统/内核/基础服务黑名单 —— 用户一般不需要关注这些 */
|
||||
const SKIP_RE = new RegExp(
|
||||
"^(sys-|dev-|proc-|run-|var-|home-|tmp-|blk-|" +
|
||||
"user@|user-|session-|systemd-|" +
|
||||
"getty|kmod|dracut|plymouth|emergency|rescue|final|" +
|
||||
"dbus|polkit|logind|udev|journal|" +
|
||||
"timesyncd|networkd|network|NetworkManager|nm-|" +
|
||||
"resolved|avahi|mdns|" +
|
||||
"selinux|audit|auditd|" +
|
||||
"lvm|dm-|mdmonitor|" +
|
||||
"fstrim|ldconfig|man-db|" +
|
||||
"multipathd|multipath|" +
|
||||
"acpid|rngd|rpcbind|rpc-|gssproxy|auth-|autofs|" +
|
||||
"chronyd|ntpd|ntp|crond|atd|" +
|
||||
"bluetooth|wpa_supplicant|ModemManager|" +
|
||||
"cups|printer|cloud-|iscsi|fcoe|kdump|kexec|" +
|
||||
"ebtables|ip6tables|iptables|" +
|
||||
"sssd|realmd|oddjob|" +
|
||||
"postfix|exim|sendmail|rsyslog|syslog|" +
|
||||
"tuned|irqbalance|display-manager|xrdp|" +
|
||||
"power|therma|upower|" +
|
||||
"virtlog|virt-|libvirt-|" +
|
||||
"import-|update-|barad-|" +
|
||||
"dnf-|yum-|apt-|snap-|packagekit|" +
|
||||
"certbot|acme|cosfs|" +
|
||||
"ipmi|mcelog|ipmievd|openipmi|" +
|
||||
"serial-getty|getty@|" +
|
||||
"sshd|openssh|" +
|
||||
"tat_agent|qcloud|" +
|
||||
"aegis|aliyun|AliYun|" +
|
||||
"hbrclient|aliyun-assist|" +
|
||||
"hostguard|ces-collector|telescope|" +
|
||||
"firewalld|nftables)"
|
||||
);
|
||||
|
||||
const result: SystemdService[] = [];
|
||||
for (const line of raw.split("\n")) {
|
||||
const clean = line.replace(/^[●\s]+/, "").trim();
|
||||
if (!clean || clean.startsWith("UNIT") || clean.startsWith("LOAD")) continue;
|
||||
const parts = clean.split(/\s+/);
|
||||
if (parts.length < 4) continue;
|
||||
const [name, load, active, sub, ...descParts] = parts;
|
||||
if (!name.endsWith(".service")) continue;
|
||||
const shortName = name.replace(".service", "");
|
||||
if (SKIP_RE.test(shortName)) continue;
|
||||
/** 只显示正在运行或已失败的服务（隐藏 inactive/dead/exited 等停止状态） */
|
||||
if (sub !== "running" && active !== "failed") continue;
|
||||
result.push({ name: shortName, load, active, sub, description: descParts.join(" ") });
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 top -bn2 输出，返回系统整体 CPU 占用百分比
|
||||
* 取最后一行 Cpu(s) （第二次采样），计算 100 - idle
|
||||
*/
|
||||
export function parseCpuTop(raw: string): number {
|
||||
const lines = raw.split("\n").filter((l) => l.includes("Cpu"));
|
||||
const last = lines[lines.length - 1];
|
||||
if (!last) return 0;
|
||||
const idleM = last.match(/(\d+\.\d+)\s+id/);
|
||||
if (!idleM) return 0;
|
||||
return Math.round((100 - parseFloat(idleM[1])) * 10) / 10;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 /proc/loadavg 输出，返回 1m/5m/15m 负载
|
||||
*/
|
||||
export function parseLoadAvg(raw: string): [number, number, number] {
|
||||
const parts = raw.trim().split(/\s+/);
|
||||
return [
|
||||
parseFloat(parts[0]) || 0,
|
||||
parseFloat(parts[1]) || 0,
|
||||
parseFloat(parts[2]) || 0,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 /etc/os-release 或 uname 提取可读的 OS 名称
|
||||
*/
|
||||
export function parseOsRelease(raw: string): string {
|
||||
const m = raw.match(/PRETTY_NAME="?([^"\n]+)"?/);
|
||||
if (m) return m[1];
|
||||
return raw.split("\n")[0].replace(/^NAME="?/, "").replace(/"$/, "") || "Linux";
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 pm2 jlist JSON 输出
|
||||
* 返回 null 表示 PM2 未安装或无法获取
|
||||
*/
|
||||
export function parsePm2List(raw: string): Pm2Process[] | null {
|
||||
if (!raw || raw.includes("not found") || raw.includes("command not found")) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const trimmed = raw.trim();
|
||||
if (!trimmed || trimmed === "[]") return [];
|
||||
const list = JSON.parse(trimmed) as Record<string, unknown>[];
|
||||
if (!Array.isArray(list)) return null;
|
||||
return list.map((p) => {
|
||||
const env = (p.pm2_env ?? {}) as Record<string, unknown>;
|
||||
const monit = (p.monit ?? {}) as Record<string, number>;
|
||||
return {
|
||||
id: (p.pm_id as number) ?? 0,
|
||||
name: (p.name as string) ?? "",
|
||||
status: (env.status as string) ?? "unknown",
|
||||
pid: (p.pid as number | null) ?? null,
|
||||
cpu: monit.cpu ?? 0,
|
||||
memory: monit.memory ?? 0,
|
||||
restarts: (env.restart_time as number) ?? 0,
|
||||
uptimeMs: (env.pm_uptime as number | null) ?? null,
|
||||
connections: 0,
|
||||
};
|
||||
});
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export interface NetConnection {
|
||||
remoteIp: string;
|
||||
remotePort: number;
|
||||
localPort: number;
|
||||
pid: number;
|
||||
process: string;
|
||||
/** 是否疑似僵尸 ESTAB（无 timer、无队列、对端可能已不可达） */
|
||||
zombie: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 ss -tnpoe 输出
|
||||
* 行格式: ESTAB recv send 10.0.0.13:3000 1.2.3.4:54321 users:(("node",pid=12345,fd=20)) [timer:(...)] ino:... sk:... [cgroup:...] <->
|
||||
*
|
||||
* 僵尸 ESTAB 判定: Recv-Q == 0 且 Send-Q == 0 且 没有 timer 字段
|
||||
* （Linux 内核里 ESTAB socket 默认无 keepalive，对端 NAT 超时/进程崩溃时会一直挂着，
|
||||
* 这种连接没有任何探活能让它老化，会一直"看起来很稳定"）
|
||||
*
|
||||
* 返回 { pidConns: pid→活跃连接数（不含僵尸）, connections: 详细连接列表 }
|
||||
*/
|
||||
export function parseNetConnections(raw: string, excludeIps?: Set<string>): { pidConns: Map<number, number>; connections: NetConnection[] } {
|
||||
const pidConns = new Map<number, number>();
|
||||
const connections: NetConnection[] = [];
|
||||
if (!raw) return { pidConns, connections };
|
||||
const isPrivateIp = (ip: string): boolean => {
|
||||
const clean = ip.replace(/^\[?::ffff:/, "").replace(/\]$/, "");
|
||||
if (clean === "127.0.0.1" || clean === "::1" || clean === "*") return true;
|
||||
if (clean.startsWith("10.") || clean.startsWith("192.168.") || clean.startsWith("169.254.")) return true;
|
||||
if (clean.startsWith("100.64.") || clean.startsWith("100.125.")) return true;
|
||||
if (clean.startsWith("172.")) {
|
||||
const second = parseInt(clean.split(".")[1], 10);
|
||||
if (second >= 16 && second <= 31) return true;
|
||||
}
|
||||
if (clean.startsWith("[") || clean.startsWith("::") || clean === "0.0.0.0") return true;
|
||||
return false;
|
||||
};
|
||||
const extractAddr = (addr: string): { ip: string; port: number } => {
|
||||
if (addr.startsWith("[")) {
|
||||
const closeBracket = addr.lastIndexOf("]");
|
||||
const ip = addr.substring(0, closeBracket + 1);
|
||||
const port = parseInt(addr.substring(closeBracket + 2) || "0", 10);
|
||||
return { ip, port };
|
||||
}
|
||||
const lastColon = addr.lastIndexOf(":");
|
||||
return { ip: addr.substring(0, lastColon), port: parseInt(addr.substring(lastColon + 1) || "0", 10) };
|
||||
};
|
||||
for (const line of raw.split("\n")) {
|
||||
if (!line.includes("ESTAB")) continue;
|
||||
const parts = line.trim().split(/\s+/);
|
||||
if (parts.length < 5) continue;
|
||||
const recvQ = parseInt(parts[1], 10) || 0;
|
||||
const sendQ = parseInt(parts[2], 10) || 0;
|
||||
const local = extractAddr(parts[3]);
|
||||
const remote = extractAddr(parts[4]);
|
||||
if (isPrivateIp(remote.ip)) continue;
|
||||
const cleanIp = remote.ip.replace(/^\[?::ffff:/, "").replace(/\]$/, "");
|
||||
if (excludeIps?.has(cleanIp)) continue;
|
||||
const pidMatch = line.match(/pid=(\d+)/);
|
||||
const procMatch = line.match(/\(\("([^"]+)"/);
|
||||
const pid = pidMatch ? parseInt(pidMatch[1], 10) : 0;
|
||||
const process = procMatch ? procMatch[1] : "";
|
||||
/** 僵尸判定：无 timer 字段 + 收发队列均为 0
|
||||
* 这种 socket 不会被内核老化，可能是对端 NAT/进程已消失但 FIN 丢失留下的死连接 */
|
||||
const hasTimer = /\btimer:\(/.test(line);
|
||||
const zombie = !hasTimer && recvQ === 0 && sendQ === 0;
|
||||
if (pid > 0) {
|
||||
// 仅活跃连接计入 PM2 连接数；僵尸连接单独展示，不计入"外部访问中"判定
|
||||
if (!zombie) pidConns.set(pid, (pidConns.get(pid) ?? 0) + 1);
|
||||
connections.push({ remoteIp: cleanIp, remotePort: remote.port, localPort: local.port, pid, process, zombie });
|
||||
}
|
||||
}
|
||||
return { pidConns, connections };
|
||||
}
|
||||
|
||||
/**
|
||||
* 将字节格式化为可读字符串（B / KB / MB / GB）
|
||||
*/
|
||||
export function formatBytes(bytes: number): string {
|
||||
if (bytes <= 0) return "0 B";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 PM2 进程启动时间戳格式化为运行时长
|
||||
*/
|
||||
export function formatPm2Uptime(uptimeMs: number | null): string {
|
||||
if (uptimeMs === null) return "-";
|
||||
const secs = Math.floor((Date.now() - uptimeMs) / 1000);
|
||||
if (secs < 0) return "0s";
|
||||
if (secs < 60) return `${secs}s`;
|
||||
if (secs < 3600) return `${Math.floor(secs / 60)}m`;
|
||||
if (secs < 86400) return `${Math.floor(secs / 3600)}h`;
|
||||
return `${Math.floor(secs / 86400)}d`;
|
||||
}
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* SSH 工具库
|
||||
* 封装 ssh2 客户端，提供远程命令执行能力
|
||||
*/
|
||||
import { Client } from "ssh2";
|
||||
import type { ConnectConfig } from "ssh2";
|
||||
|
||||
export interface SshConfig {
|
||||
host: string;
|
||||
port: number;
|
||||
username: string;
|
||||
password?: string;
|
||||
privateKey?: string;
|
||||
}
|
||||
|
||||
const CONNECT_TIMEOUT = 12000;
|
||||
|
||||
/** 构建 ssh2 连接配置 */
|
||||
function buildConnectConfig(cfg: SshConfig): ConnectConfig {
|
||||
const base: ConnectConfig = {
|
||||
host: cfg.host,
|
||||
port: cfg.port,
|
||||
username: cfg.username,
|
||||
readyTimeout: CONNECT_TIMEOUT,
|
||||
};
|
||||
if (cfg.privateKey && cfg.privateKey.trim()) {
|
||||
base.privateKey = cfg.privateKey;
|
||||
} else if (cfg.password) {
|
||||
base.password = cfg.password;
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在远程服务器上执行单条命令，返回 stdout
|
||||
*/
|
||||
export function execRemote(config: SshConfig, command: string): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = new Client();
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
conn.destroy();
|
||||
reject(new Error("SSH 连接超时"));
|
||||
}, CONNECT_TIMEOUT + 3000);
|
||||
|
||||
conn
|
||||
.on("ready", () => {
|
||||
conn.exec(command, (err, stream) => {
|
||||
if (err) {
|
||||
clearTimeout(timer);
|
||||
conn.end();
|
||||
return reject(err);
|
||||
}
|
||||
let stdout = "";
|
||||
stream
|
||||
.on("data", (chunk: Buffer) => {
|
||||
stdout += chunk.toString();
|
||||
})
|
||||
.stderr.on("data", () => {});
|
||||
stream.on("close", () => {
|
||||
clearTimeout(timer);
|
||||
conn.end();
|
||||
resolve(stdout);
|
||||
});
|
||||
});
|
||||
})
|
||||
.on("error", (err) => {
|
||||
clearTimeout(timer);
|
||||
reject(err);
|
||||
})
|
||||
.connect(buildConnectConfig(config));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用单个 SSH 连接批量顺序执行多条命令
|
||||
* 返回 { [key]: stdout } 映射
|
||||
*/
|
||||
export function execBatch(
|
||||
config: SshConfig,
|
||||
commands: Record<string, string>
|
||||
): Promise<Record<string, string>> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = new Client();
|
||||
const keys = Object.keys(commands);
|
||||
const results: Record<string, string> = {};
|
||||
let idx = 0;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
conn.destroy();
|
||||
reject(new Error("SSH 批量命令超时"));
|
||||
}, CONNECT_TIMEOUT + keys.length * 8000);
|
||||
|
||||
const runNext = () => {
|
||||
if (idx >= keys.length) {
|
||||
clearTimeout(timer);
|
||||
conn.end();
|
||||
resolve(results);
|
||||
return;
|
||||
}
|
||||
const key = keys[idx++];
|
||||
const cmd = commands[key];
|
||||
conn.exec(cmd, (err, stream) => {
|
||||
if (err) {
|
||||
results[key] = "";
|
||||
runNext();
|
||||
return;
|
||||
}
|
||||
let out = "";
|
||||
stream
|
||||
.on("data", (d: Buffer) => {
|
||||
out += d.toString();
|
||||
})
|
||||
.stderr.on("data", () => {});
|
||||
stream.on("close", () => {
|
||||
results[key] = out.trim();
|
||||
runNext();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
conn
|
||||
.on("ready", runNext)
|
||||
.on("error", (err) => {
|
||||
clearTimeout(timer);
|
||||
reject(err);
|
||||
})
|
||||
.connect(buildConnectConfig(config));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试 SSH 连接是否可用
|
||||
*/
|
||||
export async function testConnection(config: SshConfig): Promise<void> {
|
||||
await execRemote(config, "echo ok");
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [{ "name": "next" }],
|
||||
"paths": { "@/*": ["./src/*"] }
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user