songtianlun/anything-vs-anything
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better layout

Browse Source
This commit is contained in:
songtianlun 2025-07-03 00:49:29 +08:00
parent cbeca17ef0
commit 8c5273790a
4 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/zh-CN/page.tsx
View File

@ -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">

2
src/components/ComparisonForm.tsx
View File

@ -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 ? (
<>

27
src/components/ComparisonHistory.tsx
View File

@ -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">

19
src/utils/historyStorage.ts
View File

@ -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;
}
};