合并: 清空按钮 + 背景图 + 模糊效果

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

PWA/src/App.tsx

@@ -52,7 +52,6 @@ export default function App() {
   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()
@@ -63,14 +62,13 @@ export default function App() {
         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
+          saveRemote(local)
         }
       }
       setSynced(true)
     })()
   }, [])
 
-  // Save to both storages whenever messages change (after initial sync)
   useEffect(() => {
     if (!synced || messages.length === 0) return
     saveLocal(messages)
@@ -107,6 +105,11 @@ export default function App() {
     }
   }
 
+  const handleClear = () => {
+    setMessages([])
+    localStorage.removeItem(STORAGE_KEY)
+  }
+
   return (
     <div
       className="flex flex-col h-full"
@@ -117,8 +120,17 @@ export default function App() {
         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 className="flex items-center justify-center pt-3 pb-2 flex-shrink-0 relative">
+        <span className="tracking-wide" style={{ color: '#999', fontSize: '4.35vw' }}>沈晏</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} />