mirror of
https://git.oceanpay.cc/danial/kami_apple_exchage.git
synced 2025-12-18 10:46:16 +00:00
dd6dbdee84
- 补充了详细的命令说明和使用场景 - 完善了架构概述中的技术栈描述 - 重新组织了关键目录结构的说明 - 增强了API集成部分的配置细节 - 扩展了组件架构和状态管理的描述 - 新增了静态导出和部署相关的配置说明 - 完善了环境变量和Bun配置的文档 - 添加了代码生成工作流的详细步骤 - 增加了样式系统和错误处理的说明 - 补充了OpenTelemetry集成和部署相关内容
爬虫监控系统前端
基于Next.js和React构建的爬虫监控系统前端，用于实时监控爬虫程序运行情况。
功能特点
- 实时监控爬虫统计数据（总条目、成功、处理中、失败）
- 线程状态监控和验证码处理
- 数据项列表展示和下载
- 批量上传数据文件
- 卡密验证和地址信息设置
- 自动刷新功能，支持多种刷新间隔
- 苹果风格UI设计，基于shadcn/ui组件库
- 支持动画过渡效果
- 集成OpenTelemetry前端监控
技术栈
- 框架: Next.js 14+
- UI库: React 18+, shadcn/ui, Tailwind CSS
- 状态管理: React Hooks
- 表单处理: React Hook Form, Zod
- HTTP客户端: Axios
- 动画: Framer Motion
- 图表: Recharts
- 类型检查: TypeScript
- 代码质量: ESLint, Prettier
- 监控: OpenTelemetry
开发环境设置
前提条件
- Node.js 18.0+
- npm 9.0+
安装依赖
npm install
运行开发服务器
npm run dev
应用将在 http://localhost:3000 运行。
构建生产版本
npm run build
运行生产版本
npm start
环境变量
创建一个.env.local文件，并设置以下环境变量：
NEXT_PUBLIC_API_URL=http://localhost:8000/api
NEXT_PUBLIC_ENV=development
NEXT_PUBLIC_TELEMETRY_ENDPOINT=http://localhost:4318/v1/traces
Docker部署
构建Docker镜像
docker build -t crawler-monitor-frontend .
运行Docker容器
docker run -p 3000:3000 -e NEXT_PUBLIC_API_URL=http://api:8000/api crawler-monitor-frontend
Kubernetes部署
在k8s目录中提供了Kubernetes部署文件：
kubectl apply -f k8s/
项目结构
├── public/ # 静态资源
├── src/
│ ├── app/ # 应用页面
│ ├── components/ # 组件
│ │ ├── dashboard/ # 仪表盘组件
│ │ ├── forms/ # 表单组件
│ │ ├── layout/ # 布局组件
│ │ └── ui/ # UI组件
│ └── lib/ # 工具库
│ ├── api/ # API服务
│ ├── hooks/ # 自定义Hooks
│ └── telemetry/ # 遥测服务
├── Dockerfile # Docker配置
├── nginx.conf # Nginx配置
└── k8s/ # Kubernetes配置
贡献
欢迎提交问题和拉取请求。
许可证
MIT