mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 17:56:37 +08:00
wavelet init
This commit is contained in:
ryan
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* 圣诞节主题装饰组件归档
|
||||
* 包含圣诞树、圣诞帽图标以及下雪效果的集成组件
|
||||
*
|
||||
* 使用示例：
|
||||
* ```tsx
|
||||
* import { ChristmasDecorations } from "@/components/layout/avater-style/Christmas"
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const [showChristmas, setShowChristmas] = useState(false)
|
||||
*
|
||||
* return (
|
||||
* <>
|
||||
* {showChristmas && <ChristmasDecorations.SnowEffect />}
|
||||
* <div onClick={() => setShowChristmas(!showChristmas)}>
|
||||
* <ChristmasDecorations.Hat className="w-8 h-8" />
|
||||
* <ChristmasDecorations.Tree
|
||||
* className="w-12 h-12"
|
||||
* show={showChristmas}
|
||||
* />
|
||||
* </div>
|
||||
* </>
|
||||
* )
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
|
||||
import {cn} from "@/lib/utils"
|
||||
import {SnowEffect} from "@/components/ui/snow-effect"
|
||||
|
||||
/**
|
||||
* 圣诞树图标组件
|
||||
*/
|
||||
export const ChristmasTree = ({
|
||||
className,
|
||||
show = true
|
||||
}: {
|
||||
className?: string
|
||||
show?: boolean
|
||||
}) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn(
|
||||
"transition-all duration-500 ease-out",
|
||||
show ? "opacity-90 scale-100 translate-y-0" : "opacity-0 scale-50 translate-y-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<rect x="10" y="18" width="4" height="4" fill="#92400E" rx="0.5" />
|
||||
<path d="M12 4L8 9H16L12 4Z" fill="#15803D" />
|
||||
<path d="M12 8L7 14H17L12 8Z" fill="#16A34A" />
|
||||
<path d="M12 12L6 19H18L12 12Z" fill="#22C55E" />
|
||||
<circle cx="10" cy="10" r="0.8" fill="#EF4444" />
|
||||
<circle cx="14" cy="11" r="0.8" fill="#F59E0B" />
|
||||
<circle cx="9" cy="15" r="0.8" fill="#3B82F6" />
|
||||
<circle cx="15" cy="16" r="0.8" fill="#EF4444" />
|
||||
<circle cx="12" cy="14" r="0.8" fill="#F59E0B" />
|
||||
<path d="M12 2L12.5 3.5L14 4L12.5 4.5L12 6L11.5 4.5L10 4L11.5 3.5L12 2Z" fill="#FBBF24" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
/**
|
||||
* 圣诞帽图标组件
|
||||
*/
|
||||
export const ChristmasHat = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M12 3C12 3 5 10 5 15C5 17.5 7 19 8 19H16C17 19 19 17.5 19 15C19 10 12 3 12 3Z"
|
||||
fill="#EF4444"
|
||||
stroke="#B91C1C"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<circle cx="12" cy="3" r="2.5" fill="white" stroke="#E5E7EB" strokeWidth="1.5" />
|
||||
<rect x="4" y="16" width="16" height="5" rx="2.5" fill="white" stroke="#E5E7EB" strokeWidth="1.5" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
/**
|
||||
* 圣诞节装饰集合
|
||||
* 包含所有圣诞节主题组件的命名空间
|
||||
*/
|
||||
export const ChristmasDecorations = {
|
||||
Tree: ChristmasTree,
|
||||
Hat: ChristmasHat,
|
||||
SnowEffect: SnowEffect,
|
||||
}
|
||||
|
||||
export default ChristmasDecorations
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 元旦/新年主题装饰组件归档
|
||||
* 包含灯笼、福字以及烟花效果的集成组件
|
||||
*
|
||||
* 使用示例：
|
||||
* ```tsx
|
||||
* import { NewYearDecorations } from "@/components/layout/avater-style/NewYear"
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const [showNewYear, setShowNewYear] = useState(false)
|
||||
*
|
||||
* return (
|
||||
* <>
|
||||
* {showNewYear && <NewYearDecorations.FireworksEffect />}
|
||||
* <div onClick={() => setShowNewYear(!showNewYear)}>
|
||||
* <NewYearDecorations.Lantern className="w-8 h-8" />
|
||||
* <NewYearDecorations.Fu
|
||||
* className="w-12 h-12"
|
||||
* show={showNewYear}
|
||||
* />
|
||||
* </div>
|
||||
* </>
|
||||
* )
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
|
||||
import {cn} from "@/lib/utils"
|
||||
import {FireworksEffect} from "@/components/ui/fireworks-effect"
|
||||
|
||||
/**
|
||||
* 红灯笼组件 - 默认头像装饰
|
||||
*/
|
||||
export const Lantern = ({ className }: { className?: string }) => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<path d="M512 80V160" stroke="#FFD700" strokeWidth="32" strokeLinecap="round" />
|
||||
|
||||
<ellipse cx="512" cy="420" rx="300" ry="260" fill="#D92424" />
|
||||
<ellipse cx="512" cy="420" rx="300" ry="260" stroke="#961C1C" strokeWidth="10" />
|
||||
|
||||
<path d="M340 180H684C700 180 712 192 712 208V220H312V208C312 192 324 180 340 180Z" fill="#FFD700" />
|
||||
<path d="M340 620H684C700 620 712 632 712 648V660H312V648C312 632 324 620 340 620Z" fill="#FFD700" />
|
||||
|
||||
<path d="M512 160C512 160 620 250 620 420C620 590 512 680 512 680" stroke="#FFD700" strokeWidth="20" strokeLinecap="round" strokeOpacity="0.4" />
|
||||
<path d="M512 160C512 160 404 250 404 420C404 590 512 680 512 680" stroke="#FFD700" strokeWidth="20" strokeLinecap="round" strokeOpacity="0.4" />
|
||||
<path d="M512 160V680" stroke="#FFD700" strokeWidth="20" strokeOpacity="0.4" />
|
||||
|
||||
<circle cx="512" cy="420" r="80" fill="#FFD700" fillOpacity="0.9" />
|
||||
<text x="512" y="450" fontSize="80" fill="#D92424" textAnchor="middle" fontWeight="bold" fontFamily="serif">福</text>
|
||||
|
||||
<path d="M512 660V720" stroke="#FFD700" strokeWidth="20" />
|
||||
<path d="M480 720H544" stroke="#D92424" strokeWidth="40" strokeLinecap="round" />
|
||||
|
||||
<path d="M492 740V900" stroke="#D92424" strokeWidth="16" strokeLinecap="round" />
|
||||
<path d="M512 740V940" stroke="#D92424" strokeWidth="16" strokeLinecap="round" />
|
||||
<path d="M532 740V900" stroke="#D92424" strokeWidth="16" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
/**
|
||||
* "福"字挂件 - 点击出现的装饰
|
||||
* 一个菱形的福字牌，使用文字渲染确保准确
|
||||
*/
|
||||
export const FuCharacter = ({
|
||||
className,
|
||||
show = true
|
||||
}: {
|
||||
className?: string
|
||||
show?: boolean
|
||||
}) => (
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn(
|
||||
"transition-all duration-500 ease-out origin-center",
|
||||
show ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-50 rotate-[-15deg]",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<path d="M50 0V15" stroke="#F59E0B" strokeWidth="2" />
|
||||
<g transform="rotate(25 50 50)">
|
||||
<rect x="20" y="20" width="60" height="60" rx="2" fill="#D92424" stroke="#F59E0B" strokeWidth="1.5" />
|
||||
<rect x="23" y="23" width="54" height="54" rx="1" stroke="#F59E0B" strokeWidth="1" strokeOpacity="0.5" strokeDasharray="4 2" fill="none" />
|
||||
|
||||
<text
|
||||
x="50"
|
||||
y="60"
|
||||
fontSize="32"
|
||||
fill="#FFD700"
|
||||
textAnchor="middle"
|
||||
fontWeight="bold"
|
||||
fontFamily="'YouYuan', 'Yuanti SC', 'STYuanti', 'HanyiYuanti', 'Comic Sans MS', sans-serif"
|
||||
style={{ letterSpacing: "0px" }}
|
||||
transform="rotate(130 50 50)"
|
||||
>
|
||||
福
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<path d="M50 85V95" stroke="#D92424" strokeWidth="3" />
|
||||
<circle cx="50" cy="95" r="2" fill="#F59E0B" />
|
||||
<path d="M50 95L47 100M50 95L53 100" stroke="#D92424" strokeWidth="1" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
/**
|
||||
* 元旦/新年装饰集合
|
||||
*/
|
||||
export const NewYearDecorations = {
|
||||
Lantern,
|
||||
Fu: FuCharacter,
|
||||
FireworksEffect,
|
||||
}
|
||||
|
||||
export default NewYearDecorations
|
||||
@@ -0,0 +1,48 @@
|
||||
import {AvatarDecorationTheme} from "./types"
|
||||
import {ChristmasDecorations} from "./Christmas"
|
||||
import {NewYearDecorations} from "./NewYear"
|
||||
|
||||
export const DecorationThemes: Record<string, AvatarDecorationTheme> = {
|
||||
christmas: {
|
||||
key: "christmas",
|
||||
MainDecoration: ChristmasDecorations.Hat,
|
||||
InteractionDecoration: ChristmasDecorations.Tree,
|
||||
BackgroundEffect: ChristmasDecorations.SnowEffect,
|
||||
smallMainDecorationConfig: {
|
||||
className: "absolute -top-1 -left-1 w-3 h-3 z-20 rotate-[-20deg] drop-shadow-sm"
|
||||
},
|
||||
largeMainDecorationConfig: {
|
||||
className: "absolute -top-2 -left-1 w-5 h-5 z-20 rotate-[-20deg] drop-shadow-sm"
|
||||
},
|
||||
interactionDecorationConfig: {
|
||||
className: "absolute -top-2 right-2 w-12 h-12 z-0 rotate-[10deg] transition-all duration-500 ease-out"
|
||||
}
|
||||
},
|
||||
newyear: {
|
||||
key: "newyear",
|
||||
MainDecoration: NewYearDecorations.Lantern,
|
||||
InteractionDecoration: NewYearDecorations.Fu,
|
||||
BackgroundEffect: NewYearDecorations.FireworksEffect,
|
||||
smallMainDecorationConfig: {
|
||||
className: "absolute -top-2 -right-1 w-8 h-8 z-20 rotate-[10deg] drop-shadow-md pointer-events-none"
|
||||
},
|
||||
largeMainDecorationConfig: {
|
||||
className: "absolute -top-3 -right-3 w-8 h-8 z-20 rotate-[10deg] drop-shadow-md pointer-events-none"
|
||||
},
|
||||
interactionDecorationConfig: {
|
||||
className: "absolute top-6 left-4 w-10 h-10 z-20 -rotate-[5deg] transition-all duration-500 ease-out"
|
||||
}
|
||||
},
|
||||
none: {
|
||||
key: "none",
|
||||
MainDecoration: () => null,
|
||||
InteractionDecoration: () => null,
|
||||
}
|
||||
}
|
||||
|
||||
/* 可选值: 'christmas', 'newyear', 'none' */
|
||||
export const CURRENT_THEME_KEY: string = "none"
|
||||
|
||||
export const getCurrentTheme = (): AvatarDecorationTheme => {
|
||||
return DecorationThemes[CURRENT_THEME_KEY] || DecorationThemes.none
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import {ComponentType} from "react"
|
||||
|
||||
export interface AvatarDecorationTheme {
|
||||
key: string
|
||||
MainDecoration: ComponentType<{ className?: string }>
|
||||
InteractionDecoration: ComponentType<{ className?: string; show?: boolean }>
|
||||
BackgroundEffect?: ComponentType
|
||||
smallMainDecorationConfig?: {
|
||||
className?: string
|
||||
}
|
||||
largeMainDecorationConfig?: {
|
||||
className?: string
|
||||
}
|
||||
interactionDecorationConfig?: {
|
||||
className?: string
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user