🐛(component): progress 环形进度条兼容夜间模式

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

@@ -38,16 +38,36 @@
   padding: 0 10px;
   color: #fff;
 }
-.lay-progress-circle {
+.lay-progress-circle-container {
   position: relative;
   display: inline-block;
-  width: 120px;
-  height: 120px;
-  text-align: center;
 }
+
+.lay-progress-circle,
+.lay-progress-circle-bg {
+  width: 150px;
+  height: 150px;
+  position: relative;
+  border-radius: 50%;
+  -webkit-mask: radial-gradient(transparent 69px, #000 45px);
+}
+
+.lay-progress-circle-bg {
+  background-color: var(--global-neutral-color-3);
+}
+
 .lay-progress-circle__text {
   position: absolute;
   top: 50%;
   left: 50%;
   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

@@ -29,16 +29,6 @@ const styles = computed(() => {
   ];
 });
 
-const getStrokeDasharray = computed(() => {
-  let percent;
-  if (typeof props.percent == "string") {
-    percent = parseInt(props.percent);
-  } else {
-    percent = props.percent;
-  }
-  return `${percent * 31.4}` + "px 3140px";
-});
-
 const getCircleColor = computed(() => {
   let color;
   switch (props.theme) {
@@ -64,36 +54,56 @@ const getCircleColor = computed(() => {
       color = "#fafafa";
       break;
     default:
-      color = "var(--global-checked-color)";
+      color = "#5FB878";
       break;
   }
   color = props.color ? props.color : color;
   return color;
 });
+
+const getCircleRotate = computed(() => {
+  let percent;
+  if (typeof props.percent == "string") {
+    percent = parseInt(props.percent);
+  } else {
+    percent = props.percent;
+  }
+  return (percent / 100) * 360;
+});
 </script>
 
 <template>
   <template v-if="circle">
-    <div class="lay-progress-circle">
+    <div class="lay-progress-circle-container">
-      <svg viewBox="0 0 1060 1060">
+      <div class="lay-progress-circle-bg">
-        <path
+        <div
-          d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
+          class="lay-progress-circle"
-          style="
-            fill: none;
-            stroke-width: 50px;
-            stroke: var(--global-neutral-color-3);
-          "
-        ></path>
-        <path
-          d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-          style="stroke-width: 51px; fill: none; stroke-linecap: round"
           :style="{
-            strokeDasharray: getStrokeDasharray,
+            background: `conic-gradient(${getCircleColor} 0, ${getCircleColor} ${props.percent}%, transparent ${percent}%, transparent)`,
-            stroke: getCircleColor,
           }"
-        ></path>
+        ></div>
-      </svg>
+      </div>
-      <div class="lay-progress-circle__text" v-if="showText">
+      <div style="position: absolute; top: 0; left: 0">
+        <div
+          class="lay-progress-circle-corner"
+          :style="{
+            backgroundColor: getCircleColor,
+            transform: `translate(0, -72px)`,
+          }"
+        ></div>
+        <div
+          class="lay-progress-circle-corner"
+          :style="{
+            backgroundColor: getCircleColor,
+            transform: `rotate(${getCircleRotate}deg) translate(0, -72px)`,
+          }"
+        ></div>
+      </div>
+
+      <div
+        class="layui-progress-text lay-progress-circle__text"
+        v-if="showText"
+      >
         {{ text ? text : percent + "%" }}
       </div>
     </div>

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

@@ -125,7 +125,8 @@ export default {
 
 <template>
   <lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
-  <lay-progress percent="60" circle :show-text="showText" text="销售量"></lay-progress>
+  <lay-progress percent="60" 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>
 </template>
 
 <script>