AI 编程实战：如何用 AI+DevBox 三周开发出 WAF 防火墙（保姆级教程）

根据这个完整流程 给出 两个版本的流程图
第一个版本，强调抽象完整性，重在业务过程,关注业务逻辑,展示了整体的处理流程和各个阶段的职责
第二版本，关注实现细节,展示了每个步骤具体的代码实现和数据流转,要求每一个步骤，附带关键代码解释
关键区别:
第一版本更适合理解整体架构和处理流程
第二版本更适合理解具体实现和调试问题
第一版本聚焦于"做什么"
第二版本聚焦于"怎么做"
 
要求1， 两个版本均给出 Mermaid 文件和 excalidraw 文件
要求1，用 text 格式，readme 风格画图实现

coraza-spoe agent 代码分析

[HAProxy] ─── TCP连接 ───> [SPOE代理服务]
                              │
                        [消息类型识别]
                              │
                    ┌─────────┴──────────┐
                    │                    │
              coraza-req            coraza-res
                    │                    │
            [获取应用程序名称]      [获取应用程序名称]
                    │                    │
            [查找对应Application]  [查找对应Application]
                    │                    │
            [请求处理程序]        [响应处理程序]
                    │                    │
                    └─────────┬──────────┘
                              │
                      [处理结果返回HAProxy]
                         (状态/动作)

--------------------------------

[HAProxy请求] → [internal.Agent.Serve(Listener)] 
                          ↓
                   创建 spop.Agent
                   agent := spop.Agent{
                       Handler: a,
                       BaseContext: a.Context,
                   }
                          ↓
                [spop.Agent.Serve(Listener)]
                          ↓
                   循环Accept新连接
                   nc, err := l.Accept()
                          ↓
                   创建协议处理器
                   p := newProtocolClient(ctx, nc, as, handler) // as := newAsyncScheduler() 异步调度器
                          ↓
                   启动goroutine处理连接
                   go func() { 
                       p.Serve() 
                   }()
                          ↓
                [protocolClient.Serve]
                   循环处理Frame(连接中的数据读取)
                   for {
                       f := acquireFrame()
                       f.ReadFrom(c.rw) // 读取连接中的数据，放到 f.buf 中
                       c.as.schedule(f, c) // 将 f 和 c 放到 asyncScheduler 中，由异步队列调度处理
                   }
                          ↓
                [frameHandler处理Frame]
                   根据frame类型分发
                   - frameTypeIDHaproxyHello: onHAProxyHello
                   - frameTypeIDNotify: onNotify
                   - frameTypeIDHaproxyDisconnect: onHAProxyDisconnect
                          ↓
                [onNotify处理消息] 
                   创建消息扫描器和消息对象
                   调用Handler.HandleSPOE
                          ↓ 
                [internal.Agent.HandleSPOE处理]
                          ↓
                   解析消息类型
                   switch message.NameBytes() {
                   case "coraza-req": messageHandler = HandleRequest
                   case "coraza-res": messageHandler = HandleResponse
                   }
                          ↓
                   获取应用名称
                   k := encoding.AcquireKVEntry()
                   message.KV.Next(k)
                   appName := string(k.ValueBytes())
                          ↓
                   查找Application
                   a.mtx.RLock()
                   app := a.Applications[appName]
                   a.mtx.RUnlock()
                          ↓
                   执行消息处理
                   err := messageHandler(app, ctx, writer, message)
                          ↓
                   处理返回结果
                   - 正常返回：继续处理
                   - ErrInterrupted：设置中断信息
                   - 其他错误：panic
                          ↓
                [返回给HAProxy]

# 目录结构如下 (部分展示)
# server 后端，负责后端接口处理，haproxy 启动管理，配置生成等
server/
├── main.go             # 入口包，主函数，包含 swagger 和 redoc 文档配置
├── config/             # 配置文件
├── model/              # 模型层，负责数据模型定义 (user.go, site.go, role.go)
├── dto/                # DTO 层，数据传输对象 (auth.go, site.go)
├── controller/         # 控制器 (auth.go, site.go, waf_log.go)
├── service/            # 服务层，业务逻辑 (auth.go, site.go, daemon/, engine/, haproxy/, waf_log.go)
├── router/             # 路由层 (router.go)
├── repository/         # 仓库层，数据库操作 (user.go, role.go, site.go, waf_log.go)
├── middleware/         # 中间件 (auth.go)
├── utils/              # 工具类 (response.go, jwt.go)
├── validator/          # 验证器 (validators.go, struct_validators.go)
# ... (其他如 coraza-spoa, pkg 目录结构类似原文)

@server @context.txt 
context.txt  为 server 的项目上下文信息，后续做的变更需要同步到 context.txt 上下文文件中
 
@cert.go @cert.go 
model/cert.go 是证书的数据模型，其中只有 PublicKey 和 PrivateKey 是必选字段，其余都是可选字段
 
@pkg @mongodb.go  是数据库驱动，使用 mongo mongo-driver/v2 驱动
 
要求如下
1. 参考  @auth.go @auth.go @user.go @auth.go  @site.go @site.go    完成证书管理的 curd 接口，增加证书，分页获取证书列表，删除证书，修改证书
2. 完成 curd 请求的 dto 定义
3. 要求代码有完整的 swagger 注释

@context.txt 
context.txt  为 server 的项目上下文信息，后续做的变更需要同步到 context.txt 上下文文件中
dto 放在 @dto  目录下，model 放在 @model  目录下，数据操作仓库放在 @repository目录下 , controller 放在 @controller  目录下，service 业务实现放在 @service 目录下
 
参考 @auth.go  @auth.go  @auth.go  和 @runner.go  实现后台服务状态管理接口，包括 停止 启动 重启 强制停止 热重载
 
服务的状态定义在 runner 文件中

重点信息如下
项目采用的框架是 react + vite + tailwindcss + typescript
路由使用的是 "react-router": "^7.1.3"
包管理器使用的是 pnpm
ui 使用的是 shadcn
主要分为左右布局，左边是sidebar 负责主导航，右边是内容区。
内容区顶部为 breadcrumb，breadcrumb负责子导航，sidebar 不同的导航点进来会有不同的 breadcrumb 路径。
项目 icon 使用 lucide-react
 
---
项目要求
1. 结构完整，功能完整，代码规范，可维护性强
2. 目录组装，文件命名符合规范，关键代码需要有友好注释
3. 使用 vite 进行开发，使用 vite 进行打包
4. 使用 tailwindcss 进行样式开发
5. 使用 shadcn 进行 ui 开发
6. 使用 react-router "react-router": "^7.1.3", 进行路由开发
7. 使用 tanstack query @tanstack/react-query@4 进行数据请求
8. 使用 tanstack table 进行表格开发
9. 使用 zustand 进行状态管理
10. 使用 react-hook-form 进行表单开发
11. 使用 zod 进行数据验证
12. 使用 react-i18next 进行国际化
13. 支持中英文切换，默认使用中文
14. 使用 i18next-http-backend 加载翻译文件
15. 使用 i18next-browser-languagedetector 检测用户语言
16. 项目 icon 使用 lucide-react
---
 
项目主要目录结构介绍
静态资源
public
public/locales 是国际化文件夹，负责项目的国际化配置
public/locales/en/translation.json 是英文翻译文件
public/locales/zh/translation.json 是中文翻译文件
src/assets 是项目静态资源文件夹，负责项目的静态资源管理
 
入口与配置
index.html 单应用挂载点，入口文件
src/main.tsx 是项目入口文件，负责项目的初始化
src/App.tsx 是项目主组件，负责项目的根组件
src/i18n.ts 是国际化 i18n 配置文件，负责项目的国际化配置
eslint.config.js 是 eslint 的配置文件，负责项目的 eslint 配置
package.json 包文件
vite.config.ts 是 vite 的配置文件，负责项目的 vite 配置
components.json 是 shadcn 的配置文件，负责项目的 shadcn 配置
 
样式
src/index.css 是项目样式文件，负责项目的样式
tailwind.config.ts 是 tailwindcss 的配置文件
 
API 请求封装
src/api/index.ts: 使用 axios 创建了基础 API 客户端，包含请求拦截器和响应拦截器
src/api/auth.ts: 实现了认证相关的 API 服务，包括登录、获取当前用户信息和密码重置
src/api/certificate.ts: 提供证书相关API服务，包括获取证书列表、创建证书、获取单个证书、更新和删除证书
src/api/site.ts: 提供站点相关API服务，包括获取站点列表、创建站点、获取单个站点、更新和删除站点
src/api/services.ts: 统一导出 API 服务
 
项目内容
路由配置
src/routes 下是路由配置文件，负责路由的配置和面包屑的配置，
src/routes/config.tsx 是路由配置文件，负责路由的配置和面包屑的配置
src/routes/constants.ts 定义路由路径常量，例如 ROUTES
 
布局
src/components/layout 下是布局文件，负责项目的布局管理
src/components/layout/root-layout.tsx 是根布局文件，负责项目的根布局管理
src/components/layout/sidebar.tsx 是侧边栏文件，负责项目的侧边栏管理
src/components/layout/breadcrumb.tsx 是面包屑文件，负责项目的面包屑管理
 
路由端点 页面
src/pages 下是页面文件，负责项目的页面管理
src/pages/auth 下是认证页面文件，负责项目的认证页面管理
src/pages/setting/pages/site/index.tsx: 站点管理页面主组件
src/pages/setting/pages/certificate/index.tsx: 证书管理页面主组件
src/pages/logs 下是日志页面文件，负责项目的日志页面管理
src/pages/logs/components 下是日志页面组件文件，负责项目的日志页面组件管理
src/pages/logs/components/logs-attack.tsx 是日志攻击页面组件文件，负责项目的日志攻击页面组件管理
src/pages/logs/components/logs-protect.tsx 是日志保护页面组件文件，负责项目的日志保护页面组件管理
 
src/pages/monitor 下是监控页面文件，负责项目的监控页面管理
src/pages/rule 下是规则页面文件，负责项目的规则页面管理
src/pages/setting 下是设置页面文件，负责项目的设置页面管理
 
src/lib 公共库
src/lib 下是项目公共库文件，负责项目的公共库管理
 
src/hooks hook
src/hooks 下是项目 hooks 文件，负责项目的 hooks 管理
 
src/types 类型
src/types 下是项目 types 文件，负责项目的 types 管理
src/types/i18next.d.ts 是 i18next 的类型文件，它扩展了 i18next 模块的类型定义，目的是提供更好的类型检查和代码补全功能。
src/types/auth.ts: 定义了认证相关的类型，包括请求类型、响应类型和状态类型
src/types/certificate.ts: 定义证书相关类型，包括证书数据结构、请求和响应类型
src/types/site.ts: 定义站点相关类型，包括站点数据结构、请求和响应类型
 
src/components 项目组件
src/components/common 下是项目公共组件文件，负责项目的公共组件管理
src/components/layout 下是项目布局组件文件，负责项目的布局组件管理
src/components/table 下是项目表格组件文件，负责项目的表格组件管理，将tanstack table 进行封装
src/components/ui shadcn ui基础组件，由 shadcn 命令行生成
 
src/store 状态管理
src/store 下是项目状态管理文件，负责项目的状态管理
src/store/auth.ts 是认证状态管理文件，负责项目的认证状态管理
 
src/validation 表单验证
src/validation 下是项目表单验证文件，负责项目的表单验证管理
src/validation/auth.ts 是认证表单验证文件，负责项目的认证表单验证管理
src/validation/site.ts: 使用zod定义站点表单验证规则
src/validation/certificate.ts: 使用zod定义证书表单验证规则
 
src/feature 功能模块 一些页面的功能，组件可以单独抽离出来
src/feature 下是项目功能模块文件，负责项目的功能模块管理
src/feature/auth/hook 下是认证功能模块的 tanstack query 数据管理封装 
src/feature/auth 下是认证功能模块文件，负责项目的认证功能模块管理
src/feature/auth/components 下是认证功能模块组件文件，负责项目的认证功能模块组件管理
src/feature/auth/components/LoginForm.tsx 是登录表单组件文件，负责项目的登录表单组件管理
src/feature/auth/components/PasswordResetForm.tsx 是密码重置表单组件文件，负责项目的密码重置表单组件管理
src/feature/auth/components/ProtectedRoute.tsx 是路由保护组件文件，负责项目的路由保护组件管理
 
src/utils 工具函数
src/utils 下是项目 utils 文件，负责项目的 utils 管理
 
全局状态管理:
- 认证状态: 包括用户信息、token、是否已认证等
- 状态持久化: 使用 Zustand persist 中间件实现

使用中文回答
 
@src @api 
@openapi.yaml  是后端 api 定义文件
项目使用的 @tanstack/react-query 和 react-router": "^7.1.3
 
完成证书管理页面，要求如下:
1. 使用 shadcn 的组件库
2. 使用 tanstack query 进行数据请求
3. 使用 react-hook-form 和 zod 进行表单验证
4. 页面简洁大方
5. 按照项目原本的目录结构进行组织
6. 代码不出错，可以运行
 
详细要求如下:
 
1. 对齐后端 api
2. 完成 证书添加，证书删除，证书获取，证书更新
3. 证书 的表格 可以参考 @logs-attack.tsx  ，使用的是 @tanstack/react-table  要求无翻页，使用  tanstack query 哨兵滚动模式
4. 表格只展示 证书的名字，证书的 Domains，IssuerName和过期时间放在一个单元格
5. 证书的解析使用 node-forge 库，解析证书的 ExpireDate ExpireDate FingerPrint Domains 字段，这个功能写在工具函数中，写在 utils 目录下
6. 证书上传表单，用户可以选择输入公钥，私钥，也可以是上传公钥，私钥文件，ExpireDate ExpireDate FingerPrint Domains 这些信息由解析得出，不需要用户输入，另外描述字段是可选的
7. 证书创建的 modal 框组件化，方便后续别的页面调用证书创建
8. 组件 icon 使用 lucide-react
9. 代码工整，有完整的类型，简洁，可维护性高
 
非常重要的一点
@context.txt  是项目的上下文信息，在设计的时候可以参考这个文件获取目前项目已有的信息，在完成本次变更后，所做的变更需要同步到 context.txt 上下文文件中，方便下次提问。
 
项目核心结构如下
src/
├── api/                   ## API相关文件
│   ├── index.ts           ## 基础配置和拦截器
│   ├── auth.ts            ## 认证相关API
│   ├── waf.ts             ## WAF日志相关API
│   ├── site.ts           ## 站点管理相关API
│   └── services.ts        ## 统一导出所有API服务
├── feature/              ## 功能模块（包含特定功能的组件和hooks）
│   ├── auth/              ## 认证相关功能
│   │   ├── components/    ## 认证相关组件
│   │   └── hooks.ts       ## 认证相关自定义hook
│   └── ... 
├── store/                 ## 全局状态管理
│   ├── auth.ts
│   ├── logs.ts
│   └── index.ts
├── validation/           ## 表单验证逻辑
│   ├── auth.ts
│   └── ...
├── components/            ## 通用组件
│   ├── table/             ## 表格组件
│   ├── layout/            ## 布局组件
│   │   ├── breadcrumb.tsx ## 面包屑组件
│   │   ├── sidebar.tsx    ## 侧边栏组件
│   │   └── root-layout.tsx ## 根布局组件
│   ├── ui/                ## 通用UI组件
├── routes/                ## 路由配置
│   ├── config.ts          ## 路由配置，包括面包屑的 nav 生成等
│   └── ...
├── utils/                 ## shadcn ui 组件
│   ├── env.ts
│   └── ...
├── hooks/                 ## 自定义hooks
├── lib/                   ## 工具库
│   ├── utils.ts
│   └── ...
├── types/                 ## 类型定义
│   ├── auth.ts
│   └── ...
├── pages/                 ## 页面组件
│   ├── auth/              ## 认证相关页面
│   │   ├── login.tsx      ## 登录页面
│   │   ├── reset-password.tsx ## 重置密码页面
│   └── ...

@src 
@context.txt  为项目的上下文信息，后续做的变更需要同步到 context.txt 上下文文件中
 
@openapi.json  是后端 api 定义文件
 
项目使用的 @tanstack/react-query 和 react-router": "^7.1.3
完成用户登录页面的开发，要求如下，
1. 使用 shadcn 的组件库
2. 使用 tanstack query 进行数据请求
3. 使用 react-hook-form 和 zod 进行表单验证
4. 页面简洁大方
5. 按照项目原本的目录结构进行组织
6. 代码不出错，可以运行
 
详细要求如下
---
对齐后端 api
完成 
/auth/login
/auth/reset-password  接口管理
组件 icon 使用 lucide-react
 
未登录时，页面跳转至登录页面
登录成功后，页面跳转至首页
 
封装统一的接口请求，定义统一的 api 函数，封装 get post put delete 的请求方式
登录鉴权使用的是 bearer token 方式，使用 zustand 对状态进行管理
 
src/
├── api/                   ## API相关文件
│   ├── index.ts           ## 基础配置和拦截器
│   ├── auth.ts            ## 认证相关API
│   ├── waf.ts             ## WAF日志相关API
│   ├── sit.ts           ## 站点管理相关API
│   └── services.ts        ## 统一导出所有API服务
├── feature/              ## 功能模块（包含特定功能的组件和hooks）
│   ├── auth/              ## 认证相关功能
│   │   ├── components/    ## 认证相关组件
│   │   └── hooks.ts       ## 认证相关自定义hook
│   └── ... 
├── store/                 ## 全局状态管理
│   ├── auth.ts
│   ├── logs.ts
│   └── index.ts
├── validation/           ## 表单验证逻辑
│   ├── auth.ts
│   └── ...
├── components/            ## 通用组件
│   ├── table/             ## 表格组件
│   ├── layout/            ## 布局组件
│   │   ├── breadcrumb.tsx ## 面包屑组件
│   │   ├── sidebar.tsx    ## 侧边栏组件
│   │   └── root-layout.tsx ## 根布局组件
│   ├── ui/                ## 通用UI组件
├── routes/                ## 路由配置
│   ├── config.ts          ## 路由配置，包括面包屑的 nav 生成等
│   └── ...
├── utils/                 ## shadcn ui 组件
│   ├── env.ts
│   └── ...
├── hooks/                 ## 自定义hooks
├── lib/                   ## 工具库
│   ├── utils.ts
│   └── ...
├── types/                 ## 类型定义
│   ├── auth.ts
│   └── ...
├── pages/                 ## 页面组件
│   ├── auth/              ## 认证相关页面
│   │   ├── login.tsx      ## 登录页面
│   │   ├── reset-password.tsx ## 重置密码页面
│   └── ...