chore(docs): [badge] optimize badge demo and api (#778)

examples/sites/demos/pc/app/badge/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
-  <tiny-badge :value="2">我的待办</tiny-badge>
+  <tiny-badge :value="2" data="我的待办"></tiny-badge>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/badge/basic-usage.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-badge :value="2">我的待办</tiny-badge>
+  <tiny-badge :value="2" data="我的待办"></tiny-badge>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/dynamic-hidden-composition-api.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Badge as TinyBadge, Button as TinyButton } from '@opentiny/vue'
 

examples/sites/demos/pc/app/badge/dynamic-hidden.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge, Button } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/is-dot-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-badge is-dot>小圆点显示</tiny-badge>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/badge/is-dot.vue

@@ -2,7 +2,7 @@
   <tiny-badge is-dot>小圆点显示</tiny-badge>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/link-composition-api.vue

@@ -6,6 +6,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/badge/link.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/max-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/badge/max.vue

@@ -2,7 +2,7 @@
   <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/slot-content-composition-api.vue

@@ -5,7 +5,7 @@
   </tiny-badge>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>
 

examples/sites/demos/pc/app/badge/slot-content.vue

@@ -5,7 +5,7 @@
   </tiny-badge>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/slot-default-composition-api.vue

@@ -6,6 +6,6 @@
   </tiny-badge>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/badge/slot-default.vue

@@ -6,7 +6,7 @@
   </tiny-badge>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/badge/type-composition-api.vue

@@ -1,19 +1,19 @@
 <template>
-  <div>
+  <div class="badge-demo">
     <tiny-badge :value="2">默认类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="danger">danger 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="primary">primary 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="success">success 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="warning">warning 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="info">info 类型</tiny-badge>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>
+<style scoped>
+.badge-demo .tiny-badge__wrapper {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/badge/type.vue

@@ -1,20 +1,15 @@
 <template>
-  <div>
+  <div class="badge-demo">
     <tiny-badge :value="2">默认类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="danger">danger 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="primary">primary 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="success">success 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="warning">warning 类型</tiny-badge>
-    <br />
     <tiny-badge :value="2" type="info">info 类型</tiny-badge>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Badge } from '@opentiny/vue'
 
 export default {
@@ -23,3 +18,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.badge-demo .tiny-badge__wrapper {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/badge/webdoc/badge.js

@@ -3,23 +3,23 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'base',
+      'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>Badge 展示指定数据信息，如：我的待办数、新任务数等。</p>\n',
+        'zh-CN': '<p>通过<code>data</code>设置文本内容，<code>value</code>设置标记内容。</p>\n',
         'en-US':
-          '<p>Badge Displays specified data, such as the number of to-do tasks and the number of new tasks. </p>\n'
+          '<p>Set the text content through<code>data</code>, and set the tag content through<code>value</code></p>\n'
       },
-      'codeFiles': ['base.vue']
+      'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'type',
       'name': { 'zh-CN': '主題样式', 'en-US': 'Theme Style' },
       'desc': {
         'zh-CN':
-          '<p><code>type</code> 设置显示主题，可选值：primary、success、warning、danger、info，默认值：danger</p>\n',
+          '<p>通过<code>type</code> 设置显示主题，可选值：<code>primary、success、warning、danger、info</code>默认值：danger。</p>\n',
         'en-US':
-          '<p><code>type</code> Set the display theme. The options are primary, success, warning, danger, and info. The default value is danger</p>\n'
+          '<p>Set the display theme through<code>type</code>. Optional values:<code>primary, success, warning, danger, info</code>Default value: danger.</p>\n'
       },
       'codeFiles': ['type.vue']
     },
@@ -27,8 +27,8 @@ export default {
       'demoId': 'is-dot',
       'name': { 'zh-CN': '小圆点标记', 'en-US': 'Small dot mark' },
       'desc': {
-        'zh-CN': '<p><code>is-dot</code> 显示小圆点标记</p>\n',
-        'en-US': '<p><code>is-dot</code> Display small dot mark</p>\n'
+        'zh-CN': '<p>通过<code>is-dot</code>设置显示小圆点标记。</p>\n',
+        'en-US': '<p>Set the display of small dot markers through<code>is dot</code>settings.</p>\n'
       },
       'codeFiles': ['is-dot.vue']
     },
@@ -36,59 +36,65 @@ export default {
       'demoId': 'max',
       'name': { 'zh-CN': '计数最大值', 'en-US': 'Maximum count value' },
       'desc': {
-        'zh-CN': "<p><code>max</code> 超过最大值会显示 '{max}+'</p>\n",
-        'en-US': "<p><code>max</code> exceeds the maximum value, '{max}+'</p>\n is displayed"
+        'zh-CN': "<p>通过<code>max</code>设置最大值，超过最大值会显示 '{max}+'。</p>\n",
+        'en-US':
+          "<p>By setting the maximum value through<code>max</code>, exceeding the maximum value will display '{max}+'.</p>"
       },
       'codeFiles': ['max.vue']
     },
     {
-      'demoId': 'target',
+      'demoId': 'link',
       'name': { 'zh-CN': '跳转链接', 'en-US': 'Link' },
       'desc': {
-        'zh-CN': '<p><code>href</code>定义跳转链接</p>\n',
-        'en-US': '<p><code>href</code> Define Jump Link</p>\n'
+        'zh-CN':
+          '<p>通过<code>href</code>设置跳转链接，<code>target</code>设置跳转方式，同<code>a</code>标签的<code>target</code>属性。</p>\n',
+        'en-US':
+          '<p>Set the jump link through<code>href</code>, and set the jump method using the<code>target</code>attribute of the<code>a</code>tag.</p>\n'
       },
-      'codeFiles': ['target.vue']
+      'codeFiles': ['link.vue']
     },
     {
       'demoId': 'badge-class',
       'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom Class Name' },
       'desc': {
-        'zh-CN': '<p><code>badge-class</code> 自定义类名</p>\n',
-        'en-US': '<p><code>badge-class</code> Custom Class Name</p>\n'
+        'zh-CN': '<p>通过<code>badge-class</code>设置自定义类名。</p>\n',
+        'en-US': '<p>Set custom class names through<code>bag class</code>.</p>\n'
       },
       'codeFiles': ['badge-class.vue']
     },
     {
       'demoId': 'slot-default',
-      'name': { 'zh-CN': '自定义标记目标', 'en-US': 'Custom Tag Target' },
+      'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Badge text content' },
       'desc': {
-        'zh-CN': '<p><code>default slot</code> 标记内容自定义</p>\n',
-        'en-US': '<p><code>default slot</code> Tag Content Custom</p>\n'
+        'zh-CN': '<p>通过<code>default slot</code> 自定义文本内容。</p>\n',
+        'en-US': '<p><code>default slot</code> Tag Content Custom.</p>\n'
       },
       'codeFiles': ['slot-default.vue']
     },
     {
       'demoId': 'slot-content',
-      'name': { 'zh-CN': '自定义提示内容', 'en-US': 'Customized prompt content' },
+      'name': { 'zh-CN': '自定义标记内容', 'en-US': 'Customized badge content' },
       'desc': {
-        'zh-CN': '<p><code>content slot</code> 自定义提示内容</p>\n',
-        'en-US': '<p><code>content slot</code> Custom Prompt Content</p>\n'
+        'zh-CN': '<p>通过<code>content slot</code> 自定义标记内容。</p>\n',
+        'en-US': '<p><code>content slot</code> Custom Prompt Content.</p>\n'
       },
       'codeFiles': ['slot-content.vue']
     },
     {
       'demoId': 'dynamic-hidden',
       'name': { 'zh-CN': '消息已读动态隐藏标记', 'en-US': 'Dynamic hiding flag of read messages' },
-      'desc': { 'zh-CN': '<p><code>hidden</code> 隐藏标记</p>\n', 'en-US': '<p><code>hidden</code> Hide Tag</p>\n' },
+      'desc': {
+        'zh-CN': '<p>通过<code>hidden</code>设置是否隐藏标记。</p>\n',
+        'en-US': '<p>Set whether to hide tags by<code>hidden</code>.</p>\n'
+      },
       'codeFiles': ['dynamic-hidden.vue']
     },
     {
       'demoId': 'offset',
       'name': { 'zh-CN': '标记的位置', 'en-US': 'Tag Offset' },
       'desc': {
-        'zh-CN': '<p><code>offset</code> 调整标记的位置</p>\n',
-        'en-US': '<p><code>offset</code> Custom Tag Offset</p>\n'
+        'zh-CN': '<p>通过<code>offset</code> 调整标记的位置。</p>\n',
+        'en-US': '<p><code>offset</code> Custom Tag Offset.</p>\n'
       },
       'codeFiles': ['offset.vue']
     }
@@ -99,88 +105,130 @@ export default {
       'type': 'component',
       'properties': [
         {
-          'name': 'value',
-          'type': 'number | string',
+          'name': 'badge-class',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '数据集对象，支持静态及动态数据。;显示值',
-            'en-US': 'Dataset object, which supports static and dynamic data. ;Display Value'
+            'zh-CN': '自定义标记的类名',
+            'en-US': 'Class name for custom tags'
           },
-          'demoId': 'type'
+          'demoId': 'badge-class'
+        },
+        {
+          'name': 'data',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置文本内容',
+            'en-US': 'Set Text Content'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'hidden',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否隐藏标记',
+            'en-US': 'Whether to hide badge'
+          },
+          'demoId': 'dynamic-hidden'
         },
         {
           'name': 'href',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指定跳转的目标页面地址。', 'en-US': 'Specify the URL of the target page.' },
+          'desc': {
+            'zh-CN': '指定跳转的目标页面地址',
+            'en-US': 'Specify the URL of the target page.'
+          },
           'demoId': 'target'
         },
+        {
+          'name': 'is-dot',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置是否以小圆点的形式来显示标记',
+            'en-US': 'Set whether to display the badge in the form of small dots'
+          },
+          'demoId': 'is-dot'
+        },
         {
           'name': 'max',
           'type': 'number',
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;最大值，超过最大值会显示 \'{max}+\'，要求 value 是 number 类型',
+              '指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;要求 value 是 number 类型',
             'en-US':
-              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". Maximum value. If the value exceeds the maximum value, \'{max}+\' is displayed. The value must be of the number type.'
+              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
           },
           'demoId': 'max'
         },
         {
-          'name': 'is-dot',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': {
-            'zh-CN': '设置是否有默认的新消息提示。;小圆点',
-            'en-US': 'Sets whether there is a default new message prompt. ; Little Dots'
-          },
-          'demoId': 'is-dot'
-        },
-        {
-          'name': 'hidden',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '隐藏 badge', 'en-US': 'Hide badge' },
-          'demoId': 'dynamic-hidden'
-        },
-        {
-          'name': 'type',
+          'name': 'offset',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '该属性的可选值为 primary / success / warning / danger / info',
-            'en-US': 'The value of this attribute can be primary / success / warning / danger / info'
+            'zh-CN': '设置标记位置的偏移量，详见demo',
+            'en-US': 'Set the offset of the marker position, see demo for details'
           },
-          'demoId': 'type'
+          'demoId': 'offset'
         },
         {
           'name': 'target',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '指定点击徽章 Dom 节点时链接到目标页面的跳转方式，仅在 href 属性存在时使用。',
+            'zh-CN': '设置点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
             'en-US':
-              'Specifies the redirection mode to the target page when you click the badge Dom node. This parameter is used only when the href attribute exists.'
+              'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
           },
-          'demoId': 'target'
+          'demoId': 'link'
+        },
+        {
+          'name': 'type',
+          'type': 'primary | success | warning | danger | info',
+          'defaultValue': 'danger',
+          'desc': {
+            'zh-CN': '设置标记的类型',
+            'en-US': 'Set the type of badge'
+          },
+          'demoId': 'type'
+        },
+        {
+          'name': 'value',
+          'type': 'number | string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置相关数据条目数',
+            'en-US': 'Set the number of related data entries'
+          },
+          'demoId': 'basic-usage'
         }
       ],
       'events': [],
       'slots': [
-        {
-          'name': 'default',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
-          'demoId': 'slot-default'
-        },
         {
           'name': 'content',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '消息提示内容', 'en-US': 'Message Content' },
+          'desc': {
+            'zh-CN': '消息提示内容',
+            'en-US': 'Message Content'
+          },
           'demoId': 'slot-content'
+        },
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
+            'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'
+          },
+          'demoId': 'slot-default'
         }
       ]
     }

examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-checkbox-group v-model="checkboxGroup" vertical text-color="#666">
+  <tiny-checkbox-group v-model="checkboxGroup" vertical>
     <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
   </tiny-checkbox-group>
 </template>

examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js

@@ -5,7 +5,7 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '<p>For details, see the following example.</p>' },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -44,9 +44,9 @@ export default {
       'name': { 'zh-CN': '配置式复选框组', 'en-US': 'Profile Checkbox Group' },
       'desc': {
         'zh-CN':
-          '<p>提供 <code>options</code> 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。\n\n<code>options</code> 对象数组中包括三个字段：<code>label</code>、<code>text</code>、<code>events</code>。\n\n另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>checkbox</code>。还可以配置为 <code>button</code>，配置后复选框组将以按钮的形式展示。</p>\n',
+          '<p>通过<code>options</code>配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。<code>options</code>的类型为<a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将<code>type</code>配置为<code>button</code>，复选框组将以按钮的形式展示。</p>\n',
         'en-US':
-          '<p>Provides the <code>options</code> attribute. You can render a check box group by configuring object array data. With this attribute, you no longer need to insert the <code>checkbox</code> or <code>checkbox-button</code> element as a slot in the tag. \n\nThe <code>options</code> object array contains three fields: <code>label</code>, <code>text</code>, and <code>events</code>. \n\n The <code>type</code> attribute is also provided, which is used with the <code>options</code> attribute. The default value is <code>checkbox</code>. You can also set this parameter to <code>button</code>. After the configuration, the check box group is displayed as a button. </p>\n'
+          '<p>Configure the display of multiple selection box groups through<code>options</code>. After using this attribute, you no longer need to insert<code>checkbox</code>or<code>checkbox button</code>elements in the label as slots. The type of <code>options</code>is<a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>< The code>type</code>attribute is used in conjunction with the<code>options</code>attribute to configure the<code>type</code>as<code>button</code>, and the checkbox group will be displayed in the form of a button.</p>\n'
       },
       'codeFiles': ['group-options.vue']
     },
@@ -139,11 +139,10 @@ export default {
     },
     {
       'demoId': 'checkbox-slot',
-      'name': { 'zh-CN': '插槽', 'en-US': 'Slot' },
+      'name': { 'zh-CN': '默认插槽', 'en-US': 'Slot' },
       'desc': {
-        'zh-CN': '<p>Checkbox 的内容</p>\n',
-        'en-US':
-          '<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n'
+        'zh-CN': '<p>通过<code>default slot</code>自定义文本内容。</p>\n',
+        'en-US': '<p>Customize text content through<code>default slot</code>.</p>\n'
       },
       'codeFiles': ['checkbox-slot.vue']
     },
@@ -151,14 +150,14 @@ export default {
       'demoId': 'checkbox-button-multiple',
       'name': { 'zh-CN': '多行按钮', 'en-US': 'Checkbox Button Multiple' },
       'desc': {
-        'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示</p>\n',
-        'en-US': '<p>Checkbox button multiple</p>\n'
+        'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示。</p>\n',
+        'en-US': '<p>Multi line button group, displayed as a new line after exceeding the maximum width.</p>\n'
       },
       'codeFiles': ['checkbox-button-multiple.vue']
     },
     {
       'demoId': 'dynamic-create-checkbox',
-      'name': { 'zh-CN': '动态生成复选框组', 'en-US': 'Dynamicly generate check box groups' },
+      'name': { 'zh-CN': '动态生成复选框组', 'en-US': 'Dynamic generate check box groups' },
       'desc': {
         'zh-CN': '<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>\n',
         'en-US':
@@ -204,7 +203,7 @@ export default {
         },
         {
           'name': 'false-label',
-          'type': 'string , number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
             'zh-CN': '没有选中时的值',
@@ -224,12 +223,12 @@ export default {
         },
         {
           'name': 'label',
-          'type': 'string , number , boolean',
+          'type': 'string | number | boolean',
           'defaultValue': '',
           'desc': {
             'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）',
             'en-US':
-              'Selected value (This parameter is valid only when checkbox-group or the bound object type is array.)'
+              'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
           },
           'demoId': 'checkbox-group'
         },
@@ -255,12 +254,11 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'string',
+          'type': 'medium | small | mini',
           'defaultValue': '',
           'desc': {
-            'zh-CN': 'Checkbox 的尺寸，仅在 border 为真时有效;该属性的可选值为 medium / small / mini',
-            'en-US':
-              'Checkbox size. This parameter is valid only when border is set to true. The optional values of this attribute are medium / small / mini'
+            'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
+            'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
           },
           'demoId': 'size'
         },
@@ -276,7 +274,7 @@ export default {
         },
         {
           'name': 'true-label',
-          'type': 'string , number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
             'zh-CN': '选中时的值',
@@ -288,11 +286,11 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string | number | boolean) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当绑定值变化时触发的事件',
-            'en-US': 'This event is triggered when the binding value changes.'
+            'en-US': 'This event is triggered when the binding value changes'
           },
           'demoId': 'checkbox-events'
         }
@@ -303,7 +301,7 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': 'Checkbox的内容',
+            'zh-CN': 'checkbox的内容',
             'en-US': 'Checkbox content'
           },
           'demoId': 'checkbox-slot'
@@ -326,23 +324,24 @@ export default {
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否禁用',
-            'en-US': 'Disable'
+            'en-US': 'Is disabled'
           },
           'demoId': 'indeterminate'
         },
         {
           'name': 'events',
-          'type': 'object',
+          'type': 'ICheckboxGroupOptions.events',
+          'typeAnchorName': 'ICheckboxGroupOptions',
           'defaultValue': '',
           'desc': {
             'zh-CN': '原生事件',
             'en-US': 'Native event'
           },
-          'demoId': 'checkbox-group'
+          'demoId': 'group-options'
         },
         {
           'name': 'false-label',
-          'type': 'string , number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
             'zh-CN': '没有选中时的值',
@@ -352,7 +351,7 @@ export default {
         },
         {
           'name': 'label',
-          'type': 'string , number , boolean',
+          'type': 'string | number | boolean',
           'defaultValue': '',
           'desc': {
             'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）;该属性的可选值为 medium-',
@@ -363,7 +362,7 @@ export default {
         },
         {
           'name': 'modelValue / v-model',
-          'type': 'string , number , boolean',
+          'type': 'string | number | boolean',
           'defaultValue': '',
           'desc': {
             'zh-CN': '绑定值',
@@ -384,16 +383,16 @@ export default {
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': 'Function',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '文本',
+            'zh-CN': '复选框文本',
             'en-US': 'Text'
           },
           'demoId': 'description'
         },
         {
           'name': 'true-label',
-          'type': 'string , number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
             'zh-CN': '选中时的值',
@@ -408,7 +407,7 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': 'Checkbox-button的内容',
+            'zh-CN': 'checkbox-button的内容',
             'en-US': 'Checkbox-button content'
           },
           'demoId': 'description'
@@ -430,7 +429,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '按钮形式的 Checkbox 激活时的填充色和边框色',
+            'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
             'en-US': 'Fill color and border color when the checkbox in button mode is activated'
           },
           'demoId': 'checkbox-button'
@@ -457,7 +456,7 @@ export default {
         },
         {
           'name': 'modelValue / v-model',
-          'type': 'Array<string | number>',
+          'type': 'string[] | number[]',
           'defaultValue': '',
           'desc': {
             'zh-CN': '绑定值',
@@ -467,7 +466,8 @@ export default {
         },
         {
           'name': 'options',
-          'type': 'Array',
+          'type': 'ICheckboxGroupOptions[]',
+          'typeAnchorName': 'ICheckboxGroupOptions',
           'defaultValue': '',
           'desc': {
             'zh-CN': 'checkbox组件列表',
@@ -480,19 +480,18 @@ export default {
           'type': 'medium | small | mini',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效;该属性的可选值为 medium / small / mini',
+            'zh-CN': '多选框组尺寸，仅对按钮形式的 checkbox 或带有边框的 checkbox 有效',
             'en-US':
-              'Size of the check box group. This parameter is valid only for the check box with buttons or borders. The optional values of this attribute are medium / small / mini'
+              'Size of the check box group. This parameter is valid only for the check box with buttons or borders'
           },
           'demoId': 'size'
         },
         {
           'name': 'text-color',
           'type': 'string',
-          'defaultValue': '#ffffff',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '按钮形式的 Checkbox 激活时的文本颜色',
+            'zh-CN': '按钮形式的 checkbox 激活时的文本颜色',
             'en-US': 'Text color when the checkbox in button mode is activated'
           },
           'demoId': 'vertical-checkbox'
@@ -534,7 +533,7 @@ export default {
       'checkbox-group events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string[] | number[]) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当绑定值变化时触发的事件',
@@ -544,5 +543,22 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'ICheckboxGroupOptions',
+      type: 'interface',
+      code: `
+interface ICheckboxGroupOptions {
+  label: string // 选中时对应的值
+  text?: number // 描述文本
+  disabled?: boolean // 是否禁用
+  checked?: boolean // 是否默认选中
+  events?: {
+    click?: (e: Event) => void // 点击事件
+    change?: (e: Event) => void // change事件
+  }
+}`
+    }
   ]
 }