From 57ed81ee16cc63bd937da8be7ddf7dd14fb2f991 Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Fri, 15 Dec 2023 15:43:18 +0800
Subject: [PATCH] chore(radio): split demo

---
 .../src/dentry/pages/radio/basic.vue          |  11 +
 .../src/dentry/pages/radio/disabled.vue       |  11 +
 .../src/dentry/pages/radio/event.vue          |  13 ++
 .../src/dentry/pages/radio/horizontal.vue     |  11 +
 .../src/dentry/pages/radio/icon-size.vue      |  11 +
 .../src/dentry/pages/radio/icon.vue           |  19 ++
 .../src/dentry/pages/radio/index.vue          | 154 ++++++--------
 .../src/dentry/pages/radio/position.vue       |  11 +
 .../src/dentry/pages/radio/shape.vue          |  11 +
 .../src/dentry/pages/radio/size.vue           |  23 +++
 packages/nutui-vite-plugins/src/markdown.ts   |   2 +-
 scripts/copyh5.cjs                            |   2 +-
 scripts/copytaro.cjs                          |   2 +-
 src/packages/__VUE/radio/doc.en-US.md         | 110 +++-------
 src/packages/__VUE/radio/doc.md               | 188 ++++--------------
 src/packages/__VUE/radio/doc.taro.md          | 188 ++++--------------
 16 files changed, 287 insertions(+), 480 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/disabled.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/event.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/horizontal.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/icon-size.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/icon.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/position.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/shape.vue
 create mode 100644 packages/nutui-taro-demo/src/dentry/pages/radio/size.vue

diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/basic.vue
new file mode 100644
index 0000000000..d206cd2c33
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/disabled.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/disabled.vue
new file mode 100644
index 0000000000..25d93627f3
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/disabled.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio disabled label="1">Option 1</nut-radio>
+    <nut-radio disabled label="2">Option 2</nut-radio>
+    <nut-radio disabled label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/event.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/event.vue
new file mode 100644
index 0000000000..d8196cef49
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/event.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-radio-group v-model="val" @change="onChange">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+const onChange = (v: string) => {
+  console.log(v);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/horizontal.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/horizontal.vue
new file mode 100644
index 0000000000..5944f0ef66
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/horizontal.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val" direction="horizontal">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/icon-size.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/icon-size.vue
new file mode 100644
index 0000000000..4ab70f1fa5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/icon-size.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1" icon-size="12">Option 1</nut-radio>
+    <nut-radio label="2" icon-size="12">Option 2</nut-radio>
+    <nut-radio label="3" icon-size="12">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/icon.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/icon.vue
new file mode 100644
index 0000000000..fef8483ed8
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/icon.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1">
+      Option 1
+      <template #icon><Checklist /></template>
+      <template #checkedIcon><Checklist color="red" /></template>
+    </nut-radio>
+    <nut-radio label="2">
+      Option 2
+      <template #icon><Checklist /></template>
+      <template #checkedIcon><Checklist color="red" /></template>
+    </nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Checklist } from '@nutui/icons-vue-taro';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
index 96ceef40c0..ed8c182362 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
@@ -1,102 +1,68 @@
 <template>
-  <Demo class="full">
-    <nut-cell-group title="基础用法">
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal" text-position="left">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal">
-          <nut-radio shape="button" label="1">选项1</nut-radio>
-          <nut-radio disabled shape="button" label="2">选项2</nut-radio>
-          <nut-radio shape="button" label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="水平使用">
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal" direction="horizontal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal" text-position="left" direction="horizontal">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal" direction="horizontal">
-          <nut-radio shape="button" label="1">选项1</nut-radio>
-          <nut-radio shape="button" label="2">选项2</nut-radio>
-          <nut-radio shape="button" label="3">选项3</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="自定义尺寸">
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal4">
-          <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
-          <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="自定义图标">
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal5">
-          <nut-radio label="1">
-            自定义图标
-            <template #icon> <Checklist /> </template>
-            <template #checkedIcon> <Checklist color="red" /> </template>
-          </nut-radio>
-          <nut-radio label="2">
-            自定义图标
-            <template #icon> <Checklist /> </template>
-            <template #checkedIcon> <Checklist color="red" /> </template>
-          </nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group title="触发事件">
-      <nut-cell>
-        <nut-radio-group v-model="state.radioVal6" @change="handleChange">
-          <nut-radio label="1">触发事件</nut-radio>
-          <nut-radio label="2">触发事件</nut-radio>
-        </nut-radio-group>
-      </nut-cell>
-      <nut-cell title="当前选中值" :desc="state.radioVal6"></nut-cell>
-    </nut-cell-group>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('horizontal') }}</h2>
+    <Horizontal />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('icon') }}</h2>
+    <Icon />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('iconSize') }}</h2>
+    <IconSize />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Checklist } from '@nutui/icons-vue-taro';
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Horizontal from './horizontal.vue';
+import Disabled from './disabled.vue';
+import Icon from './icon.vue';
+import Position from './position.vue';
+import IconSize from './icon-size.vue';
+import Shape from './shape.vue';
+import Size from './size.vue';
+import Event from './event.vue';
 
-const state = reactive({
-  radioVal: '1',
-  radioVal2: '2',
-  radioVal3: '1',
-  radioVal4: '1',
-  radioVal5: '1',
-  radioVal6: '1'
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    horizontal: '水平方向',
+    disabled: '禁用状态',
+    icon: '自定义图标',
+    position: '左侧文本',
+    iconSize: '图标尺寸',
+    shape: '设置形状',
+    size: '自定义按钮尺寸',
+    event: '触发事件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    horizontal: 'Horizontal',
+    disabled: 'Disabled',
+    icon: 'Custom Icon',
+    position: 'Text Position',
+    iconSize: 'Icon Size',
+    shape: 'Shape',
+    size: 'Custom Button Size',
+    event: 'Event'
+  }
 });
-const handleChange = (value: any) => {
-  console.log(value);
-};
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/position.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/position.vue
new file mode 100644
index 0000000000..a3dec00771
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/position.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val" text-position="left">
+    <nut-radio label="1">Option 1</nut-radio>
+    <nut-radio label="2">Option 2</nut-radio>
+    <nut-radio label="3">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/shape.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/shape.vue
new file mode 100644
index 0000000000..98f0df9a82
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/shape.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-radio-group v-model="val">
+    <nut-radio label="1" shape="button">Option 1</nut-radio>
+    <nut-radio label="2" shape="button">Option 2</nut-radio>
+    <nut-radio label="3" shape="button">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/size.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/size.vue
new file mode 100644
index 0000000000..f25e0b794d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/size.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-radio-group v-model="val1" direction="horizontal">
+    <nut-radio label="1" shape="button">Option 1</nut-radio>
+    <nut-radio label="2" shape="button">Option 2</nut-radio>
+    <nut-radio label="3" shape="button">Option 3</nut-radio>
+  </nut-radio-group>
+  <nut-radio-group v-model="val2" direction="horizontal">
+    <nut-radio label="1" shape="button" size="small">Option 1</nut-radio>
+    <nut-radio label="2" shape="button" size="small">Option 2</nut-radio>
+    <nut-radio label="3" shape="button" size="small">Option 3</nut-radio>
+  </nut-radio-group>
+  <nut-radio-group v-model="val3" direction="horizontal">
+    <nut-radio label="1" shape="button" size="mini">Option 1</nut-radio>
+    <nut-radio label="2" shape="button" size="mini">Option 2</nut-radio>
+    <nut-radio label="3" shape="button" size="mini">Option 3</nut-radio>
+  </nut-radio-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val1 = ref('1');
+const val2 = ref('1');
+const val3 = ref('1');
+</script>
diff --git a/packages/nutui-vite-plugins/src/markdown.ts b/packages/nutui-vite-plugins/src/markdown.ts
index a915ccbabd..4050ecb3aa 100644
--- a/packages/nutui-vite-plugins/src/markdown.ts
+++ b/packages/nutui-vite-plugins/src/markdown.ts
@@ -25,7 +25,7 @@ const TransformMarkdownDemo = (options: MarkdownOptions): Plugin => {
     transform(src, id) {
       if (fileRegex.test(id)) {
         return {
-          code: src.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
+          code: src.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
             const [comp, demo, type] = $1.split(' ');
             const docPath = type
               ? path.resolve(options.docTaroRoot, type, 'pages', comp, `${demo}.vue`)
diff --git a/scripts/copyh5.cjs b/scripts/copyh5.cjs
index fbbe731f2e..14f6d0412f 100644
--- a/scripts/copyh5.cjs
+++ b/scripts/copyh5.cjs
@@ -7,7 +7,7 @@ const replaceFile = (file) => {
     if (err) throw err;
   
     // 修改文件内容
-    data = data.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
+    data = data.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
       const [left, right] = $1.split(' ');
       const target = path.resolve('src/packages/__VUE/', left, 'demo', `${right}.vue`);
       let code = '';
diff --git a/scripts/copytaro.cjs b/scripts/copytaro.cjs
index 1f9e323b17..c6fb003dd2 100644
--- a/scripts/copytaro.cjs
+++ b/scripts/copytaro.cjs
@@ -7,7 +7,7 @@ const replaceFile = (file) => {
     if (err) throw err;
   
     // 修改文件内容
-    data = data.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
+    data = data.replace(/> demo: ([-0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
       const [left, right, type] = $1.split(' ');
       const target = path.resolve('packages/nutui-taro-demo/src', type, 'pages', left, `${right}.vue`);
       let code = '';
diff --git a/src/packages/__VUE/radio/doc.en-US.md b/src/packages/__VUE/radio/doc.en-US.md
index 0215af1f45..42834d477c 100644
--- a/src/packages/__VUE/radio/doc.en-US.md
+++ b/src/packages/__VUE/radio/doc.en-US.md
@@ -17,97 +17,49 @@ app.use(RadioGroup);
 
 ### Basic Usage
 
-Bind the **label** of the current option through **v-model**. And it must be used in combination with **nut-radio-group** and **nut-radio**
+Bind the `label` field of an option through `v-model`. `nut-radio` must be used in conjunction with `nut-radio-group`.
 
 > demo: radio basic
 
 ### Horizontal
 
+Set the direction through `direction`. The default value is `vertical` and can be set to `horizontal`.
+
 > demo: radio horizontal
 
-### Custom size
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Custom size">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-size="12">Custom size 12</nut-radio>
-        <nut-radio label="2" icon-size="12">Custom size 12</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+### Disabled
 
-:::
+> demo: radio disabled
 
 ### Custom icon
 
-Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Radio Custom icon">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1">
-          Custom icon
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-        <nut-radio label="2">
-          Custom icon
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Checklist } from '@nutui/icons-vue';
-const radioVal = ref('1');
-</script>
-```
+> demo: radio icon
 
-:::
-
-### Trigger change event
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Trigger event">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" @change="handleChange">
-        <nut-radio label="1">Trigger event</nut-radio>
-        <nut-radio label="2">Trigger event</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell title="Currently selected value" :desc="radioVal"></nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-const handleChange = (value) => {
-  console.log(value);
-};
-</script>
-```
+### Text Position
+
+Set the text position through `text-position`. The default value is `right` and can be set to `left`.
+
+> demo: radio position
+
+### Icon Size
+
+> demo: radio icon-size
+
+### Shape
+
+Set the Radio shape through `shape`. The default value is `round` and can be set to `button`.
+
+> demo: radio shape
+
+### Custom Button Size v4.2.4
+
+Set the Radio size through `size`, which only takes effect when `shape` is `button`.
+
+> demo: radio size
+
+### Event Trigger
 
-:::
+> demo: radio event
 
 ## API
 
@@ -119,7 +71,7 @@ const handleChange = (value) => {
 | icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` |
 | label | Radio box ID | string \| number \| boolean | - |
 | shape | Shape, optional values are `button`、`round` | string | `round` |
-| size | Can be set to `small` `mini` `normal`, when `shape` = `button` | string | `normal` |
+| size`v4.2.4` | Can be set to `small` `mini` `normal`, when `shape` = `button` | string | `normal` |
 
 ### Radio Slots
 
diff --git a/src/packages/__VUE/radio/doc.md b/src/packages/__VUE/radio/doc.md
index 201a7d622a..19c5a0c2e9 100644
--- a/src/packages/__VUE/radio/doc.md
+++ b/src/packages/__VUE/radio/doc.md
@@ -17,165 +17,49 @@ app.use(RadioGroup);
 
 ### 基础用法
 
-通过 **v-model** 绑定值当前选项的 **label** 。并且必须 **nut-radio-group** 和 **nut-radio** 相结合进行使用
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="基础用法">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio disabled label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" text-position="left">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio disabled label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
-        <nut-radio disabled shape="button" label="2">选项2</nut-radio>
-        <nut-radio shape="button" label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+通过 `v-model` 绑定某个选项的 `label` 字段。`nut-radio` 必须与 `nut-radio-group` 相结合进行使用。
 
-:::
-
-### 水平使用
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="水平使用">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" direction="horizontal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" direction="horizontal">
-        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
-        <nut-radio shape="button" label="2">选项2</nut-radio>
-        <nut-radio shape="button" label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+> demo: radio basic
 
-:::
-
-### 自定义尺寸
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="自定义尺寸">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
-        <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+### 水平方向
+
+通过 `direction` 设置方向，默认值为 `vertical`，可设置为 `horizontal`。
+
+> demo: radio horizontal
 
-:::
+### 禁用状态
+
+> demo: radio disabled
 
 ### 自定义图标
 
-通过 `slot` 自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Radio自定义图标">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1">
-          自定义图标
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-        <nut-radio label="2">
-          自定义图标
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Checklist } from '@nutui/icons-vue';
-const radioVal = ref('1');
-</script>
-```
+> demo: radio icon
 
-:::
-
-### 触发 change 事件
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="触发事件">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" @change="handleChange">
-        <nut-radio label="1">触发事件</nut-radio>
-        <nut-radio label="2">触发事件</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell title="当前选中值" :desc="radioVal"></nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-const handleChange = (value) => {
-  console.log(value);
-};
-</script>
-```
+### 左侧文本
+
+通过 `text-position` 设置文本位置，默认值为 `right`，可设置为 `left`。
+
+> demo: radio position
+
+### 图标尺寸
+
+> demo: radio icon-size
+
+### 设置形状
+
+通过 `shape` 设置 Radio 形状，默认值为 `round`，可设置为 `button`。
+
+> demo: radio shape
+
+### 自定义按钮尺寸 v4.2.4
+
+通过 `size` 设置 Radio 大小，仅在 `shape` 为 `button` 时生效。
+
+> demo: radio size
+
+### 触发事件
 
-:::
+> demo: radio event
 
 ## API
 
@@ -187,7 +71,7 @@ const handleChange = (value) => {
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
 | label | 单选框标识 | string \| number \| boolean | - |
 | shape | 形状，可选值为 `button`、`round` | string | `round` |
-| size | 尺寸，可选值为 `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |
+| size`v4.2.4` | 尺寸，可选值为 `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |
 
 ### Radio Slots
 
diff --git a/src/packages/__VUE/radio/doc.taro.md b/src/packages/__VUE/radio/doc.taro.md
index 6dacd4aad7..8c8b530ff9 100644
--- a/src/packages/__VUE/radio/doc.taro.md
+++ b/src/packages/__VUE/radio/doc.taro.md
@@ -17,165 +17,49 @@ app.use(RadioGroup);
 
 ### 基础用法
 
-通过 **v-model** 绑定值当前选项的 **label** 。并且必须 **nut-radio-group** 和 **nut-radio** 相结合进行使用
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="基础用法">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio disabled label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" text-position="left">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio disabled label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
-        <nut-radio disabled shape="button" label="2">选项2</nut-radio>
-        <nut-radio shape="button" label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+通过 `v-model` 绑定某个选项的 `label` 字段。`nut-radio` 必须与 `nut-radio-group` 相结合进行使用。
 
-:::
-
-### 水平使用
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="水平使用">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" direction="horizontal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
-        <nut-radio label="1">选项1</nut-radio>
-        <nut-radio label="2">选项2</nut-radio>
-        <nut-radio label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" direction="horizontal">
-        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
-        <nut-radio shape="button" label="2">选项2</nut-radio>
-        <nut-radio shape="button" label="3">选项3</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+> demo: radio basic
 
-:::
-
-### 自定义尺寸
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="自定义尺寸">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
-        <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-</script>
-```
+### 水平方向
+
+通过 `direction` 设置方向，默认值为 `vertical`，可设置为 `horizontal`。
+
+> demo: radio horizontal
 
-:::
+### 禁用状态
+
+> demo: radio disabled
 
 ### 自定义图标
 
-通过 `slot` 自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="Radio自定义图标">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal">
-        <nut-radio label="1">
-          自定义图标
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-        <nut-radio label="2">
-          自定义图标
-          <template #icon> <Checklist /> </template>
-          <template #checkedIcon> <Checklist color="red" /> </template>
-        </nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Checklist } from '@nutui/icons-vue-taro';
-const radioVal = ref('1');
-</script>
-```
+> demo: radio icon
 
-:::
-
-### 触发 change 事件
-
-:::demo
-
-```vue
-<template>
-  <nut-cell-group title="触发事件">
-    <nut-cell>
-      <nut-radio-group v-model="radioVal" @change="handleChange">
-        <nut-radio label="1">触发事件</nut-radio>
-        <nut-radio label="2">触发事件</nut-radio>
-      </nut-radio-group>
-    </nut-cell>
-    <nut-cell title="当前选中值" :desc="radioVal"></nut-cell>
-  </nut-cell-group>
-</template>
-<script setup>
-import { ref } from 'vue';
-const radioVal = ref('1');
-const handleChange = (value) => {
-  console.log(value);
-};
-</script>
-```
+### 左侧文本
+
+通过 `text-position` 设置文本位置，默认值为 `right`，可设置为 `left`。
+
+> demo: radio position
+
+### 图标尺寸
+
+> demo: radio icon-size
+
+### 设置形状
+
+通过 `shape` 设置 Radio 形状，默认值为 `round`，可设置为 `button`。
+
+> demo: radio shape
+
+### 自定义按钮尺寸 v4.2.4
+
+通过 `size` 设置 Radio 大小，仅在 `shape` 为 `button` 时生效。
+
+> demo: radio size
+
+### 触发事件
 
-:::
+> demo: radio event
 
 ## API
 
@@ -187,7 +71,7 @@ const handleChange = (value) => {
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
 | label | 单选框标识 | string \| number \| boolean | - |
 | shape | 形状，可选值为 `button`、`round` | string | `round` |
-| size | 尺寸，可选值为 `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |
+| size`v4.2.4` | 尺寸，可选值为 `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |
 
 ### Radio Slots