tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-12 10:16:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/layout/avater-style/Christmas.tsx
+62 -41
View File
@@ -1,21 +1,21 @@
/**
* 圣诞节主题装饰组件归档
* 包含圣诞树、圣诞帽图标以及下雪效果的集成组件
*
*
* 使用示例：
* ```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"
* <ChristmasDecorations.Tree
* className="w-12 h-12"
* show={showChristmas}
* />
* </div>
@@ -25,64 +25,85 @@
* ```
*/
import { cn } from "@/lib/utils"
import { SnowEffect } from "@/components/ui/snow-effect"
import { cn } from '@/lib/utils';
import { SnowEffect } from '@/components/ui/snow-effect';
/**
* 圣诞树图标组件
*/
export const ChristmasTree = ({
className,
show = true
show = true,
}: {
className?: string
show?: boolean
className?: string;
show?: boolean;
}) => (
<svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/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
'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" />
<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"
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"
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'
/>
<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>
)
);
/**
* 圣诞节装饰集合
@@ -92,6 +113,6 @@ export const ChristmasDecorations = {
Tree: ChristmasTree,
Hat: ChristmasHat,
SnowEffect: SnowEffect,
}
};
export default ChristmasDecorations
export default ChristmasDecorations;
frontend/components/layout/avater-style/NewYear.tsx
+140 -53
View File
@@ -1,21 +1,21 @@
/**
* 元旦/新年主题装饰组件归档
* 包含灯笼、福字以及烟花效果的集成组件
*
*
* 使用示例：
* ```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"
* <NewYearDecorations.Fu
* className="w-12 h-12"
* show={showNewYear}
* />
* </div>
@@ -25,42 +25,107 @@
* ```
*/
import { cn } from "@/lib/utils"
import { FireworksEffect } from "@/components/ui/fireworks-effect"
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"
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" />
<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" />
<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='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" />
<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>
<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='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" />
<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>
)
);
/**
* "福"字挂件 - 点击出现的装饰
@@ -68,46 +133,68 @@ export const Lantern = ({ className }: { className?: string }) => (
*/
export const FuCharacter = ({
className,
show = true
show = true,
}: {
className?: string
show?: boolean
className?: string;
show?: boolean;
}) => (
<svg
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/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
'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" />
<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"
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)"
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" />
<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>
)
);
/**
* 元旦/新年装饰集合
@@ -116,6 +203,6 @@ export const NewYearDecorations = {
Lantern,
Fu: FuCharacter,
FireworksEffect,
}
};
export default NewYearDecorations
export default NewYearDecorations;
frontend/components/layout/avater-style/registry.ts
+25 -19
View File
@@ -1,48 +1,54 @@
import { AvatarDecorationTheme } from "./types"
import { ChristmasDecorations } from "./Christmas"
import { NewYearDecorations } from "./NewYear"
import { AvatarDecorationTheme } from './types';
import { ChristmasDecorations } from './Christmas';
import { NewYearDecorations } from './NewYear';
export const DecorationThemes: Record<string, AvatarDecorationTheme> = {
christmas: {
key: "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"
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"
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"
}
className:
'absolute -top-2 right-2 w-12 h-12 z-0 rotate-[10deg] transition-all duration-500 ease-out',
},
},
newyear: {
key: "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"
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"
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"
}
className:
'absolute top-6 left-4 w-10 h-10 z-20 -rotate-[5deg] transition-all duration-500 ease-out',
},
},
none: {
key: "none",
key: 'none',
MainDecoration: () => null,
InteractionDecoration: () => null,
}
}
},
};
/* 可选值: 'christmas', 'newyear', 'none' */
export const CURRENT_THEME_KEY: string = "none"
export const CURRENT_THEME_KEY: string = 'none';
export const getCurrentTheme = (): AvatarDecorationTheme => {
return DecorationThemes[CURRENT_THEME_KEY] || DecorationThemes.none
}
return DecorationThemes[CURRENT_THEME_KEY] || DecorationThemes.none;
};
frontend/components/layout/avater-style/types.ts
+11 -11
View File
@@ -1,17 +1,17 @@
import { ComponentType } from "react"
import { ComponentType } from 'react';
export interface AvatarDecorationTheme {
key: string
MainDecoration: ComponentType<{ className?: string }>
InteractionDecoration: ComponentType<{ className?: string; show?: boolean }>
BackgroundEffect?: ComponentType
key: string;
MainDecoration: ComponentType<{ className?: string }>;
InteractionDecoration: ComponentType<{ className?: string; show?: boolean }>;
BackgroundEffect?: ComponentType;
smallMainDecorationConfig?: {
className?: string
}
className?: string;
};
largeMainDecorationConfig?: {
className?: string
}
className?: string;
};
interactionDecorationConfig?: {
className?: string
}
className?: string;
};
}