uno.config.ts 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import presetRemToPx from '@unocss/preset-rem-to-px';
  2. import { defineConfig, presetAttributify, presetUno, transformerVariantGroup } from 'unocss';
  3. // https://github.com/unocss/unocss
  4. const defaultColor = 'var(--el-border-color)';
  5. const directionMap: AnyObj = {
  6. r: 'border-right',
  7. b: 'border-bottom',
  8. t: 'border-top',
  9. l: 'border-left',
  10. };
  11. export default defineConfig({
  12. presets: [presetUno({ dark: 'class' }), presetAttributify(), presetRemToPx({
  13. baseFontSize: 4,
  14. })],
  15. shortcuts: {
  16. 'wh-full': 'w-full h-full',
  17. 'flex-center': 'flex justify-center items-center',
  18. 'flex-x-center': 'flex justify-center',
  19. 'flex-y-center': 'flex items-center',
  20. 'flex-box': 'flex flex-1 w-full',
  21. // 快捷按键的样式
  22. 'commands': 'h-22 w-22 m-r-5 flex-center b-rd-2 bg-[rgba(125,125,125,0.1)] text-10 color-#909399 shadow-commands',
  23. },
  24. rules: [
  25. ['shadow-commands', {
  26. 'box-shadow': 'inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4)',
  27. }],
  28. // 动态规则,匹配 'border-{direction}-{width}-{style}-{color}'
  29. [/^border(?:-([rbtl]))?(?:-(\d))?(?:-(solid|dashed))?(?:-(color-)?(\w+|\[#[0-9a-fA-F]{3,6}\]))?$/, ([, direction, width = '1', style = 'solid', , color]) => {
  30. // 如果有颜色部分,则使用提取的颜色值或默认颜色
  31. color = !color ? defaultColor : color.replace(/\[(.+)\]/, '$1');
  32. direction = !direction ? 'border' : directionMap[direction];
  33. return {
  34. [direction]: `${width}px ${style} ${color}`,
  35. };
  36. }],
  37. // 动态规则,匹配 'wrapper-{padding}'
  38. [/^wrapper(?:-(\d+))?$/, ([, padding], { symbols }) => {
  39. return [
  40. {
  41. 'display': 'flex',
  42. 'align-items': 'center',
  43. 'cursor': 'pointer',
  44. 'border-radius': '4px',
  45. 'padding': `${padding || 12}px`, // 使用默认值 12
  46. 'color': 'var(--el-text-color-primary)',
  47. },
  48. {
  49. [symbols.selector]: selector => `${selector}:hover`,
  50. 'background-color': 'var(--el-color-primary-light-9)',
  51. 'color': 'var(--el-color-primary)',
  52. },
  53. ];
  54. }],
  55. ],
  56. transformers: [
  57. transformerVariantGroup(),
  58. ],
  59. });