From 8c5273790a2c2da8128828da62e6b360152a61ca Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Thu, 3 Jul 2025 00:49:29 +0800
Subject: [PATCH] better layout

---
 src/app/zh-CN/page.tsx               | 30 +++++++++++++++++++++-------
 src/components/ComparisonForm.tsx    |  2 +-
 src/components/ComparisonHistory.tsx | 27 ++++++++++++++++++++-----
 src/utils/historyStorage.ts          | 19 ++++++++++++++++++
 4 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/app/zh-CN/page.tsx b/src/app/zh-CN/page.tsx
index f20ec51..2a0a488 100644
--- a/src/app/zh-CN/page.tsx
+++ b/src/app/zh-CN/page.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { HistoryItem } from '@/components/ComparisonHistory';
 import AdBanner from '@/components/AdBanner';
 import LanguageSwitcher from '@/components/LanguageSwitcher';
-import { saveToHistory } from '@/utils/historyStorage';
+import { saveToHistory, deleteHistoryItem } from '@/utils/historyStorage';
 
 export default function HomePage() {
   const [comparisonResults, setComparisonResults] = useState<string | null>(null);
@@ -300,7 +300,7 @@ function ComparisonFormZH({ onSubmit, isLoading, selectedExample, onExampleUsed
           <button
             type="submit"
             disabled={isLoading || !item1.trim() || !item2.trim()}
-            className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
+            className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2 mx-auto"
           >
             {isLoading ? (
               <>
@@ -355,6 +355,11 @@ function ComparisonHistoryZH({ onSelectHistory }: { onSelectHistory: (item: Hist
     setHistory([]);
     window.dispatchEvent(new Event('comparison-history-updated'));
   };
+  
+  const handleDeleteItem = (e: React.MouseEvent, itemId: string) => {
+    e.stopPropagation();
+    deleteHistoryItem(itemId);
+  };
 
   const formatDate = (timestamp: number) => {
     return new Date(timestamp).toLocaleDateString('zh-CN', {
@@ -394,17 +399,28 @@ function ComparisonHistoryZH({ onSelectHistory }: { onSelectHistory: (item: Hist
           <div
             key={item.id}
             onClick={() => onSelectHistory(item)}
-            className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200"
+            className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200 group relative"
           >
             <div className="flex items-center justify-between mb-2">
-              <div className="font-medium text-gray-900">
+              <div className="font-medium text-gray-900 flex-1">
                 <span className="text-blue-600">{item.item1}</span>
                 <span className="text-gray-400 mx-2">vs</span>
                 <span className="text-green-600">{item.item2}</span>
               </div>
-              <span className="text-xs text-gray-500">
-                {formatDate(item.timestamp)}
-              </span>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">
+                  {formatDate(item.timestamp)}
+                </span>
+                <button
+                  onClick={(e) => handleDeleteItem(e, item.id)}
+                  className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 p-1 rounded transition-all duration-200"
+                  title="删除此比较"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
             </div>
             {(item.description1 || item.description2) && (
               <div className="text-sm text-gray-600">
diff --git a/src/components/ComparisonForm.tsx b/src/components/ComparisonForm.tsx
index 8c13e18..92e9944 100644
--- a/src/components/ComparisonForm.tsx
+++ b/src/components/ComparisonForm.tsx
@@ -176,7 +176,7 @@ export default function ComparisonForm({ onSubmit, isLoading, selectedExample, o
         <button
           type="submit"
           disabled={isLoading || !item1.trim() || !item2.trim()}
-          className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
+          className="px-8 py-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2 mx-auto"
         >
           {isLoading ? (
             <>
diff --git a/src/components/ComparisonHistory.tsx b/src/components/ComparisonHistory.tsx
index bf446e9..fd5189a 100644
--- a/src/components/ComparisonHistory.tsx
+++ b/src/components/ComparisonHistory.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { deleteHistoryItem } from '@/utils/historyStorage';
 
 export interface HistoryItem {
   id: string;
@@ -55,6 +56,11 @@ export default function ComparisonHistory({ onSelectHistory }: ComparisonHistory
     setHistory([]);
     window.dispatchEvent(new Event('comparison-history-updated'));
   };
+  
+  const handleDeleteItem = (e: React.MouseEvent, itemId: string) => {
+    e.stopPropagation(); // Prevent triggering the onClick of the parent div
+    deleteHistoryItem(itemId);
+  };
 
   const formatDate = (timestamp: number) => {
     return new Date(timestamp).toLocaleDateString('en-US', {
@@ -94,17 +100,28 @@ export default function ComparisonHistory({ onSelectHistory }: ComparisonHistory
           <div
             key={item.id}
             onClick={() => onSelectHistory(item)}
-            className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200"
+            className="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200 group relative"
           >
             <div className="flex items-center justify-between mb-2">
-              <div className="font-medium text-gray-900">
+              <div className="font-medium text-gray-900 flex-1">
                 <span className="text-blue-600">{item.item1}</span>
                 <span className="text-gray-400 mx-2">vs</span>
                 <span className="text-green-600">{item.item2}</span>
               </div>
-              <span className="text-xs text-gray-500">
-                {formatDate(item.timestamp)}
-              </span>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500">
+                  {formatDate(item.timestamp)}
+                </span>
+                <button
+                  onClick={(e) => handleDeleteItem(e, item.id)}
+                  className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 p-1 rounded transition-all duration-200"
+                  title="Delete this comparison"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </button>
+              </div>
             </div>
             {(item.description1 || item.description2) && (
               <div className="text-sm text-gray-600">
diff --git a/src/utils/historyStorage.ts b/src/utils/historyStorage.ts
index 2846057..92d3422 100644
--- a/src/utils/historyStorage.ts
+++ b/src/utils/historyStorage.ts
@@ -51,4 +51,23 @@ export const getHistory = (): HistoryItem[] => {
     console.error('Error loading history:', error);
     return [];
   }
+};
+
+export const deleteHistoryItem = (id: string) => {
+  try {
+    const existing = localStorage.getItem('comparison-history');
+    if (existing) {
+      const history: HistoryItem[] = JSON.parse(existing);
+      const updatedHistory = history.filter(item => item.id !== id);
+      localStorage.setItem('comparison-history', JSON.stringify(updatedHistory));
+      
+      // Dispatch custom event for same-page updates
+      window.dispatchEvent(new Event('comparison-history-updated'));
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Error deleting history item:', error);
+    return false;
+  }
 };
\ No newline at end of file