@opentinyvue/vue-docs 3.29.3 → 3.30.0

package/demos/apis/select.js

@@ -852,8 +852,8 @@ export default {
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '选项默认插槽',
-            'en-US': 'Option default slot'
+            'zh-CN': '选项默认插槽。接收 <code>item</code> 的参数',
+            'en-US': 'Option default slot. Receives <code>item</code> as a parameter'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-default',
@@ -894,6 +894,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-header-footer'
         },
+        {
+          name: 'label',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '多选模式时，标签的自定义插槽。接收 <code>item</code> 的参数',
+            'en-US': 'Custom label slot for multiple choice mode. Receives <code>item</code> as a parameter'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-label',
+          mfDemo: 'slot-label'
+        },
         {
           name: 'prefix',
           type: '',

package/demos/apis/tree.js

@@ -23,7 +23,7 @@ export default {
           desc: {
             'zh-CN': '禁止添加的节点 key 值列表，也可通过 setAddDisabledKeys 方法设置',
             'en-US':
-              'List of key values of nodes that cannot be added. You can also use the setAddDisabledKeys method to set the key values.'
+              'List of key values of nodes that cannot be added. You can also use the setAddDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -45,7 +45,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '判断节点能否被拖拽',
-            'en-US': 'Whether a node can be dragged.'
+            'en-US': 'Whether a node can be dragged'
           },
           mode: ['pc'],
           pcDemo: 'drag'
@@ -58,7 +58,7 @@ export default {
             'zh-CN':
               "拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后",
             'en-US':
-              "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev',' inner', and'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
+              "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev', 'inner', and 'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
           },
           mode: ['pc'],
           pcDemo: 'drag'
@@ -137,7 +137,7 @@ export default {
           desc: {
             'zh-CN': '默认展开节点的keys。当属性变化时，会自动收起全部并重新展开指定的数据项。 ',
             'en-US':
-              'The keys of the node are expanded by default.When the property changes, it automatically collapses all and reexpands the specified data item.'
+              'The keys of the node are expanded by default. When the property changes, it automatically collapses all and reexpands the specified data item'
           },
           mode: ['pc'],
           pcDemo: 'expand-control'
@@ -149,7 +149,7 @@ export default {
           desc: {
             'zh-CN': '禁止删除的节点 key 值列表，也可通过 setDeleteDisabledKeys 方法设置',
             'en-US':
-              'Indicates the list of key values of nodes that cannot be deleted. You can also use the setDeleteDisabledKeys method to set the key values.'
+              'Indicates the list of key values of nodes that cannot be deleted. You can also use the setDeleteDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -161,7 +161,7 @@ export default {
           desc: {
             'zh-CN': '删除节点的装置钩子函数，若返回 false 或者返回 Promise 且被 reject，则停止删除。 ',
             'en-US':
-              'Device hook function for deleting a node. If false is returned or Promise is returned and rejected, the deletion is stopped.'
+              'Device hook function for deleting a node. If false is returned or Promise is returned and rejected, the deletion is stopped'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -184,7 +184,7 @@ export default {
           desc: {
             'zh-CN': '禁止编辑的节点 key 值列表，也可通过 setEditDisabledKeys 方法设置',
             'en-US':
-              'List of key values of nodes that cannot be edited. You can also use the setEditDisabledKeys method to set the key values.'
+              'List of key values of nodes that cannot be edited. You can also use the setEditDisabledKeys method to set the key values'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -284,7 +284,7 @@ export default {
           defaultValue: '18',
           desc: {
             'zh-CN': '相邻级节点间的水平缩进，单位为像素',
-            'en-US': 'horizontal indentation between adjacent nodes, in pixels.'
+            'en-US': 'horizontal indentation between adjacent nodes, in pixels'
           },
           mode: ['pc'],
           pcDemo: 'basic-usage'
@@ -308,7 +308,7 @@ export default {
             'zh-CN':
               '加载子树数据的方法。点击节点后，组件开始调用load方法，只有在load函数内调用resolve(data)，才表示返回下级的数据成功。',
             'en-US':
-              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned.'
+              'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned'
           },
           mode: ['pc'],
           pcDemo: 'lazy'
@@ -387,7 +387,7 @@ export default {
           desc: {
             'zh-CN': '在严格模式时，是否显示勾选父节点时，自动勾选子节点的功能区域',
             'en-US':
-              'In strict mode, when the parent node is displayed, the function area of the child node is automatically selected.'
+              'In strict mode, when the parent node is displayed, the function area of the child node is automatically selected'
           },
           mode: ['pc'],
           pcDemo: 'other'
@@ -453,7 +453,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '指示收缩的图标色',
-            'en-US': 'Icon indicating shrink  color'
+            'en-US': 'Icon indicating shrink color'
           },
           mode: ['pc'],
           pcDemo: 'icons'
@@ -488,7 +488,7 @@ export default {
           desc: {
             'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
             'en-US':
-              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs'
           },
           mode: ['pc'],
           pcDemo: 'edit'
@@ -499,7 +499,7 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。',
-            'en-US': 'Indicates whether to highlight the search text in the matched node.'
+            'en-US': 'Indicates whether to highlight the search text in the matched node'
           },
           mode: ['pc'],
           pcDemo: 'filter-view'
@@ -512,7 +512,7 @@ export default {
             'zh-CN':
               '通过设置 <code> showCheckedMark </code> 属性为true,且非多选模式时，可以在选中行的最右边显示 <code> √ </code> 号。',
             'en-US':
-              'By setting the <code> showCheckedMark </code> property to true, you can display the <code> √ </code> number on the far right when a line is selected.'
+              'By setting the <code> showCheckedMark </code> property to true, you can display the <code> √ </code> number on the far right when a line is selected'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -564,7 +564,7 @@ export default {
             'zh-CN':
               '平铺模式下，勾选或取消勾选节点的事件，需要设置show-checkbox为true才生效。<br>参数说明：{ plainNode: 被点击的节点数据, value: 复选框是否选中，取值true或false }',
             'en-US':
-              'In tile mode, select or deselect node events to take effect only when show-checkbox is set to true. <br> Parameter description: {plainNode: indicates the node data to be clicked. value: indicates whether the check box is selected. The value can be true or false.'
+              'In tile mode, select or deselect node events to take effect only when show-checkbox is set to true. <br> Parameter description: {plainNode: indicates the node data to be clicked. value: indicates whether the check box is selected. The value can be true or false}'
           },
           mode: ['pc'],
           pcDemo: ''
@@ -874,7 +874,7 @@ export default {
           desc: {
             'zh-CN': '返回目前被选中的节点的 key 所组成的数组。当参数：leafOnly 为true时，只返回被选中的叶子节点。',
             'en-US':
-              'Returns an array of keys for the currently selected node. If the parameter: leafOnly is true, only the selected leaf nodes are returned.'
+              'Returns an array of keys for the currently selected node. If the parameter: leafOnly is true, only the selected leaf nodes are returned'
           },
           mode: ['pc'],
           pcDemo: 'check-op'
@@ -929,7 +929,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '返回目前半选中的节点所组成的数组',
-            'en-US': 'Returns an array of currently half-selected nodes.'
+            'en-US': 'Returns an array of currently half-selected nodes'
           },
           mode: ['pc'],
           pcDemo: 'check-op'
@@ -984,7 +984,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '在一个节点的前面增加一个节点',
-            'en-US': 'Add a node before a tree node.'
+            'en-US': 'Add a node before a tree node'
           },
           mode: ['pc'],
           pcDemo: 'node-op'
@@ -1007,7 +1007,7 @@ export default {
           desc: {
             'zh-CN': '删除节点。当参数：isSaveChildNode为true时，当前节点的子元素上移至删除节点的父节点中去。',
             'en-US':
-              'Delete a node. When isSaveChildNode is true, the child elements of the current node are moved up to the parent node of the deleted node.'
+              'Delete a node. When isSaveChildNode is true, the child elements of the current node are moved up to the parent node of the deleted node'
           },
           mode: ['pc'],
           pcDemo: 'node-op'
@@ -1040,7 +1040,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止添加的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be added.'
+            'en-US': 'Sets the list of key values of nodes that cannot be added'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1129,7 +1129,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止删除的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be delete.'
+            'en-US': 'Sets the list of key values of nodes that cannot be delete'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1140,7 +1140,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '设置禁止编辑的节点 key 值列表',
-            'en-US': 'Sets the list of key values of nodes that cannot be edit.'
+            'en-US': 'Sets the list of key values of nodes that cannot be edit'
           },
           mode: ['pc'],
           pcDemo: 'edit-control'
@@ -1224,7 +1224,7 @@ export default {
           desc: {
             'zh-CN': '在严格模式显示自动勾选子节点的功能时，自定义开关右侧的内容',
             'en-US':
-              'When the function of automatically selecting subnodes is displayed in strict mode, the content on the right of the customized switch is displayed.'
+              'When the function of automatically selecting subnodes is displayed in strict mode, the content on the right of the customized switch is displayed'
           },
           mode: ['pc'],
           pcDemo: 'other'

package/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js

@@ -71,7 +71,7 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
+        'zh-CN': '<p>通过 dayTimes 属性配置时间线模式下所展示的时间范围，默认为 [8,18]，可配范围 [0,23]。</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['calendar-timeline-range.vue']
@@ -96,7 +96,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
+          '<p>通过 showMark 回调函数来标记某些日期，markColor 属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor 可选颜色同 theme</p>\n',
         'en-US': '<p></p>\n'
       },
       codeFiles: ['calendar-day-mark.vue']
@@ -133,8 +133,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
-        'en-US': '<p></p>\n'
+          '<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
+        'en-US':
+          '<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },

package/demos/pc/app/button-group/display-mode-composition-api.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <!-- 默认模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" />
+    <br />
+    <br />
+
+    <!-- 圆角合并模式 -->
+    <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyButtonGroup } from '@opentiny/vue'
+
+const checkedVal = ref('Button1')
+const groupData = ref([
+  { text: 'Button1', value: 'Button1' },
+  { text: 'Button2', value: 'Button2' },
+  { text: 'Button3', value: 'Button3' }
+])
+</script>

package/demos/pc/app/button-group/display-mode.vue

@@ -2,30 +2,30 @@
   <div>
     <!-- 默认模式 -->
     <tiny-button-group :data="groupData" v-model="checkedVal" />
-    <br>
-    <br>
-    
+    <br />
+    <br />
+
     <!-- 圆角合并模式 -->
     <tiny-button-group :data="groupData" v-model="checkedVal" display-mode="merged" />
   </div>
 </template>
 
 <script>
-import { TinyButtonGroup } from "@opentiny/vue";
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup,
+    TinyButtonGroup
   },
   data() {
     return {
-      checkedVal: "Button1",
+      checkedVal: 'Button1',
       groupData: [
-        { text: "Button1", value: "Button1" },
-        { text: "Button2", value: "Button2" },
-        { text: "Button3", value: "Button3" },
-      ],
-    };
-  },
-};
+        { text: 'Button1', value: 'Button1' },
+        { text: 'Button2', value: 'Button2' },
+        { text: 'Button3', value: 'Button3' }
+      ]
+    }
+  }
+}
 </script>

package/demos/pc/app/button-group/sup-composition-api.vue

@@ -105,6 +105,7 @@ const groupDataTag = ref([
 }
 
 .tiny-button-group :deep(.sup-slot) {
+  display: flex;
   line-height: 1;
   padding: 0 4px;
   border-top-left-radius: 4px;

package/demos/pc/app/button-group/sup.vue

@@ -115,6 +115,7 @@ export default {
 }
 
 .tiny-button-group :deep(.sup-slot) {
+  display: flex;
   line-height: 1;
   padding: 0 4px;
   border-top-left-radius: 4px;

package/demos/pc/app/calendar-view/custom-day-bg-color.vue

@@ -19,6 +19,16 @@ export default {
     setDayBgColor(date) {
       if (date.split('-')[2] === '10') {
         return 'red'
+      }else if (date.split('-')[2] === '15') {
+        return '#00FF00'
+      } else if (date.split('-')[2] === '20') {
+        return 'rgb(0,0,255)'
+      }else if (date.split('-')[2] === '25') {
+        return 'rgba(255,0,0,0.5)'
+      }else if( date.split('-')[2] === '5'){
+        return 'yellow'
+      }else if ( date.split('-')[2] === '8'){
+        return 'green'
       }
       return ''
     }

package/demos/pc/app/calendar-view/webdoc/calendar-view.js

@@ -139,9 +139,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey</p>\n',
+          '<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
         'en-US':
-          '<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
+          '<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },
@@ -178,7 +178,7 @@ export default {
           '<p>mode-change：模式切换事件</p>',
         'en-US':
           '<p>Calendar throws the following events:</p>\n' +
-          '<p>date-click：日期点击事件: Date click event</p>\n' +
+          '<p>date-click：日期点击事件：Date click event</p>\n' +
           '<p>new-schedule: Add a schedule button click event</p>\n' +
           '<p>selected-date-change: selected date change event</p>\n' +
           '<p>prev-week-click: button click event of the last week</p>\n' +
@@ -346,7 +346,7 @@ export default {
         value: true
       },
       description:
-        '自定义日期单元格背景色，目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey。',
+        '自定义日期单元格背景色，目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色。',
       cloud: {
         value: false
       },

package/demos/pc/app/checkbox/checked-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <tiny-checkbox-group v-model="checkedData">
-    <tiny-checkbox label="复选框 1" name="name1"></tiny-checkbox>
-    <tiny-checkbox label="复选框 2" name="name2" checked></tiny-checkbox>
-    <tiny-checkbox label="复选框 3" name="name3"></tiny-checkbox>
+    <tiny-checkbox label="复选框 1" name="name1" style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 2" name="name2" checked style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 3" name="name3" style="margin-bottom: 8px"></tiny-checkbox>
   </tiny-checkbox-group>
 </template>
 

package/demos/pc/app/checkbox/checked.vue

@@ -1,8 +1,8 @@
 <template>
   <tiny-checkbox-group v-model="checkedData">
-    <tiny-checkbox label="复选框 1" name="name1"></tiny-checkbox>
-    <tiny-checkbox label="复选框 2" name="name2" checked></tiny-checkbox>
-    <tiny-checkbox label="复选框 3" name="name3"></tiny-checkbox>
+    <tiny-checkbox label="复选框 1" name="name1" style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 2" name="name2" checked style="margin-bottom: 8px"></tiny-checkbox>
+    <tiny-checkbox label="复选框 3" name="name3" style="margin-bottom: 8px"></tiny-checkbox>
   </tiny-checkbox-group>
 </template>
 

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

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#basic-usage')
+  const demo = page.locator('#basic-usage')
 
-  const drawer = page.locator('.tiny-drawer__main')
-  await page.getByRole('button', { name: '抽屉组件' }).click()
+  const drawer = demo.locator('.tiny-drawer__main')
+  await demo.getByRole('button', { name: '抽屉组件' }).click()
   await expect(drawer).toBeVisible()
   await expect(drawer.locator('.tiny-drawer__header')).toHaveText('标题')
   await expect(drawer.locator('.tiny-drawer__body')).toHaveText('内容区域')
   await drawer.getByRole('button', { name: 'Close' }).click()
-  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+  await expect(demo.locator('.tiny-drawer__main')).not.toBeVisible()
 })

package/demos/pc/app/drawer/placement.spec.ts

@@ -8,17 +8,17 @@ test('抽屉方向', async ({ page }) => {
 
   await demo.getByRole('button', { name: 'left' }).click()
   await expect(drawer).toHaveCSS('left', '0px')
-  await page.locator('.tiny-drawer__headerbtn').click()
+  await page.locator('.tiny-drawer__mask').click()
 
   await demo.getByRole('button', { name: 'right' }).click()
   await expect(drawer).toHaveCSS('right', '0px')
-  await page.locator('.tiny-drawer__headerbtn').click()
+  await page.locator('.tiny-drawer__mask').click()
 
   await demo.getByRole('button', { name: 'top' }).click()
   await expect(drawer).toHaveCSS('top', '0px')
-  await page.locator('.tiny-drawer__headerbtn').click()
+  await page.locator('.tiny-drawer__mask').click()
 
   await demo.getByRole('button', { name: 'bottom' }).click()
   await expect(drawer).toHaveCSS('bottom', '0px')
-  await page.locator('.tiny-drawer__headerbtn').click()
+  await page.locator('.tiny-drawer__mask').click()
 })

package/demos/pc/app/drawer/show-header.spec.ts

@@ -4,8 +4,9 @@ test('头部显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drawer#show-header')
 
-  const drawerHeader = page.locator('.tiny-drawer__header')
+  const demo = page.locator('#show-header')
+  const drawerHeader = demo.locator('.tiny-drawer__header')
 
-  await page.getByRole('button', { name: '隐藏头部' }).click()
+  await demo.getByRole('button', { name: '隐藏头部' }).click()
   await expect(drawerHeader).not.toBeVisible()
 })

package/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -64,7 +64,7 @@ p {
       .tiny-svg {
         fill: var(--tv-color-icon-control);
         &:hover {
-          fill: var(--tv-color-icon-control);
+          fill: var(--tv-color-info-icon);
         }
       }
     }

package/demos/pc/app/dropdown/show-icon.vue

@@ -74,7 +74,7 @@ p {
       .tiny-svg {
         fill: var(--tv-color-icon-control);
         &:hover {
-          fill: var(--tv-color-icon-control);
+          fill: var(--tv-color-info-icon);
         }
       }
     }

package/demos/pc/app/form/group-form-composition-api.vue

@@ -85,7 +85,7 @@ function resetForm() {
   width: 380px;
 }
 .group-form-title {
-  margin-bottom: 24px;
+  margin-top: 24px;
   font-size: 16px;
   color: #191919;
   font-weight: bold;
@@ -94,7 +94,7 @@ function resetForm() {
   padding-top: 8px;
 }
 .second-title {
-  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .address {
   position: relative;

package/demos/pc/app/form/group-form.vue

@@ -92,7 +92,7 @@ export default {
   width: 380px;
 }
 .group-form-title {
-  margin-bottom: 24px;
+  margin-top: 24px;
   font-size: 16px;
   color: #191919;
   font-weight: bold;
@@ -101,7 +101,7 @@ export default {
   padding-top: 8px;
 }
 .second-title {
-  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .address {
   position: relative;

package/demos/pc/app/grid/filter/advanced-filter-composition-api.vue

@@ -97,7 +97,7 @@ const employeesFilter = ref({
   layout: 'input,enum,default,extends,base',
   inputFilter: {
     component: TinyNumeric,
-    attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
+    attrs: { min: 0, max: 10000 },
     relations: [
       {
         label: '小于',

package/demos/pc/app/grid/filter/advanced-filter.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('过滤高级设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-default-filter')
+  await page.setViewportSize({ width: 1920, height: 1980 })
   await page
     .getByRole('cell', { name: '公司名称鼠标移入可以动态提示 tooltip，公司名称鼠标移入可以动态提示 tooltip' })
     .getByRole('img')

package/demos/pc/app/grid/filter/advanced-filter.vue

@@ -103,7 +103,7 @@ export default {
         layout: 'input,enum,default,extends,base',
         inputFilter: {
           component: TinyNumeric,
-          attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
+          attrs: { min: 0, max: 10000 },
           relations: [
             {
               label: '小于',