add chinese
This commit is contained in:
parent
8cff9808f0
commit
cbeca17ef0
@ -27,6 +27,10 @@ export const metadata: Metadata = {
|
|||||||
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'),
|
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'),
|
||||||
alternates: {
|
alternates: {
|
||||||
canonical: '/',
|
canonical: '/',
|
||||||
|
languages: {
|
||||||
|
'en': '/',
|
||||||
|
'zh-CN': '/zh-CN',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Anything vs Anything - AI-Powered Comparison Tool",
|
title: "Anything vs Anything - AI-Powered Comparison Tool",
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import ComparisonResults from '@/components/ComparisonResults';
|
|||||||
import ComparisonHistory, { HistoryItem } from '@/components/ComparisonHistory';
|
import ComparisonHistory, { HistoryItem } from '@/components/ComparisonHistory';
|
||||||
import ComparisonTips from '@/components/ComparisonTips';
|
import ComparisonTips from '@/components/ComparisonTips';
|
||||||
import AdBanner from '@/components/AdBanner';
|
import AdBanner from '@/components/AdBanner';
|
||||||
|
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
||||||
import { saveToHistory } from '@/utils/historyStorage';
|
import { saveToHistory } from '@/utils/historyStorage';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
@ -70,6 +71,8 @@ export default function Home() {
|
|||||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||||
Anything vs Anything
|
Anything vs Anything
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<LanguageSwitcher currentLang="en" />
|
||||||
<p className="text-xl md:text-2xl text-gray-600 mb-4">
|
<p className="text-xl md:text-2xl text-gray-600 mb-4">
|
||||||
Compare any two things using AI-powered analysis
|
Compare any two things using AI-powered analysis
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -10,5 +10,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
|||||||
changeFrequency: 'daily',
|
changeFrequency: 'daily',
|
||||||
priority: 1,
|
priority: 1,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
url: `${baseUrl}/zh-CN`,
|
||||||
|
lastModified: new Date(),
|
||||||
|
changeFrequency: 'daily',
|
||||||
|
priority: 0.9,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
129
src/app/zh-CN/layout.tsx
Normal file
129
src/app/zh-CN/layout.tsx
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
|
import "../globals.css";
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: "--font-geist-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: "--font-geist-mono",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "万物皆可比对 - AI智能比较工具",
|
||||||
|
description: "使用AI智能分析工具比较任何两个事物。获得产品、服务、概念等详细比较。免费在线比较生成器，提供智能洞察。",
|
||||||
|
keywords: "比较工具, AI比较, 产品比较, 服务比较, 对比工具, 万物比较, 分析工具, 决策辅助",
|
||||||
|
authors: [{ name: "万物皆可比对" }],
|
||||||
|
creator: "万物皆可比对",
|
||||||
|
publisher: "万物皆可比对",
|
||||||
|
formatDetection: {
|
||||||
|
email: false,
|
||||||
|
address: false,
|
||||||
|
telephone: false,
|
||||||
|
},
|
||||||
|
metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://anything-vs-anything.com'),
|
||||||
|
alternates: {
|
||||||
|
canonical: '/zh-CN',
|
||||||
|
languages: {
|
||||||
|
'en': '/',
|
||||||
|
'zh-CN': '/zh-CN',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
title: "万物皆可比对 - AI智能比较工具",
|
||||||
|
description: "使用AI智能分析工具比较任何两个事物。获得产品、服务、概念等详细比较。",
|
||||||
|
url: '/zh-CN',
|
||||||
|
siteName: "万物皆可比对",
|
||||||
|
locale: 'zh_CN',
|
||||||
|
type: 'website',
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: '/og-image.png',
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
alt: '万物皆可比对 - AI比较工具',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: 'summary_large_image',
|
||||||
|
title: "万物皆可比对 - AI智能比较工具",
|
||||||
|
description: "使用AI智能分析工具比较任何两个事物。获得产品、服务、概念等详细比较。",
|
||||||
|
images: ['/og-image.png'],
|
||||||
|
},
|
||||||
|
robots: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
googleBot: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
'max-video-preview': -1,
|
||||||
|
'max-image-preview': 'large',
|
||||||
|
'max-snippet': -1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
verification: {
|
||||||
|
google: process.env.GOOGLE_SITE_VERIFICATION,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
<meta name="theme-color" content="#3B82F6" />
|
||||||
|
<script
|
||||||
|
type="application/ld+json"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: JSON.stringify({
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "WebApplication",
|
||||||
|
"name": "万物皆可比对",
|
||||||
|
"description": "AI智能比较工具，帮助您比较任何两个事物，提供详细分析和洞察",
|
||||||
|
"url": process.env.NEXT_PUBLIC_SITE_URL + "/zh-CN" || "https://anything-vs-anything.com/zh-CN",
|
||||||
|
"applicationCategory": "Utility",
|
||||||
|
"operatingSystem": "Web",
|
||||||
|
"inLanguage": "zh-CN",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "0",
|
||||||
|
"priceCurrency": "CNY"
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "万物皆可比对"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<script defer src="https://umami.frytea.com/script.js" data-website-id="9d16d648-a83d-4616-94d6-ec3bb1f8e0b7"></script>
|
||||||
|
<script
|
||||||
|
src="https://rybbit.frytea.com/api/script.js"
|
||||||
|
data-site-id="13"
|
||||||
|
defer
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7296634171837358"
|
||||||
|
crossOrigin="anonymous"
|
||||||
|
></script>
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
478
src/app/zh-CN/page.tsx
Normal file
478
src/app/zh-CN/page.tsx
Normal file
@ -0,0 +1,478 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import React from 'react';
|
||||||
|
import { HistoryItem } from '@/components/ComparisonHistory';
|
||||||
|
import AdBanner from '@/components/AdBanner';
|
||||||
|
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
||||||
|
import { saveToHistory } from '@/utils/historyStorage';
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const [comparisonResults, setComparisonResults] = useState<string | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [selectedExample, setSelectedExample] = useState<{ item1: string; item2: string } | null>(null);
|
||||||
|
|
||||||
|
const popularExamples = [
|
||||||
|
{ item1: 'iPhone 15 Pro', item2: '三星 Galaxy S24 Ultra' },
|
||||||
|
{ item1: 'React', item2: 'Vue.js' },
|
||||||
|
{ item1: '咖啡', item2: '茶' },
|
||||||
|
{ item1: 'Netflix', item2: 'Disney+' },
|
||||||
|
{ item1: 'Python', item2: 'JavaScript' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleExampleClick = (example: { item1: string; item2: string }) => {
|
||||||
|
setSelectedExample(example);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleComparison = async (item1: string, item2: string, description1: string, description2: string) => {
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/compare', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
item1,
|
||||||
|
item2,
|
||||||
|
description1,
|
||||||
|
description2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to get comparison');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setComparisonResults(data.comparison);
|
||||||
|
|
||||||
|
// Save to history
|
||||||
|
saveToHistory(item1, item2, description1, description2, data.comparison);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
setComparisonResults('比较过程中出现错误，请重试。');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectHistory = (historyItem: HistoryItem) => {
|
||||||
|
setComparisonResults(historyItem.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-6 md:py-12">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||||
|
万物皆可比对
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<LanguageSwitcher currentLang="zh-CN" />
|
||||||
|
|
||||||
|
<p className="text-xl md:text-2xl text-gray-600 mb-4">
|
||||||
|
使用AI智能分析比较任何两个事物
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-gray-500 max-w-3xl mx-auto mb-8">
|
||||||
|
从产品和服务到概念和想法 - 获得由人工智能驱动的全面、公正的比较分析。
|
||||||
|
用详细分析做出明智决策。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 mb-4">热门比较</h2>
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 sm:gap-3">
|
||||||
|
{popularExamples.map((example, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => handleExampleClick(example)}
|
||||||
|
className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md hover:bg-blue-50 hover:text-blue-700 transition-all cursor-pointer"
|
||||||
|
>
|
||||||
|
{example.item1} vs {example.item2}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8 transition-all duration-300 ${isLoading ? 'opacity-75 pointer-events-none' : ''}`}>
|
||||||
|
<ComparisonFormZH
|
||||||
|
onSubmit={handleComparison}
|
||||||
|
isLoading={isLoading}
|
||||||
|
selectedExample={selectedExample}
|
||||||
|
onExampleUsed={() => setSelectedExample(null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<AdBanner />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<ComparisonHistoryZH onSelectHistory={handleSelectHistory} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{comparisonResults && (
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-8 mt-8">
|
||||||
|
<ComparisonResultsZH results={comparisonResults} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<ComparisonTipsZH />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chinese version of ComparisonForm
|
||||||
|
function ComparisonFormZH({ onSubmit, isLoading, selectedExample, onExampleUsed }: {
|
||||||
|
onSubmit: (item1: string, item2: string, description1: string, description2: string) => void;
|
||||||
|
isLoading: boolean;
|
||||||
|
selectedExample?: { item1: string; item2: string } | null;
|
||||||
|
onExampleUsed?: () => void;
|
||||||
|
}) {
|
||||||
|
const [item1, setItem1] = useState('');
|
||||||
|
const [item2, setItem2] = useState('');
|
||||||
|
const [description1, setDescription1] = useState('');
|
||||||
|
const [description2, setDescription2] = useState('');
|
||||||
|
const [showDescriptions, setShowDescriptions] = useState(false);
|
||||||
|
|
||||||
|
// Handle selected example
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (selectedExample) {
|
||||||
|
setItem1(selectedExample.item1);
|
||||||
|
setItem2(selectedExample.item2);
|
||||||
|
onExampleUsed?.();
|
||||||
|
}
|
||||||
|
}, [selectedExample, onExampleUsed]);
|
||||||
|
|
||||||
|
const examples = [
|
||||||
|
{ item1: 'iPhone 15 Pro', item2: '三星 Galaxy S24 Ultra', category: '智能手机' },
|
||||||
|
{ item1: 'React', item2: 'Vue.js', category: '前端框架' },
|
||||||
|
{ item1: '特斯拉 Model 3', item2: '宝马 i4', category: '电动汽车' },
|
||||||
|
{ item1: 'Netflix', item2: 'Disney+', category: '流媒体服务' },
|
||||||
|
{ item1: 'MacBook Pro', item2: 'ThinkPad X1 Carbon', category: '笔记本电脑' },
|
||||||
|
{ item1: '咖啡', item2: '茶', category: '饮品' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const getRandomExample = () => {
|
||||||
|
return examples[Math.floor(Math.random() * examples.length)];
|
||||||
|
};
|
||||||
|
|
||||||
|
const fillRandomExample = () => {
|
||||||
|
const example = getRandomExample();
|
||||||
|
setItem1(example.item1);
|
||||||
|
setItem2(example.item2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (item1.trim() && item2.trim()) {
|
||||||
|
onSubmit(item1.trim(), item2.trim(), description1.trim(), description2.trim());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">开始比较</h2>
|
||||||
|
<p className="text-gray-600 mb-4">输入任何两个您想要比较的项目 - 产品、服务、概念或想法</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={fillRandomExample}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm font-medium underline"
|
||||||
|
>
|
||||||
|
试试随机示例
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="item1" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
第一个项目
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="item1"
|
||||||
|
value={item1}
|
||||||
|
onChange={(e) => setItem1(e.target.value)}
|
||||||
|
placeholder="例如：iPhone 15 Pro、React、特斯拉 Model 3"
|
||||||
|
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||||
|
disabled={isLoading}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="item2" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
第二个项目
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="item2"
|
||||||
|
value={item2}
|
||||||
|
onChange={(e) => setItem2(e.target.value)}
|
||||||
|
placeholder="例如：三星 Galaxy S24、Vue.js、宝马 i4"
|
||||||
|
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||||
|
disabled={isLoading}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowDescriptions(!showDescriptions)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||||||
|
>
|
||||||
|
{showDescriptions ? '隐藏' : '添加'}额外描述
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDescriptions && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="description1" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
{item1 || '第一个项目'}的描述
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<textarea
|
||||||
|
id="description1"
|
||||||
|
value={description1}
|
||||||
|
onChange={(e) => setDescription1(e.target.value)}
|
||||||
|
placeholder="关于第一个项目的额外详情、规格或背景..."
|
||||||
|
rows={3}
|
||||||
|
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="description2" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
{item2 || '第二个项目'}的描述
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<textarea
|
||||||
|
id="description2"
|
||||||
|
value={description2}
|
||||||
|
onChange={(e) => setDescription2(e.target.value)}
|
||||||
|
placeholder="关于第二个项目的额外详情、规格或背景..."
|
||||||
|
rows={3}
|
||||||
|
className={`w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 ${isLoading ? 'bg-gray-50 cursor-not-allowed' : 'bg-white'}`}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 bg-opacity-75 rounded-lg">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||||
|
正在分析比较中...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'开始比较'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chinese version of ComparisonHistory
|
||||||
|
function ComparisonHistoryZH({ onSelectHistory }: { onSelectHistory: (item: HistoryItem) => void }) {
|
||||||
|
const [history, setHistory] = useState<HistoryItem[]>([]);
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const loadHistory = () => {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem('comparison-history');
|
||||||
|
if (stored) {
|
||||||
|
const parsed = JSON.parse(stored);
|
||||||
|
setHistory(parsed.slice(0, 10));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading history:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadHistory();
|
||||||
|
|
||||||
|
const handleStorageChange = () => {
|
||||||
|
loadHistory();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('storage', handleStorageChange);
|
||||||
|
window.addEventListener('comparison-history-updated', handleStorageChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('storage', handleStorageChange);
|
||||||
|
window.removeEventListener('comparison-history-updated', handleStorageChange);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
localStorage.removeItem('comparison-history');
|
||||||
|
setHistory([]);
|
||||||
|
window.dispatchEvent(new Event('comparison-history-updated'));
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (timestamp: number) => {
|
||||||
|
return new Date(timestamp).toLocaleDateString('zh-CN', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (history.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900">比较历史</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||||||
|
>
|
||||||
|
{isExpanded ? '显示更少' : `显示全部 (${history.length})`}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={clearHistory}
|
||||||
|
className="text-red-600 hover:text-red-800 text-sm font-medium"
|
||||||
|
>
|
||||||
|
清空历史
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{(isExpanded ? history : history.slice(0, 3)).map((item) => (
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="font-medium text-gray-900">
|
||||||
|
<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>
|
||||||
|
{(item.description1 || item.description2) && (
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{item.description1 && (
|
||||||
|
<div className="truncate">
|
||||||
|
<strong>{item.item1}:</strong> {item.description1}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.description2 && (
|
||||||
|
<div className="truncate">
|
||||||
|
<strong>{item.item2}:</strong> {item.description2}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isExpanded && history.length > 3 && (
|
||||||
|
<div className="text-center mt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(true)}
|
||||||
|
className="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
||||||
|
>
|
||||||
|
查看更多 {history.length - 3} 个比较...
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chinese version of ComparisonResults
|
||||||
|
function ComparisonResultsZH({ results }: { results: string }) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">比较结果</h2>
|
||||||
|
<div className="prose prose-lg max-w-none">
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: results.replace(/\n/g, '<br/>') }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chinese version of ComparisonTips
|
||||||
|
function ComparisonTipsZH() {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-800 mb-4">💡 获得更好比较效果的技巧</h3>
|
||||||
|
<ul className="text-sm text-gray-600 space-y-2">
|
||||||
|
<li className="flex items-start">
|
||||||
|
<span className="text-blue-500 mr-2">•</span>
|
||||||
|
<span>具体化："iPhone 15 Pro" vs "iPhone 15"</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start">
|
||||||
|
<span className="text-blue-500 mr-2">•</span>
|
||||||
|
<span>在描述中添加背景信息以获得细致分析</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start">
|
||||||
|
<span className="text-blue-500 mr-2">•</span>
|
||||||
|
<span>比较相似类别以获得有意义的结果</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start">
|
||||||
|
<span className="text-blue-500 mr-2">•</span>
|
||||||
|
<span>也可以尝试抽象概念："远程工作" vs "办公室工作"</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
52
src/components/LanguageSwitcher.tsx
Normal file
52
src/components/LanguageSwitcher.tsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
interface Language {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
nativeName: string;
|
||||||
|
flag: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LanguageSwitcherProps {
|
||||||
|
currentLang: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const languages: Language[] = [
|
||||||
|
{ code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
|
||||||
|
{ code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function LanguageSwitcher({ currentLang }: LanguageSwitcherProps) {
|
||||||
|
const getLocalizedPath = (langCode: string) => {
|
||||||
|
if (langCode === 'en') {
|
||||||
|
return '/';
|
||||||
|
}
|
||||||
|
return `/${langCode}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const otherLanguages = languages.filter(lang => lang.code !== currentLang);
|
||||||
|
|
||||||
|
if (otherLanguages.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-6">
|
||||||
|
<span className="text-sm text-gray-500">Switch language:</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{otherLanguages.map((lang) => (
|
||||||
|
<Link
|
||||||
|
key={lang.code}
|
||||||
|
href={getLocalizedPath(lang.code)}
|
||||||
|
className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md border border-gray-200 hover:border-blue-300 transition-all duration-200 text-sm font-medium text-gray-700 hover:text-blue-700"
|
||||||
|
>
|
||||||
|
<span className="text-base">{lang.flag}</span>
|
||||||
|
<span>{lang.nativeName}</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user