u

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 最基础用法：v-model 绑 boolean；change 回传新值与原生事件
+import { ref } from 'vue'
+import { G3Switch } from '@g3soft/ui'
+
+const enabled = ref(true)
+</script>
+
+<template>
+  <div>
+    <G3Switch v-model="enabled">启用通知</G3Switch>
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">状态：{{ enabled ? '开' : '关' }}</p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/switch/disabled.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// disabled：整项禁用；无文字时按钮本身即开关，有文字时文字可点击（label 语义）
+import { G3Switch, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space :size="[16, 12]" align="center" wrap>
+    <G3Switch :model-value="false" disabled />
+    <G3Switch :model-value="true" disabled />
+    <G3Switch :model-value="true" disabled>禁用且带文字</G3Switch>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/switch/in-form.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// 与 Form 配合：FormItem 负责 label 与校验，Switch 只提供值
+import { reactive } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Message, G3Switch } from '@g3soft/ui'
+
+const model = reactive({ notify: true, public: false })
+
+function onSubmit(values: Record<string, unknown>) {
+  G3Message.success(`提交：${JSON.stringify(values)}`)
+}
+</script>
+
+<template>
+  <G3Form :model="model" :label-width="96" style="max-width: 360px" @submit="onSubmit">
+    <G3FormItem name="notify" label="接收通知">
+      <G3Switch v-model="model.notify" />
+    </G3FormItem>
+    <G3FormItem name="public" label="公开可见" help="开启后所有成员都能看到该资源">
+      <G3Switch v-model="model.public" />
+    </G3FormItem>
+    <G3FormItem>
+      <G3Button html-type="submit">保存</G3Button>
+    </G3FormItem>
+  </G3Form>
+</template>