From 94fa7606c540136b449b7953ef6be0db77d4bdb8 Mon Sep 17 00:00:00 2001
From: binbin <binbin@MacBook-Pro.local>
Date: Fri, 15 Sep 2023 17:13:48 +0800
Subject: [PATCH 1/4] feat(progress): support linear gradient color when mode
 is circle

---
 packages/varlet-ui/src/progress/Progress.vue  | 39 ++++++++++--
 .../__snapshots__/index.spec.js.snap          | 19 ++++++
 .../src/progress/__tests__/index.spec.js      | 17 +++++-
 packages/varlet-ui/src/progress/docs/en-US.md | 61 ++++++++++---------
 packages/varlet-ui/src/progress/docs/zh-CN.md |  7 ++-
 .../varlet-ui/src/progress/example/index.vue  | 11 +++-
 packages/varlet-ui/src/progress/props.ts      |  2 +-
 packages/varlet-ui/types/progress.d.ts        |  2 +-
 8 files changed, 118 insertions(+), 40 deletions(-)
 create mode 100644 packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap

diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index e316451e0c6..dead64abd38 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -6,13 +6,13 @@
         :style="{ height: toSizeUnit(lineWidth), background: trackColor }"
       >
         <div v-if="indeterminate" :class="classes([indeterminate, n('linear-indeterminate')])">
-          <div :class="classes(n(`linear--${type}`))" :style="{ background: color }"></div>
-          <div :class="classes(n(`linear--${type}`))" :style="{ background: color }"></div>
+          <div :class="classes(n(`linear--${type}`))" :style="{ background: progressColor }"></div>
+          <div :class="classes(n(`linear--${type}`))" :style="{ background: progressColor }"></div>
         </div>
         <div
           v-else
           :class="classes(n('linear-certain'), n(`linear--${type}`), [ripple, n('linear-ripple')])"
-          :style="{ background: color, width: linearProps.width }"
+          :style="{ background: progressColor, width: linearProps.width }"
         ></div>
       </div>
       <div :class="classes(n('linear-label'), [labelClass, labelClass])" v-if="label">
@@ -28,6 +28,16 @@
       :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }"
     >
       <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
+        <defs v-if="isPlainObject(color)">
+          <linearGradient x1="100%" y1="0%" x2="0%" y2="0%" :id="id">
+            <stop
+              v-for="(progress, idx) in linearGradientProgress"
+              :key="idx"
+              :offset="progress"
+              :stop-color="color[progress]"
+            ></stop>
+          </linearGradient>
+        </defs>
         <circle
           v-if="track"
           :class="n('circle-background')"
@@ -51,7 +61,7 @@
           :stroke-dasharray="CIRCUMFERENCE"
           :stroke-dashoffset="circleProps.strokeOffset"
           :style="{
-            stroke: color,
+            stroke: progressColor,
           }"
         ></circle>
       </svg>
@@ -68,13 +78,14 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
-import { toNumber } from '@varlet/shared'
+import { isPlainObject, toNumber } from '@varlet/shared'
 import { toSizeUnit, toPxNum } from '../utils/elements'
 import { createNamespace } from '../utils/components'
 
 const ONE_HUNDRED = 100
 const RADIUS = 20
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+let uid = 0
 
 const { name, n, classes } = createNamespace('progress')
 
@@ -82,6 +93,7 @@ export default defineComponent({
   name,
   props,
   setup(props) {
+    const id = `var-progress-${uid++}`
     const linearProps = computed(() => {
       const value = toNumber(props.value)
       const width = value > ONE_HUNDRED ? ONE_HUNDRED : value
@@ -92,6 +104,7 @@ export default defineComponent({
         roundValue: `${roundValue}%`,
       }
     })
+
     const circleProps = computed(() => {
       const { size, lineWidth, value } = props
 
@@ -109,11 +122,27 @@ export default defineComponent({
       }
     })
 
+    const progressColor = computed(() => {
+      if (isPlainObject(props.color)) {
+        return `url(#${id})`
+      }
+
+      return props.color
+    })
+
+    const linearGradientProgress = computed(() =>
+      Object.keys(props.color!).sort((a, b) => parseFloat(a) - parseFloat(b))
+    )
+
     return {
+      id,
       linearProps,
       CIRCUMFERENCE,
       RADIUS,
       circleProps,
+      progressColor,
+      linearGradientProgress,
+      isPlainObject,
       n,
       classes,
       toSizeUnit,
diff --git a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..ab0b39cf9d7
--- /dev/null
+++ b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test progress component props > test circle progress color 1`] = `
+"<div class=\\"var-progress\\">
+  <!--v-if-->
+  <div class=\\"var-progress__circle\\" style=\\"width: 40px; height: 40px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 44.44444444444444 44.44444444444444\\">
+      <defs>
+        <linearGradient x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\" id=\\"var-progress-10\\">
+          <stop offset=\\"0%\\" stop-color=\\"#3fecff\\"></stop>
+          <stop offset=\\"100%\\" stop-color=\\"#6149f6\\"></stop>
+        </linearGradient>
+      </defs>
+      <circle class=\\"var-progress__circle-background\\" cx=\\"50%\\" cy=\\"50%\\" r=\\"20\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\"></circle>
+      <circle class=\\"var-progress__circle-certain var-progress__circle--primary\\" cx=\\"50%\\" cy=\\"50%\\" r=\\"20\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress-10);\\"></circle>
+    </svg>
+    <!--v-if-->
+  </div>
+</div>"
+`;
diff --git a/packages/varlet-ui/src/progress/__tests__/index.spec.js b/packages/varlet-ui/src/progress/__tests__/index.spec.js
index a274fb9778a..cd5f35864ce 100644
--- a/packages/varlet-ui/src/progress/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/progress/__tests__/index.spec.js
@@ -53,7 +53,7 @@ describe('test progress component props', () => {
     wrapper.unmount()
   })
 
-  test('test progress color', () => {
+  test('test linear progress color', () => {
     const wrapper = mount(VarProgress, {
       props: {
         color: 'red',
@@ -64,6 +64,21 @@ describe('test progress component props', () => {
     wrapper.unmount()
   })
 
+  test('test circle progress color', () => {
+    const wrapper = mount(VarProgress, {
+      props: {
+        color: {
+          '0%': '#3fecff',
+          '100%': '#6149f6',
+        },
+        mode: 'circle',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
+
   test('test progress track-color', () => {
     const wrapper = mount(VarProgress, {
       props: {
diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
index 97cb112f04d..3c5d6ee03a7 100644
--- a/packages/varlet-ui/src/progress/docs/en-US.md
+++ b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -8,21 +8,21 @@ Display the current progress of an operation flow.
 
 ```html
 <script setup>
-  import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
-  const value = ref(0)
-  const interval = ref(0)
+const value = ref(0)
+const interval = ref(0)
 
-  onMounted(() => {
-    interval.value = window.setInterval(() => {
-      if (value.value >= 100) value.value = 0
-      else value.value += 20
-    }, 1000)
-  })
+onMounted(() => {
+  interval.value = window.setInterval(() => {
+    if (value.value >= 100) value.value = 0
+    else value.value += 20
+  }, 1000)
+})
 
-  onUnmounted(() => {
-    window.clearInterval(interval.value)
-  })
+onUnmounted(() => {
+  window.clearInterval(interval.value)
+})
 </script>
 
 <template>
@@ -52,25 +52,30 @@ Set the line width, progress bar color and track color through the attributes of
 
 ```html
 <script setup>
-  import { ref, onMounted, onUnmounted } from 'vue'
-
-  const value = ref(0)
-  const interval = ref(0)
-
-  onMounted(() => {
-    interval.value = window.setInterval(() => {
-      if (value.value >= 100) value.value = 0
-      else value.value += 20
-    }, 1000)
-  })
-
-  onUnmounted(() => {
-    window.clearInterval(interval.value)
-  })
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const value = ref(0)
+const interval = ref(0)
+const gradientColor = {
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+}
+
+onMounted(() => {
+  interval.value = window.setInterval(() => {
+    if (value.value >= 100) value.value = 0
+    else value.value += 20
+  }, 1000)
+})
+
+onUnmounted(() => {
+  window.clearInterval(interval.value)
+})
 </script>
 
 <template>
   <var-space :size="[20, 20]">
+    <var-progress mode="circle" :value="50" :size="60"  :color="gradientColor" />
     <var-progress mode="circle" :value="75" :size="60" :track="false" />
     <var-progress mode="circle" label :value="value" :line-width="5" :size="60" />
     <var-progress mode="circle" type="success" label :value="100" :line-width="5" :size="60">
@@ -108,7 +113,7 @@ Enable indeterminate animation through the `indeterminate` attribute when loadin
 | `type`        | Progress type, Can be set to `default` `primary` `info` `success` `warning` `danger` | _string_  | `primary` |
 | `value`       | Completion value                                                                    | _string \| number_   |  `0`  |
 | `line-width`  | Width of the progress bar                                                           | _string \| number_   | `4` |
-| `color`       | Color of the progress bar                                                           | _string_ | `#005CAF` |
+| `color`       | Color of the progress bar                                    | _string \| object_ | `#005CAF` |
 | `track-color` | Color of the progress track                                                         | _string_ | `#d8d8d8` |
 | `label`       | Whether the label is visible or not                                                 | _boolean_ | `false`   |
 | `label-class` | Custom label class name                                                             | _string_ | `-`       |
diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
index 4dffc9467b1..acdfeb4b476 100644
--- a/packages/varlet-ui/src/progress/docs/zh-CN.md
+++ b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -56,6 +56,10 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const value = ref(0)
 const interval = ref(0)
+const gradientColor = {
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+}
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -71,6 +75,7 @@ onUnmounted(() => {
 
 <template>
   <var-space :size="[20, 20]">
+    <var-progress mode="circle" :value="50" :size="60"  :color="gradientColor" />
     <var-progress mode="circle" :value="75" :size="60" :track="false" />
     <var-progress mode="circle" label :value="value" :line-width="5" :size="60" />
     <var-progress mode="circle" type="success" label :value="100" :line-width="5" :size="60">
@@ -108,7 +113,7 @@ onUnmounted(() => {
 | `type`        | 类型，可选值为 `default` `primary` `info` `success` `warning` `danger` | _string_ | `primary`      |
 | `value`       | `progress` 的进度                                                  | _string \| number_   |  `0`  |
 | `line-width`  | `progress` 的线宽                                                  | _string \| number_   | `4` |
-| `color`       | `progress` 的颜色                                                  | _string_ | `#005CAF` |
+| `color`       | `progress` 的颜色                                                  | _string \| object_ | `#005CAF` |
 | `track-color` | `progress` 轨道的颜色                                                | _string_ | `#d8d8d8` |
 | `label`       | 是否显示 `label`                                                    | _boolean_ | `false`   |
 | `label-class` | 自定义 `label` 的类名                                                 | _string_ | `-`       |
diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
index 8d6a9222543..075f91b236b 100644
--- a/packages/varlet-ui/src/progress/example/index.vue
+++ b/packages/varlet-ui/src/progress/example/index.vue
@@ -8,6 +8,10 @@ import { pack, use } from './locale'
 
 const value = ref(0)
 const interval = ref(0)
+const gradientColor = {
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+}
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -41,9 +45,10 @@ onUnmounted(() => {
 
   <app-type>{{ pack.circle }}</app-type>
   <var-space :size="['8vmin', '8vmin']">
-    <var-progress mode="circle" :value="75" size="18vmin" :track="false" />
-    <var-progress mode="circle" label :value="value" line-width="5" size="18vmin" />
-    <var-progress mode="circle" type="success" label :value="100" line-width="5" size="18vmin"> success </var-progress>
+    <var-progress mode="circle" :value="50" size="16vmin" :color="gradientColor" />
+    <var-progress mode="circle" :value="75" size="16vmin" :track="false" />
+    <var-progress mode="circle" label :value="value" line-width="5" size="16vmin" />
+    <var-progress mode="circle" type="success" label :value="100" line-width="5" size="16vmin"> success </var-progress>
   </var-space>
 
   <app-type>{{ pack.indeterminateProgress }}</app-type>
diff --git a/packages/varlet-ui/src/progress/props.ts b/packages/varlet-ui/src/progress/props.ts
index ce242371c64..43da230b577 100644
--- a/packages/varlet-ui/src/progress/props.ts
+++ b/packages/varlet-ui/src/progress/props.ts
@@ -13,7 +13,7 @@ export const props = {
     type: [Number, String],
     default: 4,
   },
-  color: String,
+  color: [String, Object] as PropType<string | Record<string, string>>,
   trackColor: String,
   ripple: Boolean,
   value: {
diff --git a/packages/varlet-ui/types/progress.d.ts b/packages/varlet-ui/types/progress.d.ts
index a73a4cde953..60e5c31baf3 100644
--- a/packages/varlet-ui/types/progress.d.ts
+++ b/packages/varlet-ui/types/progress.d.ts
@@ -12,7 +12,7 @@ export interface ProgressProps extends BasicAttributes {
   type?: ProgressType
   indeterminate?: boolean
   lineWidth?: string | number
-  color?: string
+  color?: string | Record<string, string>
   trackColor?: string
   label?: boolean
   labelClass?: string

From dbbc1d942da2b14fa8d909d706e1ff94ca0d536d Mon Sep 17 00:00:00 2001
From: binbin <binbin@MacBook-Pro.local>
Date: Fri, 15 Sep 2023 18:12:06 +0800
Subject: [PATCH 2/4] refactor(progress): optimize code

---
 packages/varlet-ui/src/progress/Progress.vue      |  1 +
 packages/varlet-ui/src/progress/docs/en-US.md     | 14 ++++++++++----
 packages/varlet-ui/src/progress/docs/zh-CN.md     | 12 +++++++++---
 packages/varlet-ui/src/progress/example/index.vue | 14 ++++++++------
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index dead64abd38..62dfd5532d4 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -123,6 +123,7 @@ export default defineComponent({
     })
 
     const progressColor = computed(() => {
+      // set linear gradient color for circle progress
       if (isPlainObject(props.color)) {
         return `url(#${id})`
       }
diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
index 3c5d6ee03a7..d0cd532eddf 100644
--- a/packages/varlet-ui/src/progress/docs/en-US.md
+++ b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -39,11 +39,17 @@ onUnmounted(() => {
 Set the line width, progress bar color and track color through the attributes of `type`, `line-width`, `color`, `track-color`.
 
 ```html
+<script setup>
+import { ref } from 'vue'
+
+const gradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
+</script>
 <template>
   <var-space direction="column" :size="[12, 12]">
+    <var-progress :value="40" :color="gradientColor"/>
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
-    <var-progress value="80" line-width="8" color="#ff9f00" track-color="#f5cb90" />
+    <var-progress :value="80" :line-width="8" color="#ff9f00" track-color="#f5cb90" />
   </var-space>
 </template>
 ```
@@ -56,10 +62,10 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const value = ref(0)
 const interval = ref(0)
-const gradientColor = {
+const gradientColor = ref({
   '0%': '#3fecff',
   '100%': '#6149f6',
-}
+})
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -113,7 +119,7 @@ Enable indeterminate animation through the `indeterminate` attribute when loadin
 | `type`        | Progress type, Can be set to `default` `primary` `info` `success` `warning` `danger` | _string_  | `primary` |
 | `value`       | Completion value                                                                    | _string \| number_   |  `0`  |
 | `line-width`  | Width of the progress bar                                                           | _string \| number_   | `4` |
-| `color`       | Color of the progress bar                                    | _string \| object_ | `#005CAF` |
+| `color`       | Color of the progress bar (The circular progress bar sets the gradient color, please use object)                                    | _string \| object_ | `-` |
 | `track-color` | Color of the progress track                                                         | _string_ | `#d8d8d8` |
 | `label`       | Whether the label is visible or not                                                 | _boolean_ | `false`   |
 | `label-class` | Custom label class name                                                             | _string_ | `-`       |
diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
index acdfeb4b476..ba6a0ab294f 100644
--- a/packages/varlet-ui/src/progress/docs/zh-CN.md
+++ b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -39,8 +39,14 @@ onUnmounted(() => {
 通过 `type`、`line-width`、`color`、`track-color` 属性设置线宽、进度条颜色、轨道颜色。
 
 ```html
+<script setup>
+import { ref } from 'vue'
+
+const gradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
+</script>
 <template>
   <var-space direction="column" :size="[12, 12]">
+    <var-progress :value="40" :color="gradientColor"/>
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
     <var-progress :value="80" :line-width="8" color="#ff9f00" track-color="#f5cb90" />
@@ -56,10 +62,10 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const value = ref(0)
 const interval = ref(0)
-const gradientColor = {
+const gradientColor = ref({
   '0%': '#3fecff',
   '100%': '#6149f6',
-}
+})
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -113,7 +119,7 @@ onUnmounted(() => {
 | `type`        | 类型，可选值为 `default` `primary` `info` `success` `warning` `danger` | _string_ | `primary`      |
 | `value`       | `progress` 的进度                                                  | _string \| number_   |  `0`  |
 | `line-width`  | `progress` 的线宽                                                  | _string \| number_   | `4` |
-| `color`       | `progress` 的颜色                                                  | _string \| object_ | `#005CAF` |
+| `color`       | `progress` 的颜色 (环形进度条设置渐变色请使用object)                                                  | _string \| object_ | `-` |
 | `track-color` | `progress` 轨道的颜色                                                | _string_ | `#d8d8d8` |
 | `label`       | 是否显示 `label`                                                    | _boolean_ | `false`   |
 | `label-class` | 自定义 `label` 的类名                                                 | _string_ | `-`       |
diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
index 075f91b236b..50485843f89 100644
--- a/packages/varlet-ui/src/progress/example/index.vue
+++ b/packages/varlet-ui/src/progress/example/index.vue
@@ -8,10 +8,11 @@ import { pack, use } from './locale'
 
 const value = ref(0)
 const interval = ref(0)
-const gradientColor = {
+const circleGradientColor = ref({
   '0%': '#3fecff',
   '100%': '#6149f6',
-}
+})
+const linearGradientColor = ref('linear-gradient(131.53deg, #3fecff 0%, #6149f6 100%)')
 
 onMounted(() => {
   interval.value = window.setInterval(() => {
@@ -38,6 +39,7 @@ onUnmounted(() => {
 
   <app-type>{{ pack.style }}</app-type>
   <var-space direction="column" :size="['3vh', '3vh']">
+    <var-progress :value="40" :color="linearGradientColor" />
     <var-progress type="info" :value="40" />
     <var-progress type="success" :value="60" />
     <var-progress value="80" line-width="8" color="#ff9f00" track-color="#f5cb90" />
@@ -45,10 +47,10 @@ onUnmounted(() => {
 
   <app-type>{{ pack.circle }}</app-type>
   <var-space :size="['8vmin', '8vmin']">
-    <var-progress mode="circle" :value="50" size="16vmin" :color="gradientColor" />
-    <var-progress mode="circle" :value="75" size="16vmin" :track="false" />
-    <var-progress mode="circle" label :value="value" line-width="5" size="16vmin" />
-    <var-progress mode="circle" type="success" label :value="100" line-width="5" size="16vmin"> success </var-progress>
+    <var-progress mode="circle" :value="50" size="18vmin" :color="circleGradientColor" />
+    <var-progress mode="circle" :value="75" size="18vmin" :track="false" />
+    <var-progress mode="circle" label :value="value" line-width="5" size="18vmin" />
+    <var-progress mode="circle" type="success" label :value="100" line-width="5" size="18vmin"> success </var-progress>
   </var-space>
 
   <app-type>{{ pack.indeterminateProgress }}</app-type>

From bab64113d84eb0577dff74670ea15fd0f089dfd7 Mon Sep 17 00:00:00 2001
From: binbin <binbin@MacBook-Pro.local>
Date: Mon, 18 Sep 2023 12:37:56 +0800
Subject: [PATCH 3/4] refactor(progress): replace circle with path

---
 packages/varlet-ui/src/progress/Progress.vue  | 30 +++++++++++--------
 .../__snapshots__/index.spec.js.snap          | 10 ++++---
 .../src/progress/__tests__/index.spec.js      |  3 +-
 .../varlet-ui/src/progress/example/index.vue  |  2 +-
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index 62dfd5532d4..ba3ffaf8db2 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -27,9 +27,9 @@
       :class="classes(n('circle'), [indeterminate, n('circle-indeterminate')])"
       :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }"
     >
-      <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
+      <svg :class="n('circle-svg')" :viewBox="circleProps.viewBox">
         <defs v-if="isPlainObject(color)">
-          <linearGradient x1="100%" y1="0%" x2="0%" y2="0%" :id="id">
+          <linearGradient :id="id" x1="100%" y1="0%" x2="0%" y2="0%">
             <stop
               v-for="(progress, idx) in linearGradientProgress"
               :key="idx"
@@ -38,32 +38,30 @@
             ></stop>
           </linearGradient>
         </defs>
-        <circle
+        <path
           v-if="track"
           :class="n('circle-background')"
-          cx="50%"
-          cy="50%"
-          :r="RADIUS"
+          :d="circleProps.path"
           fill="transparent"
           :stroke-width="circleProps.strokeWidth"
           :stroke-dasharray="CIRCUMFERENCE"
           :style="{
             stroke: trackColor,
           }"
-        ></circle>
-        <circle
+        ></path>
+        <path
           :class="classes(n('circle-certain'), n(`circle--${type}`), [indeterminate, n('circle-overlay')])"
-          cx="50%"
-          cy="50%"
-          :r="RADIUS"
+          :d="circleProps.path"
           fill="transparent"
           :stroke-width="circleProps.strokeWidth"
           :stroke-dasharray="CIRCUMFERENCE"
           :stroke-dashoffset="circleProps.strokeOffset"
           :style="{
             stroke: progressColor,
+            transform: `rotateZ(${rotate}deg)`,
+            transformOrigin: '50% 50%',
           }"
-        ></circle>
+        ></path>
       </svg>
 
       <div :class="classes(n('circle-label'), [labelClass, labelClass])" v-if="label">
@@ -114,11 +112,19 @@ export default defineComponent({
       const strokeOffset = `${((ONE_HUNDRED - roundValue) / ONE_HUNDRED) * CIRCUMFERENCE}`
       const strokeWidth = (toPxNum(lineWidth) / toPxNum(size)) * diameter
 
+      const beginPositionX = 0
+      const beginPositionY = -RADIUS
+      const endPositionX = 0
+      const endPositionY = -2 * RADIUS
+      const path = `M ${diameter / 2} ${diameter / 2} m ${beginPositionX} ${beginPositionY} a ${RADIUS} ${RADIUS} 
+        0 1 1 ${endPositionX} ${-endPositionY} a ${RADIUS} ${RADIUS} 0 1 1 ${-endPositionX} ${endPositionY}`
+
       return {
         strokeWidth,
         viewBox,
         strokeOffset,
         roundValue: `${roundValue}%`,
+        path,
       }
     })
 
diff --git a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
index ab0b39cf9d7..58ae5e9d7a4 100644
--- a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
@@ -3,15 +3,17 @@
 exports[`test progress component props > test circle progress color 1`] = `
 "<div class=\\"var-progress\\">
   <!--v-if-->
-  <div class=\\"var-progress__circle\\" style=\\"width: 40px; height: 40px;\\"><svg class=\\"var-progress__circle-svg\\" style=\\"transform: rotate(-90deg);\\" viewBox=\\"0 0 44.44444444444444 44.44444444444444\\">
+  <div class=\\"var-progress__circle\\" style=\\"width: 40px; height: 40px;\\"><svg class=\\"var-progress__circle-svg\\" viewBox=\\"0 0 44.44444444444444 44.44444444444444\\">
       <defs>
-        <linearGradient x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\" id=\\"var-progress-10\\">
+        <linearGradient id=\\"var-progress-10\\" x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\">
           <stop offset=\\"0%\\" stop-color=\\"#3fecff\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#6149f6\\"></stop>
         </linearGradient>
       </defs>
-      <circle class=\\"var-progress__circle-background\\" cx=\\"50%\\" cy=\\"50%\\" r=\\"20\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\"></circle>
-      <circle class=\\"var-progress__circle-certain var-progress__circle--primary\\" cx=\\"50%\\" cy=\\"50%\\" r=\\"20\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress-10);\\"></circle>
+      <path class=\\"var-progress__circle-background\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
+        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\"></path>
+      <path class=\\"var-progress__circle-certain var-progress__circle--primary\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
+        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress-10); transform: rotateZ(0deg); transform-origin: 50% 50%;\\"></path>
     </svg>
     <!--v-if-->
   </div>
diff --git a/packages/varlet-ui/src/progress/__tests__/index.spec.js b/packages/varlet-ui/src/progress/__tests__/index.spec.js
index cd5f35864ce..98d936714c3 100644
--- a/packages/varlet-ui/src/progress/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/progress/__tests__/index.spec.js
@@ -149,7 +149,8 @@ describe('test progress component props', () => {
       },
     })
 
-    expect(wrapper.find('.var-progress__circle-svg').attributes('style')).toContain('transform: rotate(-80deg);')
+    expect(wrapper.find('.var-progress__circle-certain').attributes('style')).toContain('transform: rotateZ(10deg);')
+    expect(wrapper.find('.var-progress__circle-certain').attributes('style')).toContain('transform-origin: 50% 50%;')
     wrapper.unmount()
   })
 
diff --git a/packages/varlet-ui/src/progress/example/index.vue b/packages/varlet-ui/src/progress/example/index.vue
index 50485843f89..3a239b979e6 100644
--- a/packages/varlet-ui/src/progress/example/index.vue
+++ b/packages/varlet-ui/src/progress/example/index.vue
@@ -47,7 +47,7 @@ onUnmounted(() => {
 
   <app-type>{{ pack.circle }}</app-type>
   <var-space :size="['8vmin', '8vmin']">
-    <var-progress mode="circle" :value="50" size="18vmin" :color="circleGradientColor" />
+    <var-progress mode="circle" :value="100" size="18vmin" :color="circleGradientColor" />
     <var-progress mode="circle" :value="75" size="18vmin" :track="false" />
     <var-progress mode="circle" label :value="value" line-width="5" size="18vmin" />
     <var-progress mode="circle" type="success" label :value="100" line-width="5" size="18vmin"> success </var-progress>

From e7d2fa3acd2f9af45d3897c2f4f55be410fc3335 Mon Sep 17 00:00:00 2001
From: binbin <binbin@MacBook-Pro.local>
Date: Tue, 19 Sep 2023 23:30:39 +0800
Subject: [PATCH 4/4] feat(varlet/use): add useId hook

---
 packages/varlet-ui/src/progress/Progress.vue       |  6 +++---
 .../__tests__/__snapshots__/index.spec.js.snap     |  4 ++--
 packages/varlet-use/src/index.ts                   |  1 +
 packages/varlet-use/src/useId.ts                   | 14 ++++++++++++++
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 packages/varlet-use/src/useId.ts

diff --git a/packages/varlet-ui/src/progress/Progress.vue b/packages/varlet-ui/src/progress/Progress.vue
index ba3ffaf8db2..1ec960a43b1 100644
--- a/packages/varlet-ui/src/progress/Progress.vue
+++ b/packages/varlet-ui/src/progress/Progress.vue
@@ -77,13 +77,13 @@
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
 import { isPlainObject, toNumber } from '@varlet/shared'
+import { useId } from '@varlet/use'
 import { toSizeUnit, toPxNum } from '../utils/elements'
 import { createNamespace } from '../utils/components'
 
 const ONE_HUNDRED = 100
 const RADIUS = 20
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS
-let uid = 0
 
 const { name, n, classes } = createNamespace('progress')
 
@@ -91,7 +91,7 @@ export default defineComponent({
   name,
   props,
   setup(props) {
-    const id = `var-progress-${uid++}`
+    const id = useId()
     const linearProps = computed(() => {
       const value = toNumber(props.value)
       const width = value > ONE_HUNDRED ? ONE_HUNDRED : value
@@ -131,7 +131,7 @@ export default defineComponent({
     const progressColor = computed(() => {
       // set linear gradient color for circle progress
       if (isPlainObject(props.color)) {
-        return `url(#${id})`
+        return `url(#${id.value})`
       }
 
       return props.color
diff --git a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
index 58ae5e9d7a4..d824f6317a4 100644
--- a/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
@@ -5,7 +5,7 @@ exports[`test progress component props > test circle progress color 1`] = `
   <!--v-if-->
   <div class=\\"var-progress__circle\\" style=\\"width: 40px; height: 40px;\\"><svg class=\\"var-progress__circle-svg\\" viewBox=\\"0 0 44.44444444444444 44.44444444444444\\">
       <defs>
-        <linearGradient id=\\"var-progress-10\\" x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\">
+        <linearGradient id=\\"var-progress\\" x1=\\"100%\\" y1=\\"0%\\" x2=\\"0%\\" y2=\\"0%\\">
           <stop offset=\\"0%\\" stop-color=\\"#3fecff\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#6149f6\\"></stop>
         </linearGradient>
@@ -13,7 +13,7 @@ exports[`test progress component props > test circle progress color 1`] = `
       <path class=\\"var-progress__circle-background\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
         0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\"></path>
       <path class=\\"var-progress__circle-certain var-progress__circle--primary\\" d=\\"M 22.22222222222222 22.22222222222222 m 0 -20 a 20 20 
-        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress-10); transform: rotateZ(0deg); transform-origin: 50% 50%;\\"></path>
+        0 1 1 0 40 a 20 20 0 1 1 0 -40\\" fill=\\"transparent\\" stroke-width=\\"4.444444444444445\\" stroke-dasharray=\\"125.66370614359172\\" stroke-dashoffset=\\"125.66370614359172\\" style=\\"stroke: url(#var-progress); transform: rotateZ(0deg); transform-origin: 50% 50%;\\"></path>
     </svg>
     <!--v-if-->
   </div>
diff --git a/packages/varlet-use/src/index.ts b/packages/varlet-use/src/index.ts
index 7fd13db237c..26eb877568a 100644
--- a/packages/varlet-use/src/index.ts
+++ b/packages/varlet-use/src/index.ts
@@ -7,3 +7,4 @@ export * from './useChildren.js'
 export * from './onWindowResize.js'
 export * from './useInitialized.js'
 export * from './useTouch.js'
+export * from './useId.js'
diff --git a/packages/varlet-use/src/useId.ts b/packages/varlet-use/src/useId.ts
new file mode 100644
index 00000000000..129a0f17eb2
--- /dev/null
+++ b/packages/varlet-use/src/useId.ts
@@ -0,0 +1,14 @@
+import { ref, getCurrentInstance } from 'vue'
+import { kebabCase } from '@varlet/shared'
+
+export function useId() {
+  const id = ref<string>()
+  const instance = getCurrentInstance()!
+
+  // @ts-ignore
+  const isTestEnv = process.env.NODE_ENV === 'test'
+  const name = kebabCase(instance.type.name!)
+  id.value = isTestEnv ? name : `${name}-${instance.uid}`
+
+  return id
+}