@easy-editor/materials-dashboard-progress 0.0.2

package/rollup.config.js

@@ -0,0 +1,212 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import postcss from 'rollup-plugin-postcss'
+import pkg from './package.json' with { type: 'json' }
+
+const GLOBAL_NAME = 'EasyEditorMaterialsProgressRing'
+
+// 外部依赖（不打包进组件）
+const external = ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+  '@easy-editor/core': 'EasyEditorCore',
+}
+
+const plugins = [
+  nodeResolve({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  }),
+  commonjs(),
+  json(),
+  postcss({
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+    autoModules: true,
+    minimize: true,
+    inject: true,
+  }),
+  babel({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-typescript',
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+  }),
+  cleanup({
+    comments: ['some', /PURE/],
+    extensions: ['.js', '.ts'],
+  }),
+]
+
+export default [
+  /* ---------------------------------- 元数据构建 --------------------------------- */
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (meta, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (meta) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (meta, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 组件构建 ---------------------------------- */
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (component, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (component) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (component, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 完整构建 ---------------------------------- */
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-progress-ring v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,89 @@
+/**
+ * Progress Component Styles
+ * 进度组件样式
+ */
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.ring {
+  transform: rotate(-90deg);
+}
+
+.centerContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.value {
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.label {
+  margin-top: 4px;
+  opacity: 0.7;
+  color: #fff;
+}
+
+/* 线性进度条样式 */
+.barContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+}
+
+.barWrapper {
+  width: 100%;
+  flex: 1;
+  min-height: 8px;
+  max-height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.barFill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.barLabels {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.barLabel {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.barValue {
+  font-size: 14px;
+  font-weight: 600;
+}

package/src/component.tsx

@@ -0,0 +1,262 @@
+/**
+ * Progress Component
+ * 进度组件 - 支持环形和线性进度条
+ */
+
+import { useId, useRef, useEffect, useState, type CSSProperties, type Ref } from 'react'
+import styles from './component.module.css'
+
+export interface ProgressProps {
+  ref?: Ref<HTMLDivElement>
+  /** 当前值 */
+  value?: number
+  /** 最大值 */
+  maxValue?: number
+  /** 进度条类型 */
+  type?: 'ring' | 'bar'
+  /** 是否显示数值 */
+  showValue?: boolean
+  /** 是否显示标签 */
+  showLabel?: boolean
+  /** 标签文本 */
+  label?: string
+  /** 数值格式 */
+  valueFormat?: 'percent' | 'number'
+  /** 线条宽度比例（相对于尺寸的百分比） */
+  strokeWidthRatio?: number
+  /** 轨道颜色 */
+  trackColor?: string
+  /** 进度颜色 */
+  progressColor?: string
+  /** 是否启用渐变 */
+  gradientEnable?: boolean
+  /** 渐变颜色 [起始色, 结束色] */
+  gradientColors?: [string, string]
+  /** 外部样式 */
+  style?: CSSProperties
+}
+
+// 格式化数值
+const formatValue = (value: number, percentage: number, valueFormat: string): string => {
+  if (valueFormat === 'percent') {
+    return `${Math.round(percentage)}%`
+  }
+  return `${value}`
+}
+
+// 环形进度条组件
+const RingProgress = ({
+  percentage,
+  strokeWidthRatio,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor,
+  gradientId,
+}: {
+  percentage: number
+  strokeWidthRatio: number
+  trackColor: string
+  progressColor: string
+  gradientEnable: boolean
+  gradientColors: [string, string]
+  showValue: boolean
+  showLabel: boolean
+  label: string
+  valueFormat: string
+  displayColor: string
+  gradientId: string
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState(100)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    const updateSize = () => {
+      const { width, height } = container.getBoundingClientRect()
+      const minSize = Math.min(width, height)
+      if (minSize > 0) {
+        setSize(minSize)
+      }
+    }
+
+    updateSize()
+
+    const resizeObserver = new ResizeObserver(updateSize)
+    resizeObserver.observe(container)
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const strokeWidth = Math.max(2, size * strokeWidthRatio)
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (percentage / 100) * circumference
+  const center = size / 2
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>
+        <title>Progress indicator</title>
+        {gradientEnable ? (
+          <defs>
+            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>
+              <stop offset='0%' stopColor={gradientColors[0]} />
+              <stop offset='100%' stopColor={gradientColors[1]} />
+            </linearGradient>
+          </defs>
+        ) : null}
+        {/* 轨道 */}
+        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />
+        {/* 进度 */}
+        <circle
+          cx={center}
+          cy={center}
+          fill='none'
+          r={radius}
+          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap='round'
+          strokeWidth={strokeWidth}
+          style={{
+            transition: 'stroke-dashoffset 0.5s ease',
+          }}
+        />
+      </svg>
+      <div className={styles.centerContent}>
+        {showValue ? (
+          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>
+            {formatValue(Math.round(percentage), percentage, valueFormat)}
+          </span>
+        ) : null}
+        {showLabel && label ? (
+          <span className={styles.label} style={{ fontSize: size * 0.1 }}>
+            {label}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+// 线性进度条组件
+const BarProgress = ({
+  percentage,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor,
+}: {
+  percentage: number
+  trackColor: string
+  progressColor: string
+  gradientEnable: boolean
+  gradientColors: [string, string]
+  showValue: boolean
+  showLabel: boolean
+  label: string
+  valueFormat: string
+  displayColor: string
+}) => (
+  <div className={styles.barContainer}>
+    {showLabel || showValue ? (
+      <div className={styles.barLabels}>
+        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}
+        {showValue ? (
+          <span className={styles.barValue} style={{ color: displayColor }}>
+            {formatValue(Math.round(percentage), percentage, valueFormat)}
+          </span>
+        ) : null}
+      </div>
+    ) : null}
+    <div className={styles.barWrapper} style={{ background: trackColor }}>
+      <div
+        className={styles.barFill}
+        style={{
+          width: `${percentage}%`,
+          background: gradientEnable
+            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`
+            : progressColor,
+        }}
+      />
+    </div>
+  </div>
+)
+
+export const Progress: React.FC<ProgressProps> = ({
+  ref,
+  value = 0,
+  maxValue = 100,
+  type = 'ring',
+  showValue = true,
+  showLabel = false,
+  label = '',
+  valueFormat = 'percent',
+  strokeWidthRatio = 0.07,
+  trackColor = 'rgba(26, 26, 62, 0.8)',
+  progressColor = '#00d4ff',
+  gradientEnable = false,
+  gradientColors = ['#00d4ff', '#9b59b6'],
+  style: externalStyle,
+}) => {
+  const gradientId = useId()
+
+  const normalizedValue = Math.min(Math.max(value, 0), maxValue)
+  const percentage = (normalizedValue / maxValue) * 100
+  const displayColor = gradientEnable ? gradientColors[0] : progressColor
+
+  if (type === 'ring') {
+    return (
+      <div className={styles.wrapper} ref={ref} style={externalStyle}>
+        <RingProgress
+          displayColor={displayColor}
+          gradientColors={gradientColors}
+          gradientEnable={gradientEnable}
+          gradientId={gradientId}
+          label={label}
+          percentage={percentage}
+          progressColor={progressColor}
+          showLabel={showLabel}
+          showValue={showValue}
+          strokeWidthRatio={strokeWidthRatio}
+          trackColor={trackColor}
+          valueFormat={valueFormat}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.wrapper} ref={ref} style={externalStyle}>
+      <BarProgress
+        displayColor={displayColor}
+        gradientColors={gradientColors}
+        gradientEnable={gradientEnable}
+        label={label}
+        percentage={percentage}
+        progressColor={progressColor}
+        showLabel={showLabel}
+        showValue={showValue}
+        trackColor={trackColor}
+        valueFormat={valueFormat}
+      />
+    </div>
+  )
+}
+
+export default Progress