✨(component): 完善Progress组件 环形模式,新增circleSize和circleWidth两个属性来控制环形进度条尺寸和线条宽度

重新用SVG实现环形进度条,并在@Sight的建议下兼容了SVG夜间模式

package/component/src/component/progress/index.less

@@ -43,17 +43,10 @@
   display: inline-block;
 }
 
-.lay-progress-circle,
+.lay-progress-circle{
-.lay-progress-circle-bg {
-  width: 150px;
-  height: 150px;
   position: relative;
   border-radius: 50%;
-  -webkit-mask: radial-gradient(transparent 69px, #000 45px);
+  display: inline-block;
-}
-
-.lay-progress-circle-bg {
-  background-color: var(--global-neutral-color-3);
 }
 
 .lay-progress-circle__text {
@@ -63,11 +56,3 @@
   transform: translate(-50%, -50%);
 }
 
-.lay-progress-circle-corner {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  top: 72px;
-  left: 72px;
-}

package/component/src/component/progress/index.vue

@@ -16,9 +16,15 @@ export interface LayProgressProps {
   showText?: boolean;
   text?: string;
   circle?: boolean;
+  circleSize?: number;
+  circleWidth?: number;
 }
 
-const props = defineProps<LayProgressProps>();
+const props = withDefaults(defineProps<LayProgressProps>(), {
+  circle: false,
+  circleSize: 150,
+  circleWidth: 6,
+});
 
 const styles = computed(() => {
   return [
@@ -70,44 +76,59 @@ const getCircleRotate = computed(() => {
   }
   return (percent / 100) * 360;
 });
+
+const getStrokeDasharray = computed(() => {
+  let percent;
+  if (typeof props.percent == "string") {
+    percent = parseInt(props.percent);
+  } else {
+    percent = props.percent;
+  }
+  let radii = props.circleSize / 2 - props.circleWidth / 2;
+  let perimeter = Math.PI * 2 * radii;
+  return `${(percent / 100) * perimeter}px ${perimeter}px`;
+});
+
+const getPathD = computed(() => {
+  let circleSize = props.circleSize;
+  let circleWidth = props.circleWidth;
+  return `M ${circleSize / 2} ${circleSize / 2} m 0, -${
+    (circleSize - circleWidth) / 2
+  } a ${(circleSize - circleWidth) / 2}, ${
+    (circleSize - circleWidth) / 2
+  } 0 1, 1 0, ${circleSize - circleWidth} a ${
+    (circleSize - circleWidth) / 2
+  }, ${(circleSize - circleWidth) / 2} 0 1, 1 0, -${circleSize - circleWidth}`;
+});
 </script>
 
 <template>
-  <template v-if="circle">
+  <div class="lay-progress-circle" v-if="circle">
-    <div class="lay-progress-circle-container">
+    <svg
-      <div class="lay-progress-circle-bg">
+      :viewBox="`0 0 ${circleSize} ${circleSize}`"
-        <div
+      :width="circleSize"
-          class="lay-progress-circle"
+      :height="circleSize"
-          :style="{
+    >
-            background: `conic-gradient(${getCircleColor} 0, ${getCircleColor} ${props.percent}%, transparent ${percent}%, transparent)`,
+      <path
-          }"
+        :d="getPathD"
-        ></div>
+        style="fill: none; stroke: var(--global-neutral-color-3)"
-      </div>
+        :style="{ strokeWidth: `${circleWidth}px` }"
-      <div style="position: absolute; top: 0; left: 0">
+      ></path>
-        <div
+      <path
-          class="lay-progress-circle-corner"
+        :d="getPathD"
-          :style="{
+        style="fill: none; stroke-linecap: round"
-            backgroundColor: getCircleColor,
+        :style="{
-            transform: `translate(0, -72px)`,
+          strokeDasharray: getStrokeDasharray,
-          }"
+          stroke: getCircleColor,
-        ></div>
+          strokeWidth: `${circleWidth}px`,
-        <div
+        }"
-          class="lay-progress-circle-corner"
+      ></path>
-          :style="{
+    </svg>
-            backgroundColor: getCircleColor,
+    <div class="layui-progress-text lay-progress-circle__text" v-if="showText">
-            transform: `rotate(${getCircleRotate}deg) translate(0, -72px)`,
+      {{ text ? text : percent + "%" }}
-          }"
-        ></div>
-      </div>
-
-      <div
-        class="layui-progress-text lay-progress-circle__text"
-        v-if="showText"
-      >
-        {{ text ? text : percent + "%" }}
-      </div>
     </div>
-  </template>
+  </div>
+
   <div class="layui-progress" :class="'layui-progress-' + size" v-else>
     <div
       class="layui-progress-bar"

package/component/src/provider/index.vue

@@ -58,7 +58,7 @@ const changeTheme = (theme: string) => {
 
   const defaultFixes: DynamicThemeFix = {
     css: "",
-    invert: [],
+    invert: ['.lay-progress-circle svg'],
     ignoreImageAnalysis: [],
     disableStyleSheetsProxy: false,
     ignoreInlineStyle: ignoreInlineStyle,

package/document/src/document/zh-CN/components/progress.md

@@ -124,9 +124,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
+  <lay-progress percent="10" circle :show-text="showText" style="margin-right:10px"></lay-progress>
-  <lay-progress percent="60" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
+  <lay-progress percent="20" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
-  <lay-progress percent="30" circle :show-text="showText" theme="blue"></lay-progress>
+  <lay-progress percent="30" circle :show-text="showText" theme="blue" text="不同尺寸" circleSize="200" circleWidth="20" style="margin-right:10px"></lay-progress>
+  <lay-progress percent="70" circle :show-text="showText" text="宽度控制" theme="orange" circleSize="200" circleWidth="40"></lay-progress>
 </template>
 
 <script>
@@ -158,8 +159,9 @@ export default {
 | text     | 提示     | --                                            |
 | color    | 颜色     | --                                            |
 | showText | 展示描述  | --                                            |
-|circle    | 环形进度条| 默认为 `false`                                 |
+| circle    | 环形进度条| 默认为 `false`                                 |
-
+| circleSize| 环形进度条尺寸| 默认为 `150` 单位是px                        |
+| circleWidth| 环形进度条线条宽度| 默认为 `6` 单位是px                       |
 :::