# 神射手 - 核心组件代码

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

---

## 一、首页AI对话核心逻辑

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

```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 用户画像卡片渲染

```tsx
// 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 动态数据加载

```tsx
// 各页面通用模式
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 苹果毛玻璃样式

```tsx
// 页面容器
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](./前端开发规范.md)
- [../3、原型/页面结构.md](../3、原型/页面结构.md)