From c0bc31f7f4e5dd06661a4c3aed8c3dfc010b7bfe Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 29 Apr 2026 15:46:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor!:=20=E7=A7=BB=E9=99=A4=20FaRadioGroup?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E7=9A=84=20orientation=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/src/radio-group/README.md | 17 +++++++----------
 packages/components/src/radio-group/index.vue | 10 +++-------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/radio-group/README.md b/packages/components/src/radio-group/README.md
index db2e3a81..1713a807 100644
--- a/packages/components/src/radio-group/README.md
+++ b/packages/components/src/radio-group/README.md
@@ -16,7 +16,6 @@
 |------|------|--------|------|
 | `options` | `RadioGroupOption[]` | **必需** | 单选组选项数据 |
 | `disabled` | `boolean` | `false` | 是否整体禁用 |
-| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | 排列方向 |
 | `dir` | `'ltr' \| 'rtl'` | - | 文本方向 |
 | `class` | `HTMLAttributes['class']` | - | 单选组容器类名 |
 | `optionClass` | `HTMLAttributes['class']` | - | 每个选项外层容器类名 |
@@ -116,7 +115,7 @@ const options = [
 </template>
 ```
 
-### 横向排列
+### 多列排列
 
 ```vue
 <script setup lang="ts">
@@ -132,9 +131,8 @@ const options = [
 <template>
   <FaRadioGroup
     v-model="value"
-    orientation="horizontal"
     :options="options"
-    class="gap-4"
+    class="gap-4 md:grid-cols-3"
   />
 </template>
 ```
@@ -167,10 +165,8 @@ const options = [
 <template>
   <FaRadioGroup
     v-model="value"
-    orientation="horizontal"
     :options="options"
-    class="gap-4"
-    option-class="w-full sm:w-[260px]"
+    class="gap-4 md:grid-cols-3"
   >
     <template #option="{ option, checked }">
       <div
@@ -221,6 +217,7 @@ function handleChange(value) {
 1. **初始化值**：组件当前通过 `v-model` 管理选中值，不再提供 `defaultValue`。
 2. **选项结构**：`options` 至少需要 `label` 和 `value` 两个字段。
 3. **禁用优先级**：组件整体 `disabled` 为 `true` 时，会覆盖单项可用状态。
-4. **描述文案布局**：存在 `description` 时，选项会自动切换为顶部对齐布局。
-5. **自定义插槽**：使用 `option` 插槽后，默认 `RadioGroupItem` 会隐藏，需要由插槽内容自行承担完整视觉表现。
-6. **点击区域**：默认选项内容包裹在 `Label` 中，点击文字区域也能切换选中状态。
+4. **布局控制**：通过 `class` 和 `optionClass` 自定义多列或卡片式排列，不再提供 `orientation`。
+5. **描述文案布局**：存在 `description` 时，选项会自动切换为顶部对齐布局。
+6. **自定义插槽**：使用 `option` 插槽后，默认 `RadioGroupItem` 会隐藏，需要由插槽内容自行承担完整视觉表现。
+7. **点击区域**：默认选项内容包裹在 `Label` 中，点击文字区域也能切换选中状态。
diff --git a/packages/components/src/radio-group/index.vue b/packages/components/src/radio-group/index.vue
index d7cc760c..0d9bb2e1 100644
--- a/packages/components/src/radio-group/index.vue
+++ b/packages/components/src/radio-group/index.vue
@@ -17,17 +17,14 @@ defineOptions({
   name: 'FaRadioGroup',
 })
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   options: RadioGroupOption[]
   disabled?: RadioGroupRootProps['disabled']
-  orientation?: RadioGroupRootProps['orientation']
   dir?: RadioGroupRootProps['dir']
   class?: HTMLAttributes['class']
   optionClass?: HTMLAttributes['class']
   itemClass?: HTMLAttributes['class']
-}>(), {
-  orientation: 'vertical',
-})
+}>()
 
 const emit = defineEmits<{
   change: [value: AcceptableValue | undefined]
@@ -76,7 +73,6 @@ function isOptionChecked(option: RadioGroupOption) {
   <RadioGroup
     v-model="value"
     :disabled="disabled"
-    :orientation="orientation"
     :dir="dir"
     :class="props.class"
   >
@@ -85,7 +81,7 @@ function isOptionChecked(option: RadioGroupOption) {
       :key="getOptionKey(option, index)"
       :class="
         cn(
-          'flex gap-3',
+          'flex gap-2',
           option.description ? 'items-start' : 'items-center',
           props.optionClass,
         )