users/开发文档/4、前端/核心组件代码.md

神射手 - 核心组件代码

📅 从 app/ 与 components/ 提取 | 2026-01-31

---

一、首页AI对话核心逻辑

1.1 状态与API调用 (app/page.tsx)

// 核心状态
const [query, setQuery] = useState("")
const [loading, setLoading] = useState(false)
const [messages, setMessages] = useState<ChatMessage[]>([])
const [aiStatus, setAiStatus] = useState<AIStatus | null>(null)

// 获取AI状态
useEffect(() => {
  fetch("/api/ai-chat")
    .then(res => res.json())
    .then(data => {
      setAiStatus(data)
      setStats({ totalUsers: data.database?.totalUsers, ... })
    })
}, [])

// 发送查询
const handleSend = async () => {
  setLoading(true)
  const res = await fetch("/api/ai-chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: query })
  })
  const data = await res.json()
  // 添加 thinking 消息
  setMessages(prev => [...prev, { role: "thinking", content: data.thinking }])
  // 添加回复 + portrait
  setMessages(prev => [...prev, { role: "assistant", content: data.response, portrait: data.portrait }])
  setLoading(false)
}

1.2 用户画像卡片渲染

// UserPortrait 卡片结构
{msg.portrait && (
  <Card className="bg-white/80 backdrop-blur">
    <CardHeader>
      <CardTitle>👤 用户画像</CardTitle>
    </CardHeader>
    <CardContent>
      <div className="grid grid-cols-2 gap-2 text-sm">
        {msg.portrait.name && <span>姓名: {msg.portrait.name}</span>}
        {msg.portrait.phone && <span>手机: {msg.portrait.phone}</span>}
        {msg.portrait.qq && <span>QQ: {msg.portrait.qq}</span>}
        {msg.portrait.level && <span>等级: {msg.portrait.level}</span>}
        {msg.portrait.province && <span>地区: {msg.portrait.province}</span>}
      </div>
    </CardContent>
  </Card>
)}

---

二、通用模式

2.1 动态数据加载

// 各页面通用模式
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetch('/api/xxx')
    .then(res => res.json())
    .then(data => {
      if (data.success) setData(data.xxx)
    })
    .finally(() => setLoading(false))
}, [])

2.2 苹果毛玻璃样式

// 页面容器
className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20"

// 卡片
className="bg-white/80 backdrop-blur border-slate-200/60 rounded-xl shadow-lg"

// 按钮
className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600"

---

三、关键组件路径

组件	路径	用途
Card	@/components/ui/card	卡片容器
Button	@/components/ui/button	按钮
Badge	@/components/ui/badge	标签
Input	@/components/ui/input	输入框
Dialog	@/components/ui/dialog	弹窗
Select	@/components/ui/select	下拉选择

---

四、关联文档

• 前端开发规范.md
• ../3、原型/页面结构.md