refactor: restructure navigation and module layout

Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
2026-01-31 04:32:36 +00:00
parent 22e725887a
commit b17b488f8e
105 changed files with 20530 additions and 3622 deletions
--- a/app/ai-agent/chat/page.tsx
+++ b/app/ai-agent/chat/page.tsx
@@ -0,0 +1,432 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Bot,
+  Send,
+  User,
+  Sparkles,
+  Database,
+  Tags,
+  FileText,
+  Download,
+  Copy,
+  ThumbsUp,
+  ThumbsDown,
+  Loader2,
+  Zap,
+  Search,
+  BarChart3,
+  Table,
+  RefreshCw,
+} from "lucide-react"
+
+// 第四部分：AI Agent智能系统 - 智能对话
+export default function AIAgentChatPage() {
+  const [messages, setMessages] = useState<any[]>([
+    {
+      id: "1",
+      role: "assistant",
+      content: "您好！我是神射手AI Agent，可以帮您完成以下任务：\n\n- **自然语言查询**：用自然语言查询用户数据\n- **智能打标**：AI自动为用户打标签\n- **数据清洗**：AI识别并清洗异常数据\n- **智能报告**：自动生成数据分析报告\n\n请问有什么可以帮您？",
+      timestamp: new Date(),
+    },
+  ])
+  const [inputValue, setInputValue] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  // 快捷指令
+  const quickCommands = [
+    { icon: Search, label: "查询高价值用户", command: "帮我找出最近30天内消费超过1万元的高价值用户" },
+    { icon: Tags, label: "AI打标签", command: "为最近7天未登录的用户打上流失风险标签" },
+    { icon: Zap, label: "数据清洗", command: "检查用户表中的手机号格式，清洗异常数据" },
+    { icon: FileText, label: "生成报告", command: "生成本月用户增长分析报告" },
+  ]
+
+  // 支持的指令类型
+  const supportedTasks = [
+    { type: "NLQ", label: "自然语言查询", desc: "用自然语言查询数据库", icon: Search },
+    { type: "TAG", label: "AI打标", desc: "智能为用户打标签", icon: Tags },
+    { type: "CLEAN", label: "数据清洗", desc: "AI识别清洗异常数据", icon: Zap },
+    { type: "REPORT", label: "智能报告", desc: "自动生成分析报告", icon: FileText },
+  ]
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  const handleSend = async () => {
+    if (!inputValue.trim() || isLoading) return
+
+    const userMessage = {
+      id: Date.now().toString(),
+      role: "user",
+      content: inputValue,
+      timestamp: new Date(),
+    }
+    setMessages((prev) => [...prev, userMessage])
+    setInputValue("")
+    setIsLoading(true)
+
+    // 模拟AI响应
+    setTimeout(() => {
+      let response: any = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        timestamp: new Date(),
+      }
+
+      // 根据输入内容生成不同类型的响应
+      if (inputValue.includes("高价值") || inputValue.includes("消费") || inputValue.includes("查询")) {
+        response.content = "我已理解您的需求。正在为您查询符合条件的用户..."
+        response.taskType = "NLQ"
+        response.result = {
+          type: "table",
+          title: "高价值用户查询结果",
+          sql: "SELECT * FROM users WHERE total_spending > 10000 AND last_active_date >= DATE_SUB(NOW(), INTERVAL 30 DAY)",
+          data: [
+            { id: "U001", name: "张三", phone: "138****1234", spending: "¥15,680", lastActive: "2天前" },
+            { id: "U002", name: "李四", phone: "139****5678", spending: "¥12,340", lastActive: "1天前" },
+            { id: "U003", name: "王五", phone: "137****9012", spending: "¥11,890", lastActive: "3天前" },
+          ],
+          total: 823,
+        }
+      } else if (inputValue.includes("打标") || inputValue.includes("标签")) {
+        response.content = "我将为符合条件的用户打上「流失风险」标签。这是一个AI打标任务，需要您确认后执行。"
+        response.taskType = "TAG"
+        response.result = {
+          type: "confirmation",
+          title: "AI打标任务确认",
+          description: "为最近7天未登录的用户打上「流失风险」标签",
+          affectedCount: 12456,
+          confidence: 0.87,
+          needReview: true,
+        }
+      } else if (inputValue.includes("清洗") || inputValue.includes("异常")) {
+        response.content = "我已扫描用户表，发现以下数据质量问题："
+        response.taskType = "CLEAN"
+        response.result = {
+          type: "cleaning",
+          title: "数据清洗建议",
+          issues: [
+            { field: "phone", issue: "格式不规范", count: 234, example: "1381234567 → 138****4567" },
+            { field: "email", issue: "缺失值", count: 1256, suggestion: "填充默认值或标记" },
+            { field: "birth_date", issue: "超出范围", count: 45, example: "2099-01-01" },
+          ],
+          needReview: true,
+        }
+      } else if (inputValue.includes("报告") || inputValue.includes("分析")) {
+        response.content = "正在为您生成用户增长分析报告..."
+        response.taskType = "REPORT"
+        response.result = {
+          type: "report",
+          title: "用户增长分析报告（2026年1月）",
+          summary: "本月新增用户23,456人，同比增长15.2%；活跃用户856,234人，DAU/MAU比值0.32。",
+          highlights: [
+            "新用户转化率提升至18.5%，环比增长3.2%",
+            "高价值用户占比8.7%，贡献65%的交易额",
+            "用户流失率下降至2.1%，创历史新低",
+          ],
+        }
+      } else {
+        response.content = "我理解您的需求。请问您想要：\n1. 查询用户数据\n2. AI打标签\n3. 数据清洗\n4. 生成报告\n\n请选择或详细描述您的需求。"
+      }
+
+      setMessages((prev) => [...prev, response])
+      setIsLoading(false)
+    }, 1500)
+  }
+
+  const handleQuickCommand = (command: string) => {
+    setInputValue(command)
+  }
+
+  const renderMessageContent = (message: any) => {
+    return (
+      <div className="space-y-3">
+        <p className="whitespace-pre-wrap">{message.content}</p>
+
+        {message.result?.type === "table" && (
+          <Card className="bg-gray-50 border-0">
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h4 className="font-medium text-gray-900">{message.result.title}</h4>
+                <Badge variant="secondary">共 {message.result.total} 条</Badge>
+              </div>
+              <div className="bg-gray-100 rounded p-2 mb-3 font-mono text-xs text-gray-600 overflow-x-auto">
+                {message.result.sql}
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left py-2 px-3">ID</th>
+                      <th className="text-left py-2 px-3">姓名</th>
+                      <th className="text-left py-2 px-3">手机</th>
+                      <th className="text-left py-2 px-3">消费金额</th>
+                      <th className="text-left py-2 px-3">最近活跃</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {message.result.data.map((row: any, index: number) => (
+                      <tr key={index} className="border-b border-gray-100">
+                        <td className="py-2 px-3">{row.id}</td>
+                        <td className="py-2 px-3">{row.name}</td>
+                        <td className="py-2 px-3">{row.phone}</td>
+                        <td className="py-2 px-3 text-green-600 font-medium">{row.spending}</td>
+                        <td className="py-2 px-3">{row.lastActive}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div className="flex items-center gap-2 mt-3">
+                <Button size="sm" variant="outline">
+                  <Download className="h-4 w-4 mr-1" />
+                  导出Excel
+                </Button>
+                <Button size="sm" variant="outline">
+                  <Copy className="h-4 w-4 mr-1" />
+                  复制SQL
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {message.result?.type === "confirmation" && (
+          <Card className="bg-blue-50 border-blue-200">
+            <CardContent className="p-4">
+              <h4 className="font-medium text-gray-900 mb-2">{message.result.title}</h4>
+              <p className="text-sm text-gray-600 mb-3">{message.result.description}</p>
+              <div className="flex items-center gap-4 text-sm mb-3">
+                <span>影响用户数：<strong>{message.result.affectedCount.toLocaleString()}</strong></span>
+                <span>置信度：<strong>{(message.result.confidence * 100).toFixed(0)}%</strong></span>
+              </div>
+              {message.result.needReview && (
+                <div className="flex items-center gap-2">
+                  <Button size="sm">确认执行</Button>
+                  <Button size="sm" variant="outline">查看详情</Button>
+                  <Button size="sm" variant="ghost">取消</Button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {message.result?.type === "cleaning" && (
+          <Card className="bg-yellow-50 border-yellow-200">
+            <CardContent className="p-4">
+              <h4 className="font-medium text-gray-900 mb-3">{message.result.title}</h4>
+              <div className="space-y-3">
+                {message.result.issues.map((issue: any, index: number) => (
+                  <div key={index} className="flex items-start justify-between p-3 bg-white rounded-lg">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <Badge variant="secondary">{issue.field}</Badge>
+                        <span className="text-sm font-medium">{issue.issue}</span>
+                      </div>
+                      {issue.example && (
+                        <p className="text-xs text-gray-500 mt-1">示例：{issue.example}</p>
+                      )}
+                      {issue.suggestion && (
+                        <p className="text-xs text-gray-500 mt-1">建议：{issue.suggestion}</p>
+                      )}
+                    </div>
+                    <Badge className="bg-red-100 text-red-700">{issue.count} 条</Badge>
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center gap-2 mt-3">
+                <Button size="sm">一键清洗</Button>
+                <Button size="sm" variant="outline">预览修改</Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {message.result?.type === "report" && (
+          <Card className="bg-green-50 border-green-200">
+            <CardContent className="p-4">
+              <h4 className="font-medium text-gray-900 mb-2">{message.result.title}</h4>
+              <p className="text-sm text-gray-600 mb-3">{message.result.summary}</p>
+              <div className="space-y-2">
+                <p className="text-sm font-medium text-gray-700">核心发现：</p>
+                {message.result.highlights.map((highlight: string, index: number) => (
+                  <div key={index} className="flex items-start gap-2 text-sm text-gray-600">
+                    <span className="text-green-500">•</span>
+                    {highlight}
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center gap-2 mt-3">
+                <Button size="sm">
+                  <Download className="h-4 w-4 mr-1" />
+                  下载完整报告
+                </Button>
+                <Button size="sm" variant="outline">
+                  <BarChart3 className="h-4 w-4 mr-1" />
+                  查看图表
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
+      <div className="flex h-[calc(100vh-64px)]">
+        {/* 左侧：功能面板 */}
+        <div className="w-64 border-r bg-white/80 backdrop-blur p-4 hidden lg:block">
+          <h3 className="font-semibold text-gray-900 mb-4">AI能力</h3>
+          <div className="space-y-2">
+            {supportedTasks.map((task) => (
+              <div
+                key={task.type}
+                className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
+              >
+                <div className="p-2 rounded-lg bg-blue-50">
+                  <task.icon className="h-4 w-4 text-blue-500" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{task.label}</p>
+                  <p className="text-xs text-gray-500">{task.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-6">
+            <h3 className="font-semibold text-gray-900 mb-4">快捷指令</h3>
+            <div className="space-y-2">
+              {quickCommands.map((cmd, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleQuickCommand(cmd.command)}
+                  className="w-full flex items-center gap-2 p-2 rounded-lg text-left text-sm text-gray-600 hover:bg-gray-50 transition-colors"
+                >
+                  <cmd.icon className="h-4 w-4 text-gray-400" />
+                  {cmd.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 中间：对话区域 */}
+        <div className="flex-1 flex flex-col">
+          {/* 消息列表 */}
+          <ScrollArea className="flex-1 p-6" ref={scrollRef}>
+            <div className="max-w-3xl mx-auto space-y-6">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex gap-4 ${message.role === "user" ? "flex-row-reverse" : ""}`}
+                >
+                  <div
+                    className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${
+                      message.role === "user"
+                        ? "bg-blue-500"
+                        : "bg-gradient-to-br from-purple-500 to-blue-500"
+                    }`}
+                  >
+                    {message.role === "user" ? (
+                      <User className="h-5 w-5 text-white" />
+                    ) : (
+                      <Bot className="h-5 w-5 text-white" />
+                    )}
+                  </div>
+                  <div
+                    className={`flex-1 ${message.role === "user" ? "text-right" : ""}`}
+                  >
+                    <div
+                      className={`inline-block max-w-full text-left rounded-2xl px-4 py-3 ${
+                        message.role === "user"
+                          ? "bg-blue-500 text-white"
+                          : "bg-white shadow-sm"
+                      }`}
+                    >
+                      {message.role === "user" ? (
+                        <p>{message.content}</p>
+                      ) : (
+                        renderMessageContent(message)
+                      )}
+                    </div>
+                    {message.role === "assistant" && (
+                      <div className="flex items-center gap-2 mt-2">
+                        <Button variant="ghost" size="sm" className="h-7 px-2">
+                          <ThumbsUp className="h-3 w-3" />
+                        </Button>
+                        <Button variant="ghost" size="sm" className="h-7 px-2">
+                          <ThumbsDown className="h-3 w-3" />
+                        </Button>
+                        <Button variant="ghost" size="sm" className="h-7 px-2">
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                        <Button variant="ghost" size="sm" className="h-7 px-2">
+                          <RefreshCw className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+
+              {isLoading && (
+                <div className="flex gap-4">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
+                    <Bot className="h-5 w-5 text-white" />
+                  </div>
+                  <div className="bg-white rounded-2xl px-4 py-3 shadow-sm">
+                    <div className="flex items-center gap-2 text-gray-500">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span>AI正在思考...</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+
+          {/* 输入区域 */}
+          <div className="border-t bg-white/80 backdrop-blur p-4">
+            <div className="max-w-3xl mx-auto">
+              <div className="flex items-center gap-3">
+                <div className="flex-1 relative">
+                  <Input
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+                    placeholder="输入您的问题，例如：帮我找出最近30天的高价值用户..."
+                    className="pr-12 py-6 bg-white"
+                  />
+                  <Button
+                    size="icon"
+                    className="absolute right-2 top-1/2 -translate-y-1/2"
+                    onClick={handleSend}
+                    disabled={isLoading || !inputValue.trim()}
+                  >
+                    <Send className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              <p className="text-xs text-gray-400 mt-2 text-center">
+                AI生成的内容可能存在误差，重要操作请人工确认
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}