AnbazhaganSekar/incident-response-tracking

# 🚀 DevOps CRUD 聊天机器人 - 完整安装指南 一个生产就绪的全栈应用程序，具备**多彩现代化 UI**、**AI 聊天机器人**、**任务管理**和**精美的仪表盘**功能。 ## 🎨 功能特性 ✅ **精美的登录页面** - 毛玻璃效果 + 霓虹渐变 ✅ **AI 聊天机器人** - 面向 DevOps 的助手，支持流式响应 ✅ **任务管理** - 包含优先级与状态追踪的 CRUD 操作 ✅ **实时仪表盘** - 实时指标与 Recharts 数据可视化 ✅ **JWT 身份验证** - 安全的基于 token 的身份验证 ✅ **响应式设计** - 支持移动端与自适应 UI ✅ **暗黑主题** - 护眼的赛博朋克美学设计 ✅ **Docker 就绪** - 完整的容器化支持 ## 📋 技术栈 ### 后端 - **FastAPI** - 现代化的 Python Web 框架 - **PostgreSQL/SQLite** - 数据库 - **JWT** - 身份验证 - **Pydantic** - 数据验证 ### 前端 - **React 18** - UI 框架 - **Vite** - 构建工具 - **Recharts** - 数据可视化 - **CSS3** - 动画与样式 ## 🏃 快速开始 (5 分钟) ### 选项 1: Docker Compose (推荐) ``` # 克隆项目 git clone https://github.com/yourusername/devops-crud-chatbot.git cd devops-crud-chatbot # 启动所有服务 docker-compose up -d # 等待服务就绪 docker-compose ps # 访问应用 # Frontend: http://localhost:5173 # Backend API: http://localhost:8000/docs # Database: localhost:5432 ``` ### 选项 2: 本地开发 #### 后端设置 ``` # 创建虚拟环境 python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate # 安装依赖 pip install -r requirements.txt # 设置环境变量 export SECRET_KEY="your-secret-key-change-in-production" export DATABASE_URL="sqlite:///./devops_crud.db" # 运行 FastAPI 服务器 uvicorn main:app --reload --port 8000 # Backend 运行于: http://localhost:8000 # API 文档位于: http://localhost:8000/docs ``` #### 前端设置 ``` # 打开新终端，导航到 frontend 目录 cd frontend # 安装依赖 npm install # 创建 .env 文件 cat > .env << EOF VITE_API_URL=http://localhost:8000 EOF # 运行 Vite dev 服务器 npm run dev # Frontend 运行于: http://localhost:5173 ``` ## 🔐 演示凭据 **电子邮箱:** user@example.com **密码:** password123 或者创建您自己的账户！ ## 📚 API 端点 ### 身份验证 ``` POST /api/auth/register - Register new user POST /api/auth/login - Login & get JWT token GET /api/auth/me - Get current user info ``` ### 任务 (CRUD) ``` POST /api/tasks - Create new task GET /api/tasks - Get all user tasks GET /api/tasks/{task_id} - Get specific task PUT /api/tasks/{task_id} - Update task DELETE /api/tasks/{task_id} - Delete task ``` ### 聊天与分析 ``` POST /api/chat - Send message to AI assistant GET /api/stats - Get user statistics GET /api/health - Health check ``` ## 🎯 功能特性详解 ### 登录系统 - 带验证的响应式表单 - 使用 JWT token 进行注册和登录 - 安全的密码处理 - 在 localStorage 中进行会话持久化 ### 仪表盘 - **概览标签页**: 统计卡片 + 图表 - **任务标签页**: CRUD 任务管理 - **聊天标签页**: AI 驱动的 DevOps 助手 - **个人资料标签页**: 用户信息与设置 ### AI 聊天机器人 - DevOps 专属回复 - 上下文感知对话 - 流式消息支持 - 推荐话题 ### 任务管理 - 创建、读取、更新、删除任务 - 优先级 (低、中、高) - 状态追踪 (待处理、进行中、已完成) - 完成度指标 ## 🎨 设计系统 ### 调色板 - **青色**: #00D9FF (主色) - **洋红色**: #FF00FF (辅助色) - **金色**: #FFD700 (第三色) - **青柠色**: #00FF88 (强调色) ### 排版字体 - 展示字体：用于标题的粗体无衬线字体 - 正文字体：用于内容的整洁无衬线字体 - 等宽字体：用于代码片段 ### 组件 - 毛玻璃效果卡片 - 渐变按钮 - 动画过渡 - 微交互 ## 🚀 部署 ### 部署到 Render (免费) **后端:** ``` # 连接 GitHub 仓库 # 创建新 Web Service # 设置 build command: pip install -r requirements.txt # 设置 start command: uvicorn main:app --host 0.0.0.0 # 添加环境变量: SECRET_KEY # （如果需要）设置 CORS_ORIGINS 以包含你的 frontend URL # 部署！ ``` **前端:** ``` # 创建新 Static Site # 连接 GitHub 仓库 # 设置 build command: npm run build # 设置 publish directory: dist # 添加环境变量： # VITE_API_URL=https://devops-crud-chatbot.onrender.com # 部署！ ``` ### 部署到 AWS ``` # 构建 Docker 镜像 docker build -t devops-crud-backend:latest -f Dockerfile.backend . docker build -t devops-crud-frontend:latest frontend/ # 推送到 ECR aws ecr create-repository --repository-name devops-crud-backend aws ecr create-repository --repository-name devops-crud-frontend docker tag devops-crud-backend:latest 123456789.dkr.ecr.us-east-1.amazonaws.com/devops-crud-backend:latest docker tag devops-crud-frontend:latest 123456789.dkr.ecr.us-east-1.amazonaws.com/devops-crud-frontend:latest docker push 123456789.dkr.ecr.us-east-1.amazonaws.com/devops-crud-backend:latest docker push 123456789.dkr.ecr.us-east-1.amazonaws.com/devops-crud-frontend:latest # 部署到 ECS/EKS # 使用 ECR URL 更新 docker-compose.yml # 推送到 AWS ECS 或部署到 Kubernetes ``` ## 🔧 环境变量 ### 后端 (.env) ``` SECRET_KEY=your-secret-key-here DATABASE_URL=sqlite:///./devops_crud.db CORS_ORIGINS=http://localhost:5173,https://yourdomain.com LOG_LEVEL=info ``` ### 前端 (.env) ``` VITE_API_URL=http://localhost:8000 VITE_APP_NAME=DevOps CRUD Chatbot ``` ## 📊 数据库架构 ### 用户表 ``` CREATE TABLE users ( email TEXT PRIMARY KEY, password TEXT NOT NULL, full_name TEXT NOT NULL, created_at TIMESTAMP DEFAULT NOW() ); ``` ### 任务表 ``` CREATE TABLE tasks ( id TEXT PRIMARY KEY, owner TEXT NOT NULL, title TEXT NOT NULL, description TEXT, status TEXT DEFAULT 'pending', priority TEXT DEFAULT 'medium', created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP, FOREIGN KEY (owner) REFERENCES users(email) ); ``` ### 消息表 ``` CREATE TABLE messages ( id TEXT PRIMARY KEY, user TEXT NOT NULL, message TEXT NOT NULL, timestamp TIMESTAMP DEFAULT NOW(), context TEXT, FOREIGN KEY (user) REFERENCES users(email) ); ``` ## 🧪 测试 ### 后端测试 ``` # 运行所有测试 pytest # 运行 coverage pytest --cov=. --cov-report=html # 运行特定测试 pytest tests/test_auth.py -v ``` ### 前端测试 ``` # 将 Vitest 添加到 package.json npm install -D vitest @testing-library/react # 创建 tests/App.test.jsx npm run test ``` ## 📈 性能优化建议 1. **缓存**: 引入 Redis 进行会话管理 2. **数据库**: 为频繁查询的列添加索引 3. **CDN**: 将前端部署到 Cloudflare/AWS CloudFront 4. **压缩**: 在 Vite 配置中启用 gzip 5. **图片**: 优化并懒加载图片 6. **监控**: 添加 Sentry 进行错误追踪 ## 🛡️ 安全检查清单 - [x] JWT token 验证 - [x] CORS 配置 - [x] SQL 注入防护 - [x] XSS 防护 - [ ] 速率限制 (添加: `pip install slowapi`) - [ ] 强制 HTTPS - [ ] 密码哈希 (升级为 bcrypt) - [ ] 审计日志 - [ ] OWASP 合规性 ## 📄 许可证 MIT 许可证 - 可自由用于个人和商业项目！ ## 🎓 学习资源 - [FastAPI 文档](https://fastapi.tiangolo.com) - [React 文档](https://react.dev) - [Vite 指南](https://vitejs.dev) - [Recharts](https://recharts.org) - [JWT 最佳实践](https://tools.ietf.org/html/rfc7519) 由 DevOps 工程师为 DevOps 工程师用 ⚡ 构建。 **祝您编码愉快！🚀**

标签：AI助手, AV绕过, CRUD, Docker, Docker Compose, FastAPI, JWT认证, PostgreSQL, Python, React 18, Recharts, SQLite, Vite, 事件响应跟踪, 任务管理, 响应式设计, 安全防御评估, 实时仪表盘, 无后门, 测试用例, 网络安全, 请求拦截, 运维管理, 逆向工具, 隐私保护