@gsc-basic/unocss-config

UnoCSS Config for GSC Basic Team

DO NOT use it in your own project if you don't know what it's for

使用文档：https://gsc-basic.lenovo.com/gsc-docs/zh_CN/gsc_basic/vue/unocss-config.html

API 说明

gscUnoCSSConfig(options?): UserConfig

• options.icons: 是否启用 presetIcons（默认 true）。启用后会添加 i- 前缀的图标原子类，并设置合理的 extraProperties。
• options.presets: 额外的 UnoCSS 预设数组（例如 presetUno(), presetTypography() 等）。函数内部已默认启用 presetWind3() 与 presetAttributify()。
• options.shortcuts: 快捷类映射，支持两种形态：
  • 对象：{ 'flex-center': 'flex justify-center items-center' }
  • 数组：[['flex-center', 'flex justify-center items-center']] 最终会与内置默认值合并（默认包含 flex-center 与 position-center）。
• options.theme: 主题扩展对象，将与内置基础主题浅合并。内置包含：
  • zIndex: { '-1': '-1' }
  • breakpoints: { sm: '576px', md: '768px', lg: '992px', xl: '1200px', '2xl': '1600px', '3xl': '2000px' }
  • 可在调用方追加 colors.primary 等自定义变量（例如 var(--basic-primary-color) 或具体色值）。
• options.unoConfig: 其余 UnoCSS 配置项（除 presets/shortcuts/theme 外），会直接透传到 defineConfig。

使用指引

1. 安装依赖并在项目中启用 UnoCSS：
   • Vite 项目：确保安装 unocss 与官方插件，并在 vite.config.ts 中启用。
2. 在 unocss.config.ts（或 uno.config.mjs）中使用本配置：
   • 基础用法：直接导入并导出 gscUnoCSSConfig({...}) 的结果。
   • 需要严格主题提示时：为函数传入预设对应的主题泛型（如 PresetUnoTheme）。
3. 快捷类 shortcuts 支持对象和数组形式，选择你团队更易维护的一种即可。
4. theme 与内置基础主题浅合并，如需覆盖断点或 zIndex，可在 theme 中重写。

import { presetTypography } from 'unocss';
import { gscUnoCSSConfig } from '@gsc-basic/unocss-config';

export default gscUnoCSSConfig({
  // 可根据需要添加其他预设，如 presetTypography 等
  presets: [presetTypography],
  // 对象形式 shortcuts
  shortcuts: {
    btn: 'px-3 py-1 rounded bg-primary text-white',
  },
  // 也支持数组形式 shortcuts（键值对元组）
  // shortcuts: [
  //   ['btn', 'px-3 py-1 rounded bg-primary text-white'],
  // ],
  theme: {
    colors: {
      primary: '#3b82f6',
    },
  },
});

FAQ

• 为什么返回值已是 defineConfig 结果？
  • 函数内部已调用 defineConfig，减少重复包裹。直接 export default gscUnoCSSConfig({...}) 即可。
• 图标前缀是什么？
  • 启用 icons 时，默认使用 i- 前缀。如需自定义可在外层自行配置 presetIcons 并通过 options.presets 传入。