AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-19 04:15:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

progress circle

Browse Source
This commit is contained in:
StyleZhang 2024-08-26 10:30:11 +08:00
parent f9c1d06e91
commit 985651454a
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
View File

@ -6,6 +6,7 @@ import { RiCloseLine } from '@remixicon/react'
import { useStore } from '../store'
import FileListItem from './file-list-flex-item'
import Button from '@/app/components/base/button'
import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
const files = useStore(s => s.files)
@ -21,9 +22,21 @@ const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
key={file._id}
className='relative'
>
<Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
<Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'>
<RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
</Button>
<div
className='absolute inset-0 border-[2px] border-effects-image-frame shadow-md bg-black'
>
<ProgressCircle
className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
percentage={30}
size={16}
circleStrokeColor='stroke-components-progress-white-border'
circleFillColor='fill-transparent'
sectorFillColor='fill-components-progress-white-progress'
/>
</div>
<FileListItem />
</div>
))

3
web/app/components/base/progress-bar/progress-circle.tsx
View File

@ -2,6 +2,7 @@ import { memo } from 'react'
import cn from '@/utils/classnames'
type ProgressCircleProps = {
className?: string
percentage?: number
size?: number
circleStrokeWidth?: number
@ -11,6 +12,7 @@ type ProgressCircleProps = {
}
const ProgressCircle: React.FC<ProgressCircleProps> = ({
className,
percentage = 0,
size = 12,
circleStrokeWidth = 1,
@ -38,6 +40,7 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
width={size + circleStrokeWidth}
height={size + circleStrokeWidth}
viewBox={`0 0 ${size + circleStrokeWidth} ${size + circleStrokeWidth}`}
className={className}
>
<circle
className={cn(