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

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/components/develop/code.tsx
View File

@@ -7,7 +7,7 @@ import {
useRef,
useState,
} from 'react'
import { Tab } from '@headlessui/react'
import { Tab, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag'
import classNames from '@/utils/classnames'
import { writeTextToClipboard } from '@/utils/clipboard'
@@ -24,7 +24,7 @@ const languageNames = {
} as { [key: string]: string }
type IChildrenProps = {
children: React.ReactElement
children: React.ReactNode
[key: string]: any
}
@@ -84,7 +84,7 @@ function CopyButton({ code }: { code: string }) {
copied && '-translate-y-1.5 opacity-0',
)}
>
<ClipboardIcon className="w-5 h-5 transition-colors fill-zinc-500/20 stroke-zinc-500 group-hover/button:stroke-zinc-400" />
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
Copy
</span>
<span
@@ -105,9 +105,9 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
return null
return (
<div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 bg-white/2.5 px-4 dark:border-b-white/5 dark:bg-white/1">
<div className="border-b-white/7.5 bg-white/2.5 dark:bg-white/1 flex h-9 items-center gap-2 border-y border-t-transparent bg-zinc-900 px-4 dark:border-b-white/5">
{tag && (
<div className="flex dark">
<div className="dark flex">
<Tag variant="small">{tag}</Tag>
</div>
)}
@@ -122,7 +122,7 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
}
type ICodePanelProps = {
children: React.ReactElement
children: React.ReactNode
tag?: string
code?: string
label?: string
@@ -132,7 +132,7 @@ function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps)
const child = Children.only(children)
return (
<div className="group dark:bg-white/2.5">
<div className="dark:bg-white/2.5 group">
<CodePanelHeader
tag={child.props.tag ?? tag}
label={child.props.label ?? label}
@@ -141,7 +141,7 @@ function CodePanel({ tag, label, code, children, targetCode }: ICodePanelProps)
{/* <pre className="p-4 overflow-x-auto text-xs text-white">{children}</pre> */}
{/* <CopyButton code={child.props.code ?? code} /> */}
{/* <CopyButton code={child.props.children.props.children} /> */}
<pre className="p-4 overflow-x-auto text-xs text-white">{targetCode || children}</pre>
<pre className="overflow-x-auto p-4 text-xs text-white">{targetCode || children}</pre>
<CopyButton code={targetCode || child.props.children.props.children} />
</div>
</div>
@@ -157,12 +157,12 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
return (
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
{title && (
<h3 className="pt-3 mr-auto text-xs font-semibold text-white">
<h3 className="mr-auto pt-3 text-xs font-semibold text-white">
{title}
</h3>
)}
{hasTabs && (
<Tab.List className="flex gap-4 -mb-px text-xs font-medium">
<TabList className="-mb-px flex gap-4 text-xs font-medium">
{Children.map(children, (child, childIndex) => (
<Tab
className={classNames(
@@ -175,14 +175,14 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
{getPanelTitle(child.props.children.props)}
</Tab>
))}
</Tab.List>
</TabList>
)}
</div>
)
}
type ICodeGroupPanelsProps = {
children: React.ReactElement
children: React.ReactNode
[key: string]: any
}
function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {
@@ -190,13 +190,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro
if (hasTabs) {
return (
<Tab.Panels>
<TabPanels>
{Children.map(children, child => (
<Tab.Panel>
<TabPanel>
<CodePanel {...props}>{child}</CodePanel>
</Tab.Panel>
</TabPanel>
))}
</Tab.Panels>
</TabPanels>
)
}
@@ -271,7 +271,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
<CodeGroupContext.Provider value={true}>
<Container
{...containerProps}
className="my-6 overflow-hidden shadow-md not-prose rounded-2xl bg-zinc-900 dark:ring-1 dark:ring-white/10"
className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
>
<CodeGroupHeader title={title} {...headerProps}>
{children}

12
web/app/components/develop/doc.tsx
View File

@@ -83,8 +83,8 @@ const Doc = ({ appDetail }: IDocProps) => {
<div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
{isTocExpanded
? (
<nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<nav className="toc w-full rounded-lg bg-gray-50 p-4 shadow-md">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
<button
onClick={() => setIsTocExpanded(false)}
@@ -98,7 +98,7 @@ const Doc = ({ appDetail }: IDocProps) => {
<li key={index}>
<a
href={item.href}
className="text-gray-600 hover:text-gray-900 hover:underline transition-colors duration-200"
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
onClick={e => handleTocClick(e, item)}
>
{item.text}
@@ -111,13 +111,13 @@ const Doc = ({ appDetail }: IDocProps) => {
: (
<button
onClick={() => setIsTocExpanded(true)}
className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
>
<RiListUnordered className="w-6 h-6" />
<RiListUnordered className="h-6 w-6" />
</button>
)}
</div>
<article className="prose prose-xl" >
<article className="prose-xl prose" >
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
(() => {
switch (locale) {

18
web/app/components/develop/index.tsx
View File

@@ -24,24 +24,24 @@ const DevelopMain = ({ appId }: IDevelopMainProps) => {
}
return (
<div className='relative flex flex-col h-full overflow-hidden'>
<div className='flex items-center justify-between flex-shrink-0 px-6 border-b border-solid py-2 border-b-gray-100'>
<div className='relative flex h-full flex-col overflow-hidden'>
<div className='flex shrink-0 items-center justify-between border-b border-solid border-b-gray-100 px-6 py-2'>
<div className='text-lg font-medium text-gray-900'></div>
<div className='flex items-center flex-wrap gap-y-1'>
<InputCopy className='flex-shrink-0 mr-1 w-52 sm:w-80' value={appDetail.api_base_url}>
<div className={`ml-2 border border-gray-200 border-solid flex-shrink-0 px-2 py-0.5 rounded-[6px] text-gray-500 text-[0.625rem] ${s.customApi}`}>
<div className='flex flex-wrap items-center gap-y-1'>
<InputCopy className='mr-1 w-52 shrink-0 sm:w-80' value={appDetail.api_base_url}>
<div className={`ml-2 shrink-0 rounded-[6px] border border-solid border-gray-200 px-2 py-0.5 text-[0.625rem] text-gray-500 ${s.customApi}`}>
{t('appApi.apiServer')}
</div>
</InputCopy>
<div className={`flex items-center h-9 px-3 rounded-lg
text-[13px] font-normal mr-2 ${appDetail.enable_api ? 'text-green-500 bg-green-50' : 'text-yellow-500 bg-yellow-50'}`}>
<div className={`mr-2 flex h-9 items-center rounded-lg
px-3 text-[13px] font-normal ${appDetail.enable_api ? 'bg-green-50 text-green-500' : 'bg-yellow-50 text-yellow-500'}`}>
<div className='mr-1'>{t('appApi.status')}</div>
<div className='font-semibold'>{appDetail.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
</div>
<SecretKeyButton className='flex-shrink-0' appId={appId} />
<SecretKeyButton className='shrink-0' appId={appId} />
</div>
</div>
<div className='px-4 sm:px-10 py-4 overflow-auto grow'>
<div className='grow overflow-auto px-4 py-4 sm:px-10'>
<Doc appDetail={appDetail} />
</div>
</div>

16
web/app/components/develop/md.tsx
View File

@@ -42,12 +42,12 @@ export const Heading = function H2({
<>
<span id={name?.replace(/^#/, '')} className='relative -top-28' />
<div className="flex items-center gap-x-3" >
<span className={`font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ${style}`}>{method}</span>
<span className={`rounded-lg px-1.5 font-mono text-[0.625rem] font-semibold leading-6 ring-1 ring-inset ${style}`}>{method}</span>
{/* <span className="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"></span> */}
<span className="font-mono text-xs text-zinc-400">{url}</span>
</div>
<h2 className='mt-2 scroll-mt-32'>
<a href={name} className='no-underline group text-inherit hover:text-inherit'>{title}</a>
<a href={name} className='group text-inherit no-underline hover:text-inherit'>{title}</a>
</h2>
</>
@@ -56,7 +56,7 @@ export const Heading = function H2({
export function Row({ children }: IChildrenProps) {
return (
<div className="grid items-start grid-cols-1 gap-x-16 gap-y-10 xl:!max-w-none xl:grid-cols-2">
<div className="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:!max-w-none xl:grid-cols-2">
{children}
</div>
)
@@ -97,8 +97,8 @@ type IProperty = IChildrenProps & {
}
export function Property({ name, type, children }: IProperty) {
return (
<li className="px-0 py-4 m-0 first:pt-0 last:pb-0">
<dl className="flex flex-wrap items-center m-0 gap-x-3 gap-y-2">
<li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
<dl className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2">
<dt className="sr-only">Name</dt>
<dd>
<code>{name}</code>
@@ -122,8 +122,8 @@ type ISubProperty = IChildrenProps & {
}
export function SubProperty({ name, type, children }: ISubProperty) {
return (
<li className="px-0 py-1 m-0 last:pb-0">
<dl className="flex flex-wrap items-center m-0 gap-x-3">
<li className="m-0 px-0 py-1 last:pb-0">
<dl className="m-0 flex flex-wrap items-center gap-x-3">
<dt className="sr-only">Name</dt>
<dd>
<code>{name}</code>
@@ -143,6 +143,6 @@ export function SubProperty({ name, type, children }: ISubProperty) {
export function PropertyInstruction({ children }: PropsWithChildren<{}>) {
return (
<li className="m-0 px-0 py-4 first:pt-0 italic">{children}</li>
<li className="m-0 px-0 py-4 italic first:pt-0">{children}</li>
)
}

14
web/app/components/develop/secret-key/input-copy.tsx
View File

@@ -33,11 +33,11 @@ const InputCopy = ({
}, [isCopied])
return (
<div className={`flex rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover py-2 items-center ${className}`}>
<div className="flex items-center grow h-5">
<div className={`flex items-center rounded-lg bg-components-input-bg-normal py-2 hover:bg-state-base-hover ${className}`}>
<div className="flex h-5 grow items-center">
{children}
<div className='grow text-[13px] relative h-full'>
<div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
<div className='relative h-full grow text-[13px]'>
<div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={() => {
copy(value)
setIsCopied(true)
}}>
@@ -49,13 +49,13 @@ const InputCopy = ({
</Tooltip>
</div>
</div>
<div className="shrink-0 h-4 bg-divider-regular border" />
<div className="h-4 shrink-0 border bg-divider-regular" />
<Tooltip
popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
position='bottom'
>
<div className="px-0.5 shrink-0">
<div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
<div className="shrink-0 px-0.5">
<div className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
copy(value)
setIsCopied(true)
}}>

6
web/app/components/develop/secret-key/secret-key-button.tsx
View File

@@ -22,10 +22,10 @@ const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) =
size='small'
variant='ghost'
>
<div className={'flex items-center justify-center w-3.5 h-3.5'}>
<RiKey2Line className='w-3.5 h-3.5 text-text-tertiary' />
<div className={'flex h-3.5 w-3.5 items-center justify-center'}>
<RiKey2Line className='h-3.5 w-3.5 text-text-tertiary' />
</div>
<div className={`text-text-tertiary system-xs-medium px-[3px] ${textCls}`}>{t('appApi.apiKey')}</div>
<div className={`system-xs-medium px-[3px] text-text-tertiary ${textCls}`}>{t('appApi.apiKey')}</div>
</Button>
<SecretKeyModal isShow={isVisible} onClose={() => setVisible(false)} appId={appId} />
</>

6
web/app/components/develop/secret-key/secret-key-generate.tsx
View File

@@ -23,12 +23,12 @@ const SecretKeyGenerateModal = ({
const { t } = useTranslation()
return (
<Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`px-8 ${className}`}>
<XMarkIcon className={`w-6 h-6 absolute cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
<p className='mt-1 text-[13px] text-text-tertiary font-normal leading-5'>{t('appApi.apiKeyModal.generateTips')}</p>
<XMarkIcon className={`absolute h-6 w-6 cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
<p className='mt-1 text-[13px] font-normal leading-5 text-text-tertiary'>{t('appApi.apiKeyModal.generateTips')}</p>
<div className='my-4'>
<InputCopy className='w-full' value={newKey?.token} />
</div>
<div className='flex justify-end my-4'>
<div className='my-4 flex justify-end'>
<Button className={`shrink-0 ${s.w64}`} onClick={onClose}>
<span className='text-xs font-medium text-text-secondary'>{t('appApi.actionMsg.ok')}</span>
</Button>

32
web/app/components/develop/secret-key/secret-key-modal.tsx
View File

@@ -97,38 +97,38 @@ const SecretKeyModal = ({
}
return (
<Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`${s.customModal} px-8 flex flex-col`}>
<XMarkIcon className={`w-6 h-6 absolute cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
<p className='mt-1 text-[13px] text-text-tertiary font-normal leading-5 shrink-0'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
<Modal isShow={isShow} onClose={onClose} title={`${t('appApi.apiKeyModal.apiSecretKey')}`} className={`${s.customModal} flex flex-col px-8`}>
<XMarkIcon className={`absolute h-6 w-6 cursor-pointer text-text-tertiary ${s.close}`} onClick={onClose} />
<p className='mt-1 shrink-0 text-[13px] font-normal leading-5 text-text-tertiary'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
{!apiKeysList && <div className='mt-4'><Loading /></div>}
{
!!apiKeysList?.data?.length && (
<div className='flex flex-col grow mt-4 overflow-hidden'>
<div className='flex items-center shrink-0 text-xs font-semibold text-text-tertiary border-b border-solid h-9'>
<div className='shrink-0 w-64 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
<div className='shrink-0 px-3 w-[200px]'>{t('appApi.apiKeyModal.created')}</div>
<div className='shrink-0 px-3 w-[200px]'>{t('appApi.apiKeyModal.lastUsed')}</div>
<div className='mt-4 flex grow flex-col overflow-hidden'>
<div className='flex h-9 shrink-0 items-center border-b border-solid text-xs font-semibold text-text-tertiary'>
<div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div>
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div>
<div className='grow px-3'></div>
</div>
<div className='grow overflow-auto'>
{apiKeysList.data.map(api => (
<div className='flex items-center text-sm font-normal text-text-secondary border-b border-solid h-9' key={api.id}>
<div className='shrink-0 w-64 px-3 font-mono truncate'>{generateToken(api.token)}</div>
<div className='shrink-0 px-3 truncate w-[200px]'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
<div className='shrink-0 px-3 truncate w-[200px]'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
<div className='flex h-9 items-center border-b border-solid text-sm font-normal text-text-secondary' key={api.id}>
<div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div>
<div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
<div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
<div className='flex grow px-3'>
<Tooltip
popupContent={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
popupClassName='mr-1'
>
<div className={`flex items-center justify-center shrink-0 w-6 h-6 mr-1 rounded-lg cursor-pointer hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
<div className={`mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
// setIsCopied(true)
copy(api.token)
setCopyValue(api.token)
}}></div>
</Tooltip>
{isCurrentWorkspaceManager
&& <div className={`flex items-center justify-center shrink-0 w-6 h-6 rounded-lg cursor-pointer ${s.trashIcon}`} onClick={() => {
&& <div className={`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.trashIcon}`} onClick={() => {
setDelKeyId(api.id)
setShowConfirmDelete(true)
}}>
@@ -142,8 +142,8 @@ const SecretKeyModal = ({
)
}
<div className='flex'>
<Button className={`flex shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
<PlusIcon className='flex shrink-0 w-4 h-4 mr-1' />
<Button className={`mt-4 flex shrink-0 ${s.autoWidth}`} onClick={onCreate} disabled={!currentWorkspace || !isCurrentWorkspaceEditor}>
<PlusIcon className='mr-1 flex h-4 w-4 shrink-0' />
<div className='text-xs font-medium text-text-secondary'>{t('appApi.apiKeyModal.createNewSecretKey')}</div>
</Button>
</div>