chore: 增加windicss

config/config.dev.ts

@@ -1,6 +1,6 @@
 // https://umijs.org/config/
 import { defineConfig } from 'umi';
-
+import WebpackWindiCSSPlugin from 'windicss-webpack-plugin/dist/index'
 export default defineConfig({
   plugins: [
     // https://github.com/zthxxx/react-dev-inspector
@@ -12,6 +12,16 @@ export default defineConfig({
     babelPlugins: ["@babel/plugin-proposal-logical-assignment-operators", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-nullish-coalescing-operator"],
     babelOptions: {},
   },
+  chainWebpack(config) {
+    config.plugin('clearn').use(WebpackWindiCSSPlugin, [
+      {
+        scan: {
+          dirs: ['./'],
+          exclude: ['node_modules', '.git', 'dist', 'mock', '.umi']
+        }
+      }
+    ])
+  },
   webpack5: {
     // lazyCompilation: {},
   },

package.json

@@ -102,7 +102,9 @@
     "prettier": "^2.0.1",
     "puppeteer-core": "^8.0.0",
     "stylelint": "^13.0.0",
-    "typescript": "^4.2.2"
+    "typescript": "^4.2.2",
+    "windicss": "^2.5.14",
+    "windicss-webpack-plugin": "^0.5.3"
   },
   "engines": {
     "node": ">=10.0.0"

src/global.tsx

@@ -1,7 +1,7 @@
 import { Button, message, notification } from 'antd';
 import { useIntl } from 'umi';
 import defaultSettings from '../config/defaultSettings';
-
+import 'windi.css'
 const { pwa } = defaultSettings;
 const isHttps = document.location.protocol === 'https:';
 

windi.config.ts

@@ -0,0 +1,75 @@
+// windi.config.js
+import { defineConfig } from 'windicss/helpers'
+import lineClamp from 'windicss/plugin/line-clamp'
+import colors from 'windicss/colors'
+import proSettings from './config/defaultSettings'
+
+export default defineConfig({
+  darkMode: 'class',
+  plugins: [lineClamp, createEnterPlugin()],
+  theme: {
+    extend: {
+      colors: {
+        ...colors,
+        primary: proSettings.primaryColor
+      },
+      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 = 10) {
+  const createCss = (index: number, d = 'x') => {
+    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 }
+}