From ec20a5d083234bdb751cfdc9d77d802c61b8b6cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E8=88=AA=E5=AE=87?= <3364451258@qq.com>
Date: Wed, 17 Jun 2026 00:25:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=EF=BC=88=E5=9B=9E=E5=A1=AB/=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4/=E6=B8=85=E7=A9=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/HistoryList.tsx            | 69 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/gui/src-frontend/src/components/HistoryList.tsx b/gui/src-frontend/src/components/HistoryList.tsx
index c5a7309..39e921c 100644
--- a/gui/src-frontend/src/components/HistoryList.tsx
+++ b/gui/src-frontend/src/components/HistoryList.tsx
@@ -1,8 +1,73 @@
+import { useQrState } from '../store/qrContext';
+import { MODE_LABELS, type HistoryEntry } from '../types';
+
 export default function HistoryList() {
+  const { state, dispatch } = useQrState();
+
+  const handleClick = (entry: HistoryEntry) => {
+    dispatch({ type: 'SET_MODE', payload: entry.mode as any });
+    try {
+      const formData = JSON.parse(entry.content);
+      dispatch({ type: 'SET_FORM_DATA', payload: formData });
+    } catch {
+      dispatch({ type: 'SET_FORM_DATA', payload: { text: entry.content } });
+    }
+  };
+
+  const handleDelete = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    dispatch({ type: 'REMOVE_HISTORY', payload: id });
+  };
+
+  const handleClear = () => {
+    dispatch({ type: 'SET_HISTORY', payload: [] });
+  };
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+  };
+
   return (
     <div className="flex flex-col h-full">
-      <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">📋 历史记录</div>
-      <p className="text-xs text-gray-400 text-center py-4">暂无记录</p>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+          📋 历史记录
+        </span>
+        {state.history.length > 0 && (
+          <button onClick={handleClear}
+            className="text-xs text-red-400 hover:text-red-600 transition-colors">
+            清空
+          </button>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-y-auto space-y-1">
+        {state.history.length === 0 && (
+          <p className="text-xs text-gray-400 text-center py-4">暂无记录</p>
+        )}
+        {state.history.map(entry => (
+          <div key={entry.id}
+            onClick={() => handleClick(entry)}
+            className="group flex items-center justify-between px-2 py-1.5 rounded-lg text-xs cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-1.5">
+                <span className="px-1 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
+                  {MODE_LABELS[entry.mode as keyof typeof MODE_LABELS] || entry.mode}
+                </span>
+                <span className="text-gray-400">{formatTime(entry.timestamp)}</span>
+              </div>
+              <span className="text-gray-500 dark:text-gray-400 truncate block mt-0.5">
+                {entry.content.length > 20 ? entry.content.slice(0, 20) + '...' : entry.content}
+              </span>
+            </div>
+            <button onClick={(e) => handleDelete(e, entry.id)}
+              className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 ml-1 transition-all text-lg leading-none">
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }