docs(progress): [progress] progress docs optimization (#789)

examples/sites/demos/pc/app/anchor/webdoc/anchor.js

@@ -45,7 +45,7 @@ export default {
     {
       'name': 'anchor',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'container-id',
           'type': 'string',

examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue

@@ -1,24 +1,52 @@
 <template>
   <div>
-    <div class="content">
-      <tiny-progress class="progress" :percentage="50"></tiny-progress>
+    <div>
+      <tiny-button :icon="IconMinus" :reset-time="0" @click="decrease"></tiny-button>
+      <tiny-button :icon="IconPlus" :reset-time="0" @click="increase"></tiny-button>
     </div>
+    <br />
+    <tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
+    <br />
+    <tiny-progress class="progress-second" :stroke-width="24" :percentage="percentage"></tiny-progress>
+    <div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress } from '@opentiny/vue'
+import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 const percentage = ref(20)
+const IconMinus = iconMinus()
+const IconPlus = iconPlus()
+
+function increase() {
+  percentage.value += 10
+  if (percentage.value > 100) {
+    percentage.value = 100
+  }
+}
+
+function decrease() {
+  percentage.value -= 10
+  if (percentage.value < 0) {
+    percentage.value = 0
+  }
+}
 </script>
 
 <style scoped>
-.progress {
-  margin-bottom: 20px;
+.tip {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: #808080;
 }
-
-.circle-progress {
-  margin-right: 20px;
+.progress-first :deep(.tiny-progress__text) {
+  font-size: 12px !important;
+}
+.progress-second :deep(.tiny-progress__text) {
+  font-size: 14px !important;
 }
 </style>

examples/sites/demos/pc/app/progress/basic-usage.spec.ts

@@ -1,18 +1,23 @@
 import { test, expect } from '@playwright/test'
 
-test('正常显示', async ({ page }) => {
+test('基础用法，是否可动态控制进度条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('http://127.0.0.1:7130/pc/progress/basic-usage')
 
   const progress = page.getByRole('progressbar')
-  const outer = progress.locator('div.tiny-progress-bar__outer')
-  const inner = progress.locator('div.tiny-progress-bar__inner')
+  const progress1 = progress.nth(0).locator('.tiny-progress-bar__outer')
+  const progress2 = progress.nth(1).locator('.tiny-progress-bar__outer')
 
-  await expect(outer).toBeVisible()
-  await expect(outer).toHaveCSS('height', '6px')
-  await expect(inner).toBeVisible()
-  await expect(inner).toHaveCSS('border-radius', '3px')
+  await expect(progress1).toBeVisible()
+  await expect(progress2).toBeVisible()
+  await expect(progress1).toHaveCSS('height', '4px')
+  await expect(progress2).toHaveCSS('height', '24px')
+  await expect(progress2).toHaveCSS('border-radius', '12px')
   await expect(page.getByText('50%')).toBeVisible()
-  await expect(progress).toHaveAttribute('aria-valuemin', '0')
-  await expect(progress).toHaveAttribute('aria-valuemax', '100')
+
+  await expect(progress).toHaveAttribute('aria-valuenow', '20')
+  await page.locator('button').nth(3).click()
+  await expect(progress).toHaveAttribute('aria-valuenow', '10')
+  await page.locator('button').nth(4).click()
+  await expect(progress).toHaveAttribute('aria-valuenow', '20')
 })

examples/sites/demos/pc/app/progress/basic-usage.vue

@@ -1,32 +1,61 @@
 <template>
   <div>
-    <div class="content">
-      <tiny-progress class="progress" :percentage="50"></tiny-progress>
+    <div>
+      <tiny-button :icon="IconMinus" :reset-time="0" @click="decrease"></tiny-button>
+      <tiny-button :icon="IconPlus" :reset-time="0" @click="increase"></tiny-button>
     </div>
+    <br />
+    <tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
+    <br />
+    <tiny-progress class="progress-second" :stroke-width="24" :percentage="percentage"></tiny-progress>
+    <div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
   </div>
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { Progress, Button } from '@opentiny/vue'
+import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress: Progress,
+    TinyButton: Button
   },
   data() {
     return {
-      percentage: 20
+      percentage: 20,
+      IconMinus: iconMinus(),
+      IconPlus: iconPlus()
+    }
+  },
+  methods: {
+    increase() {
+      this.percentage += 10
+      if (this.percentage > 100) {
+        this.percentage = 100
+      }
+    },
+    decrease() {
+      this.percentage -= 10
+      if (this.percentage < 0) {
+        this.percentage = 0
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-.progress {
-  margin-bottom: 20px;
+.tip {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: #808080;
 }
-
-.circle-progress {
-  margin-right: 20px;
+.progress-first :deep(.tiny-progress__text) {
+  font-size: 12px !important;
+}
+.progress-second :deep(.tiny-progress__text) {
+  font-size: 14px !important;
 }
 </style>

examples/sites/demos/pc/app/progress/dynamic-control-changes-composition-api.vue

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <div>
-      <tiny-button :icon="IconMinus" :reset-time="0" @click="decrease"></tiny-button>
-      <tiny-button :icon="IconPlus" :reset-time="0" @click="increase"></tiny-button>
-    </div>
-    <br />
-    <tiny-progress
-      class="progress"
-      :stroke-width="24"
-      :text-inside="testInside"
-      :percentage="percentage"
-    ></tiny-progress>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
-import { iconMinus, iconPlus } from '@opentiny/vue-icon'
-
-const testInside = ref(true)
-const percentage = ref(20)
-const IconMinus = iconMinus()
-const IconPlus = iconPlus()
-
-function increase() {
-  percentage.value += 10
-  if (percentage.value > 100) {
-    percentage.value = 100
-  }
-}
-
-function decrease() {
-  percentage.value -= 10
-  if (percentage.value < 0) {
-    percentage.value = 0
-  }
-}
-</script>

examples/sites/demos/pc/app/progress/dynamic-control-changes.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('动态控制进度条变化', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('progress#dynamic-control-changes')
-
-  const progress = page.getByRole('progressbar')
-
-  await expect(progress).toHaveAttribute('aria-valuenow', '20')
-  await page.locator('button').nth(3).click()
-  await expect(progress).toHaveAttribute('aria-valuenow', '10')
-  await page.locator('button').nth(4).click()
-  await expect(progress).toHaveAttribute('aria-valuenow', '20')
-})

examples/sites/demos/pc/app/progress/dynamic-control-changes.vue

@@ -1,49 +0,0 @@
-<template>
-  <div>
-    <div>
-      <tiny-button :icon="IconMinus" :reset-time="0" @click="decrease"></tiny-button>
-      <tiny-button :icon="IconPlus" :reset-time="0" @click="increase"></tiny-button>
-    </div>
-    <br />
-    <tiny-progress
-      class="progress"
-      :stroke-width="24"
-      :text-inside="testInside"
-      :percentage="percentage"
-    ></tiny-progress>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
-import { iconMinus, iconPlus } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyProgress: Progress,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      testInside: true,
-      percentage: 20,
-      IconMinus: iconMinus(),
-      IconPlus: iconPlus()
-    }
-  },
-  methods: {
-    increase() {
-      this.percentage += 10
-      if (this.percentage > 100) {
-        this.percentage = 100
-      }
-    },
-    decrease() {
-      this.percentage -= 10
-      if (this.percentage < 0) {
-        this.percentage = 0
-      }
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/progress/format-text-composition-api.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     <div>
+      <tiny-button @click="showTest = !showTest">{{ showTest ? '隐藏' : '显示' }}文字</tiny-button>
       <tiny-button @click="testInside = !testInside">{{ testInside ? '外置' : '内置' }}文字</tiny-button>
     </div>
     <br />
     <div class="progress-container">
       <tiny-progress
         class="progress"
+        :show-text="showTest"
         :stroke-width="24"
         :format="formatText"
         :text-inside="testInside"
@@ -22,6 +24,7 @@ import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
 const percentageText = ref(60)
 const testInside = ref(true)
+const showTest = ref(true)
 
 function formatText() {
   return `自定义文字内容 ${percentageText.value}%`

examples/sites/demos/pc/app/progress/format-text.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     <div>
+      <tiny-button @click="showTest = !showTest">{{ showTest ? '隐藏' : '显示' }}文字</tiny-button>
       <tiny-button @click="testInside = !testInside">{{ testInside ? '外置' : '内置' }}文字</tiny-button>
     </div>
     <br />
     <div class="progress-container">
       <tiny-progress
         class="progress"
+        :show-text="showTest"
         :stroke-width="24"
         :format="formatText"
         :text-inside="testInside"
@@ -31,6 +33,7 @@ export default {
   },
   data() {
     return {
+      showTest: true,
       percentageText: 60,
       testInside: true
     }

examples/sites/demos/pc/app/progress/progress-status-composition-api.vue

@@ -36,5 +36,5 @@
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const textInside = ref(true)
+const textInside = ref(false)
 </script>

examples/sites/demos/pc/app/progress/progress-status.spec.ts

@@ -8,20 +8,20 @@ test('三种状态是否正常显示', async ({ page }) => {
   const success = progress.filter({ hasText: '100%' })
   const warning = progress.filter({ hasText: '80%' })
   const exception = progress.filter({ hasText: '50%' })
-  const button = page.getByRole('button', { name: '显示图标状态' })
+  const button = page.getByRole('button', { name: '显示文字状态' })
   const icons = page.locator('.tiny-progress__text svg')
 
-  await expect(success).toHaveAttribute('aria-valuenow', '100')
-  await expect(success).toHaveClass(/is-success/)
-  await expect(warning).toHaveAttribute('aria-valuenow', '80')
-  await expect(warning).toHaveClass(/is-warning/)
-  await expect(exception).toHaveAttribute('aria-valuenow', '50')
-  await expect(exception).toHaveClass(/is-exception/)
-  await button.click()
   await expect(icons).toHaveCount(3)
   for (let i = 0; i < 3; i++) {
     const { width, height } = await icons.nth(i).boundingBox()
     await expect(width).toBeGreaterThanOrEqual(20)
     await expect(height).toBeGreaterThanOrEqual(20)
   }
+  await button.click()
+  await expect(success).toHaveAttribute('aria-valuenow', '100')
+  await expect(success).toHaveClass(/is-success/)
+  await expect(warning).toHaveAttribute('aria-valuenow', '80')
+  await expect(warning).toHaveClass(/is-warning/)
+  await expect(exception).toHaveAttribute('aria-valuenow', '50')
+  await expect(exception).toHaveClass(/is-exception/)
 })

examples/sites/demos/pc/app/progress/progress-status.vue

@@ -42,7 +42,7 @@ export default {
   },
   data() {
     return {
-      textInside: true
+      textInside: false
     }
   }
 }

examples/sites/demos/pc/app/progress/progress-type-composition-api.vue

@@ -1,13 +0,0 @@
-<template>
-  <tiny-progress class="progress" type="line" :percentage="50"></tiny-progress>
-</template>
-
-<script setup lang="jsx">
-import { Progress as TinyProgress } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.progress {
-  margin-bottom: 20px;
-}
-</style>

examples/sites/demos/pc/app/progress/progress-type.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('line类型是否正常显示', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/progress-type')
-  const progress = page.getByRole('progressbar')
-
-  await expect(progress).toHaveClass(/tiny-progress--line/)
-  await expect(progress.locator('div.tiny-progress-bar__outer')).toBeVisible()
-  await expect(progress.locator('div.tiny-progress-bar__inner')).toBeVisible()
-  await expect(page.getByText('50%')).toBeVisible()
-  await expect(progress).toHaveAttribute('aria-valuemin', '0')
-  await expect(progress).toHaveAttribute('aria-valuemax', '100')
-})

examples/sites/demos/pc/app/progress/progress-type.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-progress class="progress" type="line" :percentage="50"></tiny-progress>
-</template>
-
-<script lang="jsx">
-import { Progress } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyProgress: Progress
-  }
-}
-</script>
-
-<style scoped>
-.progress {
-  margin-bottom: 20px;
-}
-</style>

examples/sites/demos/pc/app/progress/progress-width-composition-api.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
-    <tiny-progress class="progress-second" :stroke-width="12" :percentage="percentage"></tiny-progress>
-    <div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Progress as TinyProgress } from '@opentiny/vue'
-
-const percentage = ref(70)
-</script>
-
-<style scoped>
-.tip {
-  margin-top: 16px;
-  text-align: center;
-  font-size: 14px;
-  color: #808080;
-}
-.progress-first :deep(.tiny-progress__text) {
-  font-size: 12px !important;
-}
-.progress-second :deep(.tiny-progress__text) {
-  font-size: 14px !important;
-}
-</style>

examples/sites/demos/pc/app/progress/progress-width.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('宽度是否正常显示', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/progress/progress-width')
-
-  const progress1 = page.getByRole('progressbar').nth(0).locator('.tiny-progress-bar__outer')
-  const progress2 = page.getByRole('progressbar').nth(1).locator('.tiny-progress-bar__outer')
-
-  await expect(progress1).toHaveCSS('height', '4px')
-  await expect(progress2).toHaveCSS('height', '12px')
-})

examples/sites/demos/pc/app/progress/progress-width.vue

@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
-    <tiny-progress class="progress-second" :stroke-width="12" :percentage="percentage"></tiny-progress>
-    <div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Progress } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyProgress: Progress
-  },
-  data() {
-    return {
-      percentage: 70
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tip {
-  margin-top: 16px;
-  text-align: center;
-  font-size: 14px;
-  color: #808080;
-}
-.progress-first :deep(.tiny-progress__text) {
-  font-size: 12px !important;
-}
-.progress-second :deep(.tiny-progress__text) {
-  font-size: 14px !important;
-}
-</style>

examples/sites/demos/pc/app/progress/text-inside-or-no-text-composition-api.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <div>
-      <tiny-button @click="showTest = !showTest">{{ showTest ? '隐藏' : '显示' }}文字</tiny-button>
-    </div>
-    <br />
-    <tiny-progress class="progress" :show-text="showTest" :percentage="50"></tiny-progress>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
-
-const showTest = ref(true)
-</script>

examples/sites/demos/pc/app/progress/text-inside-or-no-text.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <div>
-      <tiny-button @click="showTest = !showTest">{{ showTest ? '隐藏' : '显示' }}文字</tiny-button>
-    </div>
-    <br />
-    <tiny-progress class="progress" :show-text="showTest" :percentage="50"></tiny-progress>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyProgress: Progress,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      showTest: true
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/progress/webdoc/progress.cn.md

@@ -4,4 +4,4 @@ title: Progress 进度条
 
 # Progress 进度条
 
-<div>用于展示操作进度，告知用户当前状态和预期。</div>
+<div>用于实时反馈进度，告知用户当前加载情况。</div>

examples/sites/demos/pc/app/progress/webdoc/progress.en.md

@@ -4,4 +4,4 @@ title: Progress
 
 # Progress
 
-<div>Displays the operation progress and informs users of the current status and expectations.</div>
+<div>Used for real-time feedback on progress and informing users of the current loading status.</div>

examples/sites/demos/pc/app/progress/webdoc/progress.js

@@ -5,26 +5,61 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>percentage</code>设置进度值，<code>stroke-width</code>设置进度条的宽度，单位 px。',
+        'en-US':
+          'Set the progress value through<code>percentage</code>, and<code>stroke width</code>to set the width of the progress bar in px.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
-      'demoId': 'progress-type',
-      'name': { 'zh-CN': 'line 类型', 'en-US': 'line type' },
+      'demoId': 'custom-color',
+      'name': { 'zh-CN': '定义颜色', 'en-US': 'Custom Color' },
       'desc': {
-        'zh-CN': '<p><code>type=&quot;line&quot;</code> 显示为 line 类型</p>\n',
-        'en-US': '<p><code>type=&quot;line&quot;</code> is displayed as line</p>\n'
+        'zh-CN': '通过<code>color</code>设置进度条颜色；会覆盖<code>status</code>状态颜色。',
+        'en-US':
+          'Set the progress bar color through<code>color</code>; It will overwrite the status color of<code>status</code>.'
       },
-      'codeFiles': ['progress-type.vue']
+      'codeFiles': ['custom-color.vue']
+    },
+    {
+      'demoId': 'format-text',
+      'name': { 'zh-CN': '文字的显隐和位置', 'en-US': 'Position and Hiding of Text' },
+      'desc': {
+        'zh-CN':
+          '通过<code>show-text</code>设置文字显隐；<code>text-inside</code>设置文字内置在进度条内显示（只在 type=line 时可用），<code>format</code>自定义进度条的文字。',
+        'en-US':
+          'Set text display and hiding through<code>show text</code>< Code>text insert</code>Set the text to be displayed within the progress bar (only available when type=line), and customize the text for the progress bar.<code>format</code>.'
+      },
+      'codeFiles': ['format-text.vue']
+    },
+    {
+      'demoId': 'progress-status',
+      'name': { 'zh-CN': '状态', 'en-US': 'Status' },
+      'desc': {
+        'zh-CN': '通过<code>status</code>设置当前状态，可选值：<code>(success/exception/warning)</code>。',
+        'en-US':
+          'Set the current state through<code>status</code>, with optional values:<code>(success/exception/warning)</code>.'
+      },
+      'codeFiles': ['progress-status.vue']
+    },
+    {
+      'demoId': 'custom-status',
+      'name': { 'zh-CN': '自定义状态场景', 'en-US': 'Custom state scenario' },
+      'desc': {
+        'zh-CN': '用法如下。',
+        'en-US': 'The usage is as follows.'
+      },
+      'codeFiles': ['custom-status.vue']
     },
     {
       'demoId': 'progress-type-circle',
       'name': { 'zh-CN': 'circle 类型', 'en-US': 'circle type' },
       'desc': {
         'zh-CN':
-          '<p><code>type=&quot;circle&quot;</code> 显示为 circle 类型。<code>width</code>可以调整环形进度条画布宽度，默认值为126px。</p>\n',
+          '通过<code>type="circle"</code>设置为全封闭环形类型，<code>width</code>设置环形进度条画布宽度，默认值为126px。',
         'en-US':
-          'The <p><code>type=&quot;circle&quot;</code> is of the circle type. <code>width</code>You can adjust the width of the ring progress bar canvas. The default value is 126px. </p>\n'
+          '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.'
       },
       'codeFiles': ['progress-type-circle.vue']
     },
@@ -32,167 +67,102 @@ export default {
       'demoId': 'progress-type-dashboard',
       'name': { 'zh-CN': 'dashboard 类型', 'en-US': 'Dashboard Type' },
       'desc': {
-        'zh-CN':
-          '<p><code>type=&quot;dashboard&quot;</code> 显示为 dashboard 类型。<code>width</code>可以调整环形进度条画布宽度，默认值为126px。</p>\n',
-        'en-US':
-          'The <p><code>type=&quot;dashboard&quot;</code> is displayed as a dashboard. <code>width</code>You can adjust the width of the ring progress bar canvas. The default value is 126px. </p>\n'
+        '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']
-    },
-    {
-      'demoId': 'progress-width',
-      'name': { 'zh-CN': '宽度', 'en-US': 'Width' },
-      'desc': {
-        'zh-CN': '<p><code>stroke-width</code>进度条的宽度，单位 px</p>\n',
-        'en-US': 'Width of the <p><code>stroke-width</code> progress bar, in px</p>\n'
-      },
-      'codeFiles': ['progress-width.vue']
-    },
-    {
-      'demoId': 'progress-status',
-      'name': { 'zh-CN': '状态', 'en-US': 'Status' },
-      'desc': {
-        'zh-CN': '<p><code>status</code> 进度条当前状态（success/exception/warning）</p>\n',
-        'en-US': 'Current status of the <p><code>status</code> progress bar: (success/exception/warning) </p>\n'
-      },
-      'codeFiles': ['progress-status.vue']
-    },
-    {
-      'demoId': 'custom-status',
-      'name': { 'zh-CN': '自定义状态场景', 'en-US': 'Status' },
-      'desc': {
-        'zh-CN': '<p></p>\n',
-        'en-US': '<p></p>\n'
-      },
-      'codeFiles': ['custom-status.vue']
-    },
-    {
-      'demoId': 'text-inside-or-no-text',
-      'name': { 'zh-CN': '文字内显或不显', 'en-US': 'Text displayed or not displayed' },
-      'desc': {
-        'zh-CN': '<p><code>show-text</code> 是否显示进度条文字内容</p>\n',
-        'en-US': '<p><code>show-text</code> Whether to display progress bar text</p>\n'
-      },
-      'codeFiles': ['text-inside-or-no-text.vue']
-    },
-    {
-      'demoId': 'custom-color',
-      'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom Color' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>color</code> 设置进度条颜色。color 进度条背景色（会覆盖 status 状态颜色）</p>\n',
-        'en-US':
-          '<p>Set the color of the progress bar through <code>color</code>. color: background color of the progress bar (overwrites the status color)</p>\n'
-      },
-      'codeFiles': ['custom-color.vue']
-    },
-    {
-      'demoId': 'format-text',
-      'name': { 'zh-CN': '自定义显示文字', 'en-US': 'Custom Text' },
-      'desc': {
-        'zh-CN':
-          '<p><code>text-inside</code> 进度条显示文字内置在进度条内（只在 type=line 时可用），<code>format</code>自定义进度条的文字</p>\n',
-        'en-US':
-          'The <p><code>text-inside</code> progress bar text is embedded in the progress bar (available only when type is set to line). <code>format</code>Customize the progress bar text</p>\n'
-      },
-      'codeFiles': ['format-text.vue']
-    },
-    {
-      'demoId': 'dynamic-control-changes',
-      'name': { 'zh-CN': '动态控制进度条变化', 'en-US': 'Dynamic control progress bar change' },
-      'desc': {
-        'zh-CN': '<p>通过设置 <code>percentage</code> 动态控制进度条变化</p>\n',
-        'en-US': '<p>Dynamic control of the progress bar by setting <code>percentage</code></p>\n'
-      },
-      'codeFiles': ['dynamic-control-changes.vue']
     }
   ],
   apis: [
     {
       'name': 'progress',
       'type': 'component',
-      'properties': [
+      'props': [
+        {
+          'name': 'color',
+          'type': 'string | array | (p: string) => string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '进度条背景色（会覆盖 status 状态颜色）',
+            'en-US': 'Background color of the progress bar (overwrites the status color)'
+          },
+          'demoId': 'custom-color'
+        },
+        {
+          'name': 'format',
+          'type': '() => string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '自定义进度条的文字', 'en-US': 'Customize the text of the progress bar' },
+          'demoId': 'format-text'
+        },
         {
           'name': 'percentage',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
+          'defaultValue': '0',
           'desc': {
-            'zh-CN': '百分比（必填）;该属性的可选值为 0-100',
+            'zh-CN': '百分比（必填）；该属性的可选值为 0-100',
             'en-US': 'Percentage (mandatory) The optional values for this property are 0 - 100'
           },
           'demoId': 'basic-usage'
         },
         {
-          'name': 'type',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 line',
-          'desc': {
-            'zh-CN': '进度条类型;该属性的可选值为 line / circle / dashboard',
-            'en-US': 'Progress bar type; The value of this attribute can be line, circle, or dashboard'
-          },
-          'demoId': 'progress-type'
-        },
-        {
-          'name': 'stroke-width',
-          'type': 'number',
-          'defaultValue': '该属性的默认值为 6',
-          'desc': { 'zh-CN': '进度条的宽度，单位 px', 'en-US': 'Progress bar width, in px' },
-          'demoId': 'progress-width'
-        },
-        {
-          'name': 'text-inside',
+          'name': 'show-text',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': {
-            'zh-CN': '进度条显示文字内置在进度条内（只在 type=line 时可用）',
-            'en-US':
-              'The text displayed on the progress bar is embedded in the progress bar. This parameter is available only when type is set to line.'
-          },
-          'demoId': 'progress-width'
+          'defaultValue': 'true',
+          'desc': { 'zh-CN': '是否显示进度条文字内容', 'en-US': 'Display progress bar text' },
+          'demoId': 'format-text'
         },
         {
           'name': 'status',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '进度条当前状态;该属性的可选值为 success / exception / warning',
+            'zh-CN': '进度条当前状态；该属性的可选值为 success / exception / warning',
             'en-US':
               'Current status of the progress bar; The value of this attribute can be success, exception, or warning'
           },
           'demoId': 'progress-status'
         },
         {
-          'name': 'color',
-          'type': 'string , Function , Array',
-          'defaultValue': '',
+          'name': 'stroke-width',
+          'type': 'number',
+          'defaultValue': '6',
           'desc': {
-            'zh-CN': '进度条背景色（会覆盖 status 状态颜色）',
-            'en-US': 'Background color of the progress bar (overwrites the status color).'
+            'zh-CN': 'line 类型进度条的宽度，单位 px',
+            'en-US': 'The width of the progress bar of type line, in px'
           },
-          'demoId': 'custom-color'
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'text-inside',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '进度条显示文字内置在进度条内（只在 type=line 时可用）',
+            'en-US':
+              'The text displayed on the progress bar is embedded in the progress bar. This parameter is available only when type is set to line'
+          },
+          'demoId': 'format-text'
+        },
+        {
+          'name': 'type',
+          'type': 'string',
+          'defaultValue': 'line',
+          'desc': {
+            'zh-CN': '进度条类型；该属性的可选值为 line / circle / dashboard',
+            'en-US': 'Progress bar type; The value of this attribute can be line, circle, or dashboard'
+          },
+          'demoId': 'progress-type-circle'
         },
         {
           'name': 'width',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 126',
+          'defaultValue': '126',
           'desc': {
             'zh-CN': '环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）',
             'en-US': 'Circular progress bar canvas width (available only when type is circle or dashboard)'
           },
-          'demoId': 'progress-width'
-        },
-        {
-          'name': 'show-text',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否显示进度条文字内容', 'en-US': 'Display progress bar text' },
-          'demoId': 'text-inside-or-no-text'
-        },
-        {
-          'name': 'format',
-          'type': 'Function',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '自定义进度条的文字', 'en-US': 'Customize the text of the progress bar' },
-          'demoId': 'format-text'
+          'demoId': 'progress-type-circle'
         }
       ],
       'events': [],

examples/sites/demos/pc/app/tag/webdoc/tag.js

@@ -94,7 +94,7 @@ export default {
     {
       'name': 'tag',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'closable',
           'type': 'boolean',