From 26320c357619331429776b935be48aa53a21a8ce Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Fri, 25 Oct 2024 18:01:17 +0800
Subject: [PATCH] docs(form): [form] optimize demo and docs

---
 .../demos/pc/app/form/form-validation-composition-api.vue | 2 +-
 examples/sites/demos/pc/app/form/form-validation.vue      | 2 +-
 .../demos/pc/app/form/label-position-composition-api.vue  | 2 +-
 examples/sites/demos/pc/app/form/label-position.vue       | 2 +-
 .../demos/pc/app/form/popper-options-composition-api.vue  | 3 ++-
 examples/sites/demos/pc/app/form/popper-options.vue       | 3 ++-
 .../demos/pc/app/form/slot-label-composition-api.vue      | 5 +++--
 examples/sites/demos/pc/app/form/slot-label.vue           | 6 ++++--
 .../demos/pc/app/form/smb-required-composition-api.vue    | 4 ++--
 examples/sites/demos/pc/app/form/smb-required.vue         | 4 ++--
 examples/sites/demos/pc/app/form/webdoc/form.js           | 8 ++++----
 11 files changed, 23 insertions(+), 18 deletions(-)

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 74cfc720da..5ead3d49f3 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
@@ -19,7 +19,7 @@
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="Numeric字段" prop="num1">
+      <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
       <tiny-form-item label="IP字段" prop="ip">
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index e1d9d3f959..b5fcf74e1e 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -19,7 +19,7 @@
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="Numeric字段" prop="num1">
+      <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
       <tiny-form-item label="IP字段" prop="ip">
diff --git a/examples/sites/demos/pc/app/form/label-position-composition-api.vue b/examples/sites/demos/pc/app/form/label-position-composition-api.vue
index 9298624862..dc90b8859b 100644
--- a/examples/sites/demos/pc/app/form/label-position-composition-api.vue
+++ b/examples/sites/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" label-width="60px">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
diff --git a/examples/sites/demos/pc/app/form/label-position.vue b/examples/sites/demos/pc/app/form/label-position.vue
index 77f4e75b18..54cca1a39c 100644
--- a/examples/sites/demos/pc/app/form/label-position.vue
+++ b/examples/sites/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" label-width="60px">
+    <tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
       <tiny-form-item label="用户名" prop="username">
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>
diff --git a/examples/sites/demos/pc/app/form/popper-options-composition-api.vue b/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
index b7f8d335de..f7b380562e 100644
--- a/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
@@ -40,10 +40,11 @@ function submitClick() {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 420px;
 }
 .scroll-parent {
   height: 200px;
   overflow: auto;
+  padding-right: 40px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/popper-options.vue b/examples/sites/demos/pc/app/form/popper-options.vue
index 4392802291..228f1b2f37 100644
--- a/examples/sites/demos/pc/app/form/popper-options.vue
+++ b/examples/sites/demos/pc/app/form/popper-options.vue
@@ -50,10 +50,11 @@ export default {
 
 <style scoped>
 .demo-form {
-  width: 380px;
+  width: 420px;
 }
 .scroll-parent {
   height: 200px;
   overflow: auto;
+  padding-right: 40px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
index ce282c0d9d..ca0f7b48ca 100644
--- a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
       <tiny-form-item prop="users">
         <template #label> 必填 </template>
         <tiny-input v-model="createData.users"></tiny-input>
@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label">超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
@@ -37,6 +37,7 @@ import {
   Modal,
   RadioGroup as TinyRadioGroup
 } from '@opentiny/vue'
+import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
 
 function handleClick() {
   Modal.message({ message: 'click', status: 'info' })
diff --git a/examples/sites/demos/pc/app/form/slot-label.vue b/examples/sites/demos/pc/app/form/slot-label.vue
index 33fa4c2c91..f0e54726b8 100644
--- a/examples/sites/demos/pc/app/form/slot-label.vue
+++ b/examples/sites/demos/pc/app/form/slot-label.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
+    <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
       <tiny-form-item prop="users">
         <template #label> 必填 </template>
         <tiny-input v-model="createData.users"></tiny-input>
@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label">超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
@@ -28,6 +28,7 @@
 
 <script>
 import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { AutoTip } from '@opentiny/vue-directive'
 
 export default {
   components: {
@@ -38,6 +39,7 @@ export default {
     TinyButton: Button,
     TinyRadioGroup: RadioGroup
   },
+  directives: { AutoTip },
   data() {
     return {
       options: [
diff --git a/examples/sites/demos/pc/app/form/smb-required-composition-api.vue b/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
index f26f610cf8..829fe9c542 100644
--- a/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
@@ -9,7 +9,7 @@
       :hide-required-asterisk="hideRequiredAsterisk"
       :model="createData"
       :rules="rules"
-      label-width="100px"
+      label-width="108px"
       validate-type="text"
       message-type="block"
     >
@@ -36,7 +36,6 @@ import {
   FormItem as TinyFormItem,
   Input as TinyInput,
   Button as TinyButton,
-  Modal,
   Switch as TinySwitch
 } from '@opentiny/vue'
 
@@ -59,6 +58,7 @@ function handleSubmit() {
   })
 }
 </script>
+
 <style scoped>
 .demo-form {
   width: 380px;
diff --git a/examples/sites/demos/pc/app/form/smb-required.vue b/examples/sites/demos/pc/app/form/smb-required.vue
index fb8e171c5b..d118152ffa 100644
--- a/examples/sites/demos/pc/app/form/smb-required.vue
+++ b/examples/sites/demos/pc/app/form/smb-required.vue
@@ -9,7 +9,7 @@
       :hide-required-asterisk="hideRequiredAsterisk"
       :model="createData"
       :rules="rules"
-      label-width="100px"
+      label-width="108px"
       validate-type="text"
       message-type="block"
     >
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal, Switch } from '@opentiny/vue'
+import { Form, FormItem, Input, Button, Switch } from '@opentiny/vue'
 
 export default {
   components: {
diff --git a/examples/sites/demos/pc/app/form/webdoc/form.js b/examples/sites/demos/pc/app/form/webdoc/form.js
index 1b81ef2a10..50be689a32 100644
--- a/examples/sites/demos/pc/app/form/webdoc/form.js
+++ b/examples/sites/demos/pc/app/form/webdoc/form.js
@@ -270,21 +270,21 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>false</code> ，但SMB主题下，默认为 <code>true</code> 。</p>',
+          '<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>true</code> 。</p>',
         'en-US':
-          'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>false</code> , but under the SMB theme, it defaults to <code>true</code> .'
+          'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>true</code>.'
       },
       codeFiles: ['smb-required.vue']
     },
     {
       demoId: 'popper-options',
       name: {
-        'zh-CN': '错误提示',
+        'zh-CN': '错误提示跟随页面',
         'en-US': 'Error tip options'
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，切页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
+          '<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，且页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
         'en-US':
           'Set the <code>tip</code> type error prompt through <code>popper-options</code>. For example, when the parent element of the form is a scrolling element and the page scrolls, the prompt will be misaligned. Change the <code>bubbling</code> attribute Set to <code>true</code> to resolve this issue.'
       },