youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: unify account setting tab constants and tighten modal types

Browse Source
This commit is contained in:
lyzno1
2025-11-11 16:16:41 +08:00
parent b344d4add1
commit 3a84a64c32
24 changed files with 84 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/header/account-dropdown/compliance.tsx
View File

@ -16,6 +16,7 @@ import cn from '@/utils/classnames'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import { useModalContext } from '@/context/modal-context'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { getDocDownloadUrl } from '@/service/common'
enum DocName {
@ -38,7 +39,7 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
if (isFreePlan)
setShowPricingModal()
else
setShowAccountSettingModal({ payload: 'billing' })
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
}, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
const { isPending, mutate: downloadCompliance } = useMutation({

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

@ -33,6 +33,7 @@ import cn from '@/utils/classnames'
import { useGlobalPublicStore } from '@/context/global-public-context'
import { useDocLink } from '@/context/i18n'
import { useLogout } from '@/service/use-common'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
export default function AppSelector() {
const itemClassName = `
@ -122,7 +123,7 @@ export default function AppSelector() {
<MenuItem>
<div className={cn(itemClassName,
'data-[active]:bg-state-base-hover',
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
)} onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.MEMBERS })}>
<RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
<div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.settings')}</div>
</div>

3
web/app/components/header/account-setting/api-based-extension-page/selector.tsx
View File

@ -16,6 +16,7 @@ import {
} from '@/app/components/base/icons/src/vender/line/arrows'
import { useModalContext } from '@/context/modal-context'
import { fetchApiBasedExtensionList } from '@/service/common'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
type ApiBasedExtensionSelectorProps = {
value: string
@ -83,7 +84,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
className='flex cursor-pointer items-center text-xs text-text-accent'
onClick={() => {
setOpen(false)
setShowAccountSettingModal({ payload: 'api-based-extension' })
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION })
}}
>
{t('common.apiBasedExtension.selector.manage')}

53
web/app/components/header/account-setting/index.tsx
View File

@ -31,6 +31,10 @@ import { useProviderContext } from '@/context/provider-context'
import { useAppContext } from '@/context/app-context'
import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
import Input from '@/app/components/base/input'
import {
ACCOUNT_SETTING_TAB,
type AccountSettingTab,
} from '@/app/components/header/account-setting/constants'
const iconClassName = `
w-5 h-5 mr-2
@ -38,11 +42,11 @@ const iconClassName = `
type IAccountSettingProps = {
onCancel: () => void
activeTab?: string
activeTab?: AccountSettingTab
}
type GroupItem = {
key: string
key: AccountSettingTab
name: string
description?: string
icon: React.JSX.Element
@ -51,56 +55,67 @@ type GroupItem = {
export default function AccountSetting({
onCancel,
activeTab = 'members',
activeTab = ACCOUNT_SETTING_TAB.MEMBERS,
}: IAccountSettingProps) {
const [activeMenu, setActiveMenu] = useState(activeTab)
const [activeMenu, setActiveMenu] = useState<AccountSettingTab>(activeTab)
const { t } = useTranslation()
const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
const { isCurrentWorkspaceDatasetOperator } = useAppContext()
const workplaceGroupItems = (() => {
const workplaceGroupItems: GroupItem[] = (() => {
if (isCurrentWorkspaceDatasetOperator)
return []
return [
const items: GroupItem[] = [
{
key: 'provider',
key: ACCOUNT_SETTING_TAB.PROVIDER,
name: t('common.settings.provider'),
icon: <RiBrain2Line className={iconClassName} />,
activeIcon: <RiBrain2Fill className={iconClassName} />,
},
{
key: 'members',
key: ACCOUNT_SETTING_TAB.MEMBERS,
name: t('common.settings.members'),
icon: <RiGroup2Line className={iconClassName} />,
activeIcon: <RiGroup2Fill className={iconClassName} />,
},
{
// Use key false to hide this item
key: enableBilling ? 'billing' : false,
]
if (enableBilling) {
items.push({
key: ACCOUNT_SETTING_TAB.BILLING,
name: t('common.settings.billing'),
description: t('billing.plansCommon.receiptInfo'),
icon: <RiMoneyDollarCircleLine className={iconClassName} />,
activeIcon: <RiMoneyDollarCircleFill className={iconClassName} />,
},
})
}
items.push(
{
key: 'data-source',
key: ACCOUNT_SETTING_TAB.DATA_SOURCE,
name: t('common.settings.dataSource'),
icon: <RiDatabase2Line className={iconClassName} />,
activeIcon: <RiDatabase2Fill className={iconClassName} />,
},
{
key: 'api-based-extension',
key: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION,
name: t('common.settings.apiBasedExtension'),
icon: <RiPuzzle2Line className={iconClassName} />,
activeIcon: <RiPuzzle2Fill className={iconClassName} />,
},
{
key: (enableReplaceWebAppLogo || enableBilling) ? 'custom' : false,
)
if (enableReplaceWebAppLogo || enableBilling) {
items.push({
key: ACCOUNT_SETTING_TAB.CUSTOM,
name: t('custom.custom'),
icon: <RiColorFilterLine className={iconClassName} />,
activeIcon: <RiColorFilterFill className={iconClassName} />,
},
].filter(item => !!item.key) as GroupItem[]
})
}
return items
})()
const media = useBreakpoints()
@ -117,7 +132,7 @@ export default function AccountSetting({
name: t('common.settings.generalGroup'),
items: [
{
key: 'language',
key: ACCOUNT_SETTING_TAB.LANGUAGE,
name: t('common.settings.language'),
icon: <RiTranslate2 className={iconClassName} />,
activeIcon: <RiTranslate2 className={iconClassName} />,

3
web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
View File

@ -15,6 +15,7 @@ import { useLanguage } from '../hooks'
import PopupItem from './popup-item'
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
import { useModalContext } from '@/context/modal-context'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { supportFunctionCall } from '@/utils/tool-call'
import { tooltipManager } from '@/app/components/base/tooltip/TooltipManager'
@ -129,7 +130,7 @@ const Popup: FC<PopupProps> = ({
</div>
<div className='sticky bottom-0 flex cursor-pointer items-center rounded-b-lg border-t border-divider-subtle bg-components-panel-bg px-4 py-2 text-text-accent-light-mode-only' onClick={() => {
onHide()
setShowAccountSettingModal({ payload: 'provider' })
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
}}>
<span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />

3
web/app/components/header/index.tsx
View File

@ -19,6 +19,7 @@ import PlanBadge from './plan-badge'
import LicenseNav from './license-env'
import { Plan } from '../billing/type'
import { useGlobalPublicStore } from '@/context/global-public-context'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
const navClassName = `
flex items-center relative px-3 h-8 rounded-xl
@ -38,7 +39,7 @@ const Header = () => {
if (isFreePlan)
setShowPricingModal()
else
setShowAccountSettingModal({ payload: 'billing' })
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
}, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
if (isMobile) {