estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: frontend multi models support (#804)

Browse Source 
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
takatost
2023-08-12 00:57:13 +08:00
committed by GitHub
parent 5fa2161b05
commit d10ef17f17
259 changed files with 9105 additions and 1392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,19 +2,22 @@
import { useTranslation } from 'react-i18next'
import { useEffect, useRef, useState } from 'react'
import cn from 'classnames'
import { AtSymbolIcon, CubeTransparentIcon, GlobeAltIcon, UserIcon, UsersIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { GlobeAltIcon as GlobalAltIconSolid, UserIcon as UserIconSolid, UsersIcon as UsersIconSolid } from '@heroicons/react/24/solid'
import AccountPage from './account-page'
import MembersPage from './members-page'
import IntegrationsPage from './Integrations-page'
import LanguagePage from './language-page'
import ProviderPage from './provider-page'
import PluginPage from './plugin-page'
import DataSourcePage from './data-source-page'
import ModelPage from './model-page'
import s from './index.module.css'
import Modal from '@/app/components/base/modal'
import { Database03, PuzzlePiece01 } from '@/app/components/base/icons/src/vender/line/development'
import { Database03 as Database03Solid, PuzzlePiece01 as PuzzlePiece01Solid } from '@/app/components/base/icons/src/vender/solid/development'
import { User01, Users01 } from '@/app/components/base/icons/src/vender/line/users'
import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components/base/icons/src/vender/solid/users'
import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
import { AtSign, XClose } from '@/app/components/base/icons/src/vender/line/general'
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
const iconClassName = `
w-4 h-4 ml-3 mr-2
@@ -35,30 +38,6 @@ export default function AccountSetting({
const [activeMenu, setActiveMenu] = useState(activeTab)
const { t } = useTranslation()
const menuItems = [
{
key: 'account-group',
name: t('common.settings.accountGroup'),
items: [
{
key: 'account',
name: t('common.settings.account'),
icon: <UserIcon className={iconClassName} />,
activeIcon: <UserIconSolid className={iconClassName} />,
},
{
key: 'integrations',
name: t('common.settings.integrations'),
icon: <AtSymbolIcon className={iconClassName} />,
activeIcon: <AtSymbolIcon className={iconClassName} />,
},
{
key: 'language',
name: t('common.settings.language'),
icon: <GlobeAltIcon className={iconClassName} />,
activeIcon: <GlobalAltIconSolid className={iconClassName} />,
},
],
},
{
key: 'workspace-group',
name: t('common.settings.workplaceGroup'),
@@ -66,14 +45,14 @@ export default function AccountSetting({
{
key: 'members',
name: t('common.settings.members'),
icon: <UsersIcon className={iconClassName} />,
activeIcon: <UsersIconSolid className={iconClassName} />,
icon: <Users01 className={iconClassName} />,
activeIcon: <Users01Solid className={iconClassName} />,
},
{
key: 'provider',
name: t('common.settings.provider'),
icon: <CubeTransparentIcon className={iconClassName} />,
activeIcon: <CubeTransparentIcon className={iconClassName} />,
icon: <CubeOutline className={iconClassName} />,
activeIcon: <CubeOutline className={iconClassName} />,
},
{
key: 'data-source',
@@ -89,6 +68,30 @@ export default function AccountSetting({
},
],
},
{
key: 'account-group',
name: t('common.settings.accountGroup'),
items: [
{
key: 'account',
name: t('common.settings.account'),
icon: <User01 className={iconClassName} />,
activeIcon: <User01Solid className={iconClassName} />,
},
{
key: 'integrations',
name: t('common.settings.integrations'),
icon: <AtSign className={iconClassName} />,
activeIcon: <AtSign className={iconClassName} />,
},
{
key: 'language',
name: t('common.settings.language'),
icon: <Globe01 className={iconClassName} />,
activeIcon: <Globe01 className={iconClassName} />,
},
],
},
]
const scrollRef = useRef<HTMLDivElement>(null)
const [scrolled, setScrolled] = useState(false)
@@ -101,6 +104,7 @@ export default function AccountSetting({
}
useEffect(() => {
const targetElement = scrollRef.current
targetElement?.addEventListener('scroll', scrollHandle)
return () => {
targetElement?.removeEventListener('scroll', scrollHandle)
@@ -143,17 +147,19 @@ export default function AccountSetting({
}
</div>
</div>
<div ref={scrollRef} className='relative w-[520px] h-[580px] pb-4 overflow-y-auto'>
<div ref={scrollRef} className='relative w-[824px] h-[720px] pb-4 overflow-y-auto'>
<div className={cn('sticky top-0 px-6 py-4 flex items-center justify-between h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
{[...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)?.name}
<XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
<div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div>
<div className='px-6'>
<div className='px-8 pt-2'>
{activeMenu === 'account' && <AccountPage />}
{activeMenu === 'members' && <MembersPage />}
{activeMenu === 'integrations' && <IntegrationsPage />}
{activeMenu === 'language' && <LanguagePage />}
{activeMenu === 'provider' && <ProviderPage />}
{activeMenu === 'provider' && <ModelPage />}
{activeMenu === 'data-source' && <DataSourcePage />}
{activeMenu === 'plugin' && <PluginPage />}
</div>