docs(components): [progress, search] Repair progress bar document optimization test sheet (#1236)

* docs(progress): Repair progress bar document optimization test sheet

* docs(search): Fix search document optimization test sheet

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

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="add"> 点击增加改变颜色 </tiny-button>
-    <tiny-progress :percentage="value" :color="customColor"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColorMethod"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColors"></tiny-progress>
+    <tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
+    <tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
   </div>
 </template>
 
@@ -11,7 +13,7 @@
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const value = ref(50)
+const value = ref(20)
 const customColor = ref('#409eff')
 // 在什么进度显示什么样的颜色
 const customColors = ref([
@@ -23,6 +25,9 @@ const customColors = ref([
 ])
 
 function add() {
+  if (value.value + 20 > 100) {
+    return
+  }
   value.value += 20
 }
 

examples/sites/demos/pc/app/progress/custom-color.spec.ts

@@ -10,10 +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 button.click()
   await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
   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(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  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(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(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(111, 122, 211)')
 })

examples/sites/demos/pc/app/progress/custom-color.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="add"> 点击增加改变颜色 </tiny-button>
-    <tiny-progress :percentage="value" :color="customColor"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColorMethod"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColors"></tiny-progress>
+    <tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
+    <tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
   </div>
 </template>
 
@@ -17,7 +19,7 @@ export default {
   },
   data() {
     return {
-      value: 50,
+      value: 20,
       customColor: '#409eff',
       // 在什么进度显示什么样的颜色
       customColors: [
@@ -31,6 +33,9 @@ export default {
   },
   methods: {
     add() {
+      if (this.value + 20 > 100) {
+        return
+      }
       this.value += 20
     },
     // 在什么进度显示什么样的颜色

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

@@ -7,7 +7,13 @@
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
           </div>
-          <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+          <tiny-progress
+            class="progress"
+            type="line"
+            :percentage="percentage"
+            status="exception"
+            :stroke-width="24"
+          ></tiny-progress>
           <div class="tiny-progress-demo-status">
             <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
             <div class="tiny-progress-demo-status-des">上传失败</div>
@@ -26,7 +32,7 @@
                 <div class="tiny-progress-content-des-on" @click="cancel">取消</div>
               </div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage1"></tiny-progress>
+            <tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
           </div>
         </div>
       </div>
@@ -38,7 +44,13 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage2" status="exception"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage2"
+              status="exception"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
               <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
               <div class="tiny-progress-demo-status-des">
@@ -56,7 +68,13 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage3" status="success"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage3"
+              status="success"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
               <tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
               <div class="tiny-progress-demo-status-des">安装成功</div>
@@ -103,8 +121,9 @@ const getTimer1 = () => {
 }
 
 const reload = () => {
+  clearInterval(process2.value)
   percentage2.value = 0
-  location.reload()
+  getTimer2()
 }
 
 const getTimer2 = () => {
@@ -112,7 +131,7 @@ const getTimer2 = () => {
     percentage2.value += 5
 
     if (percentage2.value == 50) {
-      clearTimeout(process2.value)
+      clearInterval(process2.value)
     }
   }, 300)
 }

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

@@ -7,7 +7,13 @@
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
           </div>
-          <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+          <tiny-progress
+            class="progress"
+            type="line"
+            :percentage="percentage"
+            status="exception"
+            :stroke-width="24"
+          ></tiny-progress>
           <div class="tiny-progress-demo-status">
             <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
             <div class="tiny-progress-demo-status-des">上传失败</div>
@@ -26,7 +32,7 @@
                 <div class="tiny-progress-content-des-on" @click="cancel">取消</div>
               </div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage1"></tiny-progress>
+            <tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
           </div>
         </div>
       </div>
@@ -38,7 +44,13 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage2" status="exception"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage2"
+              status="exception"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
               <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
               <div class="tiny-progress-demo-status-des">
@@ -56,7 +68,13 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage3" status="success"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage3"
+              status="success"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
               <tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
               <div class="tiny-progress-demo-status-des">安装成功</div>
@@ -112,8 +130,9 @@ export default {
       }, 300)
     },
     reload() {
+      clearInterval(this.process2)
       this.percentage2 = 0
-      location.reload()
+      this.getTimer2()
     },
     getTimer2() {
       var that = this
@@ -121,7 +140,7 @@ export default {
         that.percentage2 += 5
 
         if (this.percentage2 == 50) {
-          clearTimeout(this.process2)
+          clearInterval(this.process2)
         }
       }, 300)
     }

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

@@ -115,12 +115,11 @@ export default {
         },
         {
           'name': 'status',
-          'type': 'string',
+          'type': `'success' | 'exception' | 'warning'`,
           'defaultValue': '',
           'desc': {
-            'zh-CN': '进度条当前状态；该属性的可选值为 success / exception / warning',
-            'en-US':
-              'Current status of the progress bar; The value of this attribute can be success, exception, or warning'
+            'zh-CN': '进度条当前状态',
+            'en-US': 'Current status of the progress bar'
           },
           'demoId': 'progress-status'
         },
@@ -147,11 +146,11 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'string',
+          'type': `'line' | 'circle' | 'dashboard'`,
           'defaultValue': `'line'`,
           'desc': {
-            'zh-CN': '进度条类型；该属性的可选值为 line / circle / dashboard',
-            'en-US': 'Progress bar type; The value of this attribute can be line, circle, or dashboard'
+            'zh-CN': '进度条类型',
+            'en-US': 'Progress bar type'
           },
           'demoId': 'progress-type-circle'
         },

examples/sites/demos/pc/app/search/events-composition-api.vue

@@ -31,19 +31,19 @@ const searchTypes = ref([
 ])
 
 function search(key, value) {
-  Modal.message(`${value}`)
+  Modal.message({ message: `search: ${value}`, status: 'info' })
 }
 
 function change(key, value) {
-  Modal.message(`change: ${value}`)
+  Modal.message({ message: `change: ${value}`, status: 'info' })
 }
 
 function clear() {
-  Modal.message('clear')
+  Modal.message({ message: 'clear', status: 'info' })
 }
 
 function input(key, value) {
-  Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+  Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
 }
 
 function select(value) {

examples/sites/demos/pc/app/search/events.vue

@@ -38,16 +38,16 @@ export default {
   },
   methods: {
     search(key, value) {
-      Modal.message(`${value}`)
+      Modal.message({ message: `search: ${value}`, status: 'info' })
     },
     change(key, value) {
-      Modal.message(`change: ${value}`)
+      Modal.message({ message: `change: ${value}`, status: 'info' })
     },
     clear() {
-      Modal.message('clear')
+      Modal.message({ message: 'clear', status: 'info' })
     },
     input(key, value) {
-      Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+      Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
     },
     select(value) {
       Modal.message({ message: `${value.text}`, status: 'info' })

examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue

@@ -5,7 +5,7 @@
         <tiny-icon-search />
       </template>
     </tiny-search>
-    {{ value }}
+    <div class="mt10">{{ value }}</div>
   </div>
 </template>
 

examples/sites/demos/pc/app/search/slot-prefix.vue

@@ -5,7 +5,7 @@
         <icon-search />
       </template>
     </tiny-search>
-    {{ value }}
+    <div class="mt10">{{ value }}</div>
   </div>
 </template>
 

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

@@ -113,7 +113,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '是否在按下键盘Enter键时触发search事件',
+            'zh-CN': '是否在按下键盘 Enter 键时触发 search 事件',
             'en-US': 'Whether to trigger the search event when pressing the Enter key on the keyboard'
           },
           'demoId': 'events'
@@ -123,7 +123,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '是否为迷你模式，配置为true时，默认显示为一个带图标的圆形按钮，点击后展开',
+            'zh-CN': '是否为迷你模式，配置为 true 时，默认显示为一个带图标的圆形按钮，点击后展开',
             'en-US':
               'Is it mini mode? When configured to true, it will default to a circular button with an icon, which will expand after clicking'
           },

packages/theme/src/progress/index.less

@@ -42,6 +42,7 @@
     display: inline-block;
     vertical-align: middle;
     margin-left: var(--ti-progress-bar-text-margin-left); // smb新增
+    width: 100%;
     line-height: 1;
 
     i {