hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-15 22:06:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat：edu frontend (#17251)

Browse Source 
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
This commit is contained in:
KVOJJJin
2025-04-01 13:58:10 +08:00
committed by GitHub
parent 4b5ec242e7
commit d1801b1f2e
37 changed files with 1115 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/components/app/configuration/dataset-config/index.tsx
View File

@@ -182,7 +182,6 @@ const DatasetConfig: FC = () => {
}, [setDatasetConfigs, datasetConfigsRef])
const handleUpdateCondition = useCallback<HandleUpdateCondition>((id, newCondition) => {
console.log(newCondition, 'newCondition')
const conditions = datasetConfigsRef.current!.metadata_filtering_conditions?.conditions || []
const index = conditions.findIndex(c => c.id === id)
const newInputs = produce(datasetConfigsRef.current!, (draft) => {

1
web/app/components/base/date-and-time-picker/date-picker/index.tsx
View File

@@ -130,7 +130,6 @@ const DatePicker = ({
const handleConfirmDate = () => {
// debugger
console.log(selectedDate, selectedDate?.tz(timezone))
onChange(selectedDate ? selectedDate.tz(timezone) : undefined)
setIsOpen(false)
}

3
web/app/components/base/icons/assets/public/education/triangle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Rectangle 979" d="M0 0H16L9.91493 16.7339C8.76529 19.8955 5.76063 22 2.39658 22H0V0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 214 B

27
web/app/components/base/icons/src/public/education/Triangle.json Normal file
View File

@@ -0,0 +1,27 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "16",
"height": "22",
"viewBox": "0 0 16 22",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Rectangle 979",
"d": "M0 0H16L9.91493 16.7339C8.76529 19.8955 5.76063 22 2.39658 22H0V0Z",
"fill": "white"
},
"children": []
}
]
},
"name": "Triangle"
}

16
web/app/components/base/icons/src/public/education/Triangle.tsx Normal file
View File

@@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Triangle.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Triangle'
export default Icon

1
web/app/components/base/icons/src/public/education/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as Triangle } from './Triangle'

9
web/app/components/base/portal-to-follow-elem/index.tsx
View File

@@ -6,6 +6,7 @@ import {
flip,
offset,
shift,
size,
useDismiss,
useFloating,
useFocus,
@@ -27,6 +28,7 @@ export type PortalToFollowElemOptions = {
open?: boolean
offset?: number | OffsetOptions
onOpenChange?: (open: boolean) => void
triggerPopupSameWidth?: boolean
}
export function usePortalToFollowElem({
@@ -34,6 +36,7 @@ export function usePortalToFollowElem({
open,
offset: offsetValue = 0,
onOpenChange: setControlledOpen,
triggerPopupSameWidth,
}: PortalToFollowElemOptions = {}) {
const setOpen = setControlledOpen
@@ -50,6 +53,12 @@ export function usePortalToFollowElem({
padding: 5,
}),
shift({ padding: 5 }),
size({
apply({ rects, elements }) {
if (triggerPopupSameWidth)
elements.floating.style.width = `${rects.reference.width}px`
},
}),
],
})

57
web/app/components/billing/plan/index.tsx
View File

@@ -2,10 +2,12 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useRouter } from 'next/navigation'
import {
RiBook2Line,
RiBox3Line,
RiFileEditLine,
RiGraduationCapLine,
RiGroup3Line,
RiGroupLine,
RiSquareLine,
@@ -15,7 +17,13 @@ import VectorSpaceInfo from '../usage-info/vector-space-info'
import AppsInfo from '../usage-info/apps-info'
import UpgradeBtn from '../upgrade-btn'
import { useProviderContext } from '@/context/provider-context'
import { useAppContext } from '@/context/app-context'
import Button from '@/app/components/base/button'
import UsageInfo from '@/app/components/billing/usage-info'
import VerifyStateModal from '@/app/education-apply/verify-state-modal'
import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
import { useEducationVerify } from '@/service/use-education'
import { useModalContextSelector } from '@/context/modal-context'
type Props = {
loc: string
@@ -25,7 +33,9 @@ const PlanComp: FC<Props> = ({
loc,
}) => {
const { t } = useTranslation()
const { plan } = useProviderContext()
const router = useRouter()
const { userProfile } = useAppContext()
const { plan, enableEducationPlan, isEducationAccount } = useProviderContext()
const {
type,
} = plan
@@ -35,6 +45,18 @@ const PlanComp: FC<Props> = ({
total,
} = plan
const [showModal, setShowModal] = React.useState(false)
const { mutateAsync } = useEducationVerify()
const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
const handleVerify = () => {
mutateAsync().then((res) => {
localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
router.push(`/education-apply?token=${res.token}`)
setShowAccountSettingModal(null)
}).catch(() => {
setShowModal(true)
})
}
return (
<div className='rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
<div className='p-6 pb-2'>
@@ -58,14 +80,22 @@ const PlanComp: FC<Props> = ({
</div>
<div className='system-xs-regular text-util-colors-gray-gray-600'>{t(`billing.plans.${type}.for`)}</div>
</div>
{(plan.type as any) !== SelfHostedPlan.enterprise && (
<UpgradeBtn
className='shrink-0'
isPlain={type === Plan.team}
isShort
loc={loc}
/>
)}
<div className='flex shrink-0 items-center gap-1'>
{enableEducationPlan && !isEducationAccount && (
<Button variant='ghost' onClick={handleVerify}>
<RiGraduationCapLine className='mr-1 h-4 w-4'/>
{t('education.toVerified')}
</Button>
)}
{(plan.type as any) !== SelfHostedPlan.enterprise && (
<UpgradeBtn
className='shrink-0'
isPlain={type === Plan.team}
isShort
loc={loc}
/>
)}
</div>
</div>
</div>
{/* Plan detail */}
@@ -92,6 +122,15 @@ const PlanComp: FC<Props> = ({
/>
</div>
<VerifyStateModal
showLink
email={userProfile.email}
isShow={showModal}
title={t('education.rejectTitle')}
content={t('education.rejectContent')}
onConfirm={() => setShowModal(false)}
onCancel={() => setShowModal(false)}
/>
</div>
)
}

4
web/app/components/billing/type.ts
View File

@@ -87,6 +87,10 @@ export type CurrentPlanInfoBackend = {
can_replace_logo: boolean
model_load_balancing_enabled: boolean
dataset_operator_enabled: boolean
education: {
enabled: boolean
activated: boolean
}
}
export type SubscriptionItem = {

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

@@ -3,7 +3,18 @@ import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useContext, useContextSelector } from 'use-context-selector'
import { RiAccountCircleLine, RiArrowDownSLine, RiArrowRightUpLine, RiBookOpenLine, RiGithubLine, RiInformation2Line, RiLogoutBoxRLine, RiMap2Line, RiSettings3Line, RiStarLine } from '@remixicon/react'
import {
RiAccountCircleLine,
RiArrowRightUpLine,
RiBookOpenLine,
RiGithubLine,
RiGraduationCapFill,
RiInformation2Line,
RiLogoutBoxRLine,
RiMap2Line,
RiSettings3Line,
RiStarLine,
} from '@remixicon/react'
import Link from 'next/link'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import Indicator from '../indicator'
@@ -11,21 +22,19 @@ import AccountAbout from '../account-about'
import GithubStar from '../github-star'
import Support from './support'
import Compliance from './compliance'
import classNames from '@/utils/classnames'
import PremiumBadge from '@/app/components/base/premium-badge'
import I18n from '@/context/i18n'
import Avatar from '@/app/components/base/avatar'
import { logout } from '@/service/common'
import AppContext, { useAppContext } from '@/context/app-context'
import { useProviderContext } from '@/context/provider-context'
import { useModalContext } from '@/context/modal-context'
import { LanguagesSupported } from '@/i18n/language'
import { LicenseStatus } from '@/types/feature'
import { IS_CLOUD_EDITION } from '@/config'
import cn from '@/utils/classnames'
export type IAppSelector = {
isMobile: boolean
}
export default function AppSelector({ isMobile }: IAppSelector) {
export default function AppSelector() {
const itemClassName = `
flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
@@ -37,6 +46,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
const { locale } = useContext(I18n)
const { t } = useTranslation()
const { userProfile, langeniusVersionInfo, isCurrentWorkspaceOwner } = useAppContext()
const { isEducationAccount } = useProviderContext()
const { setShowAccountSettingModal } = useModalContext()
const handleLogout = async () => {
@@ -58,20 +68,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{
({ open }) => (
<>
<MenuButton
className={`
inline-flex items-center
rounded-[20px] py-1 pl-1 pr-2.5 text-sm
text-text-secondary hover:bg-state-base-hover
mobile:px-1
${open && 'bg-state-base-hover'}
`}
>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-0 sm:mr-2' size={32} />
{!isMobile && <>
{userProfile.name}
<RiArrowDownSLine className="ml-1 h-3 w-3 text-text-tertiary" />
</>}
<MenuButton className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', open && 'bg-background-default-dodge')}>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
</MenuButton>
<Transition
as={Fragment}
@@ -92,7 +90,15 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<MenuItem disabled>
<div className='flex flex-nowrap items-center py-[13px] pl-3 pr-2'>
<div className='grow'>
<div className='system-md-medium break-all text-text-primary'>{userProfile.name}</div>
<div className='system-md-medium break-all text-text-primary'>
{userProfile.name}
{isEducationAccount && (
<PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
<RiGraduationCapFill className='w-3 h-3 mr-1' />
<span className='system-2xs-medium'>EDU</span>
</PremiumBadge>
)}
</div>
<div className='system-xs-regular break-all text-text-tertiary'>{userProfile.email}</div>
</div>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
@@ -101,7 +107,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className="px-1 py-1">
<MenuItem>
<Link
className={classNames(itemClassName, 'group',
className={cn(itemClassName, 'group',
'data-[active]:bg-state-base-hover',
)}
href='/account'
@@ -112,7 +118,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
</Link>
</MenuItem>
<MenuItem>
<div className={classNames(itemClassName,
<div className={cn(itemClassName,
'data-[active]:bg-state-base-hover',
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
<RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
@@ -123,7 +129,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='p-1'>
<MenuItem>
<Link
className={classNames(itemClassName, 'group justify-between',
className={cn(itemClassName, 'group justify-between',
'data-[active]:bg-state-base-hover',
)}
href={
@@ -141,7 +147,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='p-1'>
<MenuItem>
<Link
className={classNames(itemClassName, 'group justify-between',
className={cn(itemClassName, 'group justify-between',
'data-[active]:bg-state-base-hover',
)}
href='https://roadmap.dify.ai'
@@ -153,7 +159,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
</MenuItem>
{systemFeatures.license.status === LicenseStatus.NONE && <MenuItem>
<Link
className={classNames(itemClassName, 'group justify-between',
className={cn(itemClassName, 'group justify-between',
'data-[active]:bg-state-base-hover',
)}
href='https://github.com/langgenius/dify'
@@ -169,7 +175,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{
document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
<MenuItem>
<div className={classNames(itemClassName, 'justify-between',
<div className={cn(itemClassName, 'justify-between',
'data-[active]:bg-state-base-hover',
)} onClick={() => setAboutVisible(true)}>
<RiInformation2Line className='size-4 shrink-0 text-text-tertiary' />
@@ -186,7 +192,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<MenuItem>
<div className='p-1' onClick={() => handleLogout()}>
<div
className={classNames(itemClassName, 'group justify-between',
className={cn(itemClassName, 'group justify-between',
'data-[active]:bg-state-base-hover',
)}
>

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

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'
import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import { RiArrowDownSLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import PlanBadge from '@/app/components/header/plan-badge'
import { switchWorkspace } from '@/service/common'
import { useWorkspacesContext } from '@/context/workspace-context'
import { ToastContext } from '@/app/components/base/toast'
import PlanBadge from '../../plan-badge'
import type { Plan } from '@/app/components/billing/type'
const WorkplaceSelector = () => {

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

@@ -94,10 +94,10 @@ const Header = () => {
}
<div className='flex shrink-0 items-center'>
<EnvNav />
<div className='mr-3'>
<div className='mr-2'>
<PluginsNav />
</div>
<AccountDropdown isMobile={isMobile} />
<AccountDropdown />
</div>
{
(isMobile && isShowNavMenu) && (

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

@@ -1,6 +1,9 @@
import { useProviderContext } from '@/context/provider-context'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiGraduationCapFill,
} from '@remixicon/react'
import { SparklesSoft } from '../../base/icons/src/public/common'
import PremiumBadge from '../../base/premium-badge'
import { Plan } from '../../billing/type'
@@ -13,7 +16,7 @@ type PlanBadgeProps = {
}
const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
const { isFetchedPlan } = useProviderContext()
const { isFetchedPlan, isEducationWorkspace } = useProviderContext()
const { t } = useTranslation()
if (!isFetchedPlan) return null
@@ -39,7 +42,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = fa
if (plan === Plan.professional) {
return <PremiumBadge className='select-none' size='s' color='blue' allowHover={allowHover} onClick={onClick}>
<div className='system-2xs-medium-uppercase'>
<span className='p-1'>
<span className='p-1 inline-flex items-center gap-1'>
{isEducationWorkspace && <RiGraduationCapFill className='w-3 h-3' />}
pro
</span>
</div>

9
web/app/components/swr-initor.tsx
View File

@@ -5,6 +5,10 @@ import { useCallback, useEffect, useState } from 'react'
import type { ReactNode } from 'react'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { fetchSetupStatus } from '@/service/common'
import {
EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
} from '@/app/education-apply/constants'
type SwrInitorProps = {
children: ReactNode
@@ -41,6 +45,11 @@ const SwrInitor = ({
useEffect(() => {
(async () => {
const action = searchParams.get('action')
if (action === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
try {
const isFinished = await isSetupFinished()
if (!isFinished) {