feat: 添加 InspiraUI 组件和模式背景功能,更新依赖项
All checks were successful
/ build-and-deploy-to-vercel (push) Successful in 3m0s
/ lint-build-and-check (push) Successful in 4m44s
/ playwright (push) Successful in 3m18s
/ surge (push) Successful in 3m1s

This commit is contained in:
严浩
2025-03-31 14:11:30 +08:00
parent 6e18e0f737
commit 334b2485f5
13 changed files with 1813 additions and 10 deletions

View File

@ -0,0 +1,87 @@
import { cva, type VariantProps } from "class-variance-authority";
import type { HTMLAttributes } from "vue";
type ObjectValues<T> = T[keyof T];
export const PATTERN_BACKGROUND_DIRECTION = {
Top: "top",
Bottom: "bottom",
Left: "left",
Right: "right",
TopLeft: "top-left",
TopRight: "top-right",
BottomLeft: "bottom-left",
BottomRight: "bottom-right",
} as const;
export type PatternBackgroundDirection = ObjectValues<typeof PATTERN_BACKGROUND_DIRECTION>;
export interface BaseProps {
class?: HTMLAttributes["class"];
animate?: boolean;
direction?: PatternBackgroundDirection;
variant?: PatternBackgroundVariants["variant"];
size?: PatternBackgroundVariants["size"];
mask?: PatternBackgroundMaskVariants["mask"];
speed?: ObjectValues<typeof PATTERN_BACKGROUND_SPEED>;
}
export const PATTERN_BACKGROUND_VARIANT = {
Grid: "grid",
Dot: "dot",
BigDot: "big-dot",
} as const;
export const PATTERN_BACKGROUND_SPEED = {
Default: 10000,
Slow: 25000,
Fast: 5000,
} as const;
export const patternBackgroundVariants = cva("relative text-clip", {
variants: {
variant: {
[PATTERN_BACKGROUND_VARIANT.Grid]:
"bg-[linear-gradient(to_right,hsl(var(--foreground)/0.3)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--foreground)/0.3)_1px,transparent_1px)]",
[PATTERN_BACKGROUND_VARIANT.Dot]:
"bg-[radial-gradient(hsl(var(--foreground)/0.3)_1px,transparent_1px)]",
[PATTERN_BACKGROUND_VARIANT.BigDot]:
"bg-[radial-gradient(hsl(var(--foreground)/0.3)_3px,transparent_3px)]",
},
size: {
xs: "bg-[size:8px_8px]",
sm: "bg-[size:16px_16px]",
md: "bg-[size:24px_24px]",
lg: "bg-[size:32px_32px]",
},
},
defaultVariants: {
variant: "grid",
size: "md",
},
});
export type PatternBackgroundVariants = VariantProps<typeof patternBackgroundVariants>;
export const PATTERN_BACKGROUND_MASK = {
Ellipse: "ellipse",
EllipseTop: "ellipse-top",
} as const;
export const patternBackgroundMaskVariants = cva("bg-background", {
variants: {
mask: {
[PATTERN_BACKGROUND_MASK.Ellipse]:
"[mask-image:radial-gradient(ellipse_at_center,transparent,black_80%)]",
[PATTERN_BACKGROUND_MASK.EllipseTop]:
"[mask-image:radial-gradient(ellipse_at_top,transparent,black_80%)]",
},
},
defaultVariants: {
mask: "ellipse",
},
});
export type PatternBackgroundMaskVariants = VariantProps<typeof patternBackgroundMaskVariants>;
export { default as PatternBackground } from "./PatternBackground.vue";