feature: 添加windicss

build/vite/plugin/index.ts

@@ -2,6 +2,8 @@ import vue from '@vitejs/plugin-vue'
 
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
+import windiCSS from 'vite-plugin-windicss'
+
 import type { Plugin, ConfigEnv } from 'vite'
 
 // 按需加载样式配置
@@ -19,6 +21,9 @@ import { configMockPlugin } from './mock'
 
 export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 	const vitePlugins: (Plugin | Plugin[])[] = [vue(), vueJsx()]
+
+	vitePlugins.push(windiCSS())
+
 	vitePlugins.push(configStylePlugin())
 
 	vitePlugins.push(configThemePlugin())

package.json

@@ -82,6 +82,7 @@
 		"vite-plugin-mock": "^2.9.6",
 		"vite-plugin-style-import": "^1.4.0",
 		"vite-plugin-svg-icons": "^1.0.5",
+		"vite-plugin-windicss": "^1.6.1",
 		"vue-tsc": "^0.29.8"
 	},
 	"license": "MIT",

src/layouts/components/Sidebar/index.vue

@@ -40,6 +40,7 @@ const activeMenyu = computed(() => {
 	if (meta.activeMenu) {
 		return meta.activeMenu
 	}
+	console.log(path)
 	return path
 })
 

src/main.ts

@@ -2,6 +2,12 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 
+import 'virtual:windi-base.css'
+// import 'virtual:windi-components.css'
+// import 'virtual:windi-utilities.css'
+// Register icon sprite
+// import 'virtual:svg-icons-register'
+
 import {
 	configMainElementPlus,
 	configMainGlobalProperties,

src/router/modules/otherRoute/otherRoute.ts

@@ -11,7 +11,7 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 	{
 		path: '/useradmin',
 		component: Layout,
-		redirect: '/useradmin/userlist',
+		redirect: '/useradmin/userlist/',
 		name: '用户管理',
 		alwaysShow: true,
 		meta: { title: t('route.pathName.userInfo'), icon: 'iEL-avatar' },
@@ -43,7 +43,7 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 	{
 		path: '/nested',
 		component: Layout,
-		redirect: '/nested/menu1',
+		redirect: '/nested/menu1/',
 		name: 'Nested',
 		meta: {
 			title: t('route.pathName.nested'),
@@ -54,7 +54,7 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 				path: 'menu1',
 				component: AppMain, // Parent router-view
 				name: 'Menu1',
-				redirect: '/nested/menu1/menu1-1',
+				redirect: '/nested/menu1/menu1-1/',
 				meta: { title: t('route.pathName.nested1') },
 				children: [
 					{
@@ -67,7 +67,7 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 						path: 'menu1-2',
 						component: AppMain,
 						name: 'Menu1-2',
-						redirect: '/nested/menu1/menu1-2/menu1-2-1',
+						redirect: '/nested/menu1/menu1-2/menu1-2-1/',
 						meta: { title: t('route.pathName.nested1_2') },
 						children: [
 							{

src/styles/variables-day.scss

@@ -1,6 +1,7 @@
 // 统一颜色主题
 $mianColor: #409eff; //主色
-$subColor: #ecf5ff; //灰色
+$subColor: #a5cfff; //浅蓝1
+$subColor1: #ecf5ff; //浅蓝2
 
 // 左侧导航栏
 $sideBarWidth: 210px;
@@ -20,7 +21,7 @@ $menuItemText: #909399; //二级文字颜色
 $menuItemHover: #f3f3f3; //二级焦点背景颜色
 $menuItemHoverText: $mianColor; //二级焦点文字颜色
 $menuItemActiveText: $mianColor;
-$menuItemActiveBg: $subColor; //二级选中背景颜色
+$menuItemActiveBg: $subColor1; //二级选中背景颜色
 $menuItemActiveBorderLeft: $mianColor; //二级左描边背景颜色
 
 $appMainBgColor: #f5f6fa; //app-mian背景颜色

src/views/login/index.vue

@@ -1,13 +1,13 @@
 <template>
-	<div class="container">
+	<div class="container mx-auto">
 		<img src="@/assets/login/bg.png" class="wave" />
-		<div class="img">
+		<div class="img -enter-x">
 			<img src="@/assets/login/illustration.svg" />
 		</div>
-		<div class="login-box">
+		<div class="login-box enter-x">
 			<div class="login-form">
-				<h2>SuperCuteXiaoSi</h2>
-				<div class="input-group user">
+				<h2 class="enter-x p-4">SuperCuteXiaoSi</h2>
+				<div class="input-group user enter-x">
 					<SvgIcon class-name="icon" name="iEL-avatar"></SvgIcon>
 					<div>
 						<h5>用户名</h5>
@@ -20,7 +20,7 @@
 						/>
 					</div>
 				</div>
-				<div class="input-group pwd">
+				<div class="input-group pwd enter-x">
 					<SvgIcon class-name="icon" name="password"></SvgIcon>
 
 					<div>
@@ -34,7 +34,7 @@
 						/>
 					</div>
 				</div>
-				<button class="btn" @click="onLogin">登录</button>
+				<button class="btn enter-x" @click="onLogin">登录</button>
 			</div>
 		</div>
 	</div>
@@ -89,11 +89,11 @@ function onPwdBlur() {
 }
 
 .container {
-	width: 100vw;
+	width: 70%;
 	height: 100vh;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	grid-gap: 18rem;
+	display: flex;
+	margin: auto;
+	justify-content: space-between;
 	padding: 0 2rem;
 }
 
@@ -237,7 +237,12 @@ a:hover {
 	font-size: 1.2rem;
 	outline: none;
 	border: none;
-	background-image: linear-gradient(to right, #{$mianColor}, #{$subColor});
+	background-image: linear-gradient(
+		to right,
+		#{$mianColor},
+		#{$subColor},
+		#{$mianColor}
+	);
 	cursor: pointer;
 	color: #fff;
 	text-transform: uppercase;
@@ -247,61 +252,6 @@ a:hover {
 }
 
 .btn:hover {
-	background-position: center;
-}
-
-.copyright {
-	position: absolute;
-	width: 100%;
-	height: 50px;
-	bottom: 2px;
-	color: #5392f0;
-	text-align: center;
-	font-size: 18px;
-	font-family: 'Roboto', sans-serif;
-}
-
-@media screen and (max-width: 1080px) {
-	.container {
-		grid-gap: 9rem;
-	}
-}
-
-@media screen and (max-width: 1024px) {
-	.login-form {
-		width: 290px;
-	}
-
-	.login-form h2 {
-		font-size: 2.4rem;
-		margin: 8px 0;
-	}
-
-	.img img {
-		width: 360px;
-	}
-
-	.avatar {
-		width: 280px;
-		height: 80px;
-	}
-}
-
-@media screen and (max-width: 768px) {
-	.wave {
-		display: none;
-	}
-
-	.img {
-		display: none;
-	}
-
-	.container {
-		grid-template-columns: 1fr;
-	}
-
-	.login-box {
-		justify-content: center;
-	}
+	background-position: right;
 }
 </style>

src/views/useradmin/userlist/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import TsComponents from '@/components/tscomponents.tsx'
+import TsComponents from '@/components/tscomponents'
 // import SvgIcon from '@/components/SvgIcon/index.vue'
 // import { getCurrentInstance } from 'vue'
 

windi.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig } from 'vite-plugin-windicss'
+// import { primaryColor } from './build/config/themeConfig'
+
+export default defineConfig({
+	darkMode: 'class',
+	plugins: [createEnterPlugin()],
+	theme: {
+		extend: {
+			zIndex: {
+				'-1': '-1',
+			},
+			colors: {
+				primary: '#409eff',
+			},
+			screens: {
+				sm: '576px',
+				md: '768px',
+				lg: '992px',
+				xl: '1200px',
+				'2xl': '1600px',
+			},
+		},
+	},
+})
+
+/**
+ * Used for animation when the element is displayed.
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
+ */
+function createEnterPlugin(maxOutput = 6) {
+	const createCss = (index: number, d = 'x') => {
+		console.log('启动了吗？')
+		const upd = d.toUpperCase()
+		return {
+			[`*> .enter-${d}:nth-child(${index})`]: {
+				transform: `translate${upd}(50px)`,
+			},
+			[`*> .-enter-${d}:nth-child(${index})`]: {
+				transform: `translate${upd}(-50px)`,
+			},
+			[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]:
+				{
+					'z-index': `${10 - index}`,
+					opacity: '0',
+					animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+					'animation-fill-mode': 'forwards',
+					'animation-delay': `${(index * 1) / 10}s`,
+				},
+		}
+	}
+	const handler = ({ addBase }) => {
+		const addRawCss = {}
+		for (let index = 1; index < maxOutput; index++) {
+			Object.assign(addRawCss, {
+				...createCss(index, 'x'),
+				...createCss(index, 'y'),
+			})
+		}
+		addBase({
+			...addRawCss,
+			[`@keyframes enter-x-animation`]: {
+				to: {
+					opacity: '1',
+					transform: 'translateX(0)',
+				},
+			},
+			[`@keyframes enter-y-animation`]: {
+				to: {
+					opacity: '1',
+					transform: 'translateY(0)',
+				},
+			},
+		})
+	}
+	return { handler }
+}