huijia-website/uno.config.ts

/*
 * @Author: wjc
 * @Date: 2023-05-07 20:59:28
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-20 16:03:07
 * @Description:
 */
import {
  defineConfig,
  presetUno,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import iconList from './app/utils/icons'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      scale: 1.2,
      extraProperties: {
        display: 'inline-block',
      },
      // cdn: 'https://esm.sh/'
      collections: {
        custom: FileSystemIconLoader('./app/assets/icons'),
        // ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  content: {
    pipeline: {
      include: [/\.(vue|tsx?|jsx?|mdx?|html)($|\?)/],
    },
    filesystem: ['app/**/*.{vue,ts,tsx,js,jsx}'],
  },
  postprocess: (util) => {
    const pxRE = /(-?[\d.]+px)/g
    // 增强安全性判断，确保在构建扫描阶段不会因 selector 或 parent 为空而报错
    const selector = util.selector || ''
    const parent = typeof util.parent === 'string' ? util.parent : ''

    const isMobile =
      selector.includes('lt-sm') ||
      selector.includes('lt-xs') ||
      parent.includes('max-width: 767.9px') ||
      parent.includes('max-width: 479.9px')

    if (isMobile) {
      util.entries.forEach((i) => {
        const value = i[1]
        if (typeof value === 'string' && pxRE.test(value)) {
          // 移动端：强制按 750px 设计稿转换 (px / 7.5)
          i[1] = value.replace(pxRE, (match) => {
            const px = parseFloat(match)
            if (isNaN(px)) return match
            return `${(px / 7.5).toFixed(5)}vw`
          })
        }
      })
    }
  },
  rules: [
    [/^m-h-(.+)$/, ([, d]) => ({ 'margin-left': `${d}`, 'margin-right': `${d}` })],
    [/^m-v-(.+)$/, ([, d]) => ({ 'margin-top': `${d}`, 'margin-bottom': `${d}` })],
    [/^p-h-(.+)$/, ([, d]) => ({ 'padding-left': `${d}`, 'padding-right': `${d}` })],
    [/^p-v-(.+)$/, ([, d]) => ({ 'padding-top': `${d}`, 'padding-bottom': `${d}` })],
    [/^max-w-(.+)$/, ([, d]) => ({ 'max-width': `${d}` })],
    [/^min-w-(.+)$/, ([, d]) => ({ 'min-width': `${d}` })],
    [/^max-h-(.+)$/, ([, d]) => ({ 'max-height': `${d}` })],
    [/^min-h-(.+)$/, ([, d]) => ({ 'min-height': `${d}` })],
    [/^font-s-(\d+(\.\d+)?\w+)$/, ([, d]) => ({ 'font-size': `${d}` })],
    [/^wh-(.+)$/, ([, d]) => ({ width: `${d}`, height: `${d}` })],
    [/^bg-color-(\d+)$/, ([, d]) => ({ 'background-color': `${d}` })],
  ],
  safelist: iconList,
  shortcuts: {
    'wh-full': 'w-full h-full',
    'mp-0': 'm-0 p-0',
    'ma-x': 'mt-0 mb-0 ml-auto mr-auto',
    'inline-flex-center': 'inline-flex justify-center items-center',
    'flex-center': 'flex justify-center items-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    // 文本溢出显示省略号
    'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis',
    // 文本溢出换行
    'text-break': 'whitespace-normal break-all break-words',
  },
  theme: {
    breakpoints: {
      xs: '480px',
      sm: '768px',
      md: '992px',
      lg: '1200px',
      xl: '1920px',
      xxl: '3840px',
    },
    colors: {
      primary: 'var(--primary-color)',
      'primary-2': 'var(--primary-color-2)',
      success: 'var(--success-color)',
      warning: 'var(--warning-color)',
      danger: 'var(--danger-color)',
      error: 'var(--error-color)',
      info: 'var(--info-color)',
      color: {
        '1': 'var(--text-color-1)',
        '2': 'var(--text-color-2)',
        '3': 'var(--text-color-3)',
        4: 'var(--bg-color-4)',
        place: 'var(--text-color-place)',
        disabled: 'var(--text-color-disabled)',
        whiter: 'var(--text-color-whiter)',
      },
      bg: {
        color: 'var(--bg-color)',
        1: 'var(--bg-color-1)',
        2: 'var(--bg-color-2)',
        3: 'var(--bg-color-3)',
        4: 'var(--bg-color-4)',
        page: 'var(--bg-page)',
        place: 'var(--text-color-place)',
        divider: 'var(--bg-divider)',
        overlay: 'var(--bg-overlay)',
        primary: 'var(--primary-color)',
      },
    },
  },
})