Skip to content

.1405641833068148:ec8ad69e78119059b594c80800fe4b70_69e2f916bf3ba6d3aeaddcc6.69e31538bf3ba6d3aeadde48.69e315388f684fd02fca9966:Trae CN.T(2026/4/18 13:23:04) #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VirtualTests1 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

.1405641833068148:ec8ad69e78119059b594c80800fe4b70_69e2f916bf3ba6d3aeaddcc6.69e31538bf3ba6d3aeadde48.69e315388f684fd02fca9966:Trae CN.T(2026/4/18 13:23:04) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
890ff1d
feat: 添加欢迎页面
VirtualTests1 Apr 18, 2026
a6eaeff
refactor(首页组件): 迁移Antd组件到按需引入方式
VirtualTests1 Apr 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,5 @@ tsconfig.tsbuildinfo

# AI
.clinerules

.pnpm-store
229 changes: 221 additions & 8 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,230 @@
* }
*/

import { Navigate } from 'react-router-dom';

import AppLogo from '@/components/AppLogo';
import { globalConfig } from '@/config';
import { getIsLogin } from '@/stores/modules';

const techStacks = [
{ name: 'React', version: '19', color: '#61dafb' },
{ name: 'TypeScript', version: '5.7', color: '#3178c6' },
{ name: 'Vite', version: '7.0', color: '#646cff' },
{ name: 'Ant Design', version: '5.26', color: '#1890ff' },
{ name: 'React Router', version: '7.7', color: '#ca4245' },
{ name: 'Redux Toolkit', version: '2.8', color: '#764abc' },
{ name: 'UnoCSS', version: '66.3', color: '#333333' },
{ name: 'ECharts', version: '5.6', color: '#e43961' }
];

const features = [
{
title: '现代化技术栈',
description: 'React 19 + TypeScript + Vite + Ant Design，采用最新的前端技术和最佳实践'
},
{
title: '优雅的 UI 设计',
description: '基于 Ant Design 5.x，支持暗色模式，提供清新优雅的视觉体验'
},
{
title: '约定式路由',
description: '基于文件系统的自动路由生成，简单直观，易于维护'
},
{
title: '响应式布局',
description: '完美适配桌面端和移动端，提供一致的用户体验'
},
{
title: '国际化支持',
description: '内置中英文语言切换，轻松扩展多语言支持'
},
{
title: '权限管理',
description: '完整的路由权限和菜单权限控制，灵活满足各种业务场景'
},
{
title: '数据可视化',
description: '集成 ECharts 图表库，提供丰富的数据展示能力'
},
{
title: '高性能',
description: '基于 Vite 的快速构建和热更新，提升开发体验'
},
{
title: '主题定制',
description: '支持主题色和布局模式自定义，打造专属的管理系统'
}
];

const WelcomePage = () => {
const isLogin = useAppSelector(getIsLogin);
const navigate = useNavigate();

const handleEnter = () => {
if (isLogin) {
navigate(globalConfig.homePath);
} else {
navigate('/login');
}
};

const handleViewDocs = () => {
window.open('https://admin-docs.chiko.store', '_blank');
};

const Index = () => {
return (
<Navigate
replace
to={globalConfig.homePath}
/>
<div className="min-h-screen from-blue-50 via-white to-purple-50 bg-gradient-to-br dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<div className="mx-auto max-w-7xl px-4 py-8 lg:px-8 sm:px-6">
<header className="mb-12 text-center">
<div className="mb-6 flex items-center justify-center gap-4">
<AppLogo className="h-16 w-16" />
<ATypography.Title
level={1}
className="from-blue-600 to-purple-600 bg-gradient-to-r bg-clip-text text-transparent font-bold !mb-0 !text-4xl"
>
ChikoAdmin
</ATypography.Title>
</div>
<ATypography.Text className="text-lg text-gray-600 dark:text-gray-300">
一个基于 React 19、Vite、TypeScript、Ant Design 和 UnoCSS 的清新优雅的中后台模版
</ATypography.Text>
</header>

<div className="mb-12 flex justify-center gap-4">
<AButton
type="primary"
size="large"
onClick={handleEnter}
className="h-12 rounded-full px-8 text-base font-medium"
>
{isLogin ? '进入后台管理' : '立即登录体验'}
</AButton>
<AButton
size="large"
onClick={handleViewDocs}
className="h-12 rounded-full px-8 text-base font-medium"
>
查看文档
</AButton>
</div>

<ACard className="mb-8 shadow-lg" bordered={false}>
<ATypography.Title level={3} className="!mb-4">
项目简介
</ATypography.Title>
<ATypography.Paragraph className="text-base text-gray-700 leading-relaxed dark:text-gray-300">
ChikoAdmin 是一个现代化的中后台管理系统模板，采用最新的技术栈和最佳实践构建。项目使用 Monorepo 架构，
提供了完整的开发工具链和丰富的功能组件。采用 MSW (Mock Service Worker) 提供强大的 Mock 数据方案，
让前端开发不再依赖后端接口。
</ATypography.Paragraph>
</ACard>

<ACard className="mb-8 shadow-lg" bordered={false}>
<ATypography.Title level={3} className="!mb-6">
技术栈
</ATypography.Title>
<ASpace wrap size={[16, 16]} className="w-full justify-center">
{techStacks.map(tech => (
<ATag
key={tech.name}
className="!rounded-full !px-4 !py-2 !text-base"
style={{
backgroundColor: `${tech.color}15`,
borderColor: tech.color,
color: tech.color
}}
>
<span className="font-semibold">{tech.name}</span>
<span className="ml-2 opacity-70">{tech.version}</span>
</ATag>
))}
</ASpace>
</ACard>

<ACard className="mb-8 shadow-lg" bordered={false}>
<ATypography.Title level={3} className="!mb-6">
主要特性
</ATypography.Title>
<ARow gutter={[24, 24]}>
{features.map((feature, index) => (
<ACol xs={24} sm={12} md={8} key={index}>
<ACard
size="small"
className="h-full transition-shadow hover:shadow-md"
bordered={false}
style={{ backgroundColor: 'rgba(255, 255, 255, 0.6)' }}
>
<ATypography.Title level={5} className="!mb-2">
{feature.title}
</ATypography.Title>
<ATypography.Text className="text-sm text-gray-600 dark:text-gray-400">
{feature.description}
</ATypography.Text>
</ACard>
</ACol>
))}
</ARow>
</ACard>

<ACard className="mb-8 shadow-lg" bordered={false}>
<ATypography.Title level={3} className="!mb-6">
环境要求
</ATypography.Title>
<ARow gutter={[24, 24]}>
<ACol xs={24} sm={12}>
<div className="flex items-center gap-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
<div className="h-12 w-12 flex items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
<span className="text-2xl">📦</span>
</div>
<div>
<ATypography.Text strong className="block text-lg">
Node.js
</ATypography.Text>
<ATypography.Text type="secondary">{'>= 18.0.0'}</ATypography.Text>
</div>
</div>
</ACol>
<ACol xs={24} sm={12}>
<div className="flex items-center gap-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
<div className="h-12 w-12 flex items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900">
<span className="text-2xl">🚀</span>
</div>
<div>
<ATypography.Text strong className="block text-lg">
pnpm
</ATypography.Text>
<ATypography.Text type="secondary">{'>= 8.0.0'}</ATypography.Text>
</div>
</div>
</ACol>
</ARow>
</ACard>

<ADivider />

<footer className="text-center text-gray-500 dark:text-gray-400">
<ATypography.Paragraph>
<ATypography.Text>
如果 <ATypography.Text strong>ChikoAdmin</ATypography.Text> 对您有帮助，请给我一个 ⭐️ 支持！
</ATypography.Text>
</ATypography.Paragraph>
<ASpace size="middle">
<AButton type="link" onClick={() => window.open('https://github.com/chen-ziwen/chiko-admin', '_blank')}>
GitHub
</AButton>
<AButton type="link" onClick={() => window.open('https://admin.chiko.store', '_blank')}>
在线预览
</AButton>
<AButton type="link" onClick={() => window.open('https://admin-docs.chiko.store', '_blank')}>
文档地址
</AButton>
</ASpace>
<ATypography.Paragraph className="mt-4 text-sm">
<ATypography.Text type="secondary">基于 MIT 许可证开源</ATypography.Text>
</ATypography.Paragraph>
</footer>
</div>
</div>
);
};

export default Index;
export default WelcomePage;