PWA: 页面背景图 + 对话气泡与输入区模糊效果

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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'
 
@@ -8,16 +8,77 @@ export type Message = {
   text: string
 }
 
-const API = 'http://localhost:3001/api/chat'
+const API = '/api/chat'
+const HISTORY = '/api/chat-history'
+const STORAGE_KEY = 'shenyan-chat-messages'
+const MAX_MSGS = 200
 
-let nextId = 0
+function loadLocal(): Message[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch { return [] }
+}
+
+function saveLocal(msgs: Message[]) {
+  const trimmed = msgs.length > MAX_MSGS ? msgs.slice(-MAX_MSGS) : msgs
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(trimmed))
+}
+
+async function loadRemote(): Promise<Message[] | null> {
+  try {
+    const res = await fetch(HISTORY)
+    if (!res.ok) return null
+    const data = await res.json()
+    if (Array.isArray(data) && data.length > 0) return data
+    return null
+  } catch { return null }
+}
+
+async function saveRemote(msgs: Message[]) {
+  try {
+    const trimmed = msgs.length > MAX_MSGS ? msgs.slice(-MAX_MSGS) : msgs
+    await fetch(HISTORY, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(trimmed),
+    })
+  } catch { /* silent */ }
+}
 
 export default function App() {
-  const [messages, setMessages] = useState<Message[]>([])
+  const [messages, setMessages] = useState<Message[]>(loadLocal)
   const [loading, setLoading] = useState(false)
+  const [synced, setSynced] = useState(false)
+  const nextId = useRef(0)
+
+  // On mount, try server first; if server has messages, use those; otherwise keep local
+  useEffect(() => {
+    (async () => {
+      const remote = await loadRemote()
+      if (remote && remote.length > 0) {
+        setMessages(remote)
+        nextId.current = Math.max(...remote.map(m => m.id)) + 1
+      } else {
+        const local = loadLocal()
+        if (local.length > 0) {
+          nextId.current = Math.max(...local.map(m => m.id)) + 1
+          saveRemote(local) // first-time: push local to server
+        }
+      }
+      setSynced(true)
+    })()
+  }, [])
+
+  // Save to both storages whenever messages change (after initial sync)
+  useEffect(() => {
+    if (!synced || messages.length === 0) return
+    saveLocal(messages)
+    saveRemote(messages)
+  }, [messages, synced])
 
   const handleSend = async (text: string) => {
-    const userMsg: Message = { id: nextId++, role: 'user', text }
+    const userMsg: Message = { id: nextId.current++, role: 'user', text }
     setMessages((prev) => [...prev, userMsg])
     setLoading(true)
 
@@ -38,17 +99,25 @@ export default function App() {
 
       const data = await res.json()
       const reply = data.choices?.[0]?.message?.content || '(no response)'
-      setMessages((prev) => [...prev, { id: nextId++, role: 'shenyan', text: reply }])
+      setMessages((prev) => [...prev, { id: nextId.current++, role: 'shenyan', text: reply }])
     } catch {
-      setMessages((prev) => [...prev, { id: nextId++, role: 'shenyan', text: '连接失败' }])
+      setMessages((prev) => [...prev, { id: nextId.current++, role: 'shenyan', text: '连接失败' }])
     } finally {
       setLoading(false)
     }
   }
 
   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' }}>
+    <div
+      className="flex flex-col h-full"
+      style={{
+        backgroundImage: 'url(/1.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundAttachment: 'fixed',
+      }}
+    >
+      <header className="text-center pt-3 pb-2 tracking-wide flex-shrink-0 mx-auto" style={{ color: '#999', fontSize: '4.35vw', width: '90vw', maxWidth: 600 }}>
         沈晏
       </header>
       <ChatArea messages={messages} />

PWA/src/components/ChatArea.tsx

@@ -9,18 +9,23 @@ export default function ChatArea({ messages }: { messages: Message[] }) {
   }, [messages])
 
   return (
-    <div className="flex-1 overflow-y-auto no-scrollbar px-4">
-      <div className="w-full py-4 space-y-3">
+    <div className="flex-1 overflow-y-auto no-scrollbar flex justify-center">
+      <div className="py-4 space-y-3" style={{ width: '90vw', maxWidth: 600 }}>
         {messages.map((m) => (
           <div
             key={m.id}
             className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
           >
             <div
-              className="max-w-[80%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed"
+              className="max-w-[80%] rounded-2xl text-sm leading-relaxed"
               style={{
-                backgroundColor: m.role === 'user' ? '#fff' : 'rgba(255,255,255,0.3)',
-                color: '#888',
+                backgroundColor: m.role === 'user' ? '#ffffffa1' : 'rgba(255,255,255,0.3)',
+                color: '#ffffff',
+                border: m.role === 'shenyan' ? '1px solid rgba(255,255,255,0.4)' : 'none',
+                padding: 12,
+                fontSize: '4.5vw',
+                backdropFilter: 'blur(8px)',
+                WebkitBackdropFilter: 'blur(8px)',
               }}
             >
               {m.text}

PWA/src/components/InputArea.tsx

@@ -11,7 +11,11 @@ export default function InputArea({ onSend, disabled }: { onSend: (text: string)
   }
 
   return (
-    <div className="flex-shrink-0 px-4 pb-6 pt-3" style={{ height: '25vw' }}>
+    <div
+      className="flex-shrink-0 flex justify-center"
+      style={{ padding: 17, backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }}
+    >
+      <div style={{ height: '25vw', width: '90vw', maxWidth: 600 }}>
       <div className="w-full h-full relative">
         <textarea
           placeholder="输入"
@@ -24,17 +28,18 @@ export default function InputArea({ onSend, disabled }: { onSend: (text: string)
             }
           }}
           disabled={disabled}
-          className="w-full h-full px-4 pt-2.5 pb-10 rounded-xl text-sm outline-none resize-none"
-          style={{ backgroundColor: '#2a2a2a', color: disabled ? '#555' : '#888' }}
+          className="w-full h-full rounded-xl outline-none resize-none"
+          style={{ backgroundColor: '#2a2a2a', color: disabled ? '#555' : '#888', fontSize: '4.35vw', padding: '4.11vw' }}
         />
         <button
           onClick={handleSubmit}
-          className="absolute rounded-lg text-xs px-3 py-1"
-          style={{ right: 12, bottom: 12, backgroundColor: '#3a3a3a', color: '#999' }}
+          className="absolute rounded-lg px-3 py-1"
+          style={{ right: '4.11vw', bottom: '4.11vw', backgroundColor: '#3a3a3a', color: '#999', fontSize: '3.38vw' }}
         >
           发送
         </button>
       </div>
       </div>
+    </div>
   )
 }