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/custom/custom-web-app-brand/index.tsx | 216 ++++++++++++++++--------------------------------------
1 files changed, 64 insertions(+), 152 deletions(-)
diff --git a/app/components/custom/custom-web-app-brand/index.tsx b/app/components/custom/custom-web-app-brand/index.tsx
index 444df98..0804f2f 100644
--- a/app/components/custom/custom-web-app-brand/index.tsx
+++ b/app/components/custom/custom-web-app-brand/index.tsx
@@ -2,28 +2,22 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
- RiEditBoxLine,
- RiEqualizer2Line,
- RiExchange2Fill,
- RiImageAddLine,
- RiLayoutLeft2Line,
RiLoader2Line,
- RiPlayLargeLine,
} from '@remixicon/react'
-import DifyLogo from '@/app/components/base/logo/dify-logo'
+import s from './style.module.css'
+import LogoSite from '@/app/components/base/logo/logo-site'
import Switch from '@/app/components/base/switch'
import Button from '@/app/components/base/button'
-import Divider from '@/app/components/base/divider'
+import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'
+import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import { imageUpload } from '@/app/components/base/image-uploader/utils'
import { useToastContext } from '@/app/components/base/toast'
-import { BubbleTextMod } from '@/app/components/base/icons/src/vender/solid/communication'
import {
updateCurrentWorkspace,
} from '@/service/common'
import { useAppContext } from '@/context/app-context'
-import cn from '@/utils/classnames'
const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
@@ -113,7 +107,32 @@
return (
<div className='py-4'>
- <div className='system-md-medium mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary'>
+ <div className='mb-2 text-sm font-medium text-gray-900'>{t('custom.webapp.title')}</div>
+ <div className='relative mb-4 pl-4 pb-6 pr-[119px] rounded-xl border-[0.5px] border-black/8 shadow-xs bg-gray-50 overflow-hidden'>
+ <div className={`${s.mask} absolute top-0 left-0 w-full -bottom-2 z-10`}></div>
+ <div className='flex items-center -mt-2 mb-4 p-6 bg-white rounded-xl'>
+ <div className='flex items-center px-4 w-[125px] h-9 rounded-lg bg-primary-600 border-[0.5px] border-primary-700 shadow-xs'>
+ <MessageDotsCircle className='shrink-0 mr-2 w-4 h-4 text-white' />
+ <div className='grow h-2 rounded-sm bg-white opacity-50' />
+ </div>
+ </div>
+ <div className='flex items-center h-5 justify-between'>
+ <div className='w-[369px] h-1.5 rounded-sm bg-gray-200 opacity-80' />
+ {
+ !webappBrandRemoved && (
+ <div className='flex items-center text-[10px] font-medium text-gray-400'>
+ POWERED BY
+ {
+ webappLogo
+ ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='ml-2 block w-auto h-5' />
+ : <LogoSite className='ml-2 !h-5' />
+ }
+ </div>
+ )
+ }
+ </div>
+ </div>
+ <div className='flex items-center justify-between mb-2 px-4 h-14 rounded-xl border-[0.5px] border-gray-200 bg-gray-50 text-sm font-medium text-gray-900'>
{t('custom.webapp.removeBrand')}
<Switch
size='l'
@@ -122,38 +141,34 @@
onChange={handleSwitch}
/>
</div>
- <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
+ <div className={`
+ flex items-center justify-between px-4 py-3 rounded-xl border-[0.5px] border-gray-200 bg-gray-50
+ ${webappBrandRemoved && 'opacity-30'}
+ `}>
<div>
- <div className='system-md-medium text-text-primary'>{t('custom.webapp.changeLogo')}</div>
- <div className='system-xs-regular text-text-tertiary'>{t('custom.webapp.changeLogoTip')}</div>
+ <div className='leading-5 text-sm font-medium text-gray-900'>{t('custom.webapp.changeLogo')}</div>
+ <div className='leading-[18px] text-xs text-gray-500'>{t('custom.webapp.changeLogoTip')}</div>
</div>
<div className='flex items-center'>
- {(uploadDisabled || (!webappLogo && !webappBrandRemoved)) && (
- <>
- <Button
- variant='ghost'
- disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
- onClick={handleRestore}
- >
- {t('custom.restore')}
- </Button>
- <div className='mx-2 h-5 w-[1px] bg-divider-regular'></div>
- </>
- )}
{
!uploading && (
<Button
- className='relative mr-2'
+ className={`
+ relative mr-2
+ `}
disabled={uploadDisabled}
>
- <RiImageAddLine className='mr-1 h-4 w-4' />
+ <ImagePlus className='mr-2 w-4 h-4' />
{
(webappLogo || fileId)
? t('custom.change')
: t('custom.upload')
}
<input
- className={cn('absolute inset-0 block w-full text-[0] opacity-0', uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+ className={`
+ absolute block inset-0 opacity-0 text-[0] w-full
+ ${uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+ `}
onClick={e => (e.target as HTMLInputElement).value = ''}
type='file'
accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
@@ -169,7 +184,7 @@
className='relative mr-2'
disabled={true}
>
- <RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
+ <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
{t('custom.uploading')}
</Button>
)
@@ -178,13 +193,6 @@
fileId && (
<>
<Button
- className='mr-2'
- onClick={handleCancel}
- disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
- >
- {t('common.operation.cancel')}
- </Button>
- <Button
variant='primary'
className='mr-2'
onClick={handleApply}
@@ -192,126 +200,30 @@
>
{t('custom.apply')}
</Button>
+ <Button
+ className='mr-2'
+ onClick={handleCancel}
+ disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
+ >
+ {t('common.operation.cancel')}
+ </Button>
</>
)
}
+ <div className='mr-2 h-5 w-[1px] bg-black/5'></div>
+ <Button
+ disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
+ onClick={handleRestore}
+ >
+ {t('custom.restore')}
+ </Button>
</div>
</div>
- {uploadProgress === -1 && (
- <div className='mt-2 text-xs text-[#D92D20]'>{t('custom.uploadedFail')}</div>
- )}
- <div className='mb-2 mt-5 flex items-center gap-2'>
- <div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('appOverview.overview.appInfo.preview')}</div>
- <Divider bgStyle='gradient' className='grow' />
- </div>
- <div className='relative mb-2 flex items-center gap-3'>
- {/* chat card */}
- <div className='flex h-[320px] grow basis-1/2 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn'>
- <div className='flex h-full w-[232px] shrink-0 flex-col p-1 pr-0'>
- <div className='flex items-center gap-3 p-3 pr-2'>
- <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
- <BubbleTextMod className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
- </div>
- <div className='system-md-semibold grow text-text-secondary'>Chatflow App</div>
- <div className='p-1.5'>
- <RiLayoutLeft2Line className='h-4 w-4 text-text-tertiary' />
- </div>
- </div>
- <div className='shrink-0 px-4 py-3'>
- <Button variant='secondary-accent' className='w-full justify-center'>
- <RiEditBoxLine className='mr-1 h-4 w-4' />
- <div className='p-1 opacity-20'>
- <div className='h-2 w-[94px] rounded-sm bg-text-accent-light-mode-only'></div>
- </div>
- </Button>
- </div>
- <div className='grow px-3 pt-5'>
- <div className='flex h-8 items-center px-3 py-1'>
- <div className='h-2 w-14 rounded-sm bg-text-quaternary opacity-20'></div>
- </div>
- <div className='flex h-8 items-center px-3 py-1'>
- <div className='h-2 w-[168px] rounded-sm bg-text-quaternary opacity-20'></div>
- </div>
- <div className='flex h-8 items-center px-3 py-1'>
- <div className='h-2 w-[128px] rounded-sm bg-text-quaternary opacity-20'></div>
- </div>
- </div>
- <div className='flex shrink-0 items-center justify-between p-3'>
- <div className='p-1.5'>
- <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
- </div>
- <div className='flex items-center gap-1.5'>
- {!webappBrandRemoved && (
- <>
- <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
- {webappLogo
- ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
- : <DifyLogo size='small' />
- }
- </>
- )}
- </div>
- </div>
- </div>
- <div className='flex w-[138px] grow flex-col justify-between p-2 pr-0'>
- <div className='flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16'>
- <div className='w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3'>
- <div className='body-md-regular mb-1 text-text-primary'>Hello! How can I assist you today?</div>
- <Button size='small'>
- <div className='h-2 w-[144px] rounded-sm bg-text-quaternary opacity-20'></div>
- </Button>
- </div>
- <div className='body-lg-regular flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm'>Talk to Dify</div>
- </div>
- </div>
- </div>
- {/* workflow card */}
- <div className='flex h-[320px] grow basis-1/2 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn'>
- <div className='w-full border-b-[0.5px] border-divider-subtle p-4 pb-0'>
- <div className='mb-2 flex items-center gap-3'>
- <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
- <RiExchange2Fill className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
- </div>
- <div className='system-md-semibold grow text-text-secondary'>Workflow App</div>
- <div className='p-1.5'>
- <RiLayoutLeft2Line className='h-4 w-4 text-text-tertiary' />
- </div>
- </div>
- <div className='flex items-center gap-4'>
- <div className='system-md-semibold-uppercase flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary'>RUN ONCE</div>
- <div className='system-md-semibold-uppercase flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary'>RUN BATCH</div>
- </div>
- </div>
- <div className='grow bg-components-panel-bg'>
- <div className='p-4 pb-1'>
- <div className='mb-1 py-2'>
- <div className='h-2 w-20 rounded-sm bg-text-quaternary opacity-20'></div>
- </div>
- <div className='h-16 w-full rounded-lg bg-components-input-bg-normal '></div>
- </div>
- <div className='flex items-center justify-between px-4 py-3'>
- <Button size='small'>
- <div className='h-2 w-10 rounded-sm bg-text-quaternary opacity-20'></div>
- </Button>
- <Button variant='primary' size='small' disabled>
- <RiPlayLargeLine className='mr-1 h-4 w-4' />
- <span>Execute</span>
- </Button>
- </div>
- </div>
- <div className='flex h-12 shrink-0 items-center gap-1.5 bg-components-panel-bg p-4 pt-3'>
- {!webappBrandRemoved && (
- <>
- <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
- {webappLogo
- ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
- : <DifyLogo size='small' />
- }
- </>
- )}
- </div>
- </div>
- </div>
+ {
+ uploadProgress === -1 && (
+ <div className='mt-2 text-xs text-[#D92D20]'>{t('custom.uploadedFail')}</div>
+ )
+ }
</div>
)
}
--
Gitblit v1.8.0