u

code/g3soft-libs/docs/examples/radio/basic.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// G3Radio 必须放在 G3RadioGroup 里才互斥；组内可单独禁用某项
+import { ref } from 'vue'
+import { G3Radio, G3RadioGroup } from '@g3soft/ui'
+
+const value = ref('monthly')
+</script>
+
+<template>
+  <div>
+    <G3RadioGroup v-model="value">
+      <G3Radio value="monthly">按月付费</G3Radio>
+      <G3Radio value="yearly">按年付费（省 2 个月）</G3Radio>
+      <G3Radio value="once" disabled>一次性买断（暂不可选）</G3Radio>
+    </G3RadioGroup>
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">选中：{{ value }}</p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/radio/cards.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// 用默认插槽写富内容：把 Radio 当「卡片选择器」用
+import { ref } from 'vue'
+import { G3Radio, G3RadioGroup } from '@g3soft/ui'
+
+const plan = ref('pro')
+</script>
+
+<template>
+  <G3RadioGroup v-model="plan" style="align-items: flex-start; gap: 12px">
+    <G3Radio
+      value="basic"
+      style="flex: 1; padding: 12px; border: 1px solid #d9d9d9; border-radius: 8px"
+    >
+      <span style="display: block">
+        <strong>基础版</strong>
+        <span style="display: block; color: #6b7280; font-size: 12px">单项目 · 1GB 存储</span>
+      </span>
+    </G3Radio>
+
+    <G3Radio
+      value="pro"
+      style="flex: 1; padding: 12px; border: 1px solid #d9d9d9; border-radius: 8px"
+    >
+      <span style="display: block">
+        <strong>专业版</strong>
+        <span style="display: block; color: #6b7280; font-size: 12px">多项目 · 100GB 存储</span>
+      </span>
+    </G3Radio>
+  </G3RadioGroup>
+</template>

code/g3soft-libs/docs/examples/radio/vertical.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// 纵向排列与整组禁用
+import { ref } from 'vue'
+import { G3Radio, G3RadioGroup, G3Space } from '@g3soft/ui'
+
+const layout = ref(1)
+const disabledValue = ref(2)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="20" style="display: flex">
+    <!-- 组默认水平换行排列；纵向需要自己包一层纵向容器 -->
+    <G3RadioGroup v-model="layout" style="flex-direction: column; align-items: flex-start; gap: 8px">
+      <G3Radio :value="1">紧凑视图</G3Radio>
+      <G3Radio :value="2">标准视图</G3Radio>
+      <G3Radio :value="3">宽松视图</G3Radio>
+    </G3RadioGroup>
+
+    <G3RadioGroup v-model="disabledValue" disabled>
+      <G3Radio :value="1">整组禁用 A</G3Radio>
+      <G3Radio :value="2">整组禁用 B</G3Radio>
+    </G3RadioGroup>
+  </G3Space>
+</template>