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

progress circle

Browse Source
This commit is contained in:
StyleZhang 2024-07-31 15:15:26 +08:00
parent 9c31c56115
commit 25c029877a
4 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,9 @@ import {
forwardRef, forwardRef,
memo, memo,
} from 'react' } from 'react'
import { RiCloseLine } from '@remixicon/react'
import FileListItem from './file-list-item' import FileListItem from './file-list-item'
import Button from '@/app/components/base/button'
const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => { const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
return ( return (
@ -10,10 +12,24 @@ const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
ref={ref} ref={ref}
className='flex flex-wrap gap-2' className='flex flex-wrap gap-2'
> >
<FileListItem /> <div className='relative'>
<FileListItem /> <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
<FileListItem isFile /> <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
<FileListItem isFile /> </Button>
<FileListItem />
</div>
<div className='relative'>
<Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
<RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
</Button>
<FileListItem />
</div>
<div className='relative'>
<Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
<RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
</Button>
<FileListItem isFile />
</div>
</div> </div>
) )
}) })

2
web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx
View File

@ -22,7 +22,7 @@ const FileListItem = ({
return ( return (
<div className={cn( <div className={cn(
'w-[68px] h-[68px] border-[2px] border-components-panel-border shadow-xs', 'w-[68px] h-[68px] border-[2px] border-effects-image-frame shadow-xs',
className, className,
)}></div> )}></div>
) )

1
web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
View File

@ -52,6 +52,7 @@ const FileUploaderInAttachment = () => {
if (option.value === 'link') { if (option.value === 'link') {
return ( return (
<FileFromLinkOrLocal <FileFromLinkOrLocal
key={option.value}
showFromLocal={false} showFromLocal={false}
trigger={renderTrigger(option)} trigger={renderTrigger(option)}
/> />

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

@ -14,9 +14,9 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
percentage = 0, percentage = 0,
size = 12, size = 12,
circleStrokeWidth = 1, circleStrokeWidth = 1,
circleStrokeColor = 'components-progress-brand-border', circleStrokeColor = 'stroke-components-progress-brand-border',
circleFillColor = 'components-progress-brand-bg', circleFillColor = 'fill-components-progress-brand-bg',
sectorFillColor = 'components-progress-brand-progress', sectorFillColor = 'fill-components-progress-brand-progress',
}) => { }) => {
const radius = size / 2 const radius = size / 2
const center = size / 2 const center = size / 2
@ -41,8 +41,8 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
> >
<circle <circle
className={cn( className={cn(
`fill-${circleFillColor}`, circleFillColor,
`stroke-${circleStrokeColor}`, circleStrokeColor,
)} )}
cx={center + circleStrokeWidth / 2} cx={center + circleStrokeWidth / 2}
cy={center + circleStrokeWidth / 2} cy={center + circleStrokeWidth / 2}
@ -50,7 +50,7 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
strokeWidth={circleStrokeWidth} strokeWidth={circleStrokeWidth}
/> />
<path <path
className={cn(`fill-${sectorFillColor}`)} className={cn(sectorFillColor)}
d={pathData} d={pathData}
transform={`translate(${circleStrokeWidth / 2}, ${circleStrokeWidth / 2})`} transform={`translate(${circleStrokeWidth / 2}, ${circleStrokeWidth / 2})`}
/> />