5个登录组件全面升级为动态视觉效果: 1. SplitView — 星河流转: 深靛蓝渐变(#0f0c29→#302b63) + 3条CSS流星动画 + 7个漂浮星辰光点 + 脉动光晕,底线输入框聚焦靛蓝 2. CenteredCard — 极光幻境: 深蓝黑底(#0a0a2e) + 3条流动极光色带 (翠绿/靛蓝/紫) filter:blur(80px) 缓慢流动,毛玻璃居中卡片 3. SidePanel — 日月交替(重点重做): 暮光紫→夜空蓝渐变 + 200px天体球(太阳金→月亮银蓝 8s循环) + 300px旋转轨道环 + 6个轨道光点 + 3条流星 + 10个闪烁星点 4. FullImage — 星辰连线: 深海军蓝(#0a1628) + 33个随机星点 + 6条星座连线 + 右上角蓝紫发光球 + 左下角暖色光球 5. MinimalDark — 流星雨: 深紫黑(#0c0a1a) + 6条流星动画 + 10个静态星点 + 渐变菱形logo + 极简布局
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])