feat: 开发circleprogress组件完成

src/config.json

@@ -211,6 +211,16 @@
           "sort": 7,
           "show": true,
           "author": "swag~jun"
+        },
+        {
+          "version": "1.0.0",
+          "name": "CircleProgress",
+          "type": "component",
+          "cName": "进度条",
+          "desc": "展示操作或任务的当前进度。",
+          "sort": 7,
+          "show": true,
+          "author": "swag~jun"
         }
       ]
     },

src/packages/cricleprogress/circleprogress.scss

+.nut-circleprogress {
+  position: relative;
+
+  .nut-circleprogress-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .nut-circleprogress__right {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: right;
+  }
+  .nut-circleprogress__left {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: left;
+  }
+
+  .nut-circleprogress__line {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    overflow: hidden;
+    &.nut-circleprogress__l {
+      top: 0px;
+      transform: rotate(0deg);
+      left: 0px;
+    }
+
+    &.nut-circleprogress__r {
+      top: 0px;
+      transform: rotate(180deg);
+      right: 0px;
+    }
+  }
+
+  .nut-circleprogress__progress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 16px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(29, 29, 33, 1);
+  }
+
+  .nut-circleprogress__line__c {
+    width: 200%;
+    height: 100%;
+    border: 10px solid transparent;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    transform: rotate(-45deg);
+  }
+}

src/packages/cricleprogress/circleprogress.tsx

+import React, { FunctionComponent } from 'react'
+import bem from '@/utils/bem'
+import './circleprogress.scss'
+
+export interface CircleProgressProps {
+  strokeInnerWidth: string | number
+  progress: string | number
+  isAuto: boolean
+  progressOption: object
+}
+const defaultProps = {
+  strokeInnerWidth: 10,
+  progress: 10,
+  isAuto: false,
+  progressOption: {},
+} as CircleProgressProps
+export const CircleProgress: FunctionComponent<
+  Partial<CircleProgressProps> & React.HTMLAttributes<HTMLDivElement>
+> = (props) => {
+  const { children, strokeInnerWidth, progress, isAuto, progressOption } = {
+    ...defaultProps,
+    ...props,
+  }
+  const b = bem('circleprogress')
+  const option = () => {
+    // 所有进度条的可配置项
+    let baseOption = {
+      radius: 50,
+      strokeOutWidth: 10,
+      backColor: '#d9d9d9',
+      progressColor: 'red',
+      cy: 1,
+      cx: 1,
+      size: 1,
+      startPosition: '',
+    }
+    Object.assign(baseOption, progressOption)
+    // 圆心位置自动生成
+    baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth
+    baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2
+    baseOption.startPosition = 'rotate(-90,' + baseOption.cx + ',' + baseOption.cy + ')'
+    return baseOption
+  }
+  const arcLength = () => {
+    let circleLength = Math.floor(2 * Math.PI * option().radius)
+    let progressLength = ((progress as number) / 100) * circleLength
+    return `${progressLength},${circleLength}`
+  }
+  return (
+    <div className={`${b()}`} style={{ height: `${option().size}px`, width: `${option().size}px` }}>
+      <svg height={option().size} width={option().size} x-mlns="http://www.w3.org/200/svg">
+        <circle
+          r={option().radius}
+          cx={option().cx}
+          cy={option().cy}
+          stroke={option().backColor}
+          strokeWidth={option().strokeOutWidth}
+          fill="none"
+        />
+        <circle
+          r={option().radius}
+          cx={option().cx}
+          cy={option().cy}
+          stroke={option().progressColor}
+          strokeWidth={strokeInnerWidth}
+          strokeDasharray={arcLength()}
+          transform={option().startPosition}
+          fill="none"
+          strokeLinecap="round"
+          style={{ transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s' }}
+        />
+      </svg>
+      <div className="nut-circleprogress-content">{!isAuto ? `${progress}%` : <>{children}</>}</div>
+    </div>
+  )
+}
+
+CircleProgress.defaultProps = defaultProps
+CircleProgress.displayName = 'NutCircleProgress'

src/packages/cricleprogress/demo.scss

+.demo__btn {
+  text-align: center;
+  width: 100%;
+  height: 50px;
+  border-top: 1px solid rgba(234, 240, 251, 1);
+  padding-top: 6px;
+  background: rgba(255, 255, 255, 1);
+  .nut-button {
+    margin-right: 10px;
+  }
+}
+.demo__piece {
+  display: flex;
+  justify-content: center;
+  background: rgba(255, 255, 255, 1);
+}

src/packages/cricleprogress/demo.tsx

+import React, { useState } from 'react'
+import { CircleProgress } from './circleprogress'
+import Button from '@/packages/button'
+import './demo.scss'
+
+const CricleProgressDemo = () => {
+  const [percent, setPercent] = useState(50)
+  const [strokeInnerWidth, setStrokeInnerWidth] = useState(10)
+  const progressOption = {
+    radius: 50,
+    strokeOutWidth: 10,
+    backColor: '#d9d9d9',
+    progressColor: 'red',
+  }
+  const setReduceVal = () => {
+    if (percent - 10 <= 0) {
+      setStrokeInnerWidth(0)
+      setPercent(0)
+      return
+    }
+    setPercent(percent - 10)
+  }
+  const setAddVal = () => {
+    setStrokeInnerWidth(10)
+    if (percent >= 100) {
+      return
+    }
+    setPercent(percent + 10)
+  }
+  return (
+    <>
+      <div className="demo">
+        <h2>基础用法</h2>
+        <div className="demo__piece">
+          <CircleProgress progress={10}></CircleProgress>
+        </div>
+
+        <h2>环形进度条自定义样式</h2>
+        <div className="demo__piece">
+          <CircleProgress progress={50} progressOption={progressOption}></CircleProgress>
+        </div>
+
+        <h2>环形进度条自定义内容</h2>
+        <div className="demo__piece">
+          <CircleProgress progress={50} isAuto={true}>
+            <div>自定义</div>
+          </CircleProgress>
+        </div>
+
+        <h2>动态改变环形进度条的进度</h2>
+        <div className="demo__piece">
+          <CircleProgress
+            progress={percent}
+            progressOption={progressOption}
+            strokeInnerWidth={strokeInnerWidth}
+          ></CircleProgress>
+        </div>
+        <div className="demo__btn">
+          <Button type="primary" onClick={setReduceVal}>
+            减少
+          </Button>
+          <Button type="primary" onClick={setAddVal}>
+            增加
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default CricleProgressDemo

src/packages/cricleprogress/doc.md

+# CricleProgress 进度条
+
+### 介绍
+
+展示操作或任务的当前进度。
+
+### 安装
+
+``` javascript
+import { CirecleProgress } from '@nutui/nutui';
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<CircleProgress progress={10}></CircleProgress>
+```
+### 环形进度条自定义样式
+
+```tsx
+<CircleProgress progress={50} progressOption={progressOption}></CircleProgress>
+```
+### 环形进度条自定义内容
+
+```tsx
+<CircleProgress progress={50} isAuto={true}>
+  <div>自定义</div>
+</CircleProgress>
+```
+### 动态改变环形进度条的进度
+
+```tsx
+<CircleProgress
+  progress={percent}
+  progressOption={progressOption}
+  strokeInnerWidth={strokeInnerWidth}
+></CircleProgress>
+```
+```tsx
+const [percent, setPercent] = useState(50)
+const [strokeInnerWidth, setStrokeInnerWidth] = useState(10)
+const progressOption = {
+  radius: 50,
+  strokeOutWidth: 10,
+  backColor: '#d9d9d9',
+  progressColor: 'red',
+}
+const setReduceVal = () => {
+  if (percent - 10 <= 0) {
+    setStrokeInnerWidth(0)
+    setPercent(0)
+    return
+  }
+  setPercent(percent - 10)
+}
+const setAddVal = () => {
+  setStrokeInnerWidth(10)
+  if (percent >= 100) {
+    return
+  }
+  setPercent(percent + 10)
+}
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | -----
+| progress | 百分比 | Number,String | 必传项，无默认值
+| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
+| isAuto | 是否自定义内容显示（taro暂不支持） | Boolean | false
+| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}
\ No newline at end of file

src/packages/cricleprogress/index.ts

+import { CircleProgress } from './circleprogress'
+export default CircleProgress