u

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 单选布尔值：v-model 绑 boolean
+import { ref } from 'vue'
+import { G3Checkbox } from '@g3soft/ui'
+
+const agreed = ref(false)
+</script>
+
+<template>
+  <div>
+    <G3Checkbox v-model="agreed">我已阅读并同意服务条款</G3Checkbox>
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">agreed = {{ agreed }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// disabled：整项禁用；配合 Form 时由 FormItem 的校验状态驱动
+import { G3Checkbox, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="8" style="display: flex">
+    <G3Checkbox :model-value="false" disabled>未选中且禁用</G3Checkbox>
+    <G3Checkbox :model-value="true" disabled>已选中且禁用</G3Checkbox>
+    <G3Checkbox :model-value="false" :indeterminate="true" disabled>半选且禁用</G3Checkbox>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/checkbox/indeterminate.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// indeterminate：半选状态，用于「全选」与部分选中的联动
+import { computed, ref } from 'vue'
+import { G3Checkbox, G3Space } from '@g3soft/ui'
+
+const all = ref(['read', 'write'])
+const checkedKeys = ref<string[]>(['read'])
+
+const options = [
+  { label: '可读', value: 'read' },
+  { label: '可写', value: 'write' },
+  { label: '可删除', value: 'delete' },
+]
+
+const isAllChecked = computed(() => checkedKeys.value.length === options.length)
+const isIndeterminate = computed(
+  () => checkedKeys.value.length > 0 && checkedKeys.value.length < options.length,
+)
+
+function toggleAll(checked: boolean) {
+  checkedKeys.value = checked ? options.map((item) => item.value) : []
+}
+
+function toggleOne(value: string, checked: boolean) {
+  checkedKeys.value = checked
+    ? [...checkedKeys.value, value]
+    : checkedKeys.value.filter((item) => item !== value)
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="8" style="display: flex">
+    <!-- 全选：半选时显示减号 -->
+    <G3Checkbox
+      :model-value="isAllChecked"
+      :indeterminate="isIndeterminate"
+      @change="toggleAll"
+    >
+      全选（{{ checkedKeys.length }} / {{ options.length }}）
+    </G3Checkbox>
+
+    <div style="padding-left: 24px">
+      <G3Space direction="vertical" :size="8" style="display: flex">
+        <G3Checkbox
+          v-for="option in options"
+          :key="option.value"
+          :model-value="checkedKeys.includes(option.value)"
+          @change="(checked: boolean) => toggleOne(option.value, checked)"
+        >
+          {{ option.label }}
+        </G3Checkbox>
+      </G3Space>
+    </div>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/checkbox/rich-label.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 默认插槽可以放富内容，整块区域都可点击
+import { ref } from 'vue'
+import { G3Checkbox } from '@g3soft/ui'
+
+const notify = ref(true)
+</script>
+
+<template>
+  <div style="max-width: 320px">
+    <G3Checkbox v-model="notify" style="align-items: flex-start">
+      <span style="display: block">
+        <strong>接收构建通知</strong>
+        <span style="display: block; color: #6b7280; font-size: 12px; font-weight: 400">
+          构建失败时通过邮件与站内信通知项目成员
+        </span>
+      </span>
+    </G3Checkbox>
+  </div>
+</template>