docs(sites): [checkbox] optimize docs and demos (#1161)

* docs(sites): [checkbox] optimize docs and demos

* docs(sites): [checkbox] optimize docs and demos

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

@@ -9,12 +9,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
-const logger = ref('')
 
 function valueChange(val) {
-  Modal.message(`change 事件触发了，选中值为：${val}`)
+  Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
 }
 </script>

examples/sites/demos/pc/app/checkbox/checkbox-events.vue

@@ -15,13 +15,12 @@ export default {
   },
   data() {
     return {
-      checked: ['复选框1'],
-      logger: ''
+      checked: ['复选框1']
     }
   },
   methods: {
     valueChange(val) {
-      Modal.message(`change 事件触发了，选中值为：${val}`)
+      Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
     }
   }
 }

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

@@ -7,7 +7,7 @@ import { ref } from 'vue'
 import { CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
 
 function handleClick() {
-  Modal.message({ message: 'click' })
+  Modal.message({ message: 'click', status: 'info' })
 }
 const checkList = ref(['A'])
 const options = ref([

examples/sites/demos/pc/app/checkbox/group-options.vue

@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      Modal.message({ message: 'click', status: 'info' })
     }
   }
 }

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

@@ -9,7 +9,6 @@
 <script setup>
 import { ref } from 'vue'
 import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
-import { number } from 'echarts'
 
 const cities = ref(['上海', '北京', '广州', '深圳'])
 const sizeList = ref(['medium', '', 'small', 'mini'])

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

@@ -13,8 +13,9 @@ const checked = ref('假文本')
 
 function getValue() {
   Modal.message({
-    message: '当前状态对应的值为:' + this.checked,
-    top: 200
+    message: '当前状态对应的值为:' + checked.value,
+    top: 200,
+    status: 'info'
   })
 }
 </script>

examples/sites/demos/pc/app/checkbox/text.vue

@@ -22,7 +22,8 @@ export default {
     getValue() {
       Modal.message({
         message: '当前状态对应的值为:' + this.checked,
-        top: 200
+        top: 200,
+        status: 'info'
       })
     }
   }

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

@@ -37,7 +37,7 @@ export default {
       'name': { 'zh-CN': '配置式复选框组', 'en-US': 'Profile Checkbox Group' },
       'desc': {
         'zh-CN':
-          '<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>',
+          '<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>',
         'en-US':
           '<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>'
       },
@@ -343,7 +343,7 @@ export default {
             'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
             'en-US': 'Fill color and border color when the checkbox in button mode is activated'
           },
-          'demoId': 'checkbox-button'
+          'demoId': 'custom-color'
         },
         {
           'name': 'max',
@@ -517,7 +517,7 @@ export default {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
           },
-          'demoId': 'checkbox'
+          'demoId': 'checkbox-button'
         },
         {
           'name': 'name',