Release 3.19.0 to dev (#2447)

* fix(build): fix build error * fix(docs): 增加上传文件类型说明 (#2439) * fix(tag): update tag's size when only icon, update one place of button's icon size (#2440) * fix(date-picker): [date-picker,select] fix radius bugs for month-table (#2442) * docs(site): fix demos and test e2e (#2444) * test(site): fix icon not correct test e2e (#2445) --------- Co-authored-by: chenxi-20 <[email protected]> Co-authored-by: 申君健 <[email protected]> Co-authored-by: MomoPoppy <[email protected]> Co-authored-by: gimmyhehe <[email protected]>
opentiny · Oct 28, 2024 · 9acc34e · 9acc34e
1 parent 2b9051b
commit 9acc34e
Show file tree

Hide file tree

Showing 47 changed files with 890 additions and 287 deletions.
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts b/examples/sites/demos/pc/app/action-menu/basic-usage.spec.ts
@@ -16,10 +16,7 @@ test('基本用法', async ({ page }) => {
   // 更多按钮
   await expect(moreItem).toHaveText(/更多/)
   // 图标显示
-  await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
-    'd',
-    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
-  )
+  await expect(moreItem.locator('.tiny-dropdown__trigger .tiny-svg')).toBeVisible()
   // 分割线
   await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
   // 图标旋转

diff --git a/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts b/examples/sites/demos/pc/app/action-menu/card-mode.spec.ts
@@ -12,5 +12,6 @@ test('基本用法', async ({ page }) => {
   await expect(visibleItem).toHaveCount(4)
   await expect(moreItem).not.toHaveText(/更多/)
   // 三点图标
-  await expect(moreItem.locator('circle')).toHaveCount(3)
+  const SvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
+  await expect(moreItem.locator('.tiny-svg path').first()).toHaveAttribute('d', SvgPathReg)
 })
diff --git a/examples/sites/demos/pc/app/action-menu/icon.spec.ts b/examples/sites/demos/pc/app/action-menu/icon.spec.ts
@@ -24,7 +24,7 @@ test('只显示文本', async ({ page }) => {
   await page.goto('action-menu#icon')
 
   const wrap = page.locator('#icon')
-  const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
   const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
 
   await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()

diff --git a/examples/sites/demos/pc/app/button-group/show-more.spec.ts b/examples/sites/demos/pc/app/button-group/show-more.spec.ts
@@ -22,6 +22,6 @@ test('测试更多按钮', async ({ page }) => {
   // 判断图标是否正确
   const moreButton = buttonGroup.getByRole('button').nth(3)
   const moreButtonSvg = moreButton.locator('svg path').first()
-  const moreSvgPathReg = /^M292\.768 449\.694c2\.491\.515.+002-12.555-\.002z$/
+  const moreSvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
   await expect(moreButtonSvg).toHaveAttribute('d', moreSvgPathReg)
 })
diff --git a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ColorPicker v-model="color" :history="history" />
+    <tiny-color-picker v-model="color" :history="history" />
     <br />
-    <Button @click="addHistoryColor">Append history color</Button>
-    <Button @click="popHistoryColor">Pop history color</Button>
+    <tiny-button @click="addHistoryColor">Append history color</tiny-button>
+    <tiny-button @click="popHistoryColor">Pop history color</tiny-button>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ColorPicker v-model="color" :predefine="predefine" />
+    <tiny-color-picker v-model="color" :predefine="predefine" />
     <br />
-    <Button @click="addPredefineColor">Append predefine color</Button>
-    <Button @click="popPredefineColor">Pop predefine color</Button>
+    <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
+    <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
@@ -4,7 +4,13 @@
     <tiny-button @click="addHistoryColor">Append history color</tiny-button>
     <tiny-button @click="popHistoryColor">Pop history color</tiny-button>
     <div style="position: relative">
-      <ColorSelectPanel v-model="color" :visible="visible" @confirm="onConfirm" @cancel="onCancel" :history="history" />
+      <tiny-color-select-panel
+        v-model="color"
+        :visible="visible"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        :history="history"
+      />
     </div>
   </div>
 </template>

diff --git a/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
@@ -4,7 +4,7 @@
     <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
     <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
     <div style="position: relative">
-      <ColorSelectPanel
+      <tiny-color-select-panel
         v-model="color"
         :visible="visible"
         @confirm="onConfirm"

diff --git a/examples/sites/demos/pc/app/date-picker/clear.spec.ts b/examples/sites/demos/pc/app/date-picker/clear.spec.ts
@@ -12,10 +12,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 默认显示清除按钮
   await datePickerDefaultClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 隐藏清除按钮
   await datePickerHideClearIcon.hover()
@@ -24,10 +21,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 自定义清除图标
   await datePickerCustomClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 测试清除功能
   await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')

diff --git a/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts b/examples/sites/demos/pc/app/dropdown/basic-usage.spec.ts
@@ -13,10 +13,6 @@ test('基本用法', async ({ page }) => {
 
   // 箭头是否存在
   await expect(dropDownSvg).toBeVisible()
-  await expect(dropDownSvg.locator('path')).toHaveAttribute(
-    'd',
-    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
-  )
 
   await page.waitForTimeout(500)
   await dropDown.hover()

diff --git a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
@@ -59,8 +59,8 @@ export default {
         'en-US': 'Restrict file types'
       },
       desc: {
-        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式。',
-        'en-US': 'Limit the format of uploaded files by setting <code>accept</code> .'
+        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式只能为图片类型。',
+        'en-US': 'Set a limit on the format of uploaded files to only be image type through <code>accept</code>.'
       },
       codeFiles: ['accept-file-image.vue']
     },

diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: { options, textField: 'name', valueField: 'id' }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"

diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: { options, textField: 'name', valueField: 'id' }
         }"
         :format-config="{ data: options, label: 'name', value: 'id' }"

diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: {
             multiple: true,
             options,

diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
@@ -11,7 +11,7 @@
         field="area"
         title="区域"
         :editor="{
-          component: Select,
+          component: TinySelect,
           attrs: {
             multiple: true,
             options,

diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
@@ -8,7 +8,7 @@
     <tiny-grid-column
       field="id"
       title="名称（Popeditor）"
-      :editor="{ component: Popeditor, attrs: getPopEditorOp }"
+      :editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
       :format-config="{
         type: 'enum',
         async: true,

diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
@@ -8,7 +8,7 @@
     <tiny-grid-column
       field="id"
       title="名称（Popeditor）"
-      :editor="{ component: Popeditor, attrs: getPopEditorOp }"
+      :editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
       :format-config="{
         type: 'enum',
         async: true,

diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
@@ -43,17 +43,17 @@
     <tiny-grid-column
       field="planDevEndTime"
       title="计划开发结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="planTestEndTime"
       title="计划测试结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="customerExpect"
       title="用户期望交付时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column field="requireSource" title="需求来源">
       <template #header="{ column }">{{ column.title }}</template>

diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
@@ -43,17 +43,17 @@
     <tiny-grid-column
       field="planDevEndTime"
       title="计划开发结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="planTestEndTime"
       title="计划测试结束时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column
       field="customerExpect"
       title="用户期望交付时间"
-      :editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
+      :editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
     ></tiny-grid-column>
     <tiny-grid-column field="requireSource" title="需求来源">
       <template #header="{ column }">{{ column.title }}</template>

diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
@@ -18,7 +18,7 @@
         value: 'value'
       }"
       :editor="{
-        component: Select,
+        component: TinySelect,
         attrs: { textField: 'text', clearable: true }
       }"
     ></tiny-grid-column>

diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
@@ -18,7 +18,7 @@
         value: 'value'
       }"
       :editor="{
-        component: Select,
+        component: TinySelect,
         attrs: { textField: 'text', clearable: true }
       }"
     ></tiny-grid-column>

diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: Switch }"
+        :renderer="{ component: TinySwitch }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>

diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
@@ -7,7 +7,7 @@
         field="boole"
         title="Vue 渲染器"
         align="center"
-        :renderer="{ component: Switch }"
+        :renderer="{ component: TinySwitch }"
       ></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>

diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
@@ -15,7 +15,7 @@
       show-overflow="tooltip"
     >
       <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="name" title="名称" :editor="{ component: TinyInput }"></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>

diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config.vue b/examples/sites/demos/pc/app/grid/validation/valid-config.vue
@@ -15,7 +15,7 @@
       show-overflow="tooltip"
     >
       <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="name" title="名称" :editor="{ component: TinyInput }"></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>

diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
@@ -11,7 +11,7 @@
         <tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="index" width="160"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column

diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
@@ -11,7 +11,7 @@
         <tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="index" width="160"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
       <tiny-grid-column

diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts b/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts
@@ -28,7 +28,7 @@ test.describe('下拉表格远程搜索', () => {
     const row2 = page.getByRole('row', { name: '省份2 城市2 区域2' })
     await expect(row2).not.toBeVisible()
     await row1.getByRole('cell').first().click()
-    await expect(row1).toHaveClass(/tiny-grid-body__row row__selected/)
+    await expect(row1).toHaveClass(/tiny-grid-body__row row__radio/)
     await expect(input).toHaveValue('省1-市1')
 
     const row3 = page.getByRole('row', { name: '省份10 城市10 区域10' })

diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.vue b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
@@ -119,7 +119,7 @@ export default {
   methods: {
     remoteMethod(value) {
       const filterData = this.filter(value)
-
+      console.log(filterData, value)
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve(filterData)

diff --git a/examples/sites/demos/pc/app/select/nest-grid.spec.ts b/examples/sites/demos/pc/app/select/nest-grid.spec.ts
@@ -21,7 +21,7 @@ test('嵌套表格（单选）', async ({ page }) => {
   await row.nth(1).getByRole('cell').first().click()
   await expect(input).toHaveValue('深圳1')
   await input.click()
-  await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__selected/)
+  await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__radio/)
 })
 
 test('嵌套表格（多选）', async ({ page }) => {

diff --git a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.spec.ts
@@ -23,7 +23,7 @@ test('下拉表格大数据', async ({ page }) => {
 
   await input.click()
   await page.waitForTimeout(200)
-  await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__selected/)
+  await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__radio/)
   await expect(row).toHaveCount(6)
   await expect(page.getByRole('row', { name: '华南区12 广东省 广州市' })).toBeHidden()
   await row.nth(5).scrollIntoViewIfNeeded()

diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -57,5 +57,5 @@ test('mini 尺寸', async ({ page }) => {
   await expect(input).toHaveClass(/tiny-input-mini/)
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
   // TODO: 此处继承input 尺寸的话，应该是24
-  expect(height).toBeCloseTo(27, 1)
+  expect(height).toBeCloseTo(24, 1)
 })
diff --git a/examples/sites/demos/pc/app/slider/max-min.spec.ts b/examples/sites/demos/pc/app/slider/max-min.spec.ts
@@ -13,11 +13,11 @@ test('最大值最小值', async ({ page }) => {
   await page.mouse.down()
   await page.mouse.move(sliderWidth * -0.3 + x, y)
   const sliderTip = slider.locator('div').nth(2)
-  await expect(sliderTip).toHaveText('0')
+  await expect(sliderTip).toHaveText('30')
   await page.waitForTimeout(1000)
   await page.mouse.move(sliderWidth * 0.81 + x, y)
   const sliderTip1 = slider.locator('div').nth(2)
-  await expect(sliderTip1).toHaveText('100')
+  await expect(sliderTip1).toHaveText('62')
   await page.waitForTimeout(1000)
   await page.mouse.up()
 })
diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -4,11 +4,19 @@
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
     <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
+    <br /><br />
+    <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
+
+const TinyIconHeartempty = IconHeartempty()
 </script>
 
 <style>