chore(docs): [radio] optimize radio demo and api (#761)

* chore(docs): [radio] optimize radio demo and api

* chore(docs): [radio] optimize radio demo and api

examples/sites/demos/pc/app/radio/active-color-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="black">
+  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="ff0000">
     <tiny-radio-button label="1">日度</tiny-radio-button>
     <tiny-radio-button label="2">月度</tiny-radio-button>
     <tiny-radio-button label="3">年度</tiny-radio-button>
   </tiny-radio-group>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 

examples/sites/demos/pc/app/radio/active-color.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="black">
+  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="#ff0000">
     <tiny-radio-button label="1">日度</tiny-radio-button>
     <tiny-radio-button label="2">月度</tiny-radio-button>
     <tiny-radio-button label="3">年度</tiny-radio-button>
   </tiny-radio-group>
 </template>
 
-<script lang="jsx">
+<script>
 import { RadioButton, RadioGroup } from '@opentiny/vue'
 
 export default {

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

@@ -1,11 +1,11 @@
 <template>
   <div>
     <tiny-radio v-model="value" label="1">选项一</tiny-radio>
-    <tiny-radio v-model="value" label="2" text="选项二"></tiny-radio>
+    <tiny-radio v-model="value" label="2">选项二</tiny-radio>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio } from '@opentiny/vue'
 

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

@@ -1,11 +1,11 @@
 <template>
   <div>
     <tiny-radio v-model="value" label="1">选项一</tiny-radio>
-    <tiny-radio v-model="value" label="2" text="选项二"></tiny-radio>
+    <tiny-radio v-model="value" label="2">选项二</tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio } from '@opentiny/vue'
 
 export default {

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

@@ -1,17 +1,17 @@
 <template>
   <div>
     <tiny-radio v-model="value" label="1">
-      <span class="red">选项内容一</span>
+      <span class="red">内容一：</span>
       <span>选项描述</span>
     </tiny-radio>
     <tiny-radio v-model="value" label="2">
-      <span>选项内容二</span>
+      <span>内容二：</span>
       <span>选项描述</span>
     </tiny-radio>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio } from '@opentiny/vue'
 

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

@@ -1,17 +1,17 @@
 <template>
   <div>
     <tiny-radio v-model="value" label="1">
-      <span class="red">选项内容一</span>
+      <span class="red">内容一：</span>
       <span>选项描述</span>
     </tiny-radio>
     <tiny-radio v-model="value" label="2">
-      <span>选项内容二</span>
+      <span>内容二：</span>
       <span>选项描述</span>
     </tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 

examples/sites/demos/pc/app/radio/dynamic-disable.vue

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

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

@@ -2,7 +2,7 @@
   <tiny-radio-group v-model="value" :options="options"></tiny-radio-group>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
 

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

@@ -2,7 +2,7 @@
   <tiny-radio-group v-model="value" :options="options"></tiny-radio-group>
 </template>
 
-<script lang="jsx">
+<script>
 import { RadioGroup, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/radio/radio-button-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="black">
-    <tiny-radio-button label="日度" name="name1"></tiny-radio-button>
-    <tiny-radio-button label="月度"></tiny-radio-button>
-    <tiny-radio-button label="年度"></tiny-radio-button>
-  </tiny-radio-group>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
-
-const value = ref('1')
-</script>

examples/sites/demos/pc/app/radio/radio-button.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('按钮内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('radio#radio-button')
-  const radio1 = page.getByText('日度')
-  const radio2 = page.getByText('月度')
-  const radio3 = page.getByText('年度')
-  await expect(radio1).toBeVisible()
-  await expect(radio2).toBeVisible()
-  await expect(radio3).toBeVisible()
-})

examples/sites/demos/pc/app/radio/radio-button.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-radio-group v-model="value" fill="#8ef0e3" text-color="black">
-    <tiny-radio-button label="日度" name="name1"></tiny-radio-button>
-    <tiny-radio-button label="月度"></tiny-radio-button>
-    <tiny-radio-button label="年度"></tiny-radio-button>
-  </tiny-radio-group>
-</template>
-
-<script lang="jsx">
-import { RadioButton, RadioGroup } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
-  },
-  data() {
-    return {
-      value: '1'
-    }
-  }
-}
-</script>

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

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
 

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

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio, RadioButton, RadioGroup, Modal } from '@opentiny/vue'
 
 export default {

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

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <tiny-radio-group v-model="value1">
+      <tiny-radio label="1">备选项1</tiny-radio>
+      <tiny-radio label="2">备选项2</tiny-radio>
+      <tiny-radio label="3">备选项3</tiny-radio>
+    </tiny-radio-group>
+    <div style="margin-top: 20px">
+      <tiny-radio-group v-model="value2">
+        <tiny-radio-button label="1">备选项1</tiny-radio-button>
+        <tiny-radio-button label="2">备选项2</tiny-radio-button>
+        <tiny-radio-button label="3">备选项3</tiny-radio-button>
+      </tiny-radio-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Radio as TinyRadio, RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
+
+const value1 = ref('1')
+const value2 = ref('1')
+</script>

examples/sites/demos/pc/app/radio/radio-group.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <tiny-radio-group v-model="value1">
+      <tiny-radio label="1">备选项1</tiny-radio>
+      <tiny-radio label="2">备选项2</tiny-radio>
+      <tiny-radio label="3">备选项3</tiny-radio>
+    </tiny-radio-group>
+    <div style="margin-top: 20px">
+      <tiny-radio-group v-model="value2">
+        <tiny-radio-button label="1">备选项1</tiny-radio-button>
+        <tiny-radio-button label="2">备选项2</tiny-radio-button>
+        <tiny-radio-button label="3">备选项3</tiny-radio-button>
+      </tiny-radio-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Radio, RadioGroup, RadioButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup,
+    TinyRadioButton: RadioButton
+  },
+  data() {
+    return {
+      value1: '1',
+      value2: '1'
+    }
+  }
+}
+</script>

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

@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 

examples/sites/demos/pc/app/radio/radio-size.vue

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

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

@@ -1,11 +1,12 @@
 <template>
   <div>
-    <tiny-radio v-model="value" label="1" text="选项一"></tiny-radio>
+    <tiny-radio v-model="value" label="1" text="1">选项一</tiny-radio>
     <tiny-radio v-model="value" label="2" text="选项二"></tiny-radio>
+    <tiny-radio v-model="value" label="3"></tiny-radio>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Radio as TinyRadio } from '@opentiny/vue'
 

examples/sites/demos/pc/app/radio/radio-text.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
-    <tiny-radio v-model="value" label="1" text="选项一"></tiny-radio>
+    <tiny-radio v-model="value" label="1" text="1">选项一</tiny-radio>
     <tiny-radio v-model="value" label="2" text="选项二"></tiny-radio>
+    <tiny-radio v-model="value" label="3"></tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/radio/radio-value-composition-api.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-radio-group v-model="value">
-    <tiny-radio :label="1">选项一</tiny-radio>
-    <tiny-radio :label="2">选项二</tiny-radio>
-    <tiny-radio :label="3">选项三</tiny-radio>
-  </tiny-radio-group>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Radio as TinyRadio, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
-
-const value = ref(1)
-</script>

examples/sites/demos/pc/app/radio/radio-value.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('radio-value', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('radio#radio-value')
-  const radio1 = page.locator('.tiny-radio').nth(0)
-  const radio2 = page.locator('.tiny-radio').nth(1)
-  await expect(radio1).toBeVisible()
-  await expect(radio2).toBeVisible()
-  await expect(radio1).toHaveClass('tiny-radio is-checked')
-})

examples/sites/demos/pc/app/radio/radio-value.vue

@@ -1,23 +0,0 @@
-<template>
-  <tiny-radio-group v-model="value">
-    <tiny-radio :label="1">选项一</tiny-radio>
-    <tiny-radio :label="2">选项二</tiny-radio>
-    <tiny-radio :label="3">选项三</tiny-radio>
-  </tiny-radio-group>
-</template>
-
-<script lang="jsx">
-import { Radio, RadioGroup } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
-  },
-  data() {
-    return {
-      value: 1
-    }
-  }
-}
-</script>

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

@@ -1,18 +1,21 @@
 <template>
-  <tiny-radio-group v-model="value" vertical @change="change">
-    <tiny-radio label="1">备选项1</tiny-radio>
-    <tiny-radio label="2">备选项2</tiny-radio>
-    <tiny-radio label="3">备选项3</tiny-radio>
-  </tiny-radio-group>
+  <div>
+    <tiny-radio-group v-model="value" vertical>
+      <tiny-radio label="1">备选项1</tiny-radio>
+      <tiny-radio label="2">备选项2</tiny-radio>
+      <tiny-radio label="3">备选项3</tiny-radio>
+    </tiny-radio-group>
+    <tiny-radio-group v-model="value" vertical style="margin-left: 20px">
+      <tiny-radio-button label="1">备选项1</tiny-radio-button>
+      <tiny-radio-button label="2">备选项2</tiny-radio-button>
+      <tiny-radio-button label="3">备选项3</tiny-radio-button>
+    </tiny-radio-group>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
+import { Radio as TinyRadio, RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
 
 const value = ref('1')
-
-function change(val) {
-  Modal.message({ message: `当前变化的值：${val}`, status: 'info' })
-}
 </script>

examples/sites/demos/pc/app/radio/vertical.vue

@@ -1,28 +1,31 @@
 <template>
-  <tiny-radio-group v-model="value" vertical @change="change">
-    <tiny-radio label="1">备选项1</tiny-radio>
-    <tiny-radio label="2">备选项2</tiny-radio>
-    <tiny-radio label="3">备选项3</tiny-radio>
-  </tiny-radio-group>
+  <div>
+    <tiny-radio-group v-model="value" vertical>
+      <tiny-radio label="1">备选项1</tiny-radio>
+      <tiny-radio label="2">备选项2</tiny-radio>
+      <tiny-radio label="3">备选项3</tiny-radio>
+    </tiny-radio-group>
+    <tiny-radio-group v-model="value" vertical style="margin-left: 20px">
+      <tiny-radio-button label="1">备选项1</tiny-radio-button>
+      <tiny-radio-button label="2">备选项2</tiny-radio-button>
+      <tiny-radio-button label="3">备选项3</tiny-radio-button>
+    </tiny-radio-group>
+  </div>
 </template>
 
-<script lang="jsx">
-import { Radio, RadioGroup, Modal } from '@opentiny/vue'
+<script>
+import { Radio, RadioGroup, RadioButton } from '@opentiny/vue'
 
 export default {
   components: {
     TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadioGroup: RadioGroup,
+    TinyRadioButton: RadioButton
   },
   data() {
     return {
       value: '1'
     }
-  },
-  methods: {
-    change(val) {
-      Modal.message({ message: `当前变化的值：${val}`, status: 'info' })
-    }
   }
 }
 </script>

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

@@ -6,24 +6,44 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>v-model</code> 绑定变量，设置的变量值为默认选中的 Radio，变量值对应 <code>label</code> 属性的值。通过 <code>text</code> 也可以配置显示文本，与默认插槽配置纯文本的结果一致\n\n<code>label</code> 可以是 <code>string</code>、<code>number</code> 或 <code>boolean</code>。</p>\n',
+        'zh-CN': '<p>通过 <code>v-model</code> 绑定变量，变量值对应 <code>label</code> 属性的值。</p>\n',
         'en-US':
-          '<p> uses <code>v-model</code> to bind a variable. The variable value is the default radio selected. The variable value corresponds to the value of <code>label</code>. You can also use <code>text</code> to configure the display text, which is the same as the result of the default slot configuration plain text.\n\n<code>label</code> can be <code>string</code>, <code>number</code>, or <code> boolean</code>. </p>\n'
+          '<p>Bind variables through<code>v-model</code>, and the variable value corresponds to the value of the<code>label</code>attribute.</p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
+    {
+      'demoId': 'radio-group',
+      'name': { 'zh-CN': '单选框组', 'en-US': 'Radio group' },
+      'desc': {
+        'zh-CN':
+          '<p><code>radio-group</code>可以将<code>radio</code>或者<code>radio-button</code>组合起来，通过<code>v-modal</code>绑定选中的值。</p>\n',
+        'en-US': '<p>You can set the <code>border</code> attribute to add a border to an option button. </p>\n'
+      },
+      'codeFiles': ['radio-group.vue']
+    },
     {
       'demoId': 'group-options',
       'name': { 'zh-CN': '配置式单选组', 'en-US': 'Profile Radio Group' },
       'desc': {
         'zh-CN':
-          '<p>提供 <code>options</code> 属性，支持通过配置对象数组数据的形式来渲染单选组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>&lt;radio&gt;</code> 或 <code>&lt;radio-button&gt;</code> 标签。\n\n<code>options</code> 对象数组中包括三个字段：<code>label</code>、<code>text</code>、<code>events</code>。\n\n另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code>。还可以配置为 <code>button</code>，配置后单选组将以按钮的形式展示。</p>\n',
+          '<p>通过<code>options</code> 配置式渲染单选组。<code>options</code>的类型为<a href="#IRadioGroupOptions">IRadioGroupOptions[]</a>。另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code>。可以配置为 <code>button</code>，配置后单选组将以按钮的形式展示。</p>\n',
         'en-US':
           '<p>Provides the <code>options</code> attribute to render radio groups by configuring object array data. This property eliminates the need to insert a <code>&lt;radio&gt;</code> or <code>&lt;radio-button&gt;</code> tag 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 together with the <code>options</code> attribute. The default value is <code>radio</code>. You can also set this parameter to <code>button</code>. After the configuration, the radio group is displayed as a button. </p>\n'
       },
       'codeFiles': ['group-options.vue']
     },
+    {
+      'demoId': 'radio-events',
+      'name': { 'zh-CN': '单选框事件', 'en-US': 'Option button event' },
+      'desc': {
+        'zh-CN':
+          '<p>可在 <code>radio</code>、 <code>radio-group</code> 组件上设置 <code>change</code> 事件，当绑定值变化时触发，参数为选中的 <code>label</code> 值。</p>\n',
+        'en-US':
+          '<p>You can set the <code>change</code> event on the Radio and  <code>radio-group</code> components. The event is triggered when the bound value changes. The callback function is the selected radio label value. </p>\n'
+      },
+      'codeFiles': ['radio-events.vue']
+    },
     {
       'demoId': 'with-border',
       'name': { 'zh-CN': '带有边框', 'en-US': 'With borders' },
@@ -47,9 +67,9 @@ export default {
       'demoId': 'vertical',
       'name': { 'zh-CN': '垂直布局', 'en-US': 'vertical layout' },
       'desc': {
-        'zh-CN': '<p>可在 RadioGroup 组件上设置 <code>vertical</code> 属性，使单选框垂直布局。</p>\n',
+        'zh-CN': '<p>可在 <code>radio-group</code> 组件上设置 <code>vertical</code> 属性，使单选框垂直布局。</p>\n',
         'en-US':
-          '<p>You can set the <code>vertical</code> attribute on the RadioGroup component to enable the vertical layout of the option buttons. </p>\n'
+          '<p>You can set the <code>vertical</code> attribute on the  <code>radio-group</code> component to enable the vertical layout of the option buttons. </p>\n'
       },
       'codeFiles': ['vertical.vue']
     },
@@ -58,9 +78,9 @@ export default {
       'name': { 'zh-CN': '颜色设置', 'en-US': 'Color Settings' },
       'desc': {
         'zh-CN':
-          '<p>按钮形式的 Radio 激活时可通过 <code>text-color</code> 属性设置文本颜色，通过 <code>fill</code> 属性设置填充色和边框色。</p>\n',
+          '<p>通过 <code>text-color</code> 设置单选按钮组激活时的文本颜色，通过 <code>fill</code> 设置填充色和边框色。</p>\n',
         'en-US':
-          'When a radio in the <p> format is activated, you can set the text color through the <code>text-color</code> attribute, and set the fill color and border color through the <code>fill</code> attribute. </p>\n'
+          'Set the text color when the radio button group is activated through<code>text color</code>, and set the fill color and border color through<code>fill</code>.</p>\n'
       },
       'codeFiles': ['active-color.vue']
     },
@@ -68,66 +88,32 @@ export default {
       'demoId': 'radio-text',
       'name': { 'zh-CN': '文字内容', 'en-US': 'Text Content' },
       'desc': {
-        'zh-CN': '<p>可在 Radio 组件上设置 <code>text</code> 属性，设置内容。</p>\n',
-        'en-US': '<p>You can set the <code>text</code> attribute on the Radio component to set the content. </p>\n'
+        'zh-CN':
+          '<p>通过 <code>text</code> 属性或者默认插槽设置文字内容，插槽优先级大于 <code>text</code> 属性。若两者都没有，则使用 <code>label</code>值作为文字内容。</p>\n',
+        'en-US':
+          '<pBy setting the text content through the<code>text</code>attribute or default slot, the slot priority is greater than the<code>text</code>attribute. If neither is present, use the<code>label</code>value as the text content. </p>\n'
       },
       'codeFiles': ['radio-text.vue']
     },
-    {
-      'demoId': 'radio-button',
-      'name': { 'zh-CN': '按钮内容', 'en-US': 'Button Content' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>label</code> 属性可以设置 Radio 的内容</p>\n',
-        'en-US': '<p>You can set the radio content through the <code>label</code> attribute.</p>\n'
-      },
-      'codeFiles': ['radio-button.vue']
-    },
-    {
-      'demoId': 'radio-button1',
-      'name': { 'zh-CN': 'name', 'en-US': 'name' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['radio-button.vue']
-    },
     {
       'demoId': 'radio-size',
       'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Settings' },
       'desc': {
         'zh-CN':
-          '<p>可对按钮形式的 Radio 或带有边框的 Radio 设置 <code>size</code> 属性，以改变其尺寸，包括 medium、small、mini 三个选项。</p>\n',
+          '<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，包括 <code>medium、small、mini</code> 三个选项。</p>\n',
         'en-US':
           '<p>You can set the <code>size</code> attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini. </p>\n'
       },
       'codeFiles': ['radio-size.vue']
     },
     {
-      'demoId': 'radio-events',
-      'name': { 'zh-CN': '单选框事件', 'en-US': 'Option button event' },
-      'desc': {
-        'zh-CN':
-          '<p>可在 Radio、RadioGroup 组件上设置 <code>change</code> 事件，当绑定值变化时触发，回调函数为选中的 Radio label 值。</p>\n',
-        'en-US':
-          '<p>You can set the <code>change</code> event on the Radio and RadioGroup components. The event is triggered when the bound value changes. The callback function is the selected radio label value. </p>\n'
-      },
-      'codeFiles': ['radio-events.vue']
-    },
-    {
-      'demoId': 'group-options1',
-      'name': { 'zh-CN': '循环配置 Radio', 'en-US': 'Configure radio cyclically' },
-      'desc': {
-        'zh-CN': '<p>可在 RadioGroup 组件上设置 <code>options</code> 属性，可循环配置 Radio。</p>\n',
-        'en-US':
-          '<p>You can set the <code>options</code> attribute on the RadioGroup component to configure radio cyclically. </p>\n'
-      },
-      'codeFiles': ['group-options.vue']
-    },
-    {
-      'demoId': 'radio-default',
+      'demoId': 'default-slot',
       'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
       'desc': {
         'zh-CN': '<p>通过 <code>default</code> 默认插槽列表。</p>\n',
         'en-US': '<p>by <code>default</code>default slot list. </p>\n'
       },
-      'codeFiles': ['radio-default.vue']
+      'codeFiles': ['default-slot.vue']
     }
   ],
   apis: [
@@ -136,39 +122,54 @@ export default {
       'type': 'component',
       'properties': [
         {
-          'name': 'label',
-          'type': 'boolean|number|string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': 'Radio 的 value', 'en-US': 'Radio value' },
+          'name': 'border',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否显示边框',
+            'en-US': 'Display Border'
+          },
           'demoId': 'with-border'
         },
-        {
-          'name': 'modelValue / v-model',
-          'type': '—',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '绑定值', 'en-US': 'Bound Value' },
-          'demoId': 'with-border'
-        },
-        {
-          'name': 'text',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '文本', 'en-US': 'Text' },
-          'demoId': 'radio-text'
-        },
         {
           'name': 'disabled',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '是否禁用', 'en-US': 'Disable' },
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否禁用',
+            'en-US': 'Disable'
+          },
           'demoId': 'dynamic-disable'
         },
         {
-          'name': 'border',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '是否显示边框', 'en-US': 'Display Border' },
-          'demoId': 'with-border'
+          'name': 'label',
+          'type': 'boolean | number | string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': 'radio选中时的值',
+            'en-US': 'Value when radio is selected'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'modelValue / v-model',
+          'type': 'boolean | number | string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '绑定值',
+            'en-US': 'Bound Value'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'name',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '原生 name 属性',
+            'en-US': 'Native name attribute'
+          },
+          'demoId': ''
         },
         {
           'name': 'size',
@@ -182,19 +183,25 @@ export default {
           'demoId': 'radio-size'
         },
         {
-          'name': 'name',
+          'name': 'text',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '原生 name 属性', 'en-US': 'Native name attribute' },
-          'demoId': 'radio-button1'
+          'desc': {
+            'zh-CN': '单选框文本内容',
+            'en-US': 'Radio Box Text Content'
+          },
+          'demoId': 'radio-text'
         }
       ],
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value) => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '绑定值变化时触发的事件', 'en-US': 'Event triggered when the binding value changes' },
+          'desc': {
+            'zh-CN': '绑定值变化时触发的事件',
+            'en-US': 'Event triggered when the binding value changes'
+          },
           'demoId': 'radio-events'
         }
       ],
@@ -203,10 +210,189 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': 'Radio的默认插槽', 'en-US': 'Radio default slot' },
-          'demoId': 'radio-default'
+          'desc': {
+            'zh-CN': 'Radio的默认插槽',
+            'en-US': 'Radio default slot'
+          },
+          'demoId': 'default-slot'
+        }
+      ],
+      'radio-group props': [
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否禁用单选组',
+            'en-US': 'Disable radio group'
+          },
+          'demoId': 'dynamic-disable'
+        },
+        {
+          'name': 'fill',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置按钮形式单选选中时的背景颜色',
+            'en-US': 'Set the background color for button form when radio selected'
+          },
+          'demoId': 'active-color'
+        },
+        {
+          'name': 'modelValue / v-model',
+          'type': 'string[] | number[]',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '单选组绑定值',
+            'en-US': 'Radio group binding value'
+          },
+          'demoId': 'radio-group'
+        },
+        {
+          'name': 'options',
+          'type': 'IRadioGroupOptions[]',
+          'typeAnchorName': 'IRadioGroupOptions',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '配置式单选组设置',
+            'en-US': 'Configuration based radio group settings'
+          },
+          'demoId': 'group-options'
+        },
+        {
+          'name': 'size',
+          'type': 'medium | small | mini',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '单选组尺寸',
+            'en-US': 'Radio Group Size'
+          },
+          'demoId': 'radio-size'
+        },
+        {
+          'name': 'text-color',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置按钮形式单选激活时的文本颜色',
+            'en-US': 'Set the text color for button format radio active'
+          },
+          'demoId': 'active-color'
+        },
+        {
+          'name': 'type',
+          'type': 'radio | button',
+          'defaultValue': 'radio',
+          'desc': {
+            'zh-CN': '设置配置式单选组的展示形式',
+            'en-US': 'Set the display format of configurable radio groups'
+          },
+          'demoId': 'group-options'
+        },
+        {
+          'name': 'vertical',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '垂直显示单选组',
+            'en-US': 'Vertical display of radio groups'
+          },
+          'demoId': 'vertical'
+        }
+      ],
+      'radio-group events': [
+        {
+          'name': 'change',
+          'type': '(value) => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '绑定值变化时触发的事件',
+            'en-US': 'Event triggered when the binding value changes'
+          },
+          'demoId': 'radio-events'
+        }
+      ],
+      'radio-group slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': 'RadioGroup的默认插槽',
+            'en-US': 'Radio group default slot'
+          },
+          'demoId': 'radio-group'
+        }
+      ],
+      'radio-button props': [
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否禁用',
+            'en-US': 'Is disabled'
+          },
+          'demoId': 'dynamic-disable'
+        },
+        {
+          'name': 'label',
+          'type': 'boolean | number | string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': 'Radio 的 value',
+            'en-US': 'Radio value'
+          },
+          'demoId': 'radio-group'
+        },
+        {
+          'name': 'name',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '原生name属性',
+            'en-US': 'Native name attribute'
+          },
+          'demoId': ''
+        },
+        {
+          'name': 'text',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '单选框文本内容',
+            'en-US': 'Radio Box Text Content'
+          },
+          'demoId': 'radio-text'
+        }
+      ],
+      'radio-button slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          'demoId': 'default-slot'
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IRadioGroupOptions',
+      type: 'interface',
+      code: `
+interface IRadioGroupOptions {
+  label: string // 选中时对应的值
+  text?: number // 描述文本
+  events?: {
+    click?: (e: Event) => void // 点击事件
+    change?: (e: Event) => void // change事件
+  }
+}`
+    }
   ]
 }

examples/sites/demos/pc/app/radio/with-border-composition-api.vue

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

examples/sites/demos/pc/app/radio/with-border.vue

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