AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-05-29 01:28:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove size prop in PlanBadge component because UpgradeBtn size … (#15544)

Browse Source
This commit is contained in:
NFish 2025-03-12 09:49:15 +08:00 committed by GitHub
parent 5d8b32a249
commit eb9b256ee8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/app/components/header/account-dropdown/index.tsx
View File

@ -106,17 +106,17 @@ export default function AppSelector({ isMobile }: IAppSelector) {
)} )}
href='/account' href='/account'
target='_self' rel='noopener noreferrer'> target='_self' rel='noopener noreferrer'>
<RiAccountCircleLine className='size-4 flex-shrink-0 text-text-tertiary' /> <RiAccountCircleLine className='size-4 shrink-0 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div>
<RiArrowRightUpLine className='size-[14px] flex-shrink-0 text-text-tertiary' /> <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
</Link>} </Link>}
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
{({ active }) => <div className={classNames(itemClassName, {({ active }) => <div className={classNames(itemClassName,
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}> )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
<RiSettings3Line className='size-4 flex-shrink-0 text-text-tertiary' /> <RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div>
</div>} </div>}
</Menu.Item> </Menu.Item>
</div> </div>
@ -130,9 +130,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/` locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
} }
target='_blank' rel='noopener noreferrer'> target='_blank' rel='noopener noreferrer'>
<RiBookOpenLine className='flex-shrink-0 size-4 text-text-tertiary' /> <RiBookOpenLine className='shrink-0 size-4 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div>
<RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' /> <RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
</Link>} </Link>}
</Menu.Item> </Menu.Item>
<Support /> <Support />
@ -146,9 +146,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
)} )}
href='https://roadmap.dify.ai' href='https://roadmap.dify.ai'
target='_blank' rel='noopener noreferrer'> target='_blank' rel='noopener noreferrer'>
<RiMap2Line className='flex-shrink-0 size-4 text-text-tertiary' /> <RiMap2Line className='shrink-0 size-4 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div>
<RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' /> <RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
</Link>} </Link>}
</Menu.Item> </Menu.Item>
{systemFeatures.license.status === LicenseStatus.NONE && <Menu.Item> {systemFeatures.license.status === LicenseStatus.NONE && <Menu.Item>
@ -156,12 +156,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} )}
href='https://github.com/langgenius/dify/stargazers' href='https://github.com/langgenius/dify'
target='_blank' rel='noopener noreferrer'> target='_blank' rel='noopener noreferrer'>
<RiGithubLine className='flex-shrink-0 size-4 text-text-tertiary' /> <RiGithubLine className='shrink-0 size-4 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div>
<div className='flex items-center gap-0.5 px-[5px] py-[3px] border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm'> <div className='flex items-center gap-0.5 px-[5px] py-[3px] border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm'>
<RiStarLine className='flex-shrink-0 size-3 text-text-tertiary' /> <RiStarLine className='shrink-0 size-3 text-text-tertiary' />
<GithubStar className='system-2xs-medium-uppercase text-text-tertiary' /> <GithubStar className='system-2xs-medium-uppercase text-text-tertiary' />
</div> </div>
</Link>} </Link>}
@ -172,9 +172,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{({ active }) => <div className={classNames(itemClassName, 'justify-between', {({ active }) => <div className={classNames(itemClassName, 'justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} onClick={() => setAboutVisible(true)}> )} onClick={() => setAboutVisible(true)}>
<RiInformation2Line className='flex-shrink-0 size-4 text-text-tertiary' /> <RiInformation2Line className='shrink-0 size-4 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div>
<div className='flex-shrink-0 flex items-center'> <div className='shrink-0 flex items-center'>
<div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div> <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
<Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} /> <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
</div> </div>
@ -190,8 +190,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} )}
> >
<RiLogoutBoxRLine className='flex-shrink-0 size-4 text-text-tertiary' /> <RiLogoutBoxRLine className='shrink-0 size-4 text-text-tertiary' />
<div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div> <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div>
</div> </div>
</div>} </div>}
</Menu.Item> </Menu.Item>

2
web/app/components/header/account-dropdown/workplace-selector/index.tsx
View File

@ -71,7 +71,7 @@ const WorkplaceSelector = () => {
<div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}> <div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
<div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div> <div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
<div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div> <div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
<PlanBadge size='s' plan={workspace.plan as Plan} /> <PlanBadge plan={workspace.plan as Plan} />
</div> </div>
)) ))
} }

16
web/app/components/header/plan-badge/index.tsx
View File

@ -1,5 +1,4 @@
import { useProviderContext } from '@/context/provider-context' import { useProviderContext } from '@/context/provider-context'
import classNames from '@/utils/classnames'
import type { FC } from 'react' import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { SparklesSoft } from '../../base/icons/src/public/common' import { SparklesSoft } from '../../base/icons/src/public/common'
@ -8,13 +7,12 @@ import { Plan } from '../../billing/type'
type PlanBadgeProps = { type PlanBadgeProps = {
plan: Plan plan: Plan
size?: 's' | 'm'
allowHover?: boolean allowHover?: boolean
sandboxAsUpgrade?: boolean sandboxAsUpgrade?: boolean
onClick?: () => void onClick?: () => void
} }
const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAsUpgrade = false, onClick }) => { const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
const { isFetchedPlan } = useProviderContext() const { isFetchedPlan } = useProviderContext()
const { t } = useTranslation() const { t } = useTranslation()
@ -30,8 +28,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
</PremiumBadge> </PremiumBadge>
} }
if (plan === Plan.sandbox) { if (plan === Plan.sandbox) {
return <PremiumBadge className='select-none' size={size} color='gray' allowHover={allowHover} onClick={onClick}> return <PremiumBadge className='select-none' size='s' color='gray' allowHover={allowHover} onClick={onClick}>
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}> <div className='system-2xs-medium-uppercase'>
<span className='p-1'> <span className='p-1'>
{plan} {plan}
</span> </span>
@ -39,8 +37,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
</PremiumBadge> </PremiumBadge>
} }
if (plan === Plan.professional) { if (plan === Plan.professional) {
return <PremiumBadge className='select-none' size={size} color='blue' allowHover={allowHover} onClick={onClick}> return <PremiumBadge className='select-none' size='s' color='blue' allowHover={allowHover} onClick={onClick}>
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}> <div className='system-2xs-medium-uppercase'>
<span className='p-1'> <span className='p-1'>
pro pro
</span> </span>
@ -48,8 +46,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
</PremiumBadge> </PremiumBadge>
} }
if (plan === Plan.team) { if (plan === Plan.team) {
return <PremiumBadge className='select-none' size={size} color='indigo' allowHover={allowHover} onClick={onClick}> return <PremiumBadge className='select-none' size='s' color='indigo' allowHover={allowHover} onClick={onClick}>
<div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}> <div className='system-2xs-medium-uppercase'>
<span className='p-1'> <span className='p-1'>
{plan} {plan}
</span> </span>