物业代码生成
This commit is contained in:
266
internal/tailwind-config/src/index.ts
Normal file
266
internal/tailwind-config/src/index.ts
Normal file
@@ -0,0 +1,266 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
import path from 'node:path';
|
||||
|
||||
import { addDynamicIconSelectors } from '@iconify/tailwind';
|
||||
import { getPackagesSync } from '@manypkg/get-packages';
|
||||
import typographyPlugin from '@tailwindcss/typography';
|
||||
import animate from 'tailwindcss-animate';
|
||||
|
||||
import { enterAnimationPlugin } from './plugins/entry';
|
||||
|
||||
// import defaultTheme from 'tailwindcss/defaultTheme';
|
||||
|
||||
const { packages } = getPackagesSync(process.cwd());
|
||||
|
||||
const tailwindPackages: string[] = [];
|
||||
|
||||
packages.forEach((pkg) => {
|
||||
// apps目录下和 @vben-core/tailwind-ui 包需要使用到 tailwindcss ui
|
||||
// if (fs.existsSync(path.join(pkg.dir, 'tailwind.config.mjs'))) {
|
||||
tailwindPackages.push(pkg.dir);
|
||||
// }
|
||||
});
|
||||
|
||||
const shadcnUiColors = {
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
hover: 'hsl(var(--accent-hover))',
|
||||
lighter: 'has(val(--accent-lighter))',
|
||||
},
|
||||
background: {
|
||||
deep: 'hsl(var(--background-deep))',
|
||||
DEFAULT: 'hsl(var(--background))',
|
||||
},
|
||||
border: {
|
||||
DEFAULT: 'hsl(var(--border))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
...createColorsPalette('destructive'),
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
},
|
||||
|
||||
foreground: {
|
||||
DEFAULT: 'hsl(var(--foreground))',
|
||||
},
|
||||
|
||||
input: {
|
||||
background: 'hsl(var(--input-background))',
|
||||
DEFAULT: 'hsl(var(--input))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
primary: {
|
||||
...createColorsPalette('primary'),
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
},
|
||||
|
||||
ring: 'hsl(var(--ring))',
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
desc: 'hsl(var(--secondary-desc))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
};
|
||||
|
||||
const customColors = {
|
||||
green: {
|
||||
...createColorsPalette('green'),
|
||||
foreground: 'hsl(var(--success-foreground))',
|
||||
},
|
||||
header: {
|
||||
DEFAULT: 'hsl(var(--header))',
|
||||
},
|
||||
heavy: {
|
||||
DEFAULT: 'hsl(var(--heavy))',
|
||||
foreground: 'hsl(var(--heavy-foreground))',
|
||||
},
|
||||
main: {
|
||||
DEFAULT: 'hsl(var(--main))',
|
||||
},
|
||||
overlay: {
|
||||
content: 'hsl(var(--overlay-content))',
|
||||
DEFAULT: 'hsl(var(--overlay))',
|
||||
},
|
||||
red: {
|
||||
...createColorsPalette('red'),
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
sidebar: {
|
||||
deep: 'hsl(var(--sidebar-deep))',
|
||||
DEFAULT: 'hsl(var(--sidebar))',
|
||||
},
|
||||
success: {
|
||||
...createColorsPalette('success'),
|
||||
DEFAULT: 'hsl(var(--success))',
|
||||
},
|
||||
warning: {
|
||||
...createColorsPalette('warning'),
|
||||
DEFAULT: 'hsl(var(--warning))',
|
||||
},
|
||||
yellow: {
|
||||
...createColorsPalette('yellow'),
|
||||
foreground: 'hsl(var(--warning-foreground))',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
content: [
|
||||
'./index.html',
|
||||
...tailwindPackages.map((item) =>
|
||||
path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'),
|
||||
),
|
||||
],
|
||||
darkMode: 'selector',
|
||||
plugins: [
|
||||
animate,
|
||||
typographyPlugin,
|
||||
addDynamicIconSelectors(),
|
||||
enterAnimationPlugin,
|
||||
],
|
||||
prefix: '',
|
||||
safelist: ['dark'],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
'2xl': '1400px',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
|
||||
'collapsible-up': 'collapsible-up 0.2s ease-in-out',
|
||||
float: 'float 5s linear 0ms infinite',
|
||||
},
|
||||
|
||||
animationDuration: {
|
||||
'2000': '2000ms',
|
||||
'3000': '3000ms',
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
xl: 'calc(var(--radius) + 4px)',
|
||||
},
|
||||
boxShadow: {
|
||||
float: `0 6px 16px 0 rgb(0 0 0 / 8%),
|
||||
0 3px 6px -4px rgb(0 0 0 / 12%),
|
||||
0 9px 28px 8px rgb(0 0 0 / 5%)`,
|
||||
},
|
||||
colors: {
|
||||
...customColors,
|
||||
...shadcnUiColors,
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'var(--font-family)',
|
||||
// ...defaultTheme.fontFamily.sans
|
||||
],
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
'collapsible-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-collapsible-content-height)' },
|
||||
},
|
||||
'collapsible-up': {
|
||||
from: { height: 'var(--radix-collapsible-content-height)' },
|
||||
to: { height: '0' },
|
||||
},
|
||||
float: {
|
||||
'0%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
},
|
||||
zIndex: {
|
||||
'100': '100',
|
||||
'1000': '1000',
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Config;
|
||||
|
||||
function createColorsPalette(name: string) {
|
||||
// backgroundLightest: '#EFF6FF', // Tailwind CSS 默认的 `blue-50`
|
||||
// backgroundLighter: '#DBEAFE', // Tailwind CSS 默认的 `blue-100`
|
||||
// backgroundLight: '#BFDBFE', // Tailwind CSS 默认的 `blue-200`
|
||||
// borderLight: '#93C5FD', // Tailwind CSS 默认的 `blue-300`
|
||||
// border: '#60A5FA', // Tailwind CSS 默认的 `blue-400`
|
||||
// main: '#3B82F6', // Tailwind CSS 默认的 `blue-500`
|
||||
// hover: '#2563EB', // Tailwind CSS 默认的 `blue-600`
|
||||
// active: '#1D4ED8', // Tailwind CSS 默认的 `blue-700`
|
||||
// backgroundDark: '#1E40AF', // Tailwind CSS 默认的 `blue-800`
|
||||
// backgroundDarker: '#1E3A8A', // Tailwind CSS 默认的 `blue-900`
|
||||
// backgroundDarkest: '#172554', // Tailwind CSS 默认的 `blue-950`
|
||||
|
||||
// • backgroundLightest (#EFF6FF): 适用于最浅的背景色，可能用于非常轻微的阴影或卡片的背景。
|
||||
// • backgroundLighter (#DBEAFE): 适用于略浅的背景色，通常用于次要背景或略浅的区域。
|
||||
// • backgroundLight (#BFDBFE): 适用于浅色背景，可能用于输入框或表单区域的背景。
|
||||
// • borderLight (#93C5FD): 适用于浅色边框，可能用于输入框或卡片的边框。
|
||||
// • border (#60A5FA): 适用于普通边框，可能用于按钮或卡片的边框。
|
||||
// • main (#3B82F6): 适用于主要的主题色，通常用于按钮、链接或主要的强调色。
|
||||
// • hover (#2563EB): 适用于鼠标悬停状态下的颜色，例如按钮悬停时的背景色或边框色。
|
||||
// • active (#1D4ED8): 适用于激活状态下的颜色，例如按钮按下时的背景色或边框色。
|
||||
// • backgroundDark (#1E40AF): 适用于深色背景，可能用于主要按钮或深色卡片背景。
|
||||
// • backgroundDarker (#1E3A8A): 适用于更深的背景，通常用于头部导航栏或页脚。
|
||||
// • backgroundDarkest (#172554): 适用于最深的背景，可能用于非常深色的区域或极端对比色。
|
||||
|
||||
return {
|
||||
50: `hsl(var(--${name}-50))`,
|
||||
100: `hsl(var(--${name}-100))`,
|
||||
200: `hsl(var(--${name}-200))`,
|
||||
300: `hsl(var(--${name}-300))`,
|
||||
400: `hsl(var(--${name}-400))`,
|
||||
500: `hsl(var(--${name}-500))`,
|
||||
600: `hsl(var(--${name}-600))`,
|
||||
700: `hsl(var(--${name}-700))`,
|
||||
// 800: `hsl(var(--${name}-800))`,
|
||||
// 900: `hsl(var(--${name}-900))`,
|
||||
// 950: `hsl(var(--${name}-950))`,
|
||||
// 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
|
||||
active: `hsl(var(--${name}-700))`,
|
||||
// 浅色背景，适用于输入框或表单区域的背景。
|
||||
'background-light': `hsl(var(--${name}-200))`,
|
||||
// 适用于略浅的背景色，通常用于次要背景或略浅的区域。
|
||||
'background-lighter': `hsl(var(--${name}-100))`,
|
||||
// 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
|
||||
'background-lightest': `hsl(var(--${name}-50))`,
|
||||
// 适用于普通边框，可能用于按钮或卡片的边框。
|
||||
border: `hsl(var(--${name}-400))`,
|
||||
// 浅色边框，适用于输入框或卡片的边框。
|
||||
'border-light': `hsl(var(--${name}-300))`,
|
||||
foreground: `hsl(var(--${name}-foreground))`,
|
||||
// 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
|
||||
hover: `hsl(var(--${name}-600))`,
|
||||
// 主色文本
|
||||
text: `hsl(var(--${name}-500))`,
|
||||
// 主色文本激活态
|
||||
'text-active': `hsl(var(--${name}-700))`,
|
||||
// 主色文本悬浮态
|
||||
'text-hover': `hsl(var(--${name}-600))`,
|
||||
};
|
||||
}
|
||||
3
internal/tailwind-config/src/module.d.ts
vendored
Normal file
3
internal/tailwind-config/src/module.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
declare module '@tailwindcss/nesting' {
|
||||
export default any;
|
||||
}
|
||||
53
internal/tailwind-config/src/plugins/entry.ts
Normal file
53
internal/tailwind-config/src/plugins/entry.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import plugin from 'tailwindcss/plugin.js';
|
||||
|
||||
const enterAnimationPlugin = plugin(({ addUtilities }) => {
|
||||
const maxChild = 5;
|
||||
const utilities: Record<string, any> = {};
|
||||
for (let i = 1; i <= maxChild; i++) {
|
||||
const baseDelay = 0.1;
|
||||
const delay = `${baseDelay * i}s`;
|
||||
|
||||
utilities[`.enter-x:nth-child(${i})`] = {
|
||||
animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
|
||||
opacity: '0',
|
||||
transform: `translateX(50px)`,
|
||||
};
|
||||
|
||||
utilities[`.enter-y:nth-child(${i})`] = {
|
||||
animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
|
||||
opacity: '0',
|
||||
transform: `translateY(50px)`,
|
||||
};
|
||||
|
||||
utilities[`.-enter-x:nth-child(${i})`] = {
|
||||
animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
|
||||
opacity: '0',
|
||||
transform: `translateX(-50px)`,
|
||||
};
|
||||
|
||||
utilities[`.-enter-y:nth-child(${i})`] = {
|
||||
animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
|
||||
opacity: '0',
|
||||
transform: `translateY(-50px)`,
|
||||
};
|
||||
}
|
||||
|
||||
// 添加动画关键帧
|
||||
addUtilities(utilities);
|
||||
addUtilities({
|
||||
'@keyframes enter-x-animation': {
|
||||
to: {
|
||||
opacity: '1',
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
'@keyframes enter-y-animation': {
|
||||
to: {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
export { enterAnimationPlugin };
|
||||
15
internal/tailwind-config/src/postcss.config.ts
Normal file
15
internal/tailwind-config/src/postcss.config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import config from '.';
|
||||
|
||||
export default {
|
||||
plugins: {
|
||||
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
|
||||
// Specifying the config is not necessary in most cases, but it is included
|
||||
autoprefixer: {},
|
||||
// 修复 element-plus 和 ant-design-vue 的样式和tailwindcss冲突问题
|
||||
'postcss-antd-fixes': { prefixes: ['ant', 'el'] },
|
||||
'postcss-import': {},
|
||||
'postcss-preset-env': {},
|
||||
tailwindcss: { config },
|
||||
'tailwindcss/nesting': {},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user