完善历史记录功能，支持从抽取历史和名单变更历史还原状态；添加清空历史记录的功能

Author: JunWang666

README.md

@@ -7,6 +7,9 @@ AI 生成的小工具，用于随机抽取人员，支持 URL 传参，支持静
 - 支持名单搜索、清空、分享链接
 - 支持通过 URL 传参快速导入名单
 - 支持本地收藏/加载/删除常用名单（localStorage，无需后端，静态部署友好）
+- 完整的操作历史记录（抽取历史和名单变更历史）
+- 支持从历史记录还原到任意时刻的状态
+
 
 **在线体验地址：**
 https://wangjunwei233.github.io/RandomChoice.NextJS/

app/page.tsx

@@ -27,26 +27,7 @@ const RandomNamePickerContent = () => {
 
   // 初始化：加载URL名单和本地收藏名单
   useEffect(() => {
-    const list = searchParams.get('list');
-    if (list) {
-      const decodedList = decodeURIComponent(list);
-      const initialNames = decodedList
-        .split(/\n|,|，|\[|\]/)
-        .map((name) => name.trim())
-        .filter((name) => name);
-      setNames(initialNames);
-      setMaxSelectable(initialNames.length);
-      // 记录URL导入名单的历史
-      addNameListHistory('URL导入', initialNames, `导入${initialNames.length}个名字`);
-    }
-    // 加载收藏名单
-    try {
-      const fav = localStorage.getItem('favoriteLists');
-      if (fav) {
-        setFavoriteLists(JSON.parse(fav));
-      }
-    } catch {}
-    // 加载历史记录
+    // 先加载历史记录
     try {
       const drawHist = localStorage.getItem('drawHistory');
       if (drawHist) {
@@ -57,6 +38,54 @@ const RandomNamePickerContent = () => {
         setNameListHistory(JSON.parse(nameHist));
       }
     } catch {}
+
+    // 加载收藏名单
+    try {
+      const fav = localStorage.getItem('favoriteLists');
+      if (fav) {
+        setFavoriteLists(JSON.parse(fav));
+      }
+    } catch {}
+
+    // 处理URL参数（只在页面首次加载时）
+    const list = searchParams.get('list');
+    if (list && names.length === 0) { // 只在名单为空时处理，避免重复
+      const decodedList = decodeURIComponent(list);
+      const initialNames = decodedList
+        .split(/\n|,|，|\[|\]/)
+        .map((name) => name.trim())
+        .filter((name) => name);
+      
+      if (initialNames.length > 0) {
+        setNames(initialNames);
+        setMaxSelectable(initialNames.length);
+        
+        // 延迟记录历史，确保状态已更新且避免重复
+        setTimeout(() => {
+          const newRecord = {
+            timestamp: new Date().toLocaleString(),
+            action: 'URL导入',
+            nameList: [...initialNames],
+            details: `导入${initialNames.length}个名字`
+          };
+          setNameListHistory(prev => {
+            // 检查是否已经有相同的URL导入记录
+            const hasUrlImport = prev.some(record => 
+              record.action === 'URL导入' && 
+              record.nameList.length === initialNames.length &&
+              record.nameList.every((name, index) => name === initialNames[index])
+            );
+            
+            if (!hasUrlImport) {
+              const newHistory = [newRecord, ...prev].slice(0, 50);
+              localStorage.setItem('nameListHistory', JSON.stringify(newHistory));
+              return newHistory;
+            }
+            return prev;
+          });
+        }, 100);
+      }
+    }
   }, [searchParams]);
 
   // 添加名单历史记录
@@ -68,6 +97,20 @@ const RandomNamePickerContent = () => {
       details
     };
     setNameListHistory(prev => {
+      // 检查是否与最近的记录重复（避免连续相同操作重复记录）
+      const lastRecord = prev[0];
+      if (lastRecord && 
+          lastRecord.action === action && 
+          lastRecord.nameList.length === nameList.length &&
+          lastRecord.nameList.every((name, index) => name === nameList[index]) &&
+          lastRecord.details === details) {
+        // 如果完全相同且时间间隔很短（1秒内），则不重复记录
+        const timeDiff = new Date().getTime() - new Date(lastRecord.timestamp).getTime();
+        if (timeDiff < 1000) {
+          return prev;
+        }
+      }
+      
       const newHistory = [newRecord, ...prev].slice(0, 50); // 最多保留50条记录
       localStorage.setItem('nameListHistory', JSON.stringify(newHistory));
       return newHistory;
@@ -83,6 +126,20 @@ const RandomNamePickerContent = () => {
       numPicked
     };
     setDrawHistory(prev => {
+      // 检查是否与最近的记录重复
+      const lastRecord = prev[0];
+      if (lastRecord && 
+          lastRecord.nameList.length === nameList.length &&
+          lastRecord.drawnNames.length === drawnNames.length &&
+          lastRecord.numPicked === numPicked &&
+          lastRecord.drawnNames.every((name, index) => name === drawnNames[index])) {
+        // 如果抽取结果完全相同且时间间隔很短（1秒内），则不重复记录
+        const timeDiff = new Date().getTime() - new Date(lastRecord.timestamp).getTime();
+        if (timeDiff < 1000) {
+          return prev;
+        }
+      }
+      
       const newHistory = [newRecord, ...prev].slice(0, 50); // 最多保留50条记录
       localStorage.setItem('drawHistory', JSON.stringify(newHistory));
       return newHistory;
@@ -129,6 +186,70 @@ const RandomNamePickerContent = () => {
     localStorage.setItem('favoriteLists', JSON.stringify(newFavs));
   };
 
+  // 清空所有历史记录
+  const handleClearAllHistory = () => {
+    if (!window.confirm('确定要清空所有历史记录吗？此操作不可恢复！')) return;
+    
+    // 清空状态
+    setDrawHistory([]);
+    setNameListHistory([]);
+    
+    // 清空本地存储
+    localStorage.removeItem('drawHistory');
+    localStorage.removeItem('nameListHistory');
+    
+    alert('所有历史记录已清空！');
+  };
+
+  // 清空抽取历史记录
+  const handleClearDrawHistory = () => {
+    if (!window.confirm('确定要清空抽取历史记录吗？此操作不可恢复！')) return;
+    
+    setDrawHistory([]);
+    localStorage.removeItem('drawHistory');
+    
+    alert('抽取历史记录已清空！');
+  };
+
+  // 清空名单变更历史记录
+  const handleClearNameHistory = () => {
+    if (!window.confirm('确定要清空名单变更历史记录吗？此操作不可恢复！')) return;
+    
+    setNameListHistory([]);
+    localStorage.removeItem('nameListHistory');
+    
+    alert('名单变更历史记录已清空！');
+  };
+
+  // 从抽取历史还原名单和抽取结果
+  const handleRestoreFromDrawHistory = (record: {timestamp: string, nameList: string[], drawnNames: string[], numPicked: number}) => {
+    if (!window.confirm('确定要还原到这次抽取时的状态吗？当前名单将被替换。')) return;
+    setNames(record.nameList);
+    setSelectedNames(record.drawnNames);
+    setNumToPick(record.numPicked);
+    setInput('');
+    setSearchTerm('');
+    // 还原操作只记录一次简单的记录，避免重复
+    setTimeout(() => {
+      addNameListHistory('从抽取历史还原', record.nameList, `还原到${record.timestamp}的抽取状态`);
+    }, 50);
+    alert('已还原到该次抽取时的状态！');
+  };
+
+  // 从名单历史还原名单
+  const handleRestoreFromNameHistory = (record: {timestamp: string, action: string, nameList: string[], details?: string}) => {
+    if (!window.confirm('确定要还原到这个时刻的名单吗？当前名单将被替换。')) return;
+    setNames(record.nameList);
+    setSelectedNames([]);
+    setInput('');
+    setSearchTerm('');
+    // 还原操作只记录一次简单的记录，避免重复
+    setTimeout(() => {
+      addNameListHistory('从名单历史还原', record.nameList, `还原到${record.timestamp}的名单状态`);
+    }, 50);
+    alert('已还原到该时刻的名单状态！');
+  };
+
   useEffect(() => {
     setMaxSelectable(names.length || 1);
     if (numToPick > names.length) {
@@ -386,16 +507,52 @@ const RandomNamePickerContent = () => {
           </button>
         </div>
 
+        {/* 历史记录总控制区域 */}
+        <div className="history-control-section">
+          <div className="list-header">
+            <h2>历史记录管理</h2>
+            <button 
+              onClick={handleClearAllHistory} 
+              className="button danger"
+              disabled={drawHistory.length === 0 && nameListHistory.length === 0}
+              style={{ padding: '8px 16px', fontSize: '14px' }}
+            >
+              清空所有历史记录
+            </button>
+          </div>
+        </div>
+
         {/* 历史记录部分 */}
         <div className="history-section">
-          <h2>抽取历史记录</h2>
+          <div className="list-header">
+            <h2>抽取历史记录</h2>
+            <div className="button-group">
+              <button 
+                onClick={handleClearDrawHistory} 
+                className="button danger"
+                disabled={drawHistory.length === 0}
+                style={{ padding: '6px 12px', fontSize: '14px' }}
+              >
+                清空抽取历史
+              </button>
+            </div>
+          </div>
           {drawHistory.length > 0 ? (
             <div className="history-container">
               {drawHistory.slice(0, 10).map((record, index) => (
                 <div key={index} className="history-item">
                   <div className="history-header">
                     <span className="history-time">{record.timestamp}</span>
-                    <span className="history-info">从 {record.nameList.length} 人中抽取 {record.numPicked} 人</span>
+                    <div>
+                      <span className="history-info">从 {record.nameList.length} 人中抽取 {record.numPicked} 人</span>
+                      <button
+                        onClick={() => handleRestoreFromDrawHistory(record)}
+                        className="button primary"
+                        style={{ marginLeft: 8, padding: '2px 8px', fontSize: '12px' }}
+                      >
+                        还原此状态
+                      </button>
+                    </div>
                   </div>
                   <div className="history-content">
                     <div>当时名单: {record.nameList.join(', ')}</div>
@@ -410,14 +567,35 @@ const RandomNamePickerContent = () => {
         </div>
 
         <div className="history-section">
-          <h2>名单变更历史</h2>
+          <div className="list-header">
+            <h2>名单变更历史</h2>
+            <div className="button-group">
+              <button 
+                onClick={handleClearNameHistory} 
+                className="button danger"
+                disabled={nameListHistory.length === 0}
+                style={{ padding: '6px 12px', fontSize: '14px' }}
+              >
+                清空变更历史
+              </button>
+            </div>
+          </div>
           {nameListHistory.length > 0 ? (
             <div className="history-container">
               {nameListHistory.slice(0, 10).map((record, index) => (
                 <div key={index} className="history-item">
                   <div className="history-header">
                     <span className="history-time">{record.timestamp}</span>
-                    <span className="history-action">{record.action}</span>
+                    <div>
+                      <span className="history-action">{record.action}</span>
+                      <button
+                        onClick={() => handleRestoreFromNameHistory(record)}
+                        className="button primary"
+                        style={{ marginLeft: 8, padding: '2px 8px', fontSize: '12px' }}
+                      >
+                        还原名单
+                      </button>
+                    </div>
                   </div>
                   <div className="history-content">
                     {record.details && <div style={{fontSize: '14px', color: '#666'}}>{record.details}</div>}
@@ -445,7 +623,7 @@ const RandomNamePickerContent = () => {
               className="search-input"
               style={{ width: 180, marginRight: 8 }}
             />
-            <button onClick={handleSaveFavorite} className="button secondary">
+            <button onClick={handleSaveFavorite} className="button primary">
               收藏当前名单
             </button>
           </div>
@@ -546,7 +724,7 @@ const RandomNamePickerContent = () => {
           font-size: 2.2rem;
         }
         
-        .input-section, .list-section, .picker-section, .range-section, .history-section, .favorite-section {
+        .input-section, .list-section, .picker-section, .range-section, .history-section, .favorite-section, .history-control-section {
           margin-bottom: 30px;
         }
         
@@ -761,6 +939,8 @@ const RandomNamePickerContent = () => {
           justify-content: space-between;
           align-items: center;
           margin-bottom: 8px;
+          flex-wrap: wrap;
+          gap: 8px;
         }
 
         .history-time {