From 985651454a07b5fe6e0fe0d4d5ff07806ae823ce Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 26 Aug 2024 10:30:11 +0800
Subject: [PATCH] progress circle

---
 .../file-list-flex/file-list-flex-operation.tsx   | 15 ++++++++++++++-
 .../base/progress-bar/progress-circle.tsx         |  3 +++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
index c1e55de7f2..9412a96ac8 100644
--- a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
@@ -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>
         ))
diff --git a/web/app/components/base/progress-bar/progress-circle.tsx b/web/app/components/base/progress-bar/progress-circle.tsx
index b66dcae720..50ebc7536c 100644
--- a/web/app/components/base/progress-bar/progress-circle.tsx
+++ b/web/app/components/base/progress-bar/progress-circle.tsx
@@ -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(