dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react'
+import { SelfHostedPlan } from '../../../type'
+import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
+import { RiArrowRightLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+
+const BUTTON_CLASSNAME = {
+  [SelfHostedPlan.community]: 'text-text-primary bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover',
+  [SelfHostedPlan.premium]: 'text-background-default bg-saas-background-inverted hover:bg-saas-background-inverted-hover',
+  [SelfHostedPlan.enterprise]: 'text-text-primary-on-surface bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover',
+}
+
+type ButtonProps = {
+  plan: SelfHostedPlan
+  handleGetPayUrl: () => void
+}
+
+const Button = ({
+  plan,
+  handleGetPayUrl,
+}: ButtonProps) => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  const i18nPrefix = `billing.plans.${plan}`
+  const isPremiumPlan = plan === SelfHostedPlan.premium
+  const AwsMarketplace = useMemo(() => {
+    return theme === Theme.light ? AwsMarketplaceLight : AwsMarketplaceDark
+  }, [theme])
+
+  return (
+    <button type="button"
+      className={cn(
+        'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
+        BUTTON_CLASSNAME[plan],
+        isPremiumPlan && 'py-2',
+      )}
+      onClick={handleGetPayUrl}
+    >
+      <div className='flex grow items-center gap-x-2'>
+        <span>{t(`${i18nPrefix}.btnText`)}</span>
+        {isPremiumPlan && (
+          <span className='pb-px pt-[7px]'>
+            <AwsMarketplace className='h-6' />
+          </span>
+        )}
+      </div>
+      <RiArrowRightLine className='size-5 shrink-0' />
+    </button>
+  )
+}
+
+export default React.memo(Button)
--- a/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -0,0 +1,124 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SelfHostedPlan } from '../../../type'
+import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
+import Toast from '../../../../base/toast'
+import cn from '@/utils/classnames'
+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, 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 -z-10'>
+        <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 -z-10'>
+        <EnterpriseNoise />
+      </div>
+    ),
+  },
+}
+
+type SelfHostedPlanItemProps = {
+  plan: SelfHostedPlan
+}
+
+const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
+  plan,
+}) => {
+  const { t } = useTranslation()
+  const i18nPrefix = `billing.plans.${plan}`
+  const isFreePlan = plan === SelfHostedPlan.community
+  const isPremiumPlan = plan === SelfHostedPlan.premium
+  const isEnterprisePlan = plan === SelfHostedPlan.enterprise
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const handleGetPayUrl = useCallback(() => {
+    // Only workspace manager can buy plan
+    if (!isCurrentWorkspaceManager) {
+      Toast.notify({
+        type: 'error',
+        message: t('billing.buyPermissionDeniedTip'),
+        className: 'z-[1001]',
+      })
+      return
+    }
+    if (isFreePlan) {
+      window.location.href = getStartedWithCommunityUrl
+      return
+    }
+    if (isPremiumPlan) {
+      window.location.href = getWithPremiumUrl
+      return
+    }
+
+    if (isEnterprisePlan)
+      window.location.href = contactSalesUrl
+  }, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
+
+  return (
+    <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}
+          <div className='flex min-h-[104px] flex-col gap-y-2'>
+            <div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
+            <div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
+          </div>
+        </div>
+        {/* Price */}
+        <div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
+          <div className='title-4xl-semi-bold shrink-0 text-text-primary'>{t(`${i18nPrefix}.price`)}</div>
+          {!isFreePlan && (
+            <span className='system-md-regular pb-0.5 text-text-tertiary'>
+              {t(`${i18nPrefix}.priceTip`)}
+            </span>
+          )}
+        </div>
+        <Button
+          plan={plan}
+          handleGetPayUrl={handleGetPayUrl}
+        />
+      </div>
+      <List plan={plan} />
+      {isPremiumPlan && (
+        <div className='flex grow flex-col justify-end gap-y-2 p-6 pt-0'>
+          <div className='flex items-center gap-x-1'>
+            <div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
+              <Azure />
+            </div>
+            <div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
+              <GoogleCloud />
+            </div>
+          </div>
+          <span className='system-xs-regular text-text-tertiary'>
+            {t('billing.plans.premium.comingSoon')}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(SelfHostedPlanItem)
--- a/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
+++ b/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import type { SelfHostedPlan } from '@/app/components/billing/type'
+import { Trans, useTranslation } from 'react-i18next'
+import Item from './item'
+
+type ListProps = {
+  plan: SelfHostedPlan
+}
+
+const List = ({
+  plan,
+}: ListProps) => {
+  const { t } = useTranslation()
+  const i18nPrefix = `billing.plans.${plan}`
+  const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
+
+  return (
+    <div className='flex flex-col gap-y-[10px] p-6'>
+      <div className='system-md-semibold text-text-secondary'>
+        <Trans
+          i18nKey={t(`${i18nPrefix}.includesTitle`)}
+          components={{ highlight: <span className='text-text-warning'></span> }}
+        />
+      </div>
+      {features.map(feature =>
+        <Item
+          key={`${plan}-${feature}`}
+          label={feature}
+        />,
+      )}
+    </div>
+  )
+}
+
+export default React.memo(List)
--- a/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx
+++ b/dify/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { RiCheckLine } from '@remixicon/react'
+
+type ItemProps = {
+  label: string
+}
+
+const Item = ({
+  label,
+}: ItemProps) => {
+  return (
+    <div className='flex items-center gap-x-1'>
+      <div className='py-px'>
+        <RiCheckLine className='size-4 shrink-0 text-text-tertiary' />
+      </div>
+      <span className='system-sm-regular grow text-text-secondary'>{label}</span>
+    </div>
+  )
+}
+
+export default React.memo(Item)