refactor: 完善项目详情与侧边栏组件国际化实现
将 ProjectDetail 和 ProjectSidebar 组件中的硬编码文本替换为国际化翻译键，提升中英文支持一致性。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -1,4 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
import { getTranslations } from 'next-intl/server'
|
||||
|
||||
interface ProjectSidebarProps {
|
||||
project: {
|
||||
@@ -16,23 +17,24 @@ interface ProjectSidebarProps {
|
||||
locale: string
|
||||
}
|
||||
|
||||
// Helper function to get icon and label for link type
|
||||
function getLinkInfo(type: string): { icon: string; label: string } {
|
||||
// Helper function to get icon for link type
|
||||
function getLinkIcon(type: string): string {
|
||||
switch (type.toUpperCase()) {
|
||||
case 'WEBSITE':
|
||||
return { icon: 'language', label: 'Official Website' }
|
||||
return 'language'
|
||||
case 'GITHUB':
|
||||
return { icon: 'code', label: 'GitHub Repo' }
|
||||
return 'code'
|
||||
case 'HUGGINGFACE':
|
||||
return { icon: 'model_training', label: 'Hugging Face' }
|
||||
return 'model_training'
|
||||
case 'PAPER':
|
||||
return { icon: 'description', label: 'Paper' }
|
||||
return 'description'
|
||||
default:
|
||||
return { icon: 'link', label: 'External Link' }
|
||||
return 'link'
|
||||
}
|
||||
}
|
||||
|
||||
export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
export async function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
const t = await getTranslations('project')
|
||||
const displayName = locale === 'en' && project.nameEn ? project.nameEn : project.name
|
||||
|
||||
return (
|
||||
@@ -41,11 +43,18 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
{project.links.length > 0 && (
|
||||
<div className="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-brutal dark:shadow-brutal-dark">
|
||||
<h3 className="font-display font-bold text-lg mb-6 uppercase border-b-2 border-primary pb-2 inline-block">
|
||||
Project Links
|
||||
{t('projectLinks')}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{project.links.map((link) => {
|
||||
const { icon, label } = getLinkInfo(link.type)
|
||||
const icon = getLinkIcon(link.type)
|
||||
const labelMap: Record<string, string> = {
|
||||
WEBSITE: t('officialWebsite'),
|
||||
GITHUB: t('githubRepo'),
|
||||
HUGGINGFACE: t('huggingface'),
|
||||
PAPER: t('paper'),
|
||||
}
|
||||
const label = labelMap[link.type] || t('externalLinks')
|
||||
return (
|
||||
<a
|
||||
key={link.id}
|
||||
@@ -70,20 +79,20 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">License</span>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">{t('license')}</span>
|
||||
<span className="font-bold text-sm">MIT</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">Pricing</span>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">{t('pricing')}</span>
|
||||
<span className="font-bold text-sm">Free</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">Status</span>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">{t('status')}</span>
|
||||
<span className="font-bold text-sm">Active</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">Type</span>
|
||||
<span className="font-bold text-sm">Open Source</span>
|
||||
<span className="text-xs text-gray-500 uppercase font-mono block mb-1">{t('type')}</span>
|
||||
<span className="font-bold text-sm">{t('openSource')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,13 +107,13 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
<div className="w-12 h-12 bg-white rounded-full border-2 border-black flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<span className="material-icons text-2xl">rocket_launch</span>
|
||||
</div>
|
||||
<h3 className="font-display font-bold text-xl mb-2">Build Your Own Agent?</h3>
|
||||
<p className="text-sm font-medium mb-6">Start using our API to build custom agents in minutes.</p>
|
||||
<h3 className="font-display font-bold text-xl mb-2">{t('buildYourOwnAgent')}</h3>
|
||||
<p className="text-sm font-medium mb-6">{t('buildAgentDesc')}</p>
|
||||
<Link
|
||||
href={`/${locale}/projects`}
|
||||
className="block w-full bg-black text-white font-display font-bold py-3 text-sm uppercase hover:bg-gray-800 transition-colors shadow-none text-center"
|
||||
>
|
||||
Get Started Now
|
||||
{t('getStartedNow')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +122,7 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
{locale === 'en' && (
|
||||
<div className="sticky top-24 bg-background-light dark:bg-background-dark border border-gray-300 dark:border-gray-700 p-6 hidden lg:block">
|
||||
<h3 className="font-display font-bold text-sm uppercase tracking-widest mb-4 text-gray-500 dark:text-gray-400">
|
||||
On this page
|
||||
{t('onThisPage')}
|
||||
</h3>
|
||||
<ul className="space-y-3 text-sm border-l-2 border-gray-200 dark:border-gray-700 pl-4">
|
||||
<li>
|
||||
@@ -121,7 +130,7 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
href="#overview"
|
||||
className="text-black dark:text-white font-bold border-l-2 border-black dark:border-white -ml-[18px] pl-4 block"
|
||||
>
|
||||
Overview
|
||||
{t('overview')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -129,7 +138,7 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
href="#features"
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
|
||||
>
|
||||
Key Features
|
||||
{t('keyFeatures')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -137,7 +146,7 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
href="#getting-started"
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
|
||||
>
|
||||
Getting Started
|
||||
{t('gettingStarted')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -145,7 +154,7 @@ export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
|
||||
href="#use-cases"
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
|
||||
>
|
||||
Use Cases
|
||||
{t('useCases')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user