128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
import { defineConfig, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';
|
||
|
||
export default defineConfig({
|
||
// include: ['/src/**.{vue,html,tsx,ts}'],
|
||
// include: ['./index.html', './src/**/*.{vue,ts,tsx,md}'],
|
||
exclude: ['node_modules', '.git', '.husky', '.vscode', 'dist', 'public', 'build', 'mock', './stats.html'],
|
||
presets: [presetUno()],
|
||
transformers: [
|
||
transformerDirectives(),
|
||
transformerVariantGroup(),
|
||
],
|
||
shortcuts: {
|
||
// 外层盒子类型
|
||
// box-row：横向布局
|
||
// box-col：竖向布局
|
||
|
||
// 直属内部元素类型
|
||
// sider： 横向布局 是左右两侧 竖向布局是 上下两侧
|
||
// content: 内容区 超出隐藏
|
||
// body: 内容区 超出滚动 （ 不推荐使用这个类 建议使用 el-scrollbar 组件 搭配content ）
|
||
|
||
'box-col': 'flex flex-col w-full h-full [&>.content]:h-full',
|
||
'box-row': 'flex flex-row w-full [&>.sider]:h-full',
|
||
'sider': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
|
||
'body': 'flex-grow-1 flex-shrink-1 flex-basis-100% overflow-auto',
|
||
'content': 'body overflow-hidden',
|
||
|
||
'wh-full': 'w-full h-full',
|
||
|
||
'flex-center': 'flex items-center justify-center',
|
||
|
||
// 针对 spacing 配置 补充
|
||
'p': 'px py',
|
||
'm': 'mx my',
|
||
|
||
},
|
||
rules: [
|
||
['bg', { 'background-color': 'var(--el-bg-color)'} ],
|
||
['bg-page', { 'background-color': 'var(--el-bg-color-page)'} ],
|
||
['bg-overlay', { 'background-color': 'var(--el-bg-color-overlay)' }],
|
||
['bg-disabled', { 'background-color': 'var(--el-disabled-bg-color)' }],
|
||
|
||
['text', { color: 'var(--el-text-color-primary)'} ],
|
||
['text-regular', { color: 'var(--el-text-color-regular)'} ],
|
||
['text-secondary', { color: 'var(--el-text-color-secondary)'} ],
|
||
['text-placeholder', { color: 'var(--el-text-color-placeholder)'} ],
|
||
['text-disabled', { color: 'var(--el-text-color-disabled)' }],
|
||
|
||
['border-color', { 'border-color': 'var(--el-border-color)'} ],
|
||
['border-color-light', { 'border-color': 'var(--el-border-color-light)'} ],
|
||
['border-color-lighter', { 'border-color': 'var(--el-border-color-lighter)' }],
|
||
],
|
||
theme: {
|
||
colors: {
|
||
main: 'var(--el-color-primary)',
|
||
/* 主题色 */
|
||
'primary':{
|
||
DEFAULT:'var(--el-color-primary)',
|
||
2: 'var(--el-color-primary-dark-2)',
|
||
3: 'var(--el-color-primary-light-3)',
|
||
5: 'var(--el-color-primary-light-5)',
|
||
7: 'var(--el-color-primary-light-7)',
|
||
8: 'var(--el-color-primary-light-8)',
|
||
9: 'var(--el-color-primary-light-9)',
|
||
},
|
||
|
||
/* 成功色 */
|
||
'success':{
|
||
DEFAULT:'var(--el-color-success)',
|
||
2: 'var(--el-color-success-dark-2)',
|
||
3: 'var(--el-color-success-light-3)',
|
||
5: 'var(--el-color-success-light-5)',
|
||
7: 'var(--el-color-success-light-7)',
|
||
8: 'var(--el-color-success-light-8)',
|
||
9: 'var(--el-color-success-light-9)',
|
||
},
|
||
|
||
/* 警告色 */
|
||
'warning':{
|
||
DEFAULT: 'var(--el-color-warning)',
|
||
2: 'var(--el-color-warning-dark-2)',
|
||
3: 'var(--el-color-warning-light-3)',
|
||
5: 'var(--el-color-warning-light-5)',
|
||
7: 'var(--el-color-warning-light-7)',
|
||
8: 'var(--el-color-warning-light-8)',
|
||
9: 'var(--el-color-warning-light-9)',
|
||
},
|
||
/* 错误色 */
|
||
'error':{
|
||
DEFAULT: 'var(--el-color-error)',
|
||
2: 'var(--el-color-error-dark-2)',
|
||
3: 'var(--el-color-error-light-3)',
|
||
5: 'var(--el-color-error-light-5)',
|
||
7: 'var(--el-color-error-light-7)',
|
||
8: 'var(--el-color-error-light-8)',
|
||
9: 'var(--el-color-error-light-9)',
|
||
},
|
||
|
||
/* 信息色 */
|
||
'info':{
|
||
DEFAULT: 'var(--el-color-info)',
|
||
2: 'var(--el-color-info-dark-2)',
|
||
3: 'var(--el-color-info-light-3)',
|
||
5: 'var(--el-color-info-light-5)',
|
||
7: 'var(--el-color-info-light-7)',
|
||
8: 'var(--el-color-info-light-8)',
|
||
9: 'var(--el-color-info-light-9)',
|
||
}
|
||
},
|
||
spacing: {
|
||
xl: '48px',
|
||
lg: '24px',
|
||
DEFAULT:'20px', // 基础尺寸 default 配置无效
|
||
md: '16px',
|
||
sm: '8px',
|
||
xs: '4px',
|
||
},
|
||
fontSize: {
|
||
xl: ['var(--el-font-size-extra-large)',''],
|
||
lg: ['var(--el-font-size-large)',''],
|
||
md: ['var(--el-font-size-medium)',''],
|
||
DEFAULT: ['var(--el-font-size-base)',''],
|
||
sm: ['var(--el-font-size-small)',''],
|
||
xs: ['var(--el-font-size-extra-small)','']
|
||
}
|
||
}
|
||
});
|