@opentiny/vue-docs 2.2.22 → 3.16.0

package/demos/pc/app/grid/size/resize-operation-column-width-composition-api.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-grid :data="tableData" operation-column-resizable>
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const tableData = ref([
+  { id: '1', name: 'GFD科技有限公司', area: '华东区', address: '福州' },
+  { id: '2', name: 'WWWW科技有限公司', area: '华南区', address: '深圳福田区' },
+  { id: '3', name: 'RFV有限责任公司', area: '华南区', address: '中山市' },
+  { id: '4', name: 'TGB有限公司', area: '华北区', address: '梅州' },
+  { id: '5', name: 'YHN科技有限公司', area: '华南区', address: '韶关' },
+  { id: '6', name: '康康物业有限公司', area: '华北区', address: '广州天河区' }
+])
+</script>

package/demos/pc/app/grid/size/resize-operation-column-width.spec.js

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('操作列开启列宽拖拽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-size#size-resize-operation-column-width')
+  const draggerDom = page.locator('th.col__radio').locator('.tiny-grid-resizable')
+  const thDom = page.locator('th.col__radio')
+  // 获取初始列宽
+  const { width: thWidth } = await thDom.boundingBox()
+  // 获取拖拽元素位置
+  const { x, y } = await draggerDom.boundingBox()
+  // 开始拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x + 15, y + 6)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  // 拖拽完毕再次检测列宽
+  const { width: lastThWidth } = await thDom.boundingBox()
+  expect(thWidth).toBeLessThan(lastThWidth)
+})

package/demos/pc/app/grid/size/resize-operation-column-width.vue

@@ -0,0 +1,33 @@
+<template>
+  <tiny-grid :data="tableData" operation-column-resizable>
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', name: 'GFD科技有限公司', area: '华东区', address: '福州' },
+        { id: '2', name: 'WWWW科技有限公司', area: '华南区', address: '深圳福田区' },
+        { id: '3', name: 'RFV有限责任公司', area: '华南区', address: '中山市' },
+        { id: '4', name: 'TGB有限公司', area: '华北区', address: '梅州' },
+        { id: '5', name: 'YHN科技有限公司', area: '华南区', address: '韶关' },
+        { id: '6', name: '康康物业有限公司', area: '华北区', address: '广州天河区' }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue

@@ -10,9 +10,9 @@
       <template #toolbar>
         <tiny-grid-toolbar>
           <template #buttons>
-            <div style="width: 400px">
-              <tiny-input style="width: 200px" v-model="text" placeholder="请输入公司名称"></tiny-input>
-              <tiny-button @click="search">搜索</tiny-button>
+            <div>
+              <tiny-input class="w-200" v-model="text" placeholder="请输入公司名称"></tiny-input>
+              <tiny-button class="ml-8" @click="search">搜索</tiny-button>
             </div>
           </template>
         </tiny-grid-toolbar>
@@ -158,3 +158,12 @@ function search() {
   basicGridRef.value.handleFetch()
 }
 </script>
+
+<style scoped>
+.w-200 {
+  width: 200px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+</style>

package/demos/pc/app/grid/toolbar/custom-toolbar.vue

@@ -10,9 +10,9 @@
       <template #toolbar>
         <tiny-grid-toolbar>
           <template #buttons>
-            <div style="width: 400px">
-              <tiny-input style="width: 200px" v-model="text" placeholder="请输入公司名称"></tiny-input>
-              <tiny-button @click="search">搜索</tiny-button>
+            <div>
+              <tiny-input class="w-200" v-model="text" placeholder="请输入公司名称"></tiny-input>
+              <tiny-button class="ml-8" @click="search">搜索</tiny-button>
             </div>
           </template>
         </tiny-grid-toolbar>
@@ -162,3 +162,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.w-200 {
+  width: 200px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+</style>

package/demos/pc/app/grid/validation/valid-config-composition-api.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="button-container">
+      <tiny-radio v-model="size" label="">size为空</tiny-radio>
+      <tiny-radio v-model="size" label="medium">size为medium</tiny-radio>
+      <tiny-radio v-model="size" label="small">size为small</tiny-radio>
+      <tiny-radio v-model="size" label="mini">size为mini</tiny-radio>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      :valid-config="{ message: 'inline' }"
+      :edit-rules="validRules"
+      :size="size"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input, Radio as TinyRadio } from '@opentiny/vue'
+
+const size = ref('')
+const validRules = ref({
+  name: [
+    {
+      required: true,
+      message:
+        '名称必填。Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.'
+    },
+    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
+  ],
+  area: {
+    type: 'string',
+    required: true,
+    validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
+    message:
+      '区域格式不正确。Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.'
+  },
+  address: {
+    type: 'string',
+    validator: (rule, value) => {
+      return new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error('地址不能为空'))
+        } else if (value.length > 10) {
+          reject(new Error('地址过长'))
+        } else {
+          resolve()
+        }
+      })
+    }
+  }
+})
+
+const tableData = ref([
+  {
+    id: '1',
+    name: '',
+    area: '',
+    address: '',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB科技有限公司',
+    area: '华东区',
+    address: '龙岩',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+</script>
+
+<style scoped>
+.button-container {
+  margin-bottom: 16px;
+}
+</style>

package/demos/pc/app/grid/validation/valid-config.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('行内校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  const demo = page.locator('#valid-config')
+  await page.goto('grid-validation#valid-config')
+  await page.getByText('WWW科技有限公司').click()
+  await demo.locator('.tiny-input__inner').fill('')
+
+  await expect(demo.locator('.tiny-grid-cell__valid-msg')).toBeVisible()
+})

package/demos/pc/app/grid/validation/valid-config.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="button-container">
+      <tiny-radio v-model="size" label="">size为空</tiny-radio>
+      <tiny-radio v-model="size" label="medium">size为medium</tiny-radio>
+      <tiny-radio v-model="size" label="small">size为small</tiny-radio>
+      <tiny-radio v-model="size" label="mini">size为mini</tiny-radio>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+      :valid-config="{ message: 'inline' }"
+      :edit-rules="validRules"
+      :size="size"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Input, Radio } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyRadio: Radio
+  },
+  data() {
+    return {
+      Input,
+      size: '',
+      validRules: {
+        name: [
+          {
+            required: true,
+            message:
+              '名称必填。Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.'
+          },
+          { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
+        ],
+        area: {
+          type: 'string',
+          required: true,
+          validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
+          message:
+            '区域格式不正确。Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.'
+        },
+        address: {
+          type: 'string',
+          validator: (rule, value) => {
+            return new Promise((resolve, reject) => {
+              if (!value) {
+                reject(new Error('地址不能为空'))
+              } else if (value.length > 10) {
+                reject(new Error('地址过长'))
+              } else {
+                resolve()
+              }
+            })
+          }
+        }
+      },
+      tableData: [
+        {
+          id: '1',
+          name: '',
+          area: '',
+          address: '',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          area: '华东区',
+          address: '龙岩',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button-container {
+  margin-bottom: 16px;
+}
+</style>

package/demos/pc/app/grid/webdoc/grid-filter.js

@@ -97,6 +97,17 @@ export default {
       },
       'codeFiles': ['filter/server-filter.vue']
     },
+    {
+      'demoId': 'server-filter-default',
+      'name': { 'zh-CN': '服务端过滤默认选中值', 'en-US': 'Server-side filtering default selected value' },
+      'desc': {
+        'zh-CN':
+          '<p>配置 remote-filter 开启服务端过滤后，表格初始化时，如果设置了 <code>auto-load</code> 会在表格列初始化钱调用 <code>handleFetch</code>，因此此时无法获取到过滤参数，如果需要设置服务端过滤默认选中值，需将 <code>auto-load</code> 设置为false且手动调用一次 <code>handleFetch</code> 方法。</p>\n',
+        'en-US':
+          '<p>Set the default input filtering options through the <code>inputFilter.relation</code> attribute. \n Enter the built-in options for filtering: <code>equals</code>, <code>unequal</code>, <code>greaterThan</code>, <code>lessThan</code>, <code>equalToGreaterThan</code>, <code>equalToLessThan</code>, <code>contains</code>, <code>startwith</code>, <code>endwith</code>; Custom options can also be configured. \n When configuring custom options, you need to configure the filtering method through the <code>inputFilter.method</code> attribute. </p>\n'
+      },
+      'codeFiles': ['filter/server-filter-default.vue']
+    },
     {
       'demoId': 'filter-default-relation',
       'name': { 'zh-CN': '输入过滤的默认选项', 'en-US': '' },

package/demos/pc/app/grid/webdoc/grid-size.js

@@ -81,6 +81,17 @@ export default {
       },
       'codeFiles': ['size/resize-column-width.vue']
     },
+    {
+      'demoId': 'size-resize-operation-column-width',
+      'name': { 'zh-CN': '操作列开启列宽拖拽', 'en-US': 'Enable column width dragging' },
+      'desc': {
+        'zh-CN':
+          '<p>列属性 <code>type</code> 为 <code>index</code>, <code>radio</code>, <code>selection</code> 的列默认不可拖动列宽。可以通过表格属性 <code>operation-column-resizable</code> 开启列宽拖拽，默认值是 <code>false</code>。</p>\n',
+        'en-US':
+          '<p>Column width is enabled by default. To disable this function, set <code>resizable</code> to <code>false</code></p>\n'
+      },
+      'codeFiles': ['size/resize-operation-column-width.vue']
+    },
     {
       'demoId': 'size-adaptive-column-width',
       'name': { 'zh-CN': '列宽自适应撑开', 'en-US': 'Adaptive expansion of column width' },

package/demos/pc/app/grid/webdoc/grid-validation.js

@@ -115,6 +115,15 @@ export default {
         'en-US': ''
       },
       'codeFiles': ['validation/asterisk-method.vue']
+    },
+    {
+      'demoId': 'valid-config',
+      'name': { 'zh-CN': '行内校验', 'en-US': '' },
+      'desc': {
+        'zh-CN': `<p>配置 <code>validConfig.message</code> 为 <code>'inline'</code> 开启行内校验。</p>\n`,
+        'en-US': ''
+      },
+      'codeFiles': ['validation/valid-config.vue']
     }
   ],
   apis: [{ 'name': 'grid-validation', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

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

@@ -4,6 +4,7 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('milestone#basic-usage')
 
+  const milestone = page.locator('.tiny-milestone')
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
   const nodeLines = page.locator('.tiny-milestone__line')
@@ -62,10 +63,13 @@ test('基本用法', async ({ page }) => {
   await expect(nodeIcons).toHaveCount(nodeCount)
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
+  const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+  const nodeWidth = Math.floor(totalWidth / nodeCount)
+  const nodeHeight = totalHeight - 38
   for (let i = 0; i < nodeCount; i++) {
     const { width, height } = await nodes.nth(i).boundingBox()
-    await expect(width).toBeGreaterThanOrEqual(118)
-    await expect(height).toBeGreaterThanOrEqual(88)
+    await expect(width).toBeGreaterThanOrEqual(nodeWidth)
+    await expect(height).toEqual(nodeHeight)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@@ -73,7 +77,7 @@ test('基本用法', async ({ page }) => {
 
     if (i < 5) {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
-      await expect(lineWidth).toBeGreaterThanOrEqual(118)
+      await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
     } else {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
       await expect(lineWidth).toBeGreaterThanOrEqual(0)

package/demos/pc/app/milestone/flag-before.spec.ts

@@ -7,20 +7,24 @@ test('旗子数据来源', async ({ page }) => {
   const flags = page.locator('.tiny-milestone__flag-content')
   const flagLines = page.locator('.tiny-milestone__flag-line')
   const flagLineDots = flagLines.locator('.tiny-milestone__dot')
+  const nodes = page.locator('.tiny-milestone__icon.tiny-milestone__icon-custom')
   const flagCount = 4
   const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
   const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/]
   const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' })
-  const afterX = [370.47, 606.02, 648.84, 884.41]
-  const BeforeX = [370.47, 498.95, 734.5, 777.33]
   const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(94, 124, 224)']
   const flagBeforeLineColors = ['rgb(94, 124, 224)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
 
   for (let i = 0; i < flagCount; i++) {
     const { x, y, width, height } = await flags.nth(i).boundingBox()
     const { y: lineY, height: lineHeight } = await flagLines.nth(i).boundingBox()
+    let index = i
+    if (i === 1 || i === 3) {
+      index = i + 1
+    }
+    const { x: nodeX } = await nodes.nth(index).boundingBox()
 
-    await expect(x).toBeGreaterThanOrEqual(afterX[i])
+    await expect(x).toBeGreaterThanOrEqual(nodeX)
     await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
     await expect(width).toEqual(58)
     await expect(height).toBeGreaterThanOrEqual(34)
@@ -36,8 +40,13 @@ test('旗子数据来源', async ({ page }) => {
   for (let i = 0; i < flagCount; i++) {
     const { x, y, width, height } = await flags.nth(i).boundingBox()
     const { y: lineY, height: lineHeight } = await flagLines.nth(i).boundingBox()
+    let index = i
+    if (i === 2) {
+      index = i + 1
+    }
+    const { x: nodeX } = await nodes.nth(index).boundingBox()
 
-    await expect(x).toBeGreaterThanOrEqual(BeforeX[i], 2)
+    await expect(x).toBeGreaterThanOrEqual(nodeX, 2)
     await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
     await expect(width).toEqual(58)
     await expect(height).toBeGreaterThanOrEqual(34)

package/demos/pc/app/milestone/show-number.spec.ts

@@ -5,6 +5,7 @@ test('序号显示', async ({ page }) => {
   await page.goto('milestone#show-number')
 
   const button = page.getByRole('button').filter({ hasText: '设置 show-number 值为 false' })
+  const milestone = page.locator('.tiny-milestone')
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
   const nodeLines = page.locator('.tiny-milestone__line')
@@ -65,10 +66,14 @@ test('序号显示', async ({ page }) => {
   await expect(nodeIcons).toHaveCount(nodeCount)
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
+  const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+  const nodeWidth = Math.floor(totalWidth / nodeCount)
+  const nodeHeight = totalHeight - 38
+
   for (let i = 0; i < nodeCount; i++) {
     const { width, height } = await nodes.nth(i).boundingBox()
-    await expect(width).toBeGreaterThanOrEqual(118)
-    await expect(height).toBeGreaterThanOrEqual(88)
+    await expect(width).toBeGreaterThanOrEqual(nodeWidth)
+    await expect(height).toEqual(nodeHeight)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@@ -76,7 +81,7 @@ test('序号显示', async ({ page }) => {
 
     if (i < 5) {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
-      await expect(lineWidth).toBeGreaterThanOrEqual(118)
+      await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
     } else {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
       await expect(lineWidth).toBeGreaterThanOrEqual(0)

package/demos/pc/app/milestone/solid-style.spec.ts

@@ -5,6 +5,7 @@ test('实心显示', async ({ page }) => {
   await page.goto('milestone#solid-style')
 
   const button = page.getByRole('button').filter({ hasText: '设置 solid 值为 true' })
+  const milestone = page.locator('.tiny-milestone')
   const nodes = page.locator('.tiny-milestone__node')
   const nodeIcons = page.locator('.tiny-milestone__icon')
   const nodeLines = page.locator('.tiny-milestone__line')
@@ -65,10 +66,13 @@ test('实心显示', async ({ page }) => {
   await expect(nodeIcons).toHaveCount(nodeCount)
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
+  const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+  const nodeWidth = Math.floor(totalWidth / nodeCount)
+  const nodeHeight = totalHeight - 38
   for (let i = 0; i < nodeCount; i++) {
     const { width, height } = await nodes.nth(i).boundingBox()
-    await expect(width).toBeGreaterThanOrEqual(118)
-    await expect(height).toBeGreaterThanOrEqual(88)
+    await expect(width).toBeGreaterThanOrEqual(nodeWidth)
+    await expect(height).toEqual(nodeHeight)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@@ -76,7 +80,7 @@ test('实心显示', async ({ page }) => {
 
     if (i < 5) {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
-      await expect(lineWidth).toBeGreaterThanOrEqual(118)
+      await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
     } else {
       const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
       await expect(lineWidth).toBeGreaterThanOrEqual(0)

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

@@ -154,9 +154,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>width</code>属性设置窗口宽度，<code>height</code>属性设置高度，<code>resize</code>属性设置是否允许拖动调整窗口大小。</p>',
+          '<p>可通过<code>width</code>属性设置宽度，<code>height</code>属性设置高度，<code>resize</code>属性设置是否允许拖动调整窗口大小。</p>',
         'en-US':
-          '<p>Use <code>width</code> to set the window width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
+          '<p>Use <code>width</code> to set the width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
       },
       codeFiles: ['resize.vue']
     },

package/demos/pc/app/pop-upload/basic-usage.spec.ts

@@ -13,6 +13,7 @@ test('PopUpload 基本用法', async ({ page }) => {
   const cancelBtn = uploadModal.getByRole('button', { name: '取消' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
   const deleteIcon = lists.locator('.delIcon')
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const path = require('node:path')
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.png')
@@ -41,11 +42,6 @@ test('PopUpload 基本用法', async ({ page }) => {
   await fileChooser.setFiles(path1)
   await fileChooser.setFiles(path2)
   await expect(uploadsBtn).not.toBeDisabled()
-  const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
-
-  // 上传时附带的额外参数: 获取请求体
-  const body = await request.postData()
-  await expect(body).not.toBeNull()
 
   // 点击取消按钮，上传弹窗消失
   await cancelBtn.click()

package/demos/pc/app/pop-upload/custom-request-headers.spec.ts

@@ -9,6 +9,7 @@ test('PopUpload 自定义请求头', async ({ page }) => {
   const uploadModal = page.locator('.tiny-popupload__modal')
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
@@ -21,5 +22,5 @@ test('PopUpload 自定义请求头', async ({ page }) => {
   const { authorization } = await request.headers()
 
   await expect(request.headers()).not.toBeNull()
-  await expect(authorization).toBeUndefined()
+  await expect(authorization).toBe('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
 })

package/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue

@@ -14,10 +14,12 @@ import { ref } from 'vue'
 
 const value = ref('你好 Opentiny!')
 </script>
+
 <style scoped>
 .result {
   margin-top: 16px;
   font-size: 14px;
   line-height: 1.3;
+  word-break: break-all;
 }
 </style>

package/demos/pc/app/rich-text-editor/basic-usage.vue

@@ -22,10 +22,12 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .result {
   margin-top: 16px;
   font-size: 14px;
   line-height: 1.3;
+  word-break: break-all;
 }
 </style>