mirror of https://github.com/allinssl/allinssl
326 lines
7.8 KiB
TypeScript
326 lines
7.8 KiB
TypeScript
import {
|
||
defineConfig,
|
||
presetUno,
|
||
presetAttributify,
|
||
presetIcons,
|
||
} from "unocss";
|
||
|
||
/**
|
||
* UnoCSS配置文件
|
||
* 基于项目CSS变量定义的设计系统配置
|
||
*/
|
||
export default defineConfig({
|
||
// 配置UnoCSS扫描的文件内容
|
||
content: {
|
||
filesystem: [
|
||
"**/*.{vue,js,ts,jsx,tsx,html,css}",
|
||
"!node_modules/**/*",
|
||
"!dist/**/*",
|
||
],
|
||
},
|
||
|
||
// 安全列表：确保动态生成的CSS类不会被清除
|
||
safelist: [
|
||
// 状态徽章类
|
||
"status-badge",
|
||
"status-badge-unavailable",
|
||
"status-badge-available",
|
||
"status-badge-premium",
|
||
"status-badge-recommended",
|
||
"status-badge-popular",
|
||
"status-badge-discount",
|
||
// 操作按钮类
|
||
"action-button",
|
||
"action-button-add-cart",
|
||
"action-button-buy-now",
|
||
// 价格提示相关类
|
||
"price-tooltip",
|
||
"price-tooltip-container",
|
||
"price-trigger",
|
||
// 其他动态类
|
||
"domain-actions",
|
||
"cart-item",
|
||
"cart-count",
|
||
"filter-btn",
|
||
"transition-custom",
|
||
"discount-badge",
|
||
// 常用的原子类组合
|
||
"hover:text-primary",
|
||
"hover:text-primary-80",
|
||
"hover:opacity-100",
|
||
"text-secondary-60",
|
||
"text-orange-500",
|
||
// Modal相关类（从modal-notification.js提取）
|
||
"modal-content",
|
||
"modal-close",
|
||
"notification-close",
|
||
// Modal容器类
|
||
"fixed",
|
||
"inset-0",
|
||
"bg-black-50",
|
||
"hidden",
|
||
"flex",
|
||
"items-center",
|
||
"justify-center",
|
||
"px-5",
|
||
"py-5",
|
||
// Modal内容类
|
||
"bg-white",
|
||
"rounded-sm-xl",
|
||
"max-w-sm",
|
||
"max-w-md",
|
||
"max-w-lg",
|
||
"max-w-xl",
|
||
"max-w-2xl",
|
||
"max-w-4xl",
|
||
"w-full",
|
||
"transform",
|
||
"transition-all",
|
||
"scale-95",
|
||
"scale-100",
|
||
"opacity-0",
|
||
"opacity-100",
|
||
// Modal头部类
|
||
"justify-between",
|
||
"p-6",
|
||
"border-b",
|
||
"border-gray-100",
|
||
"text-xl",
|
||
"font-bold",
|
||
"text-dark",
|
||
"text-gray-400",
|
||
"hover:text-gray-600",
|
||
"transition-colors",
|
||
// Modal按钮类
|
||
"flex-1",
|
||
"py-3",
|
||
"rounded-sm",
|
||
"bg-primary",
|
||
"hover:bg-primary-90",
|
||
"text-white",
|
||
"font-medium",
|
||
"border",
|
||
"border-gray-200",
|
||
"hover:bg-light",
|
||
"text-secondary",
|
||
"bg-red-500",
|
||
"hover:bg-red-600",
|
||
"gap-4",
|
||
"border-t",
|
||
// Notification容器类
|
||
"top-20",
|
||
"top-6",
|
||
"bottom-6",
|
||
"right-6",
|
||
"left-6",
|
||
"left-1/2",
|
||
"-translate-x-1/2",
|
||
"translate-x-full",
|
||
"translate-x-0",
|
||
"duration-300",
|
||
// Notification内容类
|
||
"bg-green-500",
|
||
"bg-red-500",
|
||
"bg-yellow-500",
|
||
"bg-blue-500",
|
||
"bg-dark",
|
||
"px-6",
|
||
"py-4",
|
||
"shadow-lg",
|
||
"min-w-[300px]",
|
||
"max-w-[400px]",
|
||
"text-green-400",
|
||
"mr-3",
|
||
"ml-3",
|
||
"mb-1",
|
||
"text-sm",
|
||
"flex-shrink-0",
|
||
"hover:text-gray-200",
|
||
// z-index动态类
|
||
"z-10",
|
||
"z-20",
|
||
"z-30",
|
||
"z-40",
|
||
"z-50",
|
||
"z-60",
|
||
"z-70",
|
||
"z-80",
|
||
"z-90",
|
||
"z-100",
|
||
"z-9990",
|
||
],
|
||
|
||
presets: [
|
||
presetUno(), // 默认预设，包含Tailwind CSS兼容的工具类
|
||
presetAttributify(), // 属性化模式预设
|
||
presetIcons({
|
||
scale: 1.2,
|
||
warn: true,
|
||
}),
|
||
],
|
||
shortcuts: {
|
||
// 基于设计系统的组件快捷方式
|
||
btn: "px-4 py-2 rounded-lg inline-block bg-primary text-light cursor-pointer hover:bg-primary-90 transition-all duration-200 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50",
|
||
"btn-primary": "btn bg-primary hover:bg-primary-90",
|
||
"btn-secondary": "btn bg-secondary hover:bg-secondary-80 text-light",
|
||
"btn-success": "btn bg-success hover:bg-success/90",
|
||
"btn-danger": "btn bg-danger hover:bg-danger/90",
|
||
card: "p-6 rounded-lg shadow-md bg-light hover:shadow-lg transition-shadow duration-200",
|
||
"card-hover": "card hover-lift",
|
||
container: "max-w-[1200px] mx-auto px-4",
|
||
"container-1000": "max-w-[1000px] mx-auto px-4",
|
||
"input-field":
|
||
"w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all duration-200",
|
||
"status-available":
|
||
"px-2 py-1 text-xs font-medium rounded-full bg-success/10 text-success",
|
||
"status-unavailable":
|
||
"px-2 py-1 text-xs font-medium rounded-full bg-secondary/40 text-light",
|
||
"status-premium":
|
||
"px-2 py-1 text-xs font-medium rounded-full bg-yellow-400 text-light",
|
||
},
|
||
theme: {
|
||
colors: {
|
||
light: "#FFFFFF",
|
||
dark: "#1A1A1A",
|
||
discount: "#FF4D4F",
|
||
orange: {
|
||
DEFAULT: "#FF6600",
|
||
400: "#fb923c",
|
||
500: "#f97316",
|
||
},
|
||
// 主色调系统
|
||
primary: {
|
||
DEFAULT: "#20a53a",
|
||
5: "rgba(32, 165, 58, 0.05)",
|
||
10: "rgba(32, 165, 58, 0.1)",
|
||
20: "rgba(32, 165, 58, 0.2)",
|
||
30: "rgba(32, 165, 58, 0.3)",
|
||
40: "rgba(32, 165, 58, 0.4)",
|
||
50: "rgba(32, 165, 58, 0.5)",
|
||
60: "rgba(32, 165, 58, 0.6)",
|
||
70: "rgba(32, 165, 58, 0.7)",
|
||
80: "rgba(32, 165, 58, 0.8)",
|
||
90: "rgba(32, 165, 58, 0.9)",
|
||
},
|
||
secondary: {
|
||
DEFAULT: "#363636",
|
||
40: "rgba(54, 54, 54, 0.4)",
|
||
50: "rgba(54, 54, 54, 0.5)",
|
||
60: "rgba(54, 54, 54, 0.6)",
|
||
70: "rgba(54, 54, 54, 0.7)",
|
||
80: "rgba(54, 54, 54, 0.8)",
|
||
},
|
||
success: {
|
||
DEFAULT: "#00B42A",
|
||
10: "rgba(0, 180, 42, 0.1)",
|
||
},
|
||
danger: {
|
||
DEFAULT: "#F53F3F",
|
||
10: "rgba(245, 63, 63, 0.1)",
|
||
80: "rgba(255, 77, 79, 0.8)",
|
||
},
|
||
// 白色透明度变体
|
||
white: {
|
||
DEFAULT: "#FFFFFF",
|
||
10: "rgba(255, 255, 255, 0.1)",
|
||
70: "rgba(255, 255, 255, 0.7)",
|
||
80: "rgba(255, 255, 255, 0.8)",
|
||
},
|
||
// 黑色透明度变体
|
||
black: {
|
||
50: "rgba(0, 0, 0, 0.5)",
|
||
},
|
||
},
|
||
borderRadius: {
|
||
// 基于CSS变量的圆角系统
|
||
sm: "0.125rem", // 2px
|
||
DEFAULT: "0.25rem", // 4px
|
||
md: "0.25rem", // 4px
|
||
lg: "0.375rem", // 6px
|
||
xl: "0.5rem", // 8px
|
||
"2xl": "0.75rem", // 12px
|
||
full: "9999px",
|
||
},
|
||
boxShadow: {
|
||
// 基于CSS变量的阴影系统
|
||
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.04)",
|
||
DEFAULT:
|
||
"0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
|
||
md: "0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04)",
|
||
lg: "0 4px 6px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04)",
|
||
xl: "0 8px 12px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)",
|
||
card: "0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)",
|
||
},
|
||
fontFamily: {
|
||
sans: ["Inter", "system-ui", "sans-serif"],
|
||
},
|
||
backgroundColor: {
|
||
rating: "#F9F9F9",
|
||
},
|
||
},
|
||
rules: [
|
||
// 悬停提升效果
|
||
[
|
||
"hover-lift",
|
||
{
|
||
transition:
|
||
"transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
},
|
||
],
|
||
[
|
||
"hover-lift:hover",
|
||
{
|
||
transform: "translateY(-0.125rem)",
|
||
},
|
||
],
|
||
// 自定义过渡效果
|
||
[
|
||
"transition-custom",
|
||
{
|
||
transition: "all 0.2s ease-in-out",
|
||
},
|
||
],
|
||
// 动画效果
|
||
[
|
||
"animate-fade-in",
|
||
{
|
||
animation: "fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
},
|
||
],
|
||
[
|
||
"animate-smooth-fade-in",
|
||
{
|
||
animation: "smooth-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
|
||
},
|
||
],
|
||
],
|
||
// 添加关键帧动画
|
||
preflights: [
|
||
{
|
||
getCSS: () => `
|
||
@keyframes fade-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes smooth-fade-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(8px) scale(0.98);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
`,
|
||
},
|
||
],
|
||
});
|