优化Widget：localStorage持久化会话、消息历史加载、默认展开预览

2026-07-14 11:51:43 +08:00
parent dac61c8c56
commit 064af29d3b
2 changed files with 82 additions and 62 deletions
@@ -1,15 +1,23 @@
+import { useState } from 'react'
 import VisitorChat from '@/widgets/VisitorChat'

 const WidgetPreview = () => {
+  const [showWidget, setShowWidget] = useState(true)
+
  return (
    <div className="min-h-screen bg-neutral-100 flex flex-col">
      <div className="flex-1 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-neutral-800 mb-2">示例网站页面</h1>
-          <p className="text-neutral-400">访客聊天 Widget 已嵌入右下角，点击气泡按钮开始对话</p>
+          <p className="text-neutral-400 mb-4">Widget 在右下角，发送消息会写入数据库</p>
+          {!showWidget && (
+            <button onClick={() => setShowWidget(true)} className="text-sm text-blue-500 hover:text-blue-600 underline">
+              重新显示 Widget
+            </button>
+          )}
        </div>
      </div>
-      <VisitorChat />
+      {showWidget && <VisitorChat />}
    </div>
  )
 }