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/explore/app-card/index.tsx | 52 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/app/components/explore/app-card/index.tsx b/app/components/explore/app-card/index.tsx
index 31d218a..3603419 100644
--- a/app/components/explore/app-card/index.tsx
+++ b/app/components/explore/app-card/index.tsx
@@ -5,7 +5,8 @@
import cn from '@/utils/classnames'
import type { App } from '@/models/explore'
import AppIcon from '@/app/components/base/app-icon'
-import { AppTypeIcon } from '../../app/type-selector'
+import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
export type AppCardProps = {
app: App
canCreate: boolean
@@ -22,8 +23,8 @@
const { t } = useTranslation()
const { app: appBasicInfo } = app
return (
- <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg')}>
- <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+ <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
+ <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className='relative shrink-0'>
<AppIcon
size='large'
@@ -32,14 +33,29 @@
background={appBasicInfo.icon_background}
imageUrl={appBasicInfo.icon_url}
/>
- <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
- className='h-3 w-3' type={appBasicInfo.mode} />
+ <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
+ {appBasicInfo.mode === 'advanced-chat' && (
+ <ChatBot className='w-3 h-3 text-[#1570EF]' />
+ )}
+ {appBasicInfo.mode === 'agent-chat' && (
+ <CuteRobot className='w-3 h-3 text-indigo-600' />
+ )}
+ {appBasicInfo.mode === 'chat' && (
+ <ChatBot className='w-3 h-3 text-[#1570EF]' />
+ )}
+ {appBasicInfo.mode === 'completion' && (
+ <AiText className='w-3 h-3 text-[#0E9384]' />
+ )}
+ {appBasicInfo.mode === 'workflow' && (
+ <Route className='w-3 h-3 text-[#f79009]' />
+ )}
+ </span>
</div>
- <div className='w-0 grow py-[1px]'>
- <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
+ <div className='grow w-0 py-[1px]'>
+ <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
<div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
</div>
- <div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
+ <div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
{appBasicInfo.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
{appBasicInfo.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
{appBasicInfo.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@@ -48,21 +64,31 @@
</div>
</div>
</div>
- <div className="description-wrapper system-xs-regular h-[90px] px-[14px] text-text-tertiary">
+ <div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary ">
<div className='line-clamp-4 group-hover:line-clamp-2'>
{app.description}
</div>
</div>
{isExplore && canCreate && (
- <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
- <div className={cn('flex h-8 w-full items-center space-x-2')}>
- <Button variant='primary' className='h-7 grow' onClick={() => onCreate()}>
- <PlusIcon className='mr-1 h-4 w-4' />
+ <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
+ <div className={cn('flex items-center w-full space-x-2')}>
+ <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
+ <PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
</Button>
</div>
</div>
)}
+ {!isExplore && (
+ <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
+ <div className={cn('flex items-center w-full space-x-2')}>
+ <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
+ <PlusIcon className='w-4 h-4 mr-1' />
+ <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
+ </Button>
+ </div>
+ </div>
+ )}
</div>
)
}
--
Gitblit v1.8.0