import {
defineConfig,
presetIcons,
presetAttributify,
presetUno,
transformerDirectives,
transformerVariantGroup,
UserConfig,
} from 'unocss';
import { Theme } from 'unocss/preset-mini';
export const iconCollectionName = 'uplus';
// 自定义svg的图标
export const iconCollection = {
/** uplus logo */
logo: `
`,
'chevron-up': `
`,
'chevron-down': `
`,
'chevron-left': `
`,
'chevron-right': `
`,
};
const defaultSizes = {
'spacing-xxxs': '4px',
'spacing-xxs': '8px',
'spacing-xs': '12px',
'spacing-sm': '16px',
'spacing-md': '20px',
spacing: '24px',
'spacing-lg': '28px',
'spacing-xl': '32px',
'spacing-xxl': '36px',
'spacing-xxxl': '40px',
'exercise-header': '56px',
};
export const theme: Theme = {
breakpoints: {
sm: '640px',
md: '768px',
df: '900px',
lg: '1024px',
xl: '1280px',
xxl: '1536px',
xxxl: '1860px',
},
fontSize: {
xs: '12px',
sm: '13px',
base: '14px',
lg: '16px',
xl: '18px',
xxl: '20px',
xxxl: '22px',
},
height: {
...defaultSizes,
},
width: {
...defaultSizes,
},
lineHeight: {
...defaultSizes,
},
// athena产教融合云主题间距
spacing: {
...defaultSizes,
},
colors: {
theme: 'var(--el-color-primary)',
primary: 'var(--el-color-primary)',
success: 'var(--el-color-success)',
warning: 'var(--el-color-warning)',
danger: 'var(--el-color-danger)',
info: 'var(--el-color-info)',
text: {
primary: 'var(--el-text-color-primary)',
regular: 'var(--el-text-color-regular)',
secondary: 'var(--el-text-color-secondary)',
placeholder: 'var(--el-text-color-placeholder)',
disabled: 'var(--el-text-color-disabled)',
},
},
boxShadow: {
card: '0 3px 12px 0px rgba(10, 60, 238, 0.1)',
},
};
/** 将上方自定义的svg图表类明生成列表，传给下面配置中的safeList，保证动态嵌入的自定义图标样式有效 */
export const getIconCollectionList = () => {
const list: string[] = [];
for (const key in iconCollection) {
list.push(`i-${iconCollectionName}:${key}`);
}
return list;
};
const config: UserConfig = defineConfig({
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1,
warn: true,
collections: {
[iconCollectionName]: iconCollection,
},
}),
],
// unocss can't render icon class dynamically, when adding menu icon class
// in route.meta.menuConfig, you must also add the icon class in safelist.
safelist: [...getIconCollectionList()],
transformers: [transformerDirectives(), transformerVariantGroup()],
theme,
shortcuts: [
{
'flex-row-center': 'flex flex-row items-center justify-center',
'flex-row-between': 'flex flex-row items-center justify-between',
'flex-col-center': 'flex flex-col items-center justify-center',
'flex-col-between': 'flex flex-col items-center justify-between',
},
],
});
export default config;