diff --git a/.gitignore b/.gitignore index e988efe..ae781fe 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ tsconfig.tsbuildinfo # AI .clinerules + +.pnpm-store \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3f6b5c4..b2ad8d4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,17 +4,231 @@ * } */ -import { Navigate } from 'react-router-dom'; +import { Button, Card, Col, Divider, Row, Space, Tag, Typography } from 'antd'; +import AppLogo from '@/components/AppLogo'; import { globalConfig } from '@/config'; +import { getIsLogin } from '@/stores/modules'; + +const { Title, Text, Paragraph } = Typography; + +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 ( - +
+
+
+
+ + + ChikoAdmin + +
+ + 一个基于 React 19、Vite、TypeScript、Ant Design 和 UnoCSS 的清新优雅的中后台模版 + +
+ +
+ + +
+ + + + 项目简介 + + + ChikoAdmin 是一个现代化的中后台管理系统模板，采用最新的技术栈和最佳实践构建。项目使用 Monorepo 架构， + 提供了完整的开发工具链和丰富的功能组件。采用 MSW (Mock Service Worker) 提供强大的 Mock 数据方案， + 让前端开发不再依赖后端接口。 + + + + + + 技术栈 + + + {techStacks.map(tech => ( + + {tech.name} + {tech.version} + + ))} + + + + + + 主要特性 + + + {features.map((feature, index) => ( + + + + {feature.title} + + + {feature.description} + + + + ))} + + + + + + 环境要求 + + + +
+
+ 📦 +
+
+ + Node.js + + >= 18.0.0 +
+
+ + +
+
+ 🚀 +
+
+ + pnpm + + >= 8.0.0 +
+
+ + + + + + + +
+
); }; -export default Index; +export default WelcomePage;