financial_audit_console/unocss.config.ts

import { defineConfig, presetWind } from 'unocss'
import proSettings from './config/defaultSettings'
export function createConfig({ dev = true } = {}) {
  return defineConfig({
    envMode: dev ? 'dev' : 'build',
    presets: [presetWind()],
    theme: {
      colors: {
        primary: proSettings.primaryColor
      },
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px'
      },
      boxShadow: {
        card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
      }
    }
    // transformers: [transformerDirectives()]
    // rules: [createEnterPlugin()]
    // variants: [createEnterPlugin()]
  })
}

export default createConfig()
/**
 * 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 = () => {
    const addRawCss = {}
    for (let index = 1; index < maxOutput; index++) {
      Object.assign(m, {
        ...createCss(index, 'x'),
        ...createCss(index, 'y')
      })
    }
    return {
      ...addRawCss,
      [`@keyframes enter-x-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateX(0)'
        }
      },
      [`@keyframes enter-y-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateY(0)'
        }
      }
    }
  }
  return [/^enter-(x|y)/, () => handler()]
}