opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(billing): add noise effects to pricing plans and update rendering logic

This commit is contained in:
twwu 2025-08-18 14:31:09 +08:00
parent ece1330567
commit cd760633cb
7 changed files with 115 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/billing/pricing/assets/enterprise-noise.tsx Normal file
View File

@ -0,0 +1,22 @@
const EnterpriseNoise = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
<g opacity='0.05' filter='url(#filter0_g_1_5499)'>
<rect y='0' width='100%' height='96' fill='var(--color-saas-dify-blue-accessible)' />
</g>
<defs>
<filter id='filter0_g_1_5499' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
<feMerge result='effect1_texture_1_5499'>
<feMergeNode in='displacedImage' />
</feMerge>
</filter>
</defs>
</svg>
)
}
export default EnterpriseNoise

4
web/app/components/billing/pricing/assets/index.tsx
View File

@ -6,3 +6,7 @@ export { default as Team } from './team'
export { default as Community } from './community'
export { default as Premium } from './premium'
export { default as Enterprise } from './enterprise'
export { default as NoiseTop } from './noise-top'
export { default as NoiseBottom } from './noise-bottom'
export { default as PremiumNoise } from './premium-noise'
export { default as EnterpriseNoise } from './enterprise-noise'

22
web/app/components/billing/pricing/assets/noise-bottom.tsx Normal file
View File

@ -0,0 +1,22 @@
const NoiseBottom = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
<g opacity='0.1' filter='url(#filter0_g_1_5505)'>
<rect y='52' width='100%' height='96' fill='var(--color-text-quaternary)' />
</g>
<defs>
<filter id='filter0_g_1_5505' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
<feMerge result='effect1_texture_1_5505'>
<feMergeNode in='displacedImage' />
</feMerge>
</filter>
</defs>
</svg>
)
}
export default NoiseBottom

22
web/app/components/billing/pricing/assets/noise-top.tsx Normal file
View File

@ -0,0 +1,22 @@
const NoiseTop = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
<g opacity='0.1' filter='url(#filter0_g_2_13388)'>
<rect y='0' width='100%' height='96' fill='var(--color-text-quaternary)' />
</g>
<defs>
<filter id='filter0_g_2_13388' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
<feMerge result='effect1_texture_2_13388'>
<feMergeNode in='displacedImage' />
</feMerge>
</filter>
</defs>
</svg>
)
}
export default NoiseTop

22
web/app/components/billing/pricing/assets/premium-noise.tsx Normal file
View File

@ -0,0 +1,22 @@
const PremiumNoise = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
<g opacity='0.05' filter='url(#filter0_g_1_5238)'>
<rect y='0' width='100%' height='96' fill='var(--color-text-warning)' />
</g>
<defs>
<filter id='filter0_g_1_5238' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
<feMerge result='effect1_texture_1_5238'>
<feMergeNode in='displacedImage' />
</feMerge>
</filter>
</defs>
</svg>
)
}
export default PremiumNoise

9
web/app/components/billing/pricing/index.tsx
View File

@ -11,6 +11,7 @@ import { useKeyPress } from 'ahooks'
import { useProviderContext } from '@/context/provider-context'
import { useAppContext } from '@/context/app-context'
import { useGetPricingPageLanguage } from '@/context/i18n'
import { NoiseBottom, NoiseTop } from './assets'
export type Category = 'cloud' | 'self'
@ -39,7 +40,10 @@ const Pricing: FC<PricingProps> = ({
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
onClick={e => e.stopPropagation()}
>
<div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr]'>
<div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden'>
<div className='absolute -top-12 left-0 right-0'>
<NoiseTop />
</div>
<Header onClose={onCancel} />
<PlanSwitcher
currentCategory={currentCategory}
@ -54,6 +58,9 @@ const Pricing: FC<PricingProps> = ({
canPay={canPay}
/>
<Footer pricingPageURL={pricingPageURL} />
<div className='absolute -bottom-12 left-0 right-0'>
<NoiseBottom />
</div>
</div>
</div>,
document.body,

17
web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
View File

@ -10,20 +10,31 @@ import { useAppContext } from '@/context/app-context'
import Button from './button'
import List from './list'
import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
import { Community, Enterprise, Premium } from '../../assets'
import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
const STYLE_MAP = {
[SelfHostedPlan.community]: {
icon: <Community />,
bg: '',
noise: null,
},
[SelfHostedPlan.premium]: {
icon: <Premium />,
bg: 'bg-billing-plan-card-premium-bg opacity-10',
noise: (
<div className='absolute -top-12 left-0 right-0'>
<PremiumNoise />
</div>
),
},
[SelfHostedPlan.enterprise]: {
icon: <Enterprise />,
bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
noise: (
<div className='absolute -top-12 left-0 right-0'>
<EnterpriseNoise />
</div>
),
},
}
@ -65,8 +76,10 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
}, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
return (
<div className='relative flex flex-1 flex-col'>
<div className='relative flex flex-1 flex-col overflow-hidden'>
<div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
{/* Noise Effect */}
{STYLE_MAP[plan].noise}
<div className='flex flex-col px-5 py-4'>
<div className=' flex flex-col gap-y-6 px-1 pt-10'>
{STYLE_MAP[plan].icon}