@opentiny/vue-docs 2.2.5 → 2.2.7

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

@@ -6,38 +6,30 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>过滤器面板用于列表数据过滤、图标卡片过滤，自定义过滤面板内容</p>\n',
-        'en-US':
-          '<p>The filter panel is used to filter list data, filter icon cards, and customize the filter panel content</p>\n'
+        'zh-CN':
+          '通过 <code>label</code> 设置标题，<code>value</code> 设置标题右侧内容，<code>disabled</code> 设置是否禁用；通过默认插槽自定义过滤面板内容。',
+        'en-US': `Set the title through<code>label</code>,<code>value</code>set the content to the right of the title, and<code>disabled</code>set whether to disable it; 
+          Customize filter panel content through default slots.`
       },
       'codeFiles': ['basic-usage.vue']
     },
     {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>disabled</code> 设置禁用</p>\n',
-        'en-US': '<p>Disabling by <code>disabled</code> </p>\n'
-      },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'clearable',
-      'name': { 'zh-CN': '显示清空按钮', 'en-US': 'Show Clear Button' },
+      'demoId': 'popper-class',
+      'name': { 'zh-CN': '自定义下拉面板', 'en-US': 'Custom dropdown box' },
       'desc': {
         'zh-CN':
-          '<p>给组件加上 <code>clearable</code> 属性可以显示清空按钮，配合 <code>handle-clear</code> 事件一起使用清空内容区域的值</p>\n',
-        'en-US':
-          '<p>The <code>clearable</code> attribute is added to the component to display the clear button. This attribute is used together with the <code>handle-clear</code> event to clear the value of the content area.</p>\n'
+          '通过 <code>placement</code> 控制下拉面板的位置， <code>popper-class</code> 设置类名，自定义下拉面板的样式；<code>popper-append-to-body</code> 设置弹下拉面板是否插入至 body 元素。在下拉面板的定位出现问题时，可将其设置为 false。',
+        'en-US': `Control the position of the drop-down panel through<code>placement</code>. Set the class name and customize the style of the dropdown box through<code>popper-class</code>. <code>popper-append-to-body</code>Set whether the pop-up 
+          menu is inserted into the body element. When there is an issue with the positioning of the dropdown box, it can be set to false.`
       },
-      'codeFiles': ['clearable.vue']
+      'codeFiles': ['popper-class.vue']
     },
     {
       'demoId': 'tip',
-      'name': { 'zh-CN': 'tip 提示', 'en-US': 'Tip' },
+      'name': { 'zh-CN': '提示', 'en-US': 'Tip' },
       'desc': {
-        'zh-CN': '<p>标题右侧添加提示信息</p>\n',
-        'en-US': '<p>Add a message to the right of the title.</p>\n'
+        'zh-CN': `通过 <code>:clearable='false'</code> 隐藏清空按钮；配合 <code>tip</code> 添加标题右侧提示信息。`,
+        'en-US': `Hide the clear button through<code>:clearable='false'</code>; Collaborate with<code>tip</code>to add prompt information on the right side of the title.`
       },
       'codeFiles': ['tip.vue']
     },
@@ -45,32 +37,21 @@ export default {
       'demoId': 'manual-hide',
       'name': { 'zh-CN': '手动隐藏', 'en-US': 'Manually hide' },
       'desc': {
-        'zh-CN': '<p>通过给元素添加 ref，然后主动调用组件的 hide 方法可以手动隐藏下拉框</p>',
-        'en-US':
-          '<p>You can manually hide the drop-down list box by adding ref to the element and invoking the hide method of the component.</p>'
+        'zh-CN': '手动调用 <code>hide</code> 实例方法完成收起下拉面板功能。',
+        'en-US': 'Manually call the<code>hide</code>instance method to complete the collapse dropdown function.'
       },
       'codeFiles': ['manual-hide.vue']
     },
     {
       'demoId': 'event',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
-      'desc': {
-        'zh-CN': '<p> <code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
-        'en-US':
-          '<p> <code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
-      },
-      'codeFiles': ['event.vue']
-    },
-    {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '弹出框样式', 'en-US': 'Pop-up dialog box style' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>popper-class</code> 属性可自定义下拉弹框的样式。popper-append-to-body 指定是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false</p>',
+          '<code>handle-clear</code> 监听清空按钮点击事件，执行删除操作； <code>visible-change</code> 监听下拉面板的显隐事件。',
         'en-US':
-          '<p>You can use the <code>popper-class</code> attribute to customize the style of the drop-down list box. popper-append-to-body Specifies whether to insert a pop-up box into the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false</p>'
+          '<code>handle-clear</code>Listen to the clear button click event and execute the delete operation<code>visible-change</code>listens to the explicit and implicit events of the drop-down panel.'
       },
-      'codeFiles': ['popper-class.vue']
+      'codeFiles': ['event.vue']
     }
   ],
   apis: [
@@ -83,11 +64,11 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '显示清空按钮，配合`handle-clear`事件一起使用清空内容区域的值，默认为true。',
+            'zh-CN': '控制清空按钮的显隐，默认显示；可配合 handle-clear 事件来完成清空内容区域的值',
             'en-US':
-              'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
+              'Control the display of the clear button, default display; Can be used in conjunction with the handle clear event to clear the value of the content area'
           },
-          'demoId': 'clearable'
+          'demoId': 'tip'
         },
         {
           'name': 'disabled',
@@ -97,7 +78,7 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Whether to disable'
           },
-          'demoId': 'disabled'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'label',
@@ -107,25 +88,27 @@ export default {
             'zh-CN': '标题',
             'en-US': 'The title'
           },
-          'demoId': 'popper-class'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'placement',
-          'type': 'string',
-          'defaultValue': 'bottom-start',
+          'type': 'IPopperPlacement',
+          'typeAnchorName': 'popover#IPopperPlacement',
+          'defaultValue': `'bottom-start'`,
           'desc': {
-            'zh-CN': '弹出框位置，默认值为bottom-start',
-            'en-US': 'Position of the pop-up dialog box. The default value is bottom-start.'
+            'zh-CN': '下拉面板位置，可选值请参考popover组件的同属性',
+            'en-US':
+              'Drop down panel position, optional values please refer to the same properties of the popover component'
           },
-          'demoId': ''
+          'demoId': 'popper-class'
         },
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '下拉框是否添加到body中',
-            'en-US': 'Indicates whether to add the drop-down list box to the body.'
+            'zh-CN': '下拉面板是否添加到body元素中',
+            'en-US': 'Indicates whether to add the drop-down panel to the body element'
           },
           'demoId': 'popper-class'
         },
@@ -134,8 +117,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉框的class',
-            'en-US': 'Class in the drop-down list box'
+            'zh-CN': '下拉面板的class',
+            'en-US': 'Class in the drop-down panel'
           },
           'demoId': 'popper-class'
         },
@@ -166,21 +149,32 @@ export default {
           'type': '() => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '清除按钮点击事件。',
-            'en-US': 'Clear button click event.'
+            'zh-CN': '清除按钮点击事件',
+            'en-US': 'Clear button click event'
           },
           'demoId': 'event'
         },
         {
           'name': 'visible-change',
-          'type': '() => void',
+          'type': '(visible: boolean) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉框显示隐藏事件。',
-            'en-US': 'The drop-down list box displays hidden events.'
+            'zh-CN': '下拉面板显示隐藏事件',
+            'en-US': 'The drop-down panel displays hidden events'
           },
           'demoId': 'event'
         }
+      ],
+      'methods': [
+        {
+          'name': 'hide',
+          'type': '() => void',
+          'desc': {
+            'zh-CN': '隐藏下拉面板的方法',
+            'en-US': 'How to hide the drop-down panel'
+          },
+          'demoId': 'manual-hide'
+        }
       ]
     }
   ]

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

@@ -40,7 +40,7 @@ export default {
     {
       'name': 'floatbar',
       'type': 'component',
-      'properties': [],
+      'props': [],
       'events': [],
       'slots': [
         {

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

@@ -33,7 +33,7 @@ export default {
     {
       'name': 'flowchart',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           name: 'config',
           type: 'object',

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

@@ -21,5 +21,5 @@ export default {
       'codeFiles': ['Font-usage-specifications.vue']
     }
   ],
-  apis: [{ 'name': 'font', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'font', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -23,13 +17,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const createData = reactive({

package/demos/pc/app/form/custom-validation-rule.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      :model="createData"
-      :rules="rules"
-      :validate-on-rule-change="isValidate"
-      @validate="validate"
-    >
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-on-rule-change="isValidate">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
@@ -22,7 +16,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { Form, FormItem, Input, Button } from '@opentiny/vue'
 
 export default {
   components: {

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="formRef" :model="createData" @validate="validate">
+      <tiny-form-item label="姓名" prop="name" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="昵称">
+        <tiny-input v-model="createData.nickname"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button @click="submit" type="primary">提交</tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  Form as TinyForm,
+  FormItem as TinyFormItem,
+  Input as TinyInput,
+  Button as TinyButton,
+  Modal as TinyModal
+} from '@opentiny/vue'
+
+const createData = ref({
+  name: '',
+  nickname: ''
+})
+const formRef = ref()
+function validate() {
+  TinyModal.message({ message: '校验事件触发了', status: 'info' })
+}
+function submit() {
+  formRef.value.validate(() => {
+    // empty
+  })
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/demos/pc/app/form/events.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('表单事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#events')
+
+  const demo = page.locator('#events')
+  const messageModal = page.locator('.tiny-modal.active')
+
+  await demo.getByRole('button', { name: '提交' }).click()
+  await expect(messageModal).toHaveText('校验事件触发了')
+})

package/demos/pc/app/form/events.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="demo-form">
+    <tiny-form ref="form" :model="createData" @validate="validate">
+      <tiny-form-item label="姓名" prop="name" :rules="{ required: true, messages: '必填', trigger: 'blur' }">
+        <tiny-input v-model="createData.name"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="昵称">
+        <tiny-input v-model="createData.nickname"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item>
+        <tiny-button @click="submit" type="primary">提交</tiny-button>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { Form, FormItem, Input, Button, Modal as TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyInput: Input,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      createData: {
+        name: '',
+        nickname: ''
+      }
+    }
+  },
+  methods: {
+    validate() {
+      TinyModal.message({ message: '校验事件触发了', status: 'info' })
+    },
+    submit() {
+      this.$refs.form.validate(() => {
+        // empty
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

package/demos/pc/app/form/form-validate-field-composition-api.vue

@@ -1,25 +1,19 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      hide-required-asterisk
-      :model="createData"
-      :rules="rules"
-      label-width="100px"
-      show-message
-    >
-      <tiny-form-item label="姓名" prop="users" required>
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
+      <tiny-form-item label="姓名" prop="users">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="日期" prop="datepicker">
+      <tiny-form-item label="日期" prop="datepicker" ref="dateRef">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="validateField"> 校验特定字段 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除特定字段校验 </tiny-button>
+        <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
+        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
@@ -37,6 +31,7 @@ import {
 } from '@opentiny/vue'
 
 const ruleFormRef = ref()
+const dateRef = ref()
 
 const createData = reactive({
   users: '',
@@ -48,7 +43,7 @@ const rules = ref({
     { required: true, message: '必填', trigger: 'blur' },
     { min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
   ],
-  datepicker: { type: 'date' },
+  datepicker: { type: 'date', required: true },
   url: { type: 'url', required: true }
 })
 
@@ -56,6 +51,10 @@ function clearValidate() {
   ruleFormRef.value.clearValidate(['url', 'datepicker'])
 }
 
+function resetField() {
+  dateRef.value.resetField()
+}
+
 async function validateField() {
   const errArray = []
   await ruleFormRef.value.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
@@ -64,7 +63,7 @@ async function validateField() {
     }
   })
   if (errArray.length > 0) {
-    console.log(errArray)
+    // empty
   } else {
     Modal.alert('日期和url通过校验')
   }

package/demos/pc/app/form/form-validate-field.spec.ts

@@ -6,11 +6,18 @@ test('特定表单项校验', async ({ page }) => {
 
   const demo = page.locator('#form-validate-field')
   const getTooltipByText = (text: string) => page.locator('.tiny-tooltip').getByText(text)
+  const validBtn = demo.getByRole('button', { name: '校验' }).first()
 
-  await demo.getByRole('button', { name: '校验特定字段' }).click()
+  await validBtn.click()
   await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
   await expect(getTooltipByText('必填')).toBeVisible()
-  await demo.getByRole('button', { name: '移除特定字段校验' }).click()
+  await demo.getByRole('button', { name: '移除校验' }).click()
   await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
   await expect(getTooltipByText('必填')).not.toBeVisible()
+  await validBtn.click()
+  await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
+  await expect(getTooltipByText('必填')).toBeVisible()
+  await demo.getByRole('button', { name: '重置日期' }).click()
+  await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
+  await expect(getTooltipByText('必填')).toBeVisible()
 })

package/demos/pc/app/form/form-validate-field.vue

@@ -1,25 +1,19 @@
 <template>
   <div class="demo-form">
-    <tiny-form
-      ref="ruleFormRef"
-      hide-required-asterisk
-      :model="createData"
-      :rules="rules"
-      label-width="100px"
-      show-message
-    >
-      <tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
+      <tiny-form-item label="姓名" prop="users">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="日期" prop="datepicker">
+      <tiny-form-item label="日期" prop="datepicker" ref="dateRef">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="validateField"> 校验特定字段 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除特定字段校验 </tiny-button>
+        <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
+        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
@@ -62,13 +56,16 @@ export default {
         }
       })
       if (errArray.length > 0) {
-        console.log(errArray)
+        // empty
       } else {
         Modal.alert('日期和url通过校验')
       }
     },
     clearValidate() {
       this.$refs.ruleFormRef.clearValidate(['url', 'datepicker'])
+    },
+    resetField() {
+      this.$refs.dateRef.resetField()
     }
   }
 }

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

@@ -29,7 +29,8 @@
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="success" @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
@@ -132,6 +133,10 @@ function handleSubmitPromise() {
 function clearFormValid() {
   ruleFormRef.value.clearValidate()
 }
+
+function resetForm() {
+  ruleFormRef.value.resetFields()
+}
 </script>
 
 <style scoped>

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

@@ -29,7 +29,8 @@
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="success" @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
@@ -140,6 +141,9 @@ export default {
     },
     clearFormValid() {
       this.$refs.ruleFormRef.clearValidate()
+    },
+    resetForm() {
+      this.$refs.ruleFormRef.resetFields()
     }
   }
 }

package/demos/pc/app/form/label-position-composition-api.vue

@@ -3,7 +3,7 @@
     <div class="title">
       标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
     </div>
-    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

package/demos/pc/app/form/label-position.vue

@@ -3,7 +3,7 @@
     <div class="title">
       标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
     </div>
-    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

package/demos/pc/app/form/size.spec.ts

@@ -7,20 +7,40 @@ test('测试表单尺寸', async ({ page }) => {
   const demo = page.locator('#size')
   const form = demo.locator('.tiny-form')
   const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
+  const submitBtn = form.getByRole('button', { name: '提交' })
+  const input = form.locator('.tiny-numeric__input')
+  const firstLabel = form.locator('.tiny-form-item__label').first()
 
   // mini表单
+  const miniHeight = '24px'
   await getBtnByText('mini').click()
   await expect(form.locator('.tiny-form-item--mini')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--mini/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveClass(/tiny-button--mini/)
+  await expect(input).toHaveClass(/tiny-input-mini/)
+  await expect(submitBtn).toHaveCSS('height', miniHeight)
+  await expect(input).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('height', miniHeight)
+  await expect(firstLabel).toHaveCSS('line-height', miniHeight)
+
   // small表单
+  const smallHeight = '32px'
   await getBtnByText('small').click()
   await expect(form.locator('.tiny-form-item--small')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--small/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveClass(/tiny-button--small/)
+  await expect(input).toHaveClass(/tiny-input-small/)
+  await expect(submitBtn).toHaveCSS('height', smallHeight)
+  await expect(input).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('height', smallHeight)
+  await expect(firstLabel).toHaveCSS('line-height', smallHeight)
+
   // medium表单
+  const mediumHeight = '40px'
   await getBtnByText('medium').click()
   await expect(form.locator('.tiny-form-item--medium')).toHaveCount(7)
-  await expect(form.getByRole('button', { name: '提交' })).toHaveClass(/tiny-button--medium/)
-  await expect(form.locator('.tiny-numeric__input')).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveClass(/tiny-button--medium/)
+  await expect(input).toHaveClass(/tiny-input-medium/)
+  await expect(submitBtn).toHaveCSS('height', mediumHeight)
+  await expect(input).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('height', mediumHeight)
+  await expect(firstLabel).toHaveCSS('line-height', mediumHeight)
 })