fix:优化docker p配置

src/components/HeaderPanel.tsx

@@ -3,7 +3,7 @@ import { StatCard } from './StatCard'
 import { useSituationStore } from '@/store/situationStore'
 import { useReplaySituation } from '@/hooks/useReplaySituation'
 import { usePlaybackStore } from '@/store/playbackStore'
-import { Wifi, WifiOff, Clock, Share2, Heart, Eye } from 'lucide-react'
+import { Wifi, WifiOff, Clock, Share2, Heart, Eye, MessageSquare } from 'lucide-react'
 
 const STORAGE_LIKES = 'us-iran-dashboard-likes'
 
@@ -25,6 +25,10 @@ export function HeaderPanel() {
   const [liked, setLiked] = useState(false)
   const [viewers, setViewers] = useState(0)
   const [cumulative, setCumulative] = useState(0)
+  const [feedbackOpen, setFeedbackOpen] = useState(false)
+  const [feedbackText, setFeedbackText] = useState('')
+  const [feedbackSending, setFeedbackSending] = useState(false)
+  const [feedbackDone, setFeedbackDone] = useState(false)
 
   useEffect(() => {
     const timer = setInterval(() => setNow(new Date()), 1000)
@@ -69,6 +73,32 @@ export function HeaderPanel() {
     return navigator.clipboard?.writeText(text) ?? Promise.resolve()
   }
 
+  const handleFeedback = async () => {
+    const text = feedbackText.trim()
+    if (!text || feedbackSending) return
+    setFeedbackSending(true)
+    try {
+      const res = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: text }),
+      })
+      const data = await res.json()
+      if (data.ok) {
+        setFeedbackText('')
+        setFeedbackDone(true)
+        setTimeout(() => {
+          setFeedbackOpen(false)
+          setFeedbackDone(false)
+        }, 800)
+      }
+    } catch {
+      setFeedbackDone(false)
+    } finally {
+      setFeedbackSending(false)
+    }
+  }
+
   const handleLike = () => {
     if (liked) return
     setLiked(true)
@@ -127,6 +157,14 @@ export function HeaderPanel() {
           <span className="text-[10px] opacity-70">|</span>
           <span className="text-[10px]">累积 <b className="tabular-nums">{cumulative}</b></span>
         </div>
+        <button
+          type="button"
+          onClick={() => setFeedbackOpen(true)}
+          className="flex items-center gap-1 rounded border border-military-border px-2 py-1 text-[10px] text-military-text-secondary hover:bg-military-border/30 hover:text-cyan-400"
+        >
+          <MessageSquare className="h-3 w-3" />
+          留言
+        </button>
         <button
           type="button"
           onClick={handleShare}
@@ -198,6 +236,48 @@ export function HeaderPanel() {
           className="border-military-accent/50"
         />
       </div>
+      {/* 留言弹窗 */}
+      {feedbackOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          onClick={() => !feedbackSending && setFeedbackOpen(false)}
+        >
+          <div
+            className="w-[90%] max-w-md rounded-lg border border-military-border bg-military-panel p-4 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="mb-2 text-sm font-medium text-military-accent">后台留言</h3>
+            <p className="mb-2 text-[10px] text-military-text-secondary">
+              您的反馈将提交给开发者，用于后续优化
+            </p>
+            <textarea
+              value={feedbackText}
+              onChange={(e) => setFeedbackText(e.target.value)}
+              placeholder="请输入留言内容（1–2000 字）..."
+              rows={4}
+              maxLength={2000}
+              className="mb-3 w-full resize-none rounded border border-military-border bg-military-dark px-2 py-2 text-xs text-military-text-primary placeholder:text-military-text-secondary focus:border-cyan-500 focus:outline-none"
+            />
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => !feedbackSending && setFeedbackOpen(false)}
+                className="rounded border border-military-border px-3 py-1 text-[10px] text-military-text-secondary hover:bg-military-border/30"
+              >
+                取消
+              </button>
+              <button
+                type="button"
+                onClick={handleFeedback}
+                disabled={!feedbackText.trim() || feedbackSending}
+                className="rounded bg-cyan-600 px-3 py-1 text-[10px] text-white hover:bg-cyan-500 disabled:opacity-50"
+              >
+                {feedbackSending ? '提交中...' : feedbackDone ? '已提交' : '提交'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </header>
   )
 }