| 提交 | 用户 | age | ||
| ec9478 | 1 | import lineClamp from 'windicss/plugin/line-clamp'; |
| V | 2 | import colors from 'windicss/colors'; |
| 3 | ||
| 4 | import { defineConfig } from 'vite-plugin-windicss'; | |
| b6cea4 | 5 | import { primaryColor } from './build/config/themeConfig'; |
| ec9478 | 6 | |
| V | 7 | export default defineConfig({ |
| 8 | darkMode: 'class', | |
| 9 | plugins: [lineClamp, createEnterPlugin()], | |
| 10 | theme: { | |
| 11 | extend: { | |
| b6cea4 | 12 | colors: { |
| V | 13 | ...colors, |
| 14 | primary: primaryColor, | |
| 8a1406 | 15 | secondary: 'rgba(0, 0, 0, 0.45)', |
| b6cea4 | 16 | }, |
| c41fa7 | 17 | screens: { |
| V | 18 | sm: '576px', |
| 19 | md: '768px', | |
| 20 | lg: '992px', | |
| 21 | xl: '1200px', | |
| 22 | '2xl': '1600px', | |
| 23 | }, | |
| a09a0e | 24 | }, |
| ec9478 | 25 | }, |
| V | 26 | }); |
| 27 | ||
| 28 | /** | |
| 29 | * Used for animation when the element is displayed | |
| 30 | * @param maxOutput The larger the maxOutput output, the larger the generated css volume | |
| 31 | */ | |
| 32 | function createEnterPlugin(maxOutput = 10) { | |
| 33 | const createCss = (index: number, d = 'x') => { | |
| 34 | const upd = d.toUpperCase(); | |
| 35 | return { | |
| 36 | [`*> .enter-${d}:nth-child(${index})`]: { | |
| 37 | transform: `translate${upd}(50px)`, | |
| 38 | }, | |
| 39 | [`*> .-enter-${d}:nth-child(${index})`]: { | |
| 40 | transform: `translate${upd}(-50px)`, | |
| 41 | }, | |
| 42 | [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { | |
| 43 | 'z-index': `${10 - index}`, | |
| 44 | opacity: '0', | |
| 45 | animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, | |
| 46 | 'animation-fill-mode': 'forwards', | |
| 47 | 'animation-delay': `${(index * 1) / 10}s`, | |
| 48 | }, | |
| 49 | }; | |
| 50 | }; | |
| 51 | const handler = ({ addBase }) => { | |
| 8ccf77 | 52 | const addRawCss = {}; |
| ec9478 | 53 | for (let index = 1; index < maxOutput; index++) { |
| 8ccf77 | 54 | Object.assign(addRawCss, { |
| ec9478 | 55 | ...createCss(index, 'x'), |
| V | 56 | ...createCss(index, 'y'), |
| 57 | }); | |
| 58 | } | |
| 59 | addBase({ | |
| 8ccf77 | 60 | ...addRawCss, |
| ec9478 | 61 | [`@keyframes enter-x-animation`]: { |
| V | 62 | to: { |
| 63 | opacity: '1', | |
| 64 | transform: 'translateX(0)', | |
| 65 | }, | |
| 66 | }, | |
| 67 | [`@keyframes enter-y-animation`]: { | |
| 68 | to: { | |
| 69 | opacity: '1', | |
| 70 | transform: 'translateY(0)', | |
| 71 | }, | |
| 72 | }, | |
| 73 | }); | |
| 74 | }; | |
| 75 | return { handler }; | |
| 76 | } | |
