huijia-website/uno.config.ts

/*
 * @Author: wjc
 * @Date: 2023-05-07 20:59:28
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-19 09:29:31
 * @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),
      },
    }),
  ],
  postprocess: (util) => {
    const pxRE = /(-?[\d.]+px)/g
    // 检查选择器是否包含移动端变体（lt-sm, lt-xs）
    const isMobile = util.selector.includes('lt-sm') || util.selector.includes('lt-xs')

    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`
          })
        }
      })
    }
  },
  transformers: [transformerDirectives(), transformerVariantGroup()],
  postprocess: (util) => {
    const pxRE = /(-?[\d.]+px)/g
    // 检查是否属于移动端变体（通过选择器或媒体查询父级判断）
    const isMobile =
      util.selector.includes('lt-sm') ||
      util.selector.includes('lt-xs') ||
      (util.parent?.includes('max-width: 767') ?? false) ||
      (util.parent?.includes('max-width: 479') ?? false)

    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`
          })
        }
      })
    } else {
      // PC 端逻辑：如果你希望 PC 端也转换（按 1920），取消下面注释
      /*
      util.entries.forEach((i) => {
        const value = i[1]
        if (typeof value === 'string' && pxRE.test(value)) {
          i[1] = value.replace(pxRE, (match) => {
            const px = parseFloat(match)
            return `${(px / 19.2).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-(\s+)$/, ([, d]) => ({ 'max-width': `${d}` })],
    [/^min-w-(\s+)$/, ([, d]) => ({ 'min-width': `${d}` })],
    [/^max-h-[(\s+)]$/, ([, d]) => ({ 'max-height': `${d}` })],
    [/^min-h-[(\s+)]$/, ([, 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)',
      },
    },
  },
})