From 8eb46c511d4f61d3ba515139385dc4bea81893e7 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Thu, 7 Nov 2024 18:39:26 +0800
Subject: [PATCH] docs(form): [form] optimize form demos

---
 .../app/form/basic-usage-composition-api.vue  | 10 ++--
 .../demos/pc/app/form/basic-usage.spec.ts     |  4 --
 .../sites/demos/pc/app/form/basic-usage.vue   |  8 +--
 ...custom-validation-rule-composition-api.vue |  2 +-
 .../pc/app/form/custom-validation-rule.vue    |  2 +-
 .../app/form/display-only-composition-api.vue | 39 ++++++------
 .../demos/pc/app/form/display-only.spec.ts    |  8 +--
 .../sites/demos/pc/app/form/display-only.vue  | 39 ++++++------
 .../form/form-disabled-composition-api.vue    | 59 ++++++++----------
 .../demos/pc/app/form/form-disabled.spec.js   | 60 +++++++++----------
 .../sites/demos/pc/app/form/form-disabled.vue | 60 ++++++++-----------
 .../form-validate-field-composition-api.vue   |  4 +-
 .../demos/pc/app/form/form-validate-field.vue |  4 +-
 .../form/form-validation-composition-api.vue  | 16 ++---
 .../demos/pc/app/form/form-validation.spec.ts |  6 +-
 .../demos/pc/app/form/form-validation.vue     | 17 +++---
 .../pc/app/form/size-composition-api.vue      |  8 +--
 examples/sites/demos/pc/app/form/size.vue     |  8 +--
 .../validate-debounce-composition-api.vue     |  2 +-
 .../demos/pc/app/form/validate-debounce.vue   |  2 +-
 packages/theme/src/form-item/index.less       |  4 ++
 21 files changed, 173 insertions(+), 189 deletions(-)

diff --git a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
index a6152faac5..9d32c944d5 100644
--- a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 import {
   TinyForm,
   TinyFormItem,
diff --git a/examples/sites/demos/pc/app/form/basic-usage.spec.ts b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
index bbd3f54953..d20442301f 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
@@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
-  // 其他输入
-  await demo.getByPlaceholder('click').first().hover()
-  await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-
   // 提交按钮
   const dialog = page.locator('.tiny-modal.active')
   await demo.getByRole('button', { name: '提交' }).click()
diff --git a/examples/sites/demos/pc/app/form/basic-usage.vue b/examples/sites/demos/pc/app/form/basic-usage.vue
index 81412ce77b..bd125ef99c 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
index 5c20174f19..c60a28d882 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule.vue b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
index db3a8906c4..eedeb0a91b 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/display-only-composition-api.vue b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
index 164569826f..45ef7be582 100644
--- a/examples/sites/demos/pc/app/form/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -146,7 +146,7 @@ const pickerOptions = ref({
 })
 const formData = ref({
   input:
-    '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+    'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
   radioValue: '1',
   select: '选项1',
   select1: ['选项1', '选项2'],
@@ -164,7 +164,7 @@ const formData = ref({
   monthrange: ['2022-01', '2023-01'],
   quantity: 1,
   textareaValue:
-    '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+    'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
   checked: true,
   checkedArr: ['复选框1'],
   rate1: 2,
@@ -202,7 +202,6 @@ function createFilter(queryString) {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/display-only.spec.ts b/examples/sites/demos/pc/app/form/display-only.spec.ts
index 3ed16b484c..6f84fcf723 100644
--- a/examples/sites/demos/pc/app/form/display-only.spec.ts
+++ b/examples/sites/demos/pc/app/form/display-only.spec.ts
@@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
   const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
 
   await switchBtn.click()
-  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+  await expect(getItem(10).locator('input')).toBeVisible()
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
   await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
   await expect(getItem(1)).toHaveText('男')
-  await expect(getItem(2).locator('input')).not.toBeVisible()
-  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
-  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+  await expect(getItem(4).locator('input')).not.toBeVisible()
+  await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
 })
diff --git a/examples/sites/demos/pc/app/form/display-only.vue b/examples/sites/demos/pc/app/form/display-only.vue
index c97f87824e..c4a83f9223 100644
--- a/examples/sites/demos/pc/app/form/display-only.vue
+++ b/examples/sites/demos/pc/app/form/display-only.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -162,7 +162,7 @@ export default {
       },
       formData: {
         input:
-          '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+          'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
         radioValue: '1',
         select: '选项1',
         select1: ['选项1', '选项2'],
@@ -180,7 +180,7 @@ export default {
         monthrange: ['2022-01', '2023-01'],
         quantity: 1,
         textareaValue:
-          '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+          'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
         checked: true,
         checkedArr: ['复选框1'],
         rate1: 2,
@@ -219,7 +219,6 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
index 514a4b2bd9..318e3bcb98 100644
--- a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -100,7 +94,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -172,7 +165,7 @@ const gridOp = ref({
     {
       field: 'id',
       title: 'ID',
-      width: 40
+      width: 60
     },
     {
       field: 'name',
@@ -268,7 +261,7 @@ function createFilter(queryString) {
 
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled.spec.js b/examples/sites/demos/pc/app/form/form-disabled.spec.js
index eb056d83c6..55491ce7d3 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.spec.js
+++ b/examples/sites/demos/pc/app/form/form-disabled.spec.js
@@ -18,22 +18,22 @@ test('测试表单禁用', async ({ page }) => {
   })
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(12).locator('input')).toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
   // 尝试拖到滑块,应是无法拖动状态
   const { x, y, height } = await slider.boundingBox()
@@ -45,22 +45,22 @@ test('测试表单禁用', async ({ page }) => {
   expect(newX).toEqual(x)
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).not.toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
   // 尝试拖到滑块,应是可以拖动状态
   const sliderBox = await slider.boundingBox()
diff --git a/examples/sites/demos/pc/app/form/form-disabled.vue b/examples/sites/demos/pc/app/form/form-disabled.vue
index 9fe11f583d..7b54483f5f 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -99,7 +93,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -125,7 +118,6 @@ export default {
     TinyDropTimes,
     TinyTooltip,
     TinyInput,
-    TinyButton,
     TinyAutocomplete,
     TinyButtonGroup,
     TinyCascader,
@@ -198,7 +190,7 @@ export default {
           {
             field: 'id',
             title: 'ID',
-            width: 40
+            width: 60
           },
           {
             field: 'name',
@@ -296,7 +288,7 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
index 7120e385c4..9b6741231b 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
@@ -12,8 +12,8 @@
       </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="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field.vue b/examples/sites/demos/pc/app/form/form-validate-field.vue
index 375129fa48..8a4cc78d4a 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field.vue
@@ -12,8 +12,8 @@
       </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="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
index 5b8751233a..3a4ce463e7 100644
--- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,18 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation.spec.ts b/examples/sites/demos/pc/app/form/form-validation.spec.ts
index 6b8a47db05..7ef6370338 100644
--- a/examples/sites/demos/pc/app/form/form-validation.spec.ts
+++ b/examples/sites/demos/pc/app/form/form-validation.spec.ts
@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
   // 对长度有要求的检验
-  const firstInput = formItem.first().locator('input')
+  const firstInput = formItem.nth(2).locator('input')
   await firstInput.click()
   await firstInput.blur()
   await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
-  const urlInput = formItem.nth(2).locator('input')
+  const urlInput = formItem.nth(4).locator('input')
   const validUrl = 'https://test.com'
   urlInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
 
   // email输入框
-  const emailInput = formItem.nth(4).locator('input')
+  const emailInput = formItem.nth(5).locator('input')
   const validEmail = '111@test.com'
   emailInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index 9c608045ff..fb52830fff 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,19 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
+
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/size-composition-api.vue b/examples/sites/demos/pc/app/form/size-composition-api.vue
index 1c8c4e7b05..c01ec89783 100644
--- a/examples/sites/demos/pc/app/form/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/size-composition-api.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/size.vue b/examples/sites/demos/pc/app/form/size.vue
index adc9691a9b..26e24ee82b 100644
--- a/examples/sites/demos/pc/app/form/size.vue
+++ b/examples/sites/demos/pc/app/form/size.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
index 614ddd21c3..b28bcd7953 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/validate-debounce.vue b/examples/sites/demos/pc/app/form/validate-debounce.vue
index a65bdbc9c7..dae8b8991c 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
index 5b5c68b079..abeb734cdb 100644
--- a/packages/theme/src/form-item/index.less
+++ b/packages/theme/src/form-item/index.less
@@ -21,6 +21,8 @@
 @textarea-prefix-cls: ~'@{css-prefix}textarea';
 @button-prefix-cls: ~'@{css-prefix}button';
 @numeric-prefix-cls: ~'@{css-prefix}numeric';
+@cascader-prefix-cls: ~'@{css-prefix}cascader';
+@autocomplete-prefix-cls: ~'@{css-prefix}autocomplete';
 @date-editor-prefix-cls: ~'@{css-prefix}date-editor';
 @tooltip-prefix-cls: ~'@{css-prefix}tooltip';
 @switch-prefix-cls: ~'@{css-prefix}switch';
@@ -184,6 +186,8 @@
     }
 
     .@{numeric-prefix-cls},
+    .@{cascader-prefix-cls},
+    .@{autocomplete-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls}__inner,
     .@{date-editor-prefix-cls}--timerange.@{input-prefix-cls},