120 lines
3.0 KiB
Markdown
120 lines
3.0 KiB
Markdown
# 神射手 - 核心组件代码
|
|
|
|
> 📅 从 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)
|