From 81893e968009e9576bc7ae0871ea09945dbe29bd Mon Sep 17 00:00:00 2001
From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Date: Fri, 12 Jan 2024 11:44:10 +0800
Subject: [PATCH] docs(progress): [progress] Optimization Merge Example (#1282)

---
 .../progress-type-circle-composition-api.vue  | 27 +++++----
 .../app/progress/progress-type-circle.spec.ts | 58 +++++++++++++++----
 .../pc/app/progress/progress-type-circle.vue  | 29 ++++++----
 ...rogress-type-dashboard-composition-api.vue | 35 -----------
 .../progress/progress-type-dashboard.spec.ts  | 22 -------
 .../app/progress/progress-type-dashboard.vue  | 44 --------------
 .../demos/pc/app/progress/webdoc/progress.js  | 15 +----
 7 files changed, 83 insertions(+), 147 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/progress/progress-type-dashboard.vue

diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue b/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
index 51202fb88..4d9abebf3 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
@@ -1,27 +1,32 @@
 <template>
   <tiny-button @click="add">增加</tiny-button>
-  <tiny-progress
-    class="circle-progress"
-    type="circle"
-    :percentage="value"
-    status="exception"
-    :width="150"
-  ></tiny-progress>
+  <tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
+  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const value = ref(10)
+const percentage = ref(10)
+const customColors = ref([
+  { color: '#f56c6c', percentage: 20 },
+  { color: '#e6a23c', percentage: 40 },
+  { color: '#5cb87a', percentage: 60 },
+  { color: '#1989fa', percentage: 80 },
+  { color: '#6f7ad3', percentage: 100 }
+])
 
 function add() {
-  value.value += 10
+  if (percentage.value === 100) {
+    return
+  }
+  percentage.value += 10
 }
 </script>
 
 <style scoped>
-.circle-progress {
-  margin-right: 20px;
+.tiny-progress {
+  margin: 0 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts b/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
index 7d9e6e5cc..97b70e4e8 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle.spec.ts
@@ -1,15 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('全封闭环形', () => {
-  test('是否circle 类型', async ({ page }) => {
+test.describe('环形', () => {
+  test('是否圆环类型', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).not.toBeNull())
     await page.goto('progress#progress-type-circle')
 
-    const progress = page.getByRole('progressbar')
-    const circleTrack = progress.locator('.tiny-progress-circle__track')
-    const cirlePath = progress.locator('.tiny-progress-circle__path')
+    const firstProgress = page.getByRole('progressbar').first()
+    const circleTrack = firstProgress.locator('.tiny-progress-circle__track')
+    const cirlePath = firstProgress.locator('.tiny-progress-circle__path')
 
-    await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
+    await expect(firstProgress.locator('div.tiny-progress-circle')).toBeVisible()
     await expect(circleTrack).toHaveAttribute('stroke-width', '4')
     await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
     await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
@@ -19,17 +19,51 @@ test.describe('全封闭环形', () => {
     await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 2 A 48 48 0 1 1 50 98 A 48 48 0 1 1 50 2")')
   })
 
+  test('是否C型圆环类型', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+    await page.goto('progress#progress-type-circle')
+
+    const lastProgress = page.getByRole('progressbar').last()
+    const circleTrack = lastProgress.locator('.tiny-progress-circle__track')
+    const cirlePath = lastProgress.locator('.tiny-progress-circle__path')
+
+    await expect(lastProgress).toHaveClass(/tiny-progress--dashboard/)
+    await expect(lastProgress.locator('div.tiny-progress-circle')).toBeVisible()
+    await expect(lastProgress.locator('div.tiny-progress__text')).toBeVisible()
+    await expect(circleTrack).toHaveAttribute('stroke-width', '2')
+    await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
+    await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
+    await expect(cirlePath).toHaveAttribute('stroke-width', '2')
+    await expect(cirlePath).toHaveAttribute('stroke', '#f56c6c')
+    await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
+    await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
+    await expect(cirlePath).toHaveCSS('stroke-dasharray', '23.0907px, 307.876px')
+  })
+
   test('点击值增加', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).not.toBeNull())
     await page.goto('progress#progress-type-circle')
 
-    const progress = page.getByRole('progressbar')
-    const cirlePath = progress.locator('.tiny-progress-circle__path')
+    const firstProgress = page.getByRole('progressbar').first()
+    const cirlePath1 = firstProgress.locator('.tiny-progress-circle__path')
 
-    await expect(progress).toHaveAttribute('aria-valuenow', '10')
-    await expect(cirlePath).toHaveCSS('stroke-dasharray', '30.1593px, 301.593px')
+    const lastProgress = page.getByRole('progressbar').last()
+    const cirlePath2 = lastProgress.locator('.tiny-progress-circle__path')
+
+    await expect(firstProgress).toHaveAttribute('aria-valuenow', '10')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '30.1593px, 301.593px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '10')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '23.0907px, 307.876px')
     await page.getByRole('button', { name: '增加' }).click()
-    await expect(progress).toHaveAttribute('aria-valuenow', '20')
-    await expect(cirlePath).toHaveCSS('stroke-dasharray', '60.3186px, 301.593px')
+    await expect(firstProgress).toHaveAttribute('aria-valuenow', '20')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '60.3186px, 301.593px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '20')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '46.1814px, 307.876px')
+
+    await page.getByRole('button', { name: '增加' }).click()
+    await expect(firstProgress).toHaveAttribute('aria-valuenow', '30')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '90.4779px, 301.593px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '30')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '69.2721px, 307.876px')
   })
 })
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle.vue b/examples/sites/demos/pc/app/progress/progress-type-circle.vue
index cfafe88d7..97fe5e950 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle.vue
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle.vue
@@ -1,12 +1,7 @@
 <template>
   <tiny-button @click="add">增加</tiny-button>
-  <tiny-progress
-    class="circle-progress"
-    type="circle"
-    :percentage="value"
-    status="exception"
-    :width="150"
-  ></tiny-progress>
+  <tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
+  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
 </template>
 
 <script lang="jsx">
@@ -18,18 +13,30 @@ export default {
     TinyButton: Button
   },
   data() {
-    return { value: 10 }
+    return {
+      percentage: 10,
+      customColors: [
+        { color: '#f56c6c', percentage: 20 },
+        { color: '#e6a23c', percentage: 40 },
+        { color: '#5cb87a', percentage: 60 },
+        { color: '#1989fa', percentage: 80 },
+        { color: '#6f7ad3', percentage: 100 }
+      ]
+    }
   },
   methods: {
     add() {
-      this.value += 10
+      if (this.percentage === 100) {
+        return
+      }
+      this.percentage += 10
     }
   }
 }
 </script>
 
 <style scoped>
-.circle-progress {
-  margin-right: 20px;
+.tiny-progress {
+  margin: 0 20px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue b/examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue
deleted file mode 100644
index 662374b06..000000000
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard-composition-api.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="add">增加</tiny-button>
-    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
-
-const percentage = ref(20)
-const customColor = ref('#409eff')
-const customColors = ref([
-  { color: '#f56c6c', percentage: 20 },
-  { color: '#e6a23c', percentage: 40 },
-  { color: '#5cb87a', percentage: 60 },
-  { color: '#1989fa', percentage: 80 },
-  { color: '#6f7ad3', percentage: 100 }
-])
-
-function customColorMethod(percentage) {
-  if (percentage < 30) {
-    return '#909399'
-  } else if (percentage < 70) {
-    return '#e6a23c'
-  } else {
-    return '#67c23a'
-  }
-}
-
-function add() {
-  percentage.value += 10
-}
-</script>
diff --git a/examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts b/examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts
deleted file mode 100644
index f60999e9d..000000000
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('非全封闭环形', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('progress#progress-type-dashboard')
-
-  const progress = page.getByRole('progressbar')
-  const circleTrack = progress.locator('.tiny-progress-circle__track')
-  const cirlePath = progress.locator('.tiny-progress-circle__path')
-
-  await expect(progress).toHaveClass(/tiny-progress--dashboard/)
-  await expect(progress.locator('div.tiny-progress-circle')).toBeVisible()
-  await expect(progress.locator('div.tiny-progress__text')).toBeVisible()
-  await expect(circleTrack).toHaveAttribute('stroke-width', '2')
-  await expect(circleTrack).toHaveAttribute('stroke', '#e5e9f2')
-  await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
-  await expect(cirlePath).toHaveAttribute('stroke-width', '2')
-  await expect(cirlePath).toHaveAttribute('stroke', '#e6a23c')
-  await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
-  await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 99 A 49 49 0 1 1 50 1 A 49 49 0 1 1 50 99")')
-  await expect(cirlePath).toHaveCSS('stroke-dasharray', '46.1814px, 307.876px')
-})
diff --git a/examples/sites/demos/pc/app/progress/progress-type-dashboard.vue b/examples/sites/demos/pc/app/progress/progress-type-dashboard.vue
deleted file mode 100644
index 996c28507..000000000
--- a/examples/sites/demos/pc/app/progress/progress-type-dashboard.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="add">增加</tiny-button>
-    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyProgress: Progress,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      percentage: 20,
-      customColor: '#409eff',
-      customColors: [
-        { color: '#f56c6c', percentage: 20 },
-        { color: '#e6a23c', percentage: 40 },
-        { color: '#5cb87a', percentage: 60 },
-        { color: '#1989fa', percentage: 80 },
-        { color: '#6f7ad3', percentage: 100 }
-      ]
-    }
-  },
-  methods: {
-    customColorMethod(percentage) {
-      if (percentage < 30) {
-        return '#909399'
-      } else if (percentage < 70) {
-        return '#e6a23c'
-      } else {
-        return '#67c23a'
-      }
-    },
-    add() {
-      this.percentage += 10
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/progress/webdoc/progress.js b/examples/sites/demos/pc/app/progress/webdoc/progress.js
index e8c06b3da..928de1218 100644
--- a/examples/sites/demos/pc/app/progress/webdoc/progress.js
+++ b/examples/sites/demos/pc/app/progress/webdoc/progress.js
@@ -54,23 +54,14 @@ export default {
     },
     {
       'demoId': 'progress-type-circle',
-      'name': { 'zh-CN': '全封闭环形', 'en-US': 'Fully enclosed annular' },
+      'name': { 'zh-CN': '环形', 'en-US': 'Annular' },
       'desc': {
         'zh-CN':
-          '通过 <code>type="circle"</code> 设置为全封闭环形类型， <code>width</code> 设置环形进度条画布宽度，默认值为126px。',
+          '通过 <code>type="circle"</code> 设置为圆环类型，<code>type="dashboard"</code> 则为C型圆环类型; <code>width</code> 设置环形进度条画布宽度，默认值为126px。',
         'en-US':
-          'Set <code>type="circle"</code> to a fully enclosed circular type, and <code>width</code> to set the width of the circular progress bar canvas, with a default value of 126px.'
+          'Set<code>type="circle"</code>to the circular type, and<code>type="dashboard"</code>to the C-shaped circular type< Code>width</code>Set the width of the circular progress bar canvas, with a default value of 126px.'
       },
       'codeFiles': ['progress-type-circle.vue']
-    },
-    {
-      'demoId': 'progress-type-dashboard',
-      'name': { 'zh-CN': '非全封闭环形', 'en-US': 'Non fully enclosed annular' },
-      'desc': {
-        'zh-CN': '通过 <code>type="dashboard"</code> 设置为非全封闭环形类型。',
-        'en-US': 'Set to a semi enclosed circular type through <code>type="dashboard"</code> .'
-      },
-      'codeFiles': ['progress-type-dashboard.vue']
     }
   ],
   apis: [