94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { useState } from 'react';
|
|
import '../styles/StartupPage.css';
|
|
|
|
interface StartupPageProps {
|
|
onOpenProject: () => void;
|
|
onCreateProject: () => void;
|
|
recentProjects?: string[];
|
|
locale: string;
|
|
}
|
|
|
|
export function StartupPage({ onOpenProject, onCreateProject, recentProjects = [], locale }: StartupPageProps) {
|
|
const [hoveredProject, setHoveredProject] = useState<string | null>(null);
|
|
|
|
const translations = {
|
|
en: {
|
|
title: 'ECS Framework Editor',
|
|
subtitle: 'Professional Game Development Tool',
|
|
openProject: 'Open Project',
|
|
createProject: 'Create New Project',
|
|
recentProjects: 'Recent Projects',
|
|
noRecentProjects: 'No recent projects',
|
|
version: 'Version 1.0.0'
|
|
},
|
|
zh: {
|
|
title: 'ECS 框架编辑器',
|
|
subtitle: '专业游戏开发工具',
|
|
openProject: '打开项目',
|
|
createProject: '创建新项目',
|
|
recentProjects: '最近的项目',
|
|
noRecentProjects: '没有最近的项目',
|
|
version: '版本 1.0.0'
|
|
}
|
|
};
|
|
|
|
const t = translations[locale as keyof typeof translations] || translations.en;
|
|
|
|
return (
|
|
<div className="startup-page">
|
|
<div className="startup-header">
|
|
<h1 className="startup-title">{t.title}</h1>
|
|
<p className="startup-subtitle">{t.subtitle}</p>
|
|
</div>
|
|
|
|
<div className="startup-content">
|
|
<div className="startup-actions">
|
|
<button className="startup-action-btn primary" onClick={onOpenProject}>
|
|
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<span>{t.openProject}</span>
|
|
</button>
|
|
|
|
<button className="startup-action-btn" onClick={onCreateProject}>
|
|
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M12 5V19M5 12H19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<span>{t.createProject}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="startup-recent">
|
|
<h2 className="recent-title">{t.recentProjects}</h2>
|
|
{recentProjects.length === 0 ? (
|
|
<p className="recent-empty">{t.noRecentProjects}</p>
|
|
) : (
|
|
<ul className="recent-list">
|
|
{recentProjects.map((project, index) => (
|
|
<li
|
|
key={index}
|
|
className={`recent-item ${hoveredProject === project ? 'hovered' : ''}`}
|
|
onMouseEnter={() => setHoveredProject(project)}
|
|
onMouseLeave={() => setHoveredProject(null)}
|
|
>
|
|
<svg className="recent-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2"/>
|
|
</svg>
|
|
<div className="recent-info">
|
|
<div className="recent-name">{project.split(/[\\/]/).pop()}</div>
|
|
<div className="recent-path">{project}</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="startup-footer">
|
|
<span className="startup-version">{t.version}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|