fix(Progress): 替换Progress组件部分样式为样式变量 (#334)

* fix(Badge): 替换Badge组件部分样式为样式变量

* fix(Progress): 修改prettier规则，校正Progress组件代码格式

Author: xingyan95

.prettierrc

@@ -1,7 +1,7 @@
 {
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
-  "jsxSingleQuote": true,
+  "jsxSingleQuote": false,
   "printWidth": 140,
   "semi": true,
   "useTabs": false,

packages/devui-vue/devui/progress/src/progress.scss

@@ -1,6 +1,8 @@
+@import '../../style/theme/color';
+
 .devui-progress--line {
   position: relative;
-  background: #dfe1e6;
+  background: $devui-dividing-line;
 
   .devui-progress-bar {
     width: 0;
@@ -12,7 +14,7 @@
   > span {
     display: block;
     white-space: nowrap;
-    color: #ffffff;
+    color: $devui-light-text;
     text-align: center;
     position: absolute;
     left: 0;
@@ -34,7 +36,7 @@
     width: 100%;
     margin: 0;
     padding: 0;
-    color: #252b3a;
+    color: $devui-text;
     line-height: 1;
     white-space: normal;
     text-align: center;

packages/devui-vue/devui/progress/src/progress.tsx

@@ -1,10 +1,4 @@
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  watch,
-} from 'vue';
-
+import { defineComponent, reactive, toRefs, watch } from 'vue';
 import './progress.scss';
 
 interface data {
@@ -43,18 +37,10 @@ export default defineComponent({
     showContent: {
       type: Boolean,
       default: true,
-    }
+    },
   },
   setup(props) {
-    const {
-      height,
-      percentage,
-      percentageText,
-      barBgColor,
-      isCircle,
-      strokeWidth,
-      showContent,
-    } = toRefs(props);
+    const { height, percentage, percentageText, barBgColor, isCircle, strokeWidth, showContent } = toRefs(props);
 
     const data: data = reactive({
       pathString: '',
@@ -78,17 +64,17 @@ export default defineComponent({
       const len = Math.PI * 2 * radius;
 
       data.trailPath = {
-        stroke: '#dfe1e6',
+        stroke: 'var(--devui-dividing-line, #dfe1e6)',
         strokeDasharray: `${len}px ${len}px`,
         strokeDashoffset: `0`,
-        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
+        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
       };
 
       data.strokePath = {
         stroke: barBgColor || null,
-        strokeDasharray: `${(percentage.value / 100) * len }px ${len}px`,
+        strokeDasharray: `${(percentage.value / 100) * len}px ${len}px`,
         strokeDashoffset: `0`,
-        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
+        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
       };
     };
 
@@ -103,26 +89,15 @@ export default defineComponent({
     };
   },
   render() {
-    const {
-      height,
-      percentage,
-      percentageText,
-      barBgColor,
-      isCircle,
-      strokeWidth,
-      showContent,
-      data,
-      $slots,
-    } = this;
+    const { height, percentage, percentageText, barBgColor, isCircle, strokeWidth, showContent, data, $slots } = this;
 
     const progressLine = (
       <div
         class="devui-progress--line"
         style={{
           height: height,
           borderRadius: height,
-        }}
-      >
+        }}>
         <div
           class="devui-progress-bar"
           style={{
@@ -135,16 +110,13 @@ export default defineComponent({
         <span
           style={{
             lineHeight: height,
-          }}
-        >
+          }}>
           {percentageText}
         </span>
       </div>
     );
 
-    const textElement = (
-      <span class="devui-progress-circle-text">{percentage}%</span>
-    );
+    const textElement = <span class="devui-progress-circle-text">{percentage}%</span>;
 
     const progressCircle = (
       <div class="devui-progress-circle">
@@ -171,10 +143,6 @@ export default defineComponent({
       </div>
     );
 
-    return (
-      <div class="devui-progress">
-        {!isCircle ? progressLine : progressCircle}
-      </div>
-    );
-  }
+    return <div class="devui-progress">{!isCircle ? progressLine : progressCircle}</div>;
+  },
 });