PWA对话持久化：localStorage，刷新不丢

PWA/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import ChatArea from './components/ChatArea'
 import InputArea from './components/InputArea'
 
@@ -9,26 +9,40 @@ export type Message = {
 }
 
 const API = 'http://localhost:3001/api/chat'
+const STORAGE_KEY = 'shenyan-messages'
 
-let nextId = 0
+function loadMessages(): Message[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+let nextId = (loadMessages().reduce((max, m) => Math.max(max, m.id), 0) || 0) + 1
 
 export default function App() {
-  const [messages, setMessages] = useState<Message[]>([])
+  const [messages, setMessages] = useState<Message[]>(loadMessages)
   const [loading, setLoading] = useState(false)
+  const didLoad = useRef(false)
+
+  useEffect(() => {
+    if (!didLoad.current) { didLoad.current = true; return }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(messages))
+  }, [messages])
 
   const handleSend = async (text: string) => {
     const userMsg: Message = { id: nextId++, role: 'user', text }
-    setMessages((prev) => [...prev, userMsg])
+    const updated = [...messages, userMsg]
+    setMessages(updated)
     setLoading(true)
 
     try {
-      const apiMessages = [
+      const apiMessages = updated.map((m) => ({
-        ...messages.map((m) => ({
+        role: m.role === 'user' ? 'user' : 'assistant',
-          role: m.role === 'user' ? 'user' : 'assistant',
+        content: m.text,
-          content: m.text,
+      }))
-        })),
-        { role: 'user', content: userMsg.text },
-      ]
 
       const res = await fetch(API, {
         method: 'POST',
@@ -46,10 +60,24 @@ export default function App() {
     }
   }
 
+  const handleClear = () => {
+    setMessages([])
+    localStorage.removeItem(STORAGE_KEY)
+  }
+
   return (
     <div className="flex flex-col h-full bg-black">
-      <header className="text-center pt-3 pb-2 text-sm tracking-wide flex-shrink-0" style={{ color: '#999' }}>
+      <header className="flex items-center justify-center pt-3 pb-2 flex-shrink-0 relative">
-        沈晏
+        <span className="text-sm tracking-wide" style={{ color: '#999' }}>沈晏</span>
+        {messages.length > 0 && (
+          <button
+            onClick={handleClear}
+            className="absolute right-4 text-xs"
+            style={{ color: 'rgba(255,255,255,0.25)' }}
+          >
+            清空
+          </button>
+        )}
       </header>
       <ChatArea messages={messages} />
       <InputArea onSend={handleSend} disabled={loading} />