u

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 最简用法：options 传原始值数组，选中值用 v-model 双向绑定
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const value = ref('list')
+</script>
+
+<template>
+  <div>
+    <G3Segmented v-model="value" :options="['list', 'board', 'timeline']" />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">当前视图：{{ value }}</p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/segmented/block.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// block：撑满父容器，各项等分空间（常用于移动端 / 表单顶部的模式切换）
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const value = ref('login')
+</script>
+
+<template>
+  <div style="width: 320px">
+    <G3Segmented
+      v-model="value"
+      block
+      :options="[
+        { label: '账号登录', value: 'login' },
+        { label: '扫码登录', value: 'qrcode' },
+      ]"
+    />
+  </div>
+</template>

code/g3soft-libs/docs/examples/segmented/custom-label.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// #label 插槽：完全自定义每项内容，作用域参数为 { option, index, checked }
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const value = ref(1)
+
+const options = [
+  { value: 1, label: '待办', count: 8 },
+  { value: 2, label: '进行中', count: 3 },
+  { value: 3, label: '已完成', count: 12 },
+]
+</script>
+
+<template>
+  <G3Segmented v-model="value" :options="options">
+    <template #label="{ option, checked }">
+      <span style="display: inline-flex; align-items: center; gap: 6px">
+        {{ (option as { label: string }).label }}
+        <span
+          :style="{
+            padding: '0 6px',
+            borderRadius: '8px',
+            fontSize: '12px',
+            background: checked ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.06)',
+          }"
+        >
+          {{ (option as { count: number }).count }}
+        </span>
+      </span>
+    </template>
+  </G3Segmented>
+</template>

code/g3soft-libs/docs/examples/segmented/options.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 对象形态：自定义 label、禁用某项、带图标
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+import { AlignCenter, AlignLeft, AlignRight } from '@lucide/vue'
+
+const value = ref('left')
+
+const options = [
+  { label: '左对齐', value: 'left', icon: AlignLeft },
+  { label: '居中', value: 'center', icon: AlignCenter },
+  { label: '右对齐', value: 'right', icon: AlignRight },
+  { label: '两端对齐（未实现）', value: 'justify', disabled: true },
+]
+</script>
+
+<template>
+  <G3Segmented v-model="value" :options="options" />
+</template>

code/g3soft-libs/docs/examples/segmented/shape.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// shape：default 跟随控件圆角（6px），round 为全圆角胶囊
+import { ref } from 'vue'
+import { G3Segmented, G3Space } from '@g3soft/ui'
+
+const a = ref('day')
+const b = ref('day')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3Segmented v-model="a" :options="['日', '周', '月']" />
+    <G3Segmented v-model="b" :options="['日', '周', '月']" shape="round" />
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/segmented/uncontrolled.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// 不传 modelValue 即非受控：组件内部维护选中值，只通过 change 通知
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const current = ref('hot')
+
+function onChange(value: string | number | boolean) {
+  current.value = String(value)
+}
+</script>
+
+<template>
+  <div>
+    <G3Segmented :options="['hot', 'new', 'top']" @change="onChange" />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">change 收到：{{ current }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// vertical：纵向排列，滑块上下移动（适合做侧边视图切换）
+import { ref } from 'vue'
+import { G3Segmented } from '@g3soft/ui'
+
+const value = ref('outline')
+</script>
+
+<template>
+  <G3Segmented
+    v-model="value"
+    vertical
+    :options="[
+      { label: '大纲', value: 'outline' },
+      { label: '属性', value: 'props' },
+      { label: '样式', value: 'style' },
+    ]"
+  />
+</template>