mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 10:38:32 +08:00
312 lines
13 KiB
TypeScript
312 lines
13 KiB
TypeScript
'use client'
|
|
import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
|
|
import { Button } from '@langgenius/dify-ui/button'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { ScrollArea } from '@langgenius/dify-ui/scroll-area'
|
|
import { useSuspenseQuery } from '@tanstack/react-query'
|
|
import { useAtomValue } from 'jotai'
|
|
import { useCallback, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import BillingPage from '@/app/components/billing/billing-page'
|
|
import CustomPage from '@/app/components/custom/custom-page'
|
|
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
|
|
import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
|
|
import { IS_CLOUD_EDITION } from '@/config'
|
|
import { workspacePermissionKeysAtom } from '@/context/permission-state'
|
|
import { useProviderContext } from '@/context/provider-context'
|
|
import { isCurrentWorkspaceManagerAtom } from '@/context/workspace-state'
|
|
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
|
|
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
|
import { BillingPermission, hasPermission } from '@/utils/permission'
|
|
import AccessRulesPage from './access-rules-page'
|
|
import { ApiBasedExtensionPage } from './api-based-extension-page'
|
|
import DataSourcePage from './data-source-page-new'
|
|
import MembersPage from './members-page'
|
|
import ModelProviderPage from './model-provider-page'
|
|
import { useResetModelProviderListExpanded } from './model-provider-page/atoms'
|
|
import PermissionsPage from './permissions-page'
|
|
import PreferencePage from './preference-page'
|
|
import WorkflowLogArchivesPage from './workflow-log-archives-page'
|
|
|
|
const iconClassName = `
|
|
w-4 h-4 mr-2
|
|
`
|
|
|
|
type IAccountSettingProps = {
|
|
onCancelAction: () => void
|
|
activeTab: AccountSettingTab
|
|
onTabChangeAction: (tab: AccountSettingTab) => void
|
|
}
|
|
|
|
type GroupItem = {
|
|
key: AccountSettingTab
|
|
name: string
|
|
title?: string
|
|
description?: string
|
|
icon: React.JSX.Element
|
|
activeIcon: React.JSX.Element
|
|
}
|
|
|
|
export default function AccountSetting({
|
|
onCancelAction,
|
|
activeTab,
|
|
onTabChangeAction,
|
|
}: IAccountSettingProps) {
|
|
const resetModelProviderListExpanded = useResetModelProviderListExpanded()
|
|
const { t } = useTranslation()
|
|
const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
|
|
const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
|
|
const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
|
|
const isCurrentWorkspaceManager = useAtomValue(isCurrentWorkspaceManagerAtom)
|
|
const isRbacEnabled = systemFeatures.rbac_enabled
|
|
const canManageWorkspaceRoles =
|
|
isRbacEnabled && hasPermission(workspacePermissionKeys, 'workspace.role.manage')
|
|
const canViewBilling =
|
|
enableBilling && hasPermission(workspacePermissionKeys, BillingPermission.View)
|
|
const canViewWorkflowLogArchives = IS_CLOUD_EDITION && isCurrentWorkspaceManager
|
|
// Keep legacy `language` deep links opening Preferences during the tab rename migration.
|
|
const normalizedActiveTab =
|
|
activeTab === ACCOUNT_SETTING_TAB.LANGUAGE ? ACCOUNT_SETTING_TAB.PREFERENCES : activeTab
|
|
const activeMenu = (() => {
|
|
if (normalizedActiveTab === ACCOUNT_SETTING_TAB.BILLING && !canViewBilling)
|
|
return ACCOUNT_SETTING_TAB.PREFERENCES
|
|
if (
|
|
normalizedActiveTab === ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES &&
|
|
!canViewWorkflowLogArchives
|
|
)
|
|
return ACCOUNT_SETTING_TAB.MEMBERS
|
|
if (
|
|
(normalizedActiveTab === ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS ||
|
|
normalizedActiveTab === ACCOUNT_SETTING_TAB.PERMISSION_SET) &&
|
|
!canManageWorkspaceRoles
|
|
)
|
|
return ACCOUNT_SETTING_TAB.MEMBERS
|
|
return normalizedActiveTab
|
|
})()
|
|
const scrollContainerRef = useRef<HTMLDivElement>(null)
|
|
|
|
const settingItems: GroupItem[] = [
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.PROVIDER,
|
|
name: t(($) => $['settings.provider'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-brain-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-brain-2-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.MEMBERS,
|
|
name: t(($) => $['settings.members'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-group-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-group-2-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS,
|
|
name: t(($) => $['settings.rolesAndPermissions'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-shield-user-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-shield-user-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.PERMISSION_SET,
|
|
name: t(($) => $['settings.permissionSet'], { ns: 'common' }),
|
|
description: t(($) => $['settings.permissionSetDescription'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-lock-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-lock-2-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.BILLING,
|
|
name: t(($) => $['settings.billing'], { ns: 'common' }),
|
|
description: t(($) => $['plansCommon.receiptInfo'], { ns: 'billing' }),
|
|
icon: <span className={cn('i-ri-money-dollar-circle-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-money-dollar-circle-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES,
|
|
name: t(($) => $['archives.title'], { ns: 'appLog' }),
|
|
description: t(($) => $['archives.description'], { ns: 'appLog' }),
|
|
icon: <span className={cn('i-ri-archive-drawer-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-archive-drawer-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.DATA_SOURCE,
|
|
name: t(($) => $['settings.dataSource'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-database-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-database-2-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.API_BASED_EXTENSION,
|
|
name: t(($) => $['settings.customEndpoint'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-puzzle-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-puzzle-2-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.CUSTOM,
|
|
name: t(($) => $.custom, { ns: 'custom' }),
|
|
icon: <span className={cn('i-ri-color-filter-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-color-filter-fill', iconClassName)} />,
|
|
},
|
|
{
|
|
key: ACCOUNT_SETTING_TAB.PREFERENCES,
|
|
name: t(($) => $['settings.preferences'], { ns: 'common' }),
|
|
title: t(($) => $['account.general'], { ns: 'common' }),
|
|
icon: <span className={cn('i-ri-equalizer-2-line', iconClassName)} />,
|
|
activeIcon: <span className={cn('i-ri-equalizer-2-fill', iconClassName)} />,
|
|
},
|
|
]
|
|
const activeItem = settingItems.find((item) => item.key === activeMenu)
|
|
|
|
const visibleSettingItems: GroupItem[] = (() => {
|
|
const visibleTabs: AccountSettingTab[] = []
|
|
|
|
visibleTabs.push(ACCOUNT_SETTING_TAB.MEMBERS)
|
|
|
|
if (canManageWorkspaceRoles) {
|
|
visibleTabs.push(ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS)
|
|
visibleTabs.push(ACCOUNT_SETTING_TAB.PERMISSION_SET)
|
|
}
|
|
|
|
if (canViewBilling) visibleTabs.push(ACCOUNT_SETTING_TAB.BILLING)
|
|
|
|
if (enableReplaceWebAppLogo || enableBilling) visibleTabs.push(ACCOUNT_SETTING_TAB.CUSTOM)
|
|
|
|
if (canViewWorkflowLogArchives) visibleTabs.push(ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES)
|
|
|
|
return visibleTabs
|
|
.map((tab) => settingItems.find((item) => item.key === tab))
|
|
.filter((item): item is GroupItem => Boolean(item))
|
|
})()
|
|
|
|
const media = useBreakpoints()
|
|
const isMobile = media === MediaType.mobile
|
|
const preferenceItem = settingItems.find((item) => item.key === ACCOUNT_SETTING_TAB.PREFERENCES)
|
|
|
|
const menuItems = [
|
|
{
|
|
key: 'workspace-group',
|
|
name: t(($) => $['settings.workspace'], { ns: 'common' }),
|
|
items: visibleSettingItems,
|
|
},
|
|
{
|
|
key: 'user-group',
|
|
items: preferenceItem ? [preferenceItem] : [],
|
|
},
|
|
]
|
|
|
|
const [searchValue, setSearchValue] = useState<string>('')
|
|
|
|
const handleTabChange = useCallback(
|
|
(tab: AccountSettingTab) => {
|
|
if (tab === ACCOUNT_SETTING_TAB.PROVIDER) resetModelProviderListExpanded()
|
|
|
|
onTabChangeAction(tab)
|
|
},
|
|
[onTabChangeAction, resetModelProviderListExpanded],
|
|
)
|
|
|
|
const handleClose = useCallback(() => {
|
|
resetModelProviderListExpanded()
|
|
onCancelAction()
|
|
}, [onCancelAction, resetModelProviderListExpanded])
|
|
|
|
return (
|
|
<MenuDialog show onClose={handleClose}>
|
|
<div className="flex h-screen w-full max-w-full pl-0 sm:pl-[232px]">
|
|
<div className="flex w-[44px] shrink-0 flex-col pr-6 pl-4 sm:w-[224px]">
|
|
<div className="mt-6 mb-8 flex h-[38px] items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
|
|
{t(($) => $['settings.settings'], { ns: 'common' })}
|
|
</div>
|
|
<div className="w-full">
|
|
{menuItems.map((menuItem) => (
|
|
<div
|
|
key={menuItem.key}
|
|
className={cn(menuItem.key === 'workspace-group' ? 'mb-2' : 'mt-2')}
|
|
>
|
|
{menuItem.name && !isMobile && (
|
|
<div className="flex h-7 items-center px-3 system-xs-medium-uppercase text-text-tertiary">
|
|
{menuItem.name}
|
|
</div>
|
|
)}
|
|
<div
|
|
className={cn(
|
|
menuItem.key === 'user-group' && 'border-t border-divider-subtle pt-3',
|
|
)}
|
|
>
|
|
{menuItem.items.map((item) => (
|
|
<button
|
|
type="button"
|
|
key={item.key}
|
|
className={cn(
|
|
'mb-0.5 flex h-8 w-full items-center rounded-lg px-3 text-left text-sm',
|
|
activeMenu === item.key
|
|
? 'bg-state-base-active system-sm-semibold text-components-menu-item-text-active'
|
|
: 'system-sm-medium text-components-menu-item-text',
|
|
)}
|
|
aria-label={item.name}
|
|
title={item.name}
|
|
onClick={() => {
|
|
handleTabChange(item.key)
|
|
}}
|
|
>
|
|
{activeMenu === item.key ? item.activeIcon : item.icon}
|
|
{!isMobile && <div className="truncate">{item.name}</div>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="relative flex min-h-0 w-[824px]">
|
|
<ScrollArea
|
|
ref={scrollContainerRef}
|
|
className="h-full min-h-0 flex-1 bg-components-panel-bg"
|
|
slotClassNames={{
|
|
viewport: 'overscroll-contain',
|
|
content: 'min-h-full pb-4',
|
|
}}
|
|
>
|
|
<div className="sticky top-0 z-20 mx-8 flex min-h-[60px] items-end bg-components-panel-bg pt-8 pb-2">
|
|
<div className="min-w-0 flex-1 title-2xl-semi-bold text-text-primary">
|
|
{activeItem?.title ?? activeItem?.name}
|
|
{activeItem?.description && (
|
|
<div className="mt-1 system-sm-regular wrap-break-word whitespace-normal text-text-tertiary">
|
|
{activeItem?.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="fixed top-6 right-6 flex shrink-0 flex-col items-center">
|
|
<Button
|
|
variant="tertiary"
|
|
size="large"
|
|
className="px-2"
|
|
aria-label={t(($) => $['operation.close'], { ns: 'common' })}
|
|
onClick={handleClose}
|
|
>
|
|
<span className="i-ri-close-line size-5" />
|
|
</Button>
|
|
<div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
|
|
</div>
|
|
</div>
|
|
<div className="px-4 pt-6 sm:px-8">
|
|
{activeMenu === ACCOUNT_SETTING_TAB.PROVIDER && (
|
|
<ModelProviderPage searchText={searchValue} onSearchTextChange={setSearchValue} />
|
|
)}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.MEMBERS && <MembersPage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.ROLES_AND_PERMISSIONS && (
|
|
<PermissionsPage containerRef={scrollContainerRef} />
|
|
)}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.PERMISSION_SET && <AccessRulesPage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.BILLING && <BillingPage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.WORKFLOW_LOG_ARCHIVES && (
|
|
<WorkflowLogArchivesPage />
|
|
)}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.DATA_SOURCE && <DataSourcePage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.API_BASED_EXTENSION && <ApiBasedExtensionPage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.CUSTOM && <CustomPage />}
|
|
{activeMenu === ACCOUNT_SETTING_TAB.PREFERENCES && <PreferencePage />}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</div>
|
|
</MenuDialog>
|
|
)
|
|
}
|