一个支持 人工审批 SQL 查询 的智能数据库代理系统。前端采用 Vue 3 + TypeScript 构建交互式聊天界面，后端基于 LangGraph 实现带中断（Human-in-the-loop）的 SQL 执行流程，确保敏感操作需人工确认。

• 框架: Vue 3 + Composition API + TypeScript
• 构建工具: Vite
• 样式方案: Tailwind CSS v4（编译器模式，无 PostCSS 依赖）
• 核心组件:
  • App.vue: 主聊天容器，处理消息流与审批逻辑
  • ToolCallCard.vue: 可视化展示 AI 发起的工具调用（如 SQL 查询）
  • CodeBlock.vue: 支持展开/收起的代码块渲染
• 特性:
  • 深色科技风 UI
  • 流式响应（SSE）
  • 审批弹窗阻断高危操作
  • 消息气泡布局（用户/AI/工具结果区分）

• 核心框架: LangGraph（基于 LangChain 的状态机工作流）
• 语言: Python
• 关键能力:
  • SQL 生成: LLM 根据自然语言生成安全 SQL
  • Human-in-the-loop 中断: 在执行前暂停流程，等待前端审批
  • 流式输出: 通过 Server-Sent Events (SSE) 实时推送消息
  • 线程管理: 支持多会话隔离（thread_id）
• 接口:
  • POST /sql-agent/stream: 启动新查询（流式响应）
  • POST /sql-agent/stream-resume: 恢复中断流程（携带审批决策）

1. 自然语言转 SQL

   • 用户输入问题（如“列出最近5个订单”）
   • AI 自动生成对应 SQL 查询

2. 人工审批机制

   • 所有 SQL 执行前必须经用户确认
   • 前端弹窗高亮显示待执行 SQL
   • 用户可 ✅ 执行 或 ❌ 拒绝

3. 可视化工具调用

   • AI 发起的工具调用以卡片形式展示
   • 状态标识：“等待审批” / “已执行”
   • 点击卡片可快速触发审批（优化体验）

4. 完整对话上下文

   • 支持多轮对话（后端通过 thread_id 管理状态）
   • 消息类型区分：用户输入 / AI 回复 / 工具结果

5. 安全防护

   • 阻止未经审批的数据库写操作
   • 前端禁用状态防止重复提交

说明：以下为占位图，实际部署后请替换为真实截图

功能	截图
主聊天界面
SQL 审批弹窗
工具调用卡片

1. 安装依赖（确保使用 Tailwind CSS v4）

   npm install
   npm run dev

默认地址: http://localhost:5173

pip install -r requirements.txt

• 确保后端服务运行在 http://localhost:8000

• 审批历史记录功能
• 认证、鉴权等（后端实现回话id）
• 其他...

欢迎提交 Issue 或 Pull Request！