feat(progress): [progress] The progress example is added to adapt to …

…the new specifications and additional features. (#2315) * feat(progress): [progress] 增加progress示例适配新规范额外特性 * feat(progress): [progress] 增加progress示例适配新规范额外特性
opentiny · Oct 21, 2024 · 363f40f · 363f40f
1 parent 92ba61d
commit 363f40f
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 55 deletions.
diff --git a/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
@@ -17,7 +17,7 @@ import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
-const percentage = ref(90)
+const percentage = ref(45)
 const IconMinus = iconMinus()
 const IconPlus = iconPlus()
 

diff --git a/examples/sites/demos/pc/app/progress/basic-usage.spec.ts b/examples/sites/demos/pc/app/progress/basic-usage.spec.ts
@@ -15,15 +15,21 @@ test('基础用法，是否可动态控制进度条', async ({ page }) => {
   await expect(progress2).toHaveCSS('height', '12px')
   await expect(progress1).toHaveCSS('border-radius', '2px')
   await expect(progress2).toHaveCSS('border-radius', '6px')
-  await expect(page.getByText('90%')).toHaveCount(2)
+  await expect(page.getByText('45%')).toHaveCount(2)
   await expect(page.getByText('努力加载中，请稍后...')).toBeVisible()
 
-  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
-  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')
+  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '45')
+  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '45')
+  await demo.getByRole('button').nth(1).click()
+  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '55')
+  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '55')
+  await demo.getByRole('button').nth(1).click()
+  await demo.getByRole('button').nth(1).click()
+  await demo.getByRole('button').nth(1).click()
+  await demo.getByRole('button').nth(1).click()
+  await demo.getByRole('button').nth(1).click()
   await demo.getByRole('button').nth(1).click()
   await expect(page.getByText('努力加载中，请稍后...')).not.toBeVisible()
-  await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '100')
-  await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '100')
   await demo.getByRole('button').first().click()
   await expect(progress.nth(0)).toHaveAttribute('aria-valuenow', '90')
   await expect(progress.nth(1)).toHaveAttribute('aria-valuenow', '90')

diff --git a/examples/sites/demos/pc/app/progress/basic-usage.vue b/examples/sites/demos/pc/app/progress/basic-usage.vue
@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      percentage: 90,
+      percentage: 45,
       IconMinus: iconMinus(),
       IconPlus: iconPlus()
     }

diff --git a/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
@@ -14,11 +14,11 @@ import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
 const value = ref(20)
-const customColor = ref('#409eff')
+const customColor = ref('#5cb300')
 // 在什么进度显示什么样的颜色
 const customColors = ref([
   { color: '#f56c6c', percentage: 20 },
-  { color: '#e6a23c', percentage: 40 },
+  { color: '#ff8800', percentage: 40 },
   { color: '#5cb87a', percentage: 60 },
   { color: '#1989fa', percentage: 80 },
   { color: '#6f7ad3', percentage: 100 }
@@ -34,7 +34,7 @@ function add() {
 // 在什么进度显示什么样的颜色
 function customColorMethod(percentage) {
   if (percentage < 30) {
-    return '#909399'
+    return '#f23030'
   } else if (percentage < 70) {
     return '#e6a23c'
   } else {

diff --git a/examples/sites/demos/pc/app/progress/custom-color.spec.ts b/examples/sites/demos/pc/app/progress/custom-color.spec.ts
@@ -10,23 +10,23 @@ test('根据长度改变颜色', async ({ page }) => {
   const progress3 = progress.nth(2).locator('div.tiny-progress-bar__inner')
   const button = page.getByRole('button', { name: '点击增加改变颜色' })
 
-  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
-  await expect(progress2).toHaveCSS('background-color', 'rgb(144, 147, 153)')
-  await expect(progress3).toHaveCSS('background-color', 'rgb(230, 162, 60)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(242, 48, 48)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(255, 136, 0)')
   await button.click()
-  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(92, 184, 122)')
   await button.click()
-  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(25, 137, 250)')
   await button.click()
-  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(111, 122, 211)')
   await button.click()
-  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(111, 122, 211)')
 })
diff --git a/examples/sites/demos/pc/app/progress/custom-color.vue b/examples/sites/demos/pc/app/progress/custom-color.vue
@@ -20,11 +20,11 @@ export default {
   data() {
     return {
       value: 20,
-      customColor: '#409eff',
+      customColor: '#5cb300',
       // 在什么进度显示什么样的颜色
       customColors: [
         { color: '#f56c6c', percentage: 20 },
-        { color: '#e6a23c', percentage: 40 },
+        { color: '#ff8800', percentage: 40 },
         { color: '#5cb87a', percentage: 60 },
         { color: '#1989fa', percentage: 80 },
         { color: '#6f7ad3', percentage: 100 }
@@ -41,7 +41,7 @@ export default {
     // 在什么进度显示什么样的颜色
     customColorMethod(percentage) {
       if (percentage < 30) {
-        return '#909399'
+        return '#f23030'
       } else if (percentage < 70) {
         return '#e6a23c'
       } else {

diff --git a/examples/sites/demos/pc/app/progress/format-text-composition-api.vue b/examples/sites/demos/pc/app/progress/format-text-composition-api.vue
@@ -22,8 +22,8 @@
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const percentageText = ref(60)
-const testInside = ref(true)
+const percentageText = ref(45)
+const testInside = ref(false)
 const showTest = ref(true)
 
 function formatText() {

diff --git a/examples/sites/demos/pc/app/progress/format-text.spec.ts b/examples/sites/demos/pc/app/progress/format-text.spec.ts
@@ -10,13 +10,14 @@ test('文字的显隐和位置', async ({ page }) => {
   const button1 = page.getByRole('button', { name: '外置文字' })
   const button2 = page.getByRole('button', { name: '内置文字' })
 
+  await button2.click()
   await expect(innerText).toBeVisible()
   await button1.click()
   await expect(outerText).toBeVisible()
   await button2.click()
   await expect(innerText).toBeVisible()
 
-  const text = page.getByText('自定义文字内容 60%')
+  const text = page.getByText('自定义文字内容 45%')
 
   await expect(text).toBeVisible()
   await page.getByRole('button', { name: '隐藏文字' }).click()

diff --git a/examples/sites/demos/pc/app/progress/format-text.vue b/examples/sites/demos/pc/app/progress/format-text.vue
@@ -34,8 +34,8 @@ export default {
   data() {
     return {
       showTest: true,
-      percentageText: 60,
-      testInside: true
+      percentageText: 45,
+      testInside: false
     }
   }
 }

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
@@ -1,14 +1,14 @@
 <template>
   <tiny-button @click="add">增加</tiny-button>
-  <tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
-  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+  <tiny-progress type="circle" :percentage="percentage" status="exception" :width="124"></tiny-progress>
+  <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="124"> </tiny-progress>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const percentage = ref(10)
+const percentage = ref(50)
 const customColors = ref([
   { color: '#f56c6c', percentage: 20 },
   { color: '#e6a23c', percentage: 40 },

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
@@ -10,13 +10,13 @@ test.describe('环形', () => {
     const cirlePath = firstProgress.locator('.tiny-progress-circle__path')
 
     await expect(firstProgress.locator('div.tiny-progress-circle')).toBeVisible()
-    await expect(circleTrack).toHaveAttribute('stroke-width', '4')
+    await expect(circleTrack).toHaveAttribute('stroke-width', '4.8')
     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")')
-    await expect(cirlePath).toHaveAttribute('stroke-width', '4')
+    await expect(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 3 A 47 47 0 1 1 50 97 A 47 47 0 1 1 50 3")')
+    await expect(cirlePath).toHaveAttribute('stroke-width', '4.8')
     await expect(cirlePath).toHaveAttribute('stroke', '#eb171f')
     await expect(cirlePath).toHaveAttribute('stroke-linecap', 'round')
-    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")')
+    await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 3 A 47 47 0 1 1 50 97 A 47 47 0 1 1 50 3")')
   })
 
   test('是否C型圆环类型', async ({ page }) => {
@@ -30,14 +30,14 @@ test.describe('环形', () => {
     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-width', '4.8')
     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(circleTrack).toHaveCSS('d', 'path("M 50 50 M 50 97 A 47 47 0 1 1 50 3 A 47 47 0 1 1 50 97")')
+    await expect(cirlePath).toHaveAttribute('stroke-width', '4.8')
+    await expect(cirlePath).toHaveAttribute('stroke', '#5cb87a')
     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')
+    await expect(cirlePath).toHaveCSS('d', 'path("M 50 50 M 50 97 A 47 47 0 1 1 50 3 A 47 47 0 1 1 50 97")')
+    await expect(cirlePath).toHaveCSS('stroke-dasharray', '110.741px, 295.31px')
   })
 
   test('点击值增加', async ({ page }) => {
@@ -50,20 +50,20 @@ test.describe('环形', () => {
     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 expect(firstProgress).toHaveAttribute('aria-valuenow', '50')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '147.655px, 295.31px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '50')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '110.741px, 295.31px')
     await page.getByRole('button', { name: '增加' }).click()
-    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 expect(firstProgress).toHaveAttribute('aria-valuenow', '60')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '177.186px, 295.31px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '60')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '132.889px, 295.31px')
 
     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')
+    await expect(firstProgress).toHaveAttribute('aria-valuenow', '70')
+    await expect(cirlePath1).toHaveCSS('stroke-dasharray', '206.717px, 295.31px')
+    await expect(lastProgress).toHaveAttribute('aria-valuenow', '70')
+    await expect(cirlePath2).toHaveCSS('stroke-dasharray', '155.038px, 295.31px')
   })
 })
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle.vue b/examples/sites/demos/pc/app/progress/progress-type-circle.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <tiny-button @click="add">增加</tiny-button>
-    <tiny-progress type="circle" :percentage="percentage" status="exception" :width="150"></tiny-progress>
-    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="300"> </tiny-progress>
+    <tiny-progress type="circle" :percentage="percentage" status="exception" :width="124"></tiny-progress>
+    <tiny-progress type="dashboard" :percentage="percentage" :color="customColors" :width="124"> </tiny-progress>
   </div>
 </template>
 
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      percentage: 10,
+      percentage: 50,
       customColors: [
         { color: '#f56c6c', percentage: 20 },
         { color: '#e6a23c', percentage: 40 },

diff --git a/packages/theme/src/progress/vars.less b/packages/theme/src/progress/vars.less
@@ -15,7 +15,7 @@
   // 横向条未完成背景色
   --tv-Progress-outer-bg-color: var(--tv-color-bg-gray-2, #e6e6e6);
   // 横向条已完成背景色
-  --tv-Progress-inner-bg-color: var(--tv-color-success-bg, #5cb300);
+  --tv-Progress-inner-bg-color: var(--tv-color-info-bg, #1476ff);
   // 横向条内层文本字号
   --tv-Progress-inner-font-size: var(--tv-font-size-md, 14px);
   // 横向条内层文本色
@@ -27,7 +27,7 @@
   // warning状态横向条已完成背景色
   --tv-Progress-bg-color-warning: var(--tv-color-warn-bg, #ff8800);
   // exception状态横向条已完成背景色
-  --tv-Progress-bg-color-exception: #c7000b;
+  --tv-Progress-bg-color-exception: var(--tv-color-error-bg, #f23030);
 
   /** 横向条右侧文字场景 */
   // 横向条右侧文字左外边距