From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/app/create-app-modal/index.tsx | 124 +++++++++++++++++++++--------------------
1 files changed, 63 insertions(+), 61 deletions(-)
diff --git a/app/components/app/create-app-modal/index.tsx b/app/components/app/create-app-modal/index.tsx
index f91f440..eb78258 100644
--- a/app/components/app/create-app-modal/index.tsx
+++ b/app/components/app/create-app-modal/index.tsx
@@ -1,9 +1,9 @@
'use client'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/navigation'
import { useContext, useContextSelector } from 'use-context-selector'
import { RiArrowRightLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react'
import Link from 'next/link'
@@ -14,12 +14,10 @@
import Button from '@/app/components/base/button'
import Divider from '@/app/components/base/divider'
import cn from '@/utils/classnames'
-import { WEB_PREFIX } from '@/config'
import AppsContext, { useAppContext } from '@/context/app-context'
import { useProviderContext } from '@/context/provider-context'
import { ToastContext } from '@/app/components/base/toast'
import type { AppMode } from '@/types/app'
-import { AppModes } from '@/types/app'
import { createApp } from '@/service/apps'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
@@ -29,7 +27,6 @@
import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
import { getRedirection } from '@/utils/app-redirection'
import FullScreenModal from '@/app/components/base/fullscreen-modal'
-import useTheme from '@/hooks/use-theme'
type CreateAppProps = {
onSuccess: () => void
@@ -54,14 +51,6 @@
const { isCurrentWorkspaceEditor } = useAppContext()
const isCreatingRef = useRef(false)
-
- const searchParams = useSearchParams()
-
- useEffect(() => {
- const category = searchParams.get('category')
- if (category && AppModes.includes(category as AppMode))
- setAppMode(category as AppMode)
- }, [searchParams])
const onCreate = useCallback(async () => {
if (!appMode) {
@@ -91,7 +80,7 @@
localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
getRedirection(isCurrentWorkspaceEditor, app, push)
}
- catch {
+ catch (e) {
notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
}
isCreatingRef.current = false
@@ -104,17 +93,17 @@
handleCreateApp()
})
return <>
- <div className='flex h-full justify-center overflow-y-auto overflow-x-hidden'>
- <div className='flex flex-1 shrink-0 justify-end'>
+ <div className='flex justify-center h-full overflow-y-auto overflow-x-hidden'>
+ <div className='flex-1 shrink-0 flex justify-end'>
<div className='px-10'>
- <div className='h-6 w-full 2xl:h-[139px]' />
- <div className='pb-6 pt-1'>
+ <div className='w-full h-6 2xl:h-[139px]' />
+ <div className='pt-1 pb-6'>
<span className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.startFromBlank')}</span>
</div>
- <div className='mb-2 leading-6'>
+ <div className='leading-6 mb-2'>
<span className='system-sm-semibold text-text-secondary'>{t('app.newApp.chooseAppType')}</span>
</div>
- <div className='flex w-[660px] flex-col gap-4'>
+ <div className='flex flex-col w-[660px] gap-4'>
<div>
<div className='mb-2'>
<span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forBeginners')}</span>
@@ -124,8 +113,8 @@
active={appMode === 'chat'}
title={t('app.types.chatbot')}
description={t('app.newApp.chatbotShortDescription')}
- icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid'>
- <ChatBot className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
+ icon={<div className='w-6 h-6 bg-components-icon-bg-blue-solid rounded-md flex items-center justify-center'>
+ <ChatBot className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('chat')
@@ -134,8 +123,8 @@
active={appMode === 'agent-chat'}
title={t('app.types.agent')}
description={t('app.newApp.agentShortDescription')}
- icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid'>
- <Logic className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
+ icon={<div className='w-6 h-6 bg-components-icon-bg-violet-solid rounded-md flex items-center justify-center'>
+ <Logic className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('agent-chat')
@@ -144,8 +133,8 @@
active={appMode === 'completion'}
title={t('app.newApp.completeApp')}
description={t('app.newApp.completionShortDescription')}
- icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid'>
- <ListSparkle className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
+ icon={<div className='w-6 h-6 bg-components-icon-bg-teal-solid rounded-md flex items-center justify-center'>
+ <ListSparkle className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('completion')
@@ -158,21 +147,23 @@
</div>
<div className='flex flex-row gap-2'>
<AppTypeCard
+ beta
active={appMode === 'advanced-chat'}
title={t('app.types.advanced')}
description={t('app.newApp.advancedShortDescription')}
- icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid'>
- <BubbleTextMod className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
+ icon={<div className='w-6 h-6 bg-components-icon-bg-blue-light-solid rounded-md flex items-center justify-center'>
+ <BubbleTextMod className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('advanced-chat')
}} />
<AppTypeCard
+ beta
active={appMode === 'workflow'}
title={t('app.types.workflow')}
description={t('app.newApp.workflowShortDescription')}
- icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid'>
- <RiExchange2Fill className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
+ icon={<div className='w-6 h-6 bg-components-icon-bg-indigo-solid rounded-md flex items-center justify-center'>
+ <RiExchange2Fill className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('workflow')
@@ -180,9 +171,9 @@
</div>
</div>
<Divider style={{ margin: 0 }} />
- <div className='flex items-center space-x-3'>
+ <div className='flex space-x-3 items-center'>
<div className='flex-1'>
- <div className='mb-1 flex h-6 items-center'>
+ <div className='h-6 flex items-center mb-1'>
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionName')}</label>
</div>
<Input
@@ -210,9 +201,9 @@
/>}
</div>
<div>
- <div className='mb-1 flex h-6 items-center'>
+ <div className='h-6 flex items-center mb-1'>
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionDescription')}</label>
- <span className='system-xs-regular ml-1 text-text-tertiary'>({t('app.newApp.optional')})</span>
+ <span className='system-xs-regular text-text-tertiary ml-1'>({t('app.newApp.optional')})</span>
</div>
<Textarea
className='resize-none'
@@ -222,12 +213,11 @@
/>
</div>
</div>
- {isAppsFull && <AppsFull className='mt-4' loc='app-create' />}
- <div className='flex items-center justify-between pb-10 pt-5'>
- <div className='system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary' onClick={onCreateFromTemplate}>
+ <div className='pt-5 pb-10 flex justify-between items-center'>
+ <div className='flex gap-1 items-center system-xs-regular text-text-tertiary cursor-pointer' onClick={onCreateFromTemplate}>
<span>{t('app.newApp.noIdeaTip')}</span>
<div className='p-[1px]'>
- <RiArrowRightLine className='h-3.5 w-3.5' />
+ <RiArrowRightLine className='w-3.5 h-3.5' />
</div>
</div>
<div className='flex gap-2'>
@@ -235,21 +225,21 @@
<Button disabled={isAppsFull || !name} className='gap-1' variant="primary" onClick={handleCreateApp}>
<span>{t('app.newApp.Create')}</span>
<div className='flex gap-0.5'>
- <RiCommandLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
- <RiCornerDownLeftLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
+ <RiCommandLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
+ <RiCornerDownLeftLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
</div>
</Button>
</div>
</div>
</div>
</div>
- <div className='relative flex h-full flex-1 shrink justify-start overflow-hidden'>
- <div className='absolute left-0 right-0 top-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]'></div>
+ <div className='flex-1 shrink h-full flex justify-start relative overflow-hidden'>
+ <div className='h-6 2xl:h-[139px] absolute left-0 top-0 right-0 border-b border-b-divider-subtle'></div>
<div className='max-w-[760px] border-x border-x-divider-subtle'>
<div className='h-6 2xl:h-[139px]' />
<AppPreview mode={appMode} />
<div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
- <div className='flex h-[448px] w-[664px] items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
+ <div className='w-[664px] h-[448px] flex items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
<AppScreenShot show={appMode === 'chat'} mode='chat' />
<AppScreenShot show={appMode === 'advanced-chat'} mode='advanced-chat' />
<AppScreenShot show={appMode === 'agent-chat'} mode='agent-chat' />
@@ -260,6 +250,13 @@
</div>
</div>
</div>
+ {
+ isAppsFull && (
+ <div className='px-8 py-2'>
+ <AppsFull loc='app-create' />
+ </div>
+ )
+ }
</>
}
type CreateAppDialogProps = CreateAppProps & {
@@ -281,25 +278,30 @@
export default CreateAppModal
type AppTypeCardProps = {
- icon: React.JSX.Element
+ icon: JSX.Element
+ beta?: boolean
title: string
description: string
active: boolean
onClick: () => void
}
-function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardProps) {
+function AppTypeCard({ icon, title, beta = false, description, active, onClick }: AppTypeCardProps) {
+ const { t } = useTranslation()
return <div
className={
- cn(`relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl
- border-[0.5px] border-components-option-card-option-border
- bg-components-panel-on-panel-item-bg p-3 shadow-xs hover:shadow-md`, active
- ? 'shadow-md outline outline-[1.5px] outline-components-option-card-option-selected-border'
+ cn(`w-[191px] h-[84px] p-3 border-[0.5px] relative box-content
+ rounded-xl border-components-option-card-option-border
+ bg-components-panel-on-panel-item-bg shadow-xs cursor-pointer hover:shadow-md`, active
+ ? 'outline outline-[1.5px] outline-components-option-card-option-selected-border shadow-md'
: '')
}
onClick={onClick}
>
+ {beta && <div className='px-[5px] py-[3px]
+ rounded-[5px] min-w-[18px] absolute top-3 right-3
+ border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>{t('common.menus.status')}</div>}
{icon}
- <div className='system-sm-semibold mb-0.5 mt-2 text-text-secondary'>{title}</div>
+ <div className='system-sm-semibold text-text-secondary mt-2 mb-0.5'>{title}</div>
<div className='system-xs-regular text-text-tertiary'>{description}</div>
</div>
}
@@ -310,17 +312,17 @@
'chat': {
title: t('app.types.chatbot'),
description: t('app.newApp.chatbotUserDescription'),
- link: 'https://docs.dify.ai/guides/application-orchestrate/readme',
+ link: 'https://docs.dify.ai/guides/application-orchestrate/conversation-application?fallback=true',
},
'advanced-chat': {
title: t('app.types.advanced'),
description: t('app.newApp.advancedUserDescription'),
- link: 'https://docs.dify.ai/en/guides/workflow/README',
+ link: 'https://docs.dify.ai/guides/workflow',
},
'agent-chat': {
title: t('app.types.agent'),
description: t('app.newApp.agentUserDescription'),
- link: 'https://docs.dify.ai/en/guides/application-orchestrate/agent',
+ link: 'https://docs.dify.ai/guides/application-orchestrate/agent',
},
'completion': {
title: t('app.newApp.completeApp'),
@@ -330,21 +332,21 @@
'workflow': {
title: t('app.types.workflow'),
description: t('app.newApp.workflowUserDescription'),
- link: 'https://docs.dify.ai/en/guides/workflow/README',
+ link: 'https://docs.dify.ai/guides/workflow',
},
}
const previewInfo = modeToPreviewInfoMap[mode]
return <div className='px-8 py-4'>
<h4 className='system-sm-semibold-uppercase text-text-secondary'>{previewInfo.title}</h4>
- <div className='system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary'>
+ <div className='mt-1 system-xs-regular text-text-tertiary max-w-96 min-h-8'>
<span>{previewInfo.description}</span>
- {previewInfo.link && <Link target='_blank' href={previewInfo.link} className='ml-1 text-text-accent'>{t('app.newApp.learnMore')}</Link>}
+ {previewInfo.link && <Link target='_blank' href={previewInfo.link} className='text-text-accent ml-1'>{t('app.newApp.learnMore')}</Link>}
</div>
</div>
}
function AppScreenShot({ mode, show }: { mode: AppMode; show: boolean }) {
- const { theme } = useTheme()
+ const theme = useContextSelector(AppsContext, state => state.theme)
const modeToImageMap = {
'chat': 'Chatbot',
'advanced-chat': 'Chatflow',
@@ -353,11 +355,11 @@
'workflow': 'Workflow',
}
return <picture>
- <source media="(resolution: 1x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
- <source media="(resolution: 2x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
- <source media="(resolution: 3x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
+ <source media="(resolution: 1x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
+ <source media="(resolution: 2x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
+ <source media="(resolution: 3x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
<Image className={show ? '' : 'hidden'}
- src={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}.png`}
+ src={`/screenshots/${theme}/${modeToImageMap[mode]}.png`}
alt='App Screen Shot'
width={664} height={448} />
</picture>
--
Gitblit v1.8.0