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-from-dsl-modal/uploader.tsx | 40 +++++++++++++++++++++------------------- 1 files changed, 21 insertions(+), 19 deletions(-) diff --git a/app/components/app/create-from-dsl-modal/uploader.tsx b/app/components/app/create-from-dsl-modal/uploader.tsx index 6ad4116..beb2b4b 100644 --- a/app/components/app/create-from-dsl-modal/uploader.tsx +++ b/app/components/app/create-from-dsl-modal/uploader.tsx @@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from 'react' import { RiDeleteBinLine, - RiUploadCloud2Line, } from '@remixicon/react' import { useTranslation } from 'react-i18next' import { useContext } from 'use-context-selector' @@ -11,7 +10,8 @@ import cn from '@/utils/classnames' import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files' import { ToastContext } from '@/app/components/base/toast' -import ActionButton from '@/app/components/base/action-button' +import { UploadCloud01 } from '@/app/components/base/icons/src/vender/line/general' +import Button from '@/app/components/base/button' export type Props = { file: File | undefined @@ -97,39 +97,41 @@ style={{ display: 'none' }} type="file" id="fileUploader" - accept='.yaml,.yml' + accept='.yml' onChange={fileChangeHandle} /> <div ref={dropRef}> {!file && ( - <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}> - <div className='flex w-full items-center justify-center space-x-2'> - <RiUploadCloud2Line className='h-6 w-6 text-text-tertiary' /> - <div className='text-text-tertiary'> + <div className={cn('flex items-center h-12 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}> + <div className='w-full flex items-center justify-center space-x-2'> + <UploadCloud01 className='w-6 h-6 mr-2' /> + <div className='text-gray-500'> {t('datasetCreation.stepOne.uploader.button')} - <span className='cursor-pointer pl-1 text-text-accent' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span> + <span className='pl-1 text-[#155eef] cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span> </div> </div> - {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />} + {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />} </div> )} {file && ( - <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}> - <div className='flex items-center justify-center p-3'> - <YamlIcon className="h-6 w-6 shrink-0" /> + <div className={cn('flex items-center rounded-lg bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}> + <div className='flex p-3 justify-center items-center'> + <YamlIcon className="w-6 h-6 shrink-0" /> </div> - <div className='flex grow flex-col items-start gap-0.5 py-1 pr-2'> - <span className='font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4 text-text-secondary'>{file.name}</span> - <div className='font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3 text-text-tertiary'> + <div className='flex py-1 pr-2 grow flex-col items-start gap-0.5'> + <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-secondary font-inter text-[12px] font-medium leading-4'>{file.name}</span> + <div className='flex h-3 items-center gap-1 self-stretch text-text-tertiary font-inter text-[10px] font-medium leading-3 uppercase'> <span>YAML</span> <span className='text-text-quaternary'>路</span> <span>{formatFileSize(file.size)}</span> </div> </div> - <div className='hidden items-center pr-3 group-hover:flex'> - <ActionButton onClick={removeFile}> - <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' /> - </ActionButton> + <div className='hidden group-hover:flex items-center'> + <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button> + <div className='mx-2 w-px h-4 bg-gray-200' /> + <div className='p-2 cursor-pointer' onClick={removeFile}> + <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' /> + </div> </div> </div> )} -- Gitblit v1.8.0