import { defineConfig, presetUno,presetWind , presetAttributify, presetIcons } from 'unocss'
const parseStyle = (style) => {
    const [key, value] = style.split(':');
    return { [key.trim()]: value.trim() };
};
export default defineConfig({
    presets: [
        presetWind(), // 使用默认的 UnoCSS 预设
        presetIcons()
    ],
    theme: {
        colors: {
            primary: '#2B69A1', // 自定义主色
            secondary: '#9333EA', // 自定义副色
            accent: '#F59E0B', // 自定义强调色
            // 你可以继续添加更多颜色
        }
    },
    rules: [
        // 处理 focus 伪类
        [/^focus:(.*)$/, ([, style]) => ({ ':focus': { ...parseStyle(style) } })],
        // 处理 placeholder 伪元素
        [/^placeholder:(.*)$/, ([, style]) => ({ '::placeholder': { ...parseStyle(style) } })],
        // 自定义动画
        ['animate-bounce-in', { 'animation': 'bounce-in 0.9s cubic-bezier(0.23,1,0.32,1) both' }],
        ['animate-icon-in', { 'animation': 'icon-in 1s cubic-bezier(0.23,1,0.32,1) both' }],
        ['animate-bg-move', { 'animation': 'bg-move 8s linear infinite alternate', 'background-size': '200% 200%' }],
        ['animate-blob', { 'animation': 'blob 7s ease-in-out infinite alternate' }],
        ['animate-blob2', { 'animation': 'blob2 9s ease-in-out infinite alternate' }],
        ['animate-bubble-pop', { 'animation': 'bubble-pop 0.5s cubic-bezier(0.23,1,0.32,1) both' }],
        // 动画延迟
        ['animate-delay-0', { 'animation-delay': '0s' }],
        ['animate-delay-200', { 'animation-delay': '0.2s' }],
        ['animate-delay-400', { 'animation-delay': '0.4s' }],
        ['animate-delay-600', { 'animation-delay': '0.6s' }],
    ],
    // 自定义keyframes
    safelist: [
        'animate-bounce-in', 'animate-icon-in', 'animate-bg-move', 'animate-blob', 'animate-blob2', 'animate-bubble-pop',
        'animate-delay-0', 'animate-delay-200', 'animate-delay-400', 'animate-delay-600',
    ],
    preflights: [
        {
            getCSS: () => `
@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.7) translateY(-40px); }
  60% { opacity: 1; transform: scale(1.1) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes icon-in {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  80% { opacity: 1; transform: scale(1.2) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bg-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes blob {
  0%,100% { transform: scale(1) translate(0,0); }
  33% { transform: scale(1.1,0.9) translate(20px,10px); }
  66% { transform: scale(0.9,1.1) translate(-10px,-20px); }
}
@keyframes blob2 {
  0%,100% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.2) translate(10px,20px); }
}
@keyframes bubble-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  60% { opacity: 1; transform: scale(1.1) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
            `
        }
    ],
    shortcuts: {
        'flex-center': 'flex justify-center items-center',
    },
})