chore: 以本地为准，上传全部并替换 GitHub

2026-02-03 11:36:53 +08:00
parent 1219166526
commit b404bf546e
131 changed files with 37618 additions and 3930 deletions
--- a/开发文档/4、前端/核心组件代码.md
+++ b/开发文档/4、前端/核心组件代码.md
@@ -0,0 +1,119 @@
+# 神射手 - 核心组件代码
+
+> 📅 从 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)