@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/pc/app/layout/webdoc/layout.js

@@ -6,16 +6,16 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic usage' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过在<code>Layout </code> 组件嵌套使用 <code>Row</code> , <code>Col</code> 组件, 来实现对一个区域进行 12/24 栅格布局。<br>
             通过<code>Layout </code> 组件的<code> cols </code> 属性来指定布局的总栅格栏数，组件库默认为12栅格栏；<br>
             通过 <code>Col</code> 组件的 <code>span</code> 属性指定每栏所占栅格数。当一行的栅格数之和大于总栅格栏数时，布局会自动换行显示。<br>
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
           A 12/24 grid Layout of an area is implemented by nesting <code>Row</code>, <code>Col</code> components within <code>Layout </code> components. <br>
           Use the <code> cols </code> property of the <code>Layout </code> component to specify the total number of grid columns for the layout. The component library defaults to 12 grid columns. <br>
           The <code>span</code> property of the <code>Col</code> component specifies the number of grids per column. When the sum of the number of grids in a row is greater than the total number of grid columns, the layout is automatically wrapped. <br> 
-        </p>`
+        `
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -23,16 +23,16 @@ export default {
       'demoId': 'responsive-layout',
       'name': { 'zh-CN': '响应式布局', 'en-US': 'Responsive Layout' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             在<code>Col</code> 组件预设了五个响应尺寸：<code>xs</code>、<code>sm</code>、<code>md</code>、<code>lg</code> 和 <code>xl</code>，
             来指定在每一个媒介查询尺寸时，该列应该占用的栅格数。组件库默认媒介查询的断点位置为<code>768 / 992 / 1200 / 1920</code><br>
             请改变浏览器窗口的大小，观察下面示例中，各列所占栅格的变化。
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             The <code>Col</code> component presets five response sizes: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.
             To specify the number of rasters that the column should occupy at each medium query size. The default media query is <code> 768/992/1200/1920 </code><br>
             In the following example, resize the browser window to see how the columns are placed on the grid.
-           </p>`
+           `
       },
       'codeFiles': ['responsive-layout.vue']
     },
@@ -40,14 +40,14 @@ export default {
       'demoId': 'order',
       'name': { 'zh-CN': 'Col 排序', 'en-US': 'Sort' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             在启用<code>Row</code> 组件的 <code>flex</code> 布局时，可通过设置它的 <code>order</code> 属性值为: <code>asc 或 desc</code>，给<code>Col</code> 组件排序。<br>
             待排序的列需指定 <code>no</code> 属性为数字值，属性的默认值为0。
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             When you enable the <code>flex</code> layout of the <code>Row</code> component, you can do this by setting its <code>order</code> property to: <code>asc or desc</code>, which sorts <code>Col</code> components. <br>
             The column to be sorted requires the <code>no</code> attribute to be numeric, which defaults to 0.
-          </p>`
+          `
       },
       'codeFiles': ['order.vue']
     },
@@ -55,14 +55,14 @@ export default {
       'demoId': 'alignment',
       'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过<code>Row</code> 组件的 <code>flex</code> 属性设置为 <code>true</code> 来启用 flex 布局，
             并通过 <code>justify</code> 来指定主轴方向的对齐方式，通过 <code>align</code> 属性指定副轴的对齐方式。<br>
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             Enable the flex layout by setting the <code>Row</code> component's <code>flex</code> property to <code>true</code>.
             Use <code>justify</code> to specify the main axis alignment and the <code>align</code> attribute to specify the secondary axis alignment. <br>
-          </p>`
+          `
       },
       'codeFiles': ['alignment.vue']
     },
@@ -70,9 +70,9 @@ export default {
       'demoId': 'offset',
       'name': { 'zh-CN': '偏移', 'en-US': 'Offset' },
       'desc': {
-        'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定当前列偏移的栏数。</p>',
+        'zh-CN': '通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定当前列偏移的栏数。',
         'en-US':
-          '<p>You specify the number of columns to offset by by setting the <code>offset</code> property of the <code>Col</code> component.Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. </p>'
+          'You specify the number of columns to offset by by setting the <code>offset</code> property of the <code>Col</code> component.Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. '
       },
       'codeFiles': ['offset.vue']
     },
@@ -80,14 +80,14 @@ export default {
       'demoId': 'gutter',
       'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
             不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             This is done by using the <code>gutter</code> property of the <code>Row</code> component.
             Without setting the <code>gutter</code>, the component will default to <code>Col</code> and set the padding value to 10px </code> around the <code>. 
-          </p>`
+          `
       },
       'codeFiles': ['gutter.vue']
     },
@@ -95,12 +95,12 @@ export default {
       'demoId': 'tag',
       'name': { 'zh-CN': '自定义元素标签', 'en-US': 'Custom Element Label' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过使用 <code>Layout / Row / Col </code> 组件的 <code>tag</code> 属性实现自定义元素标签，可选任意标签。默认使用 <code>div</code> 
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             Custom element tags can be created by using the <code>tag</code> attribute of the <code>Layout/Row/Col </code> component. Default <code>div</code>
-          </p>`
+          `
       },
       'codeFiles': ['tag.vue']
     }
@@ -109,10 +109,7 @@ export default {
     {
       'name': 'layout',
       'type': 'component',
-      'properties': [],
-      'events': [],
-      'slots': [],
-      'layout-attrs': [
+      'props': [
         {
           'name': 'cols',
           'type': 'number',
@@ -126,19 +123,23 @@ export default {
         {
           'name': 'tag',
           'type': 'string',
-          'defaultValue': 'div',
+          'defaultValue': '"div"',
           'desc': {
             'zh-CN': '定义 Layout 元素的渲染后的标签，默认为div',
             'en-US': 'Defines the rendered tag of a Layout element, which defaults to div'
           },
           'demoId': 'tag'
         }
-      ],
-      'row-attrs': [
+      ]
+    },
+    {
+      'name': 'row',
+      'type': 'component',
+      'props': [
         {
           'name': 'align',
           'type': 'string',
-          'defaultValue': 'top',
+          'defaultValue': '"top"',
           'desc': {
             'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'",
             'en-US': `Alignment of minor axes for child items; values: 'top', 'middle', 'bottom'`
@@ -162,7 +163,7 @@ export default {
         {
           'name': 'justify',
           'type': 'string',
-          'defaultValue': 'start',
+          'defaultValue': '"start"',
           'desc': {
             'zh-CN': "子项的主轴对齐方向，可取值：'start', 'center', 'end', 'space-between', 'space-around'",
             'en-US': `Main axis alignment direction for child items; values: 'start', 'center', 'end', 'space-between', 'space-around'`
@@ -172,9 +173,9 @@ export default {
         {
           'name': 'order',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': `"asc" | "des"`,
           'desc': {
-            'zh-CN': "子项的排序方式，可取值：'asc', 'des'。 不设置时，保留子项在模板中的顺序。",
+            'zh-CN': '子项的排序方式。 不设置时，保留子项在模板中的顺序。',
             'en-US': `Ordering of the child items; values: 'asc', 'des'. When not set, the order of the child items in the template is preserved.`
           },
           'demoId': 'order'
@@ -182,23 +183,33 @@ export default {
         {
           'name': 'tag',
           'type': 'string',
-          'defaultValue': 'div',
+          'defaultValue': '"div"',
           'desc': {
             'zh-CN': '定义 Row 元素的渲染后的标签，默认为div',
             'en-US': 'Defines the rendered tag of a Row element, which defaults to div'
           },
           'demoId': 'tag'
         }
-      ],
-      'col-attrs': [
+      ]
+    },
+    {
+      'name': 'col',
+      'type': 'component',
+      'props': [
         {
-          'name': 'move',
+          'name': 'span',
+          'type': 'number',
+          'defaultValue': '12',
+          'desc': { 'zh-CN': '子项占据的列数', 'en-US': 'Number of columns occupied by the child' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'offset',
           'type': 'number',
           'defaultValue': '0',
           'desc': {
-            'zh-CN': '子项的右偏移量,是通过 left 属性实现偏移,建议使用 offset 代替',
-            'en-US':
-              'The right offset of the child item is offset via the left property; it is recommended to use offset instead'
+            'zh-CN': '子项的向右偏移量,是通过 margin-left 属性实现偏移',
+            'en-US': 'The offset to the right of the child item is achieved using the margin-left property'
           },
           'demoId': 'offset'
         },
@@ -210,40 +221,73 @@ export default {
           'demoId': 'order'
         },
         {
-          'name': 'offset',
+          'name': 'tag',
+          'type': 'string',
+          'defaultValue': '"div"',
+          'desc': {
+            'zh-CN': '定义 Col 元素的渲染后的标签，默认为div',
+            'en-US': 'Defines the rendered tag of a Col element, which defaults to div'
+          },
+          'demoId': 'tag'
+        },
+        {
+          'name': 'move',
           'type': 'number',
           'defaultValue': '0',
           'desc': {
-            'zh-CN': '子项的向右偏移量,是通过 margin-left 属性实现偏移',
-            'en-US': 'The offset to the right of the child item is achieved using the margin-left property'
+            'zh-CN': '子项的右偏移量,是通过 left 属性实现偏移,建议使用 offset 代替',
+            'en-US':
+              'The right offset of the child item is offset via the left property; it is recommended to use offset instead'
           },
           'demoId': 'offset'
         },
         {
-          'name': 'span',
+          'name': 'xs',
           'type': 'number',
-          'defaultValue': '12',
-          'desc': { 'zh-CN': '子项占据的列数', 'en-US': 'Number of columns occupied by the child' },
-          'demoId': 'basic-usage'
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '在响应式宽度 <code> < 768px <code> 时，该列占用的栅格数',
+            'en-US': 'The number of grids occupied by the column at the response width <code> < 768px <code>'
+          },
+          'demoId': 'responsive-layout'
         },
         {
-          'name': 'tag',
-          'type': 'string',
-          'defaultValue': 'div',
+          'name': 'sm',
+          'type': 'number',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '定义 Col 元素的渲染后的标签，默认为div',
-            'en-US': 'Defines the rendered tag of a Col element, which defaults to div'
+            'zh-CN': '在响应式宽度 <code> < 992px <code> 时，该列占用的栅格数',
+            'en-US': 'The number of grids occupied by the column at the response width <code> < 992px <code>'
           },
-          'demoId': 'tag'
+          'demoId': 'responsive-layout'
         },
         {
-          'name': 'xs/sm/md/lg/xl',
+          'name': 'md',
           'type': 'number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '指定列占用响应式栅格数，响应式断点的位置为：768 / 992 / 1200 / 1920',
-            'en-US':
-              'Specifies the number of reactive grids occupied by the column and the location of the reactive breakpoint: 768/992/1200/1920'
+            'zh-CN': '在响应式宽度 <code> < 1200px <code> 时，该列占用的栅格数',
+            'en-US': 'The number of grids occupied by the column at the response width <code> < 1200px <code>'
+          },
+          'demoId': 'responsive-layout'
+        },
+        {
+          'name': 'lg',
+          'type': 'number',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '在响应式宽度 <code> < 1920px <code> 时，该列占用的栅格数',
+            'en-US': 'The number of grids occupied by the column at the response width <code> < 1920px <code>'
+          },
+          'demoId': 'responsive-layout'
+        },
+        {
+          'name': 'xl',
+          'type': 'number',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '在响应式宽度 <code> >= 1920px <code> 时，该列占用的栅格数',
+            'en-US': 'The number of grids occupied by the column at the response width <code> >= 1920px <code>'
           },
           'demoId': 'responsive-layout'
         }

package/demos/pc/app/link/custom-icon-composition-api.vue

@@ -38,8 +38,4 @@ const TinyIconFilletExternalLink = iconFilletExternalLink()
 .tiny-link {
   margin-right: 8px;
 }
-.tiny-svg-link,
-.tiny-svg-link g {
-  fill: var(--ti-link-default-text-color);
-}
 </style>

package/demos/pc/app/link/custom-icon.vue

@@ -47,8 +47,4 @@ export default {
 .tiny-link {
   margin-right: 8px;
 }
-.tiny-svg-link,
-.tiny-svg-link g {
-  fill: var(--ti-link-default-text-color);
-}
 </style>

package/demos/pc/app/loading/background-composition-api.vue

@@ -10,7 +10,7 @@ onMounted(() => {
   Loading.service({
     text: '自定义背景颜色和透明度',
     target: document.getElementById('tiny-demo-loading-background'),
-    background: 'rgba(94, 124, 224, 0.6)'
+    background: 'rgba(0, 0, 0, 0.2)'
   })
 })
 </script>

package/demos/pc/app/loading/background.spec.ts

@@ -4,5 +4,5 @@ test('自定义遮罩背景色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#background')
   const loadingBg = page.locator('.tiny-loading__mask')
-  await expect(loadingBg).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.3)')
+  await expect(loadingBg).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.2)')
 })

package/demos/pc/app/loading/background.vue

@@ -10,7 +10,7 @@ export default {
     Loading.service({
       text: '自定义背景颜色和透明度',
       target: document.getElementById('tiny-demo-loading-background'),
-      background: 'rgba(94, 124, 224, 0.6)'
+      background: 'rgba(0, 0, 0, 0.2)'
     })
   }
 }

package/demos/pc/app/loading/custom-class-composition-api.vue

@@ -11,14 +11,14 @@ onMounted(() => {
     text: '自定义loading类名',
     customClass: 'new-loading',
     target: document.getElementById('tiny-demo-loading-custom-class'),
-    background: 'rgba(0, 0, 0, 0.8)'
+    background: 'rgba(0, 0, 0, 0.7)'
   })
 })
 </script>
 
 <style>
 .new-loading .tiny-loading__spinner .tiny-loading__text {
-  color: green;
+  color: #fff;
 }
 
 #tiny-demo-loading-custom-class {

package/demos/pc/app/loading/custom-class.spec.ts

@@ -5,6 +5,6 @@ test('自定义样式', async ({ page }) => {
   await page.goto('loading#custom-class')
   const loadingBg = page.locator('.tiny-loading__mask')
   const loadingText = page.locator('.new-loading')
-  await expect(loadingBg).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.8)')
+  await expect(loadingBg).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.7)')
   await expect(loadingText).toBeVisible()
 })

package/demos/pc/app/loading/custom-class.vue

@@ -11,7 +11,7 @@ export default {
       text: '自定义loading类名',
       customClass: 'new-loading',
       target: document.getElementById('tiny-demo-loading-custom-class'),
-      background: 'rgba(0, 0, 0, 0.8)'
+      background: 'rgba(0, 0, 0, 0.7)'
     })
   }
 }
@@ -19,7 +19,7 @@ export default {
 
 <style>
 .new-loading .tiny-loading__spinner .tiny-loading__text {
-  color: green;
+  color: #fff;
 }
 #tiny-demo-loading-custom-class {
   height: 120px;

package/demos/pc/app/loading/directive-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tiny-demo-v-loading">
-    <tiny-button @click="handleClick">open loading</tiny-button>
+    <tiny-button @click="handleClick">change loading</tiny-button>
     <div
       v-loading="isLoading"
       tiny-loading__text="v-loadingText"
-      tiny-loading__background="rgba(0,0,0,0.6)"
+      tiny-loading__background="rgba(0,0,0,0.8)"
       tiny-loading__custom-class="tiny-demo-loading-custom"
     >
       <div class="tiny-demo-v-loading-bg">
@@ -23,10 +23,7 @@ const isLoading = ref(false)
 const vLoading = Loading.directive
 
 function handleClick() {
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-  }, 5000)
+  isLoading.value = !isLoading.value
 }
 </script>
 
@@ -36,4 +33,8 @@ function handleClick() {
   line-height: 120px;
   text-align: center;
 }
+
+.tiny-demo-v-loading > *:not(:last-child) {
+  margin-bottom: 12px;
+}
 </style>

package/demos/pc/app/loading/directive.spec.ts

@@ -2,7 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('修饰符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('loading#body')
-  const loadingText = page.locator('.tiny-loading__text')
-  await expect(loadingText).toHaveText('同 v——loading 指令中的 body 修饰符')
+  await page.goto('loading#directive')
+
+  await expect(page.getByText('v-loadingText')).not.toBeVisible()
+  await page.getByRole('button', { name: 'change loading' }).click()
+  await expect(page.getByText('v-loadingText')).toBeVisible()
+
+  await page.getByRole('button', { name: 'change loading' }).click()
+  await expect(page.getByText('v-loadingText')).not.toBeVisible()
 })

package/demos/pc/app/loading/directive.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tiny-demo-v-loading">
-    <tiny-button @click="handleClick">open loading</tiny-button>
+    <tiny-button @click="handleClick">change loading</tiny-button>
     <div
       v-loading="isLoading"
       tiny-loading__text="v-loadingText"
-      tiny-loading__background="rgba(0,0,0,0.6)"
+      tiny-loading__background="rgba(0,0,0,0.8)"
       tiny-loading__custom-class="tiny-demo-loading-custom"
     >
       <div class="tiny-demo-v-loading-bg">
@@ -31,10 +31,7 @@ export default {
   },
   methods: {
     handleClick() {
-      this.isLoading = true
-      setTimeout(() => {
-        this.isLoading = false
-      }, 5000)
+      this.isLoading = !this.isLoading
     }
   }
 }
@@ -46,4 +43,8 @@ export default {
   line-height: 120px;
   text-align: center;
 }
+
+.tiny-demo-v-loading > *:not(:last-child) {
+  margin-bottom: 12px;
+}
 </style>

package/demos/pc/app/loading/fullscreen.spec.ts

@@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
 test('全局加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#fullscreen')
-  const loadingText = page.locator('.tiny-loading__text')
   await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
   const vLoading = page.locator('.circular')
   await expect(vLoading).toBeVisible()

package/demos/pc/app/loading/loading-tip-text.spec.ts

@@ -4,5 +4,5 @@ test('自定义加载提示文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#loading-tip-text')
   const loadingText = page.locator('.tiny-loading__text')
-  await expect(loadingText).toBeVisible()
+  await expect(loadingText).toContainText('加载中')
 })

package/demos/pc/app/loading/spinner.spec.ts

@@ -4,13 +4,8 @@ test('自定义加载图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('loading#spinner')
   const loadingText = page.locator('.tiny-loading__text')
-  const sloading = page.locator('.tiny-loading__spinner-small')
-  const mloading = page.locator('.tiny-loading__spinner-medium')
-  const lloading = page.locator('.tiny-loading__spinner-large')
-  const svg = page.locator('.tiny-loading__spinner-large > svg > defs > linearGradient > stop').nth(1)
-  await expect(loadingText).toHaveText(['自定义loading图标', '自定义loading图标', '自定义loading图标'])
-  await expect(sloading).toBeVisible()
-  await expect(mloading).toBeVisible()
-  await expect(lloading).toBeVisible()
-  await expect(svg).toHaveAttribute('stop-color', '#191919')
+
+  const svg = page.locator('#tiny-demo-loading-spinner .tiny-icon-loading')
+  await expect(loadingText).toContainText('自定义loading图标')
+  await expect(svg).toHaveClass(/tiny-icon-loading/)
 })

package/demos/pc/app/loading/webdoc/loading.js

@@ -88,7 +88,7 @@ export default {
     {
       'name': 'loading',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'text',
           'type': 'string',
@@ -112,18 +112,18 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'medium | small | mini',
-          'defaultValue': 'small',
+          'type': `'medium' | 'small' | 'mini'`,
+          'defaultValue': `'small'`,
           'desc': { 'zh-CN': '加载图标尺寸', 'en-US': 'Load icon size' },
           'demoId': 'size'
         },
         {
           'name': 'target',
-          'type': 'object | string',
+          'type': 'HTMLElement | string',
           'defaultValue': 'document.body',
           'desc': {
             'zh-CN':
-              'Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点',
+              'Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点',
             'en-US':
               'Loading the DOM node to be overwritten. A DOM object or character string can be transferred. If a character string is transferred, it is transferred to document.querySelector as a parameter to obtain the corresponding DOM node.'
           },
@@ -150,7 +150,7 @@ export default {
         },
         {
           'name': 'spinner',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '自定义加载图标', 'en-US': 'Customized loading icon class name' },
           'demoId': 'spinner'
@@ -170,7 +170,11 @@ export default {
           'demoId': 'custom-class'
         }
       ],
-      'directive': [
+    },
+    {
+      'name': 'loading',
+      'type': 'directive',
+      'props': [
         {
           'name': 'v-loading',
           'type': 'boolean',

package/demos/pc/app/milestone/basic-usage.spec.ts

@@ -2,7 +2,7 @@ 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/milestone/basic-usage')
+  await page.goto('milestone#basic-usage')
 
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
@@ -63,17 +63,20 @@ test('基本用法', async ({ page }) => {
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
   for (let i = 0; i < nodeCount; i++) {
-    await expect(nodes.nth(i)).toHaveCSS('width', '128.484px')
-    await expect(nodes.nth(i)).toHaveCSS('height', '88px')
+    const { width, height } = await nodes.nth(i).boundingBox()
+    await expect(width).toBeGreaterThanOrEqual(118)
+    await expect(height).toBeGreaterThanOrEqual(88)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
     await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
 
     if (i < 5) {
-      await expect(nodeLines.nth(i)).toHaveCSS('width', '128.484px')
+      const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
+      await expect(lineWidth).toBeGreaterThanOrEqual(118)
     } else {
-      await expect(nodeLines.nth(i)).toHaveCSS('width', '0px')
+      const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
+      await expect(lineWidth).toBeGreaterThanOrEqual(0)
     }
     if (i < 2) {
       await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
@@ -81,10 +84,8 @@ test('基本用法', async ({ page }) => {
       await expect(nodeIcons.nth(i)).toHaveText(String(i - 1))
     }
     if (i < 4) {
-      const { y, width, height } = await flags.nth(i).boundingBox()
-      await expect(y).toBeCloseTo(290, 2)
-      await expect(width).toEqual(58)
-      await expect(height).toEqual(34)
+      await expect(flags.nth(i)).toHaveCSS('width', '58px')
+      await expect(flags.nth(i)).toHaveCSS('padding', '0px')
       await expect(flags.nth(i)).toHaveText(flagContents[i])
       await expect(flagLines.nth(i)).toHaveCSS('width', '1px')
       await expect(flagLines.nth(i)).toHaveCSS('height', '30px')