dify

dify/web/app/components/base/progress-bar/progress-circle.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import ProgressCircle from './progress-circle'
+
+const ProgressCircleDemo = ({
+  initialPercentage = 42,
+  size = 24,
+}: {
+  initialPercentage?: number
+  size?: number
+}) => {
+  const [percentage, setPercentage] = useState(initialPercentage)
+
+  return (
+    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+        <span>Upload progress</span>
+        <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-secondary">
+          {percentage}%
+        </span>
+      </div>
+      <div className="flex items-center gap-4">
+        <ProgressCircle percentage={percentage} size={size} className="shrink-0" />
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={1}
+          value={percentage}
+          onChange={event => setPercentage(Number.parseInt(event.target.value, 10))}
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-divider-subtle accent-primary-600"
+        />
+      </div>
+      <div className="flex gap-3 text-xs text-text-tertiary">
+        <label className="flex items-center gap-1">
+          Size
+          <input
+            type="number"
+            min={12}
+            max={48}
+            value={size}
+            disabled
+            className="h-7 w-16 rounded-md border border-divider-subtle bg-background-default px-2 text-xs"
+          />
+        </label>
+      </div>
+      <div className="rounded-lg border border-divider-subtle bg-background-default-subtle p-3 text-[11px] leading-relaxed text-text-tertiary">
+        ProgressCircle renders a deterministic SVG slice. Advance the slider to preview how the arc grows for upload indicators.
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/ProgressCircle',
+  component: ProgressCircleDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Compact radial progress indicator wired to upload flows. The story provides a slider to scrub through percentages.',
+      },
+    },
+  },
+  argTypes: {
+    initialPercentage: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    size: {
+      control: { type: 'number', min: 12, max: 48, step: 2 },
+    },
+  },
+  args: {
+    initialPercentage: 42,
+    size: 24,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProgressCircleDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const NearComplete: Story = {
+  args: {
+    initialPercentage: 92,
+  },
+}

dify/web/app/components/base/progress-bar/progress-circle.tsx

@@ -0,0 +1,64 @@
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+
+type ProgressCircleProps = {
+  className?: string
+  percentage?: number
+  size?: number
+  circleStrokeWidth?: number
+  circleStrokeColor?: string
+  circleFillColor?: string
+  sectorFillColor?: string
+}
+
+const ProgressCircle: React.FC<ProgressCircleProps> = ({
+  className,
+  percentage = 0,
+  size = 12,
+  circleStrokeWidth = 1,
+  circleStrokeColor = 'stroke-components-progress-brand-border',
+  circleFillColor = 'fill-components-progress-brand-bg',
+  sectorFillColor = 'fill-components-progress-brand-progress',
+}) => {
+  const radius = size / 2
+  const center = size / 2
+  const angle = (percentage / 101) * 360
+  const radians = (angle * Math.PI) / 180
+  const x = center + radius * Math.cos(radians - Math.PI / 2)
+  const y = center + radius * Math.sin(radians - Math.PI / 2)
+  const largeArcFlag = percentage > 50 ? 1 : 0
+
+  const pathData = `
+    M ${center},${center}
+    L ${center},${center - radius}
+    A ${radius},${radius} 0 ${largeArcFlag} 1 ${x},${y}
+    Z
+  `
+
+  return (
+    <svg
+      width={size + circleStrokeWidth}
+      height={size + circleStrokeWidth}
+      viewBox={`0 0 ${size + circleStrokeWidth} ${size + circleStrokeWidth}`}
+      className={className}
+    >
+      <circle
+        className={cn(
+          circleFillColor,
+          circleStrokeColor,
+        )}
+        cx={center + circleStrokeWidth / 2}
+        cy={center + circleStrokeWidth / 2}
+        r={radius}
+        strokeWidth={circleStrokeWidth}
+      />
+      <path
+        className={cn(sectorFillColor)}
+        d={pathData}
+        transform={`translate(${circleStrokeWidth / 2}, ${circleStrokeWidth / 2})`}
+      />
+    </svg>
+  )
+}
+
+export default memo(ProgressCircle)