diff --git a/docs/components/form/checkbox.md b/docs/components/form/checkbox.md
index ea2d71e6..25c9e27d 100644
--- a/docs/components/form/checkbox.md
+++ b/docs/components/form/checkbox.md
@@ -140,20 +140,40 @@ const checkedGroup = ref(['Vue'])
 
 :::
 
+## 全选 / 半选 (indeterminate)
+
+::: raw
+
+<CodeRunner title="全选 / 半选 (indeterminate)" codeKey="checkbox-indeterminate">
+    <ShadcnCheckbox :modelValue="checkAll"
+                    :value="true"
+                    :indeterminate="isIndeterminate"
+                    @update:modelValue="onCheckAllChange">全选
+    </ShadcnCheckbox>
+    <ShadcnDivider/>
+    <ShadcnCheckboxGroup v-model="checkedGroup">
+      <ShadcnCheckbox value="Vue">Vue</ShadcnCheckbox>
+      <ShadcnCheckbox value="Nuxt">Nuxt</ShadcnCheckbox>
+    </ShadcnCheckboxGroup>
+</CodeRunner>
+
+:::
+
 ## 复选框 (Checkbox) 属性
 
 <ApiTable title="复选框 (Checkbox) 属性"
-    :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
     :columns="[
-        ['modelValue', '当前组件的值', 'any', '-', '-', '-'],
-        ['value', '组件项的值', 'any', '-', '-', '-'],
-        ['disabled', '是否为禁用', 'boolean', 'false', '-', '-'],
-        ['size', '组件的尺寸', 'enum', 'default', '-', 'small | default | large'],
-        ['type', '组件的类型', 'enum', 'primary', '-', 'primary | success | warning | error'],
+        ['modelValue', '当前组件的值', 'any', '-', '-'],
+        ['value', '组件项的值', 'any', '-', '-'],
+        ['disabled', '是否为禁用', 'boolean', 'false', '-'],
+        ['size', '组件的尺寸', 'enum', 'default', 'small | default | large'],
+        ['type', '组件的类型', 'enum', 'primary', 'primary | success | warning | error'],
+        ['indeterminate', '是否为半选/全选', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
-## 复选框组 (Checkbox Group) 属性
+<br />
 
 <ApiTable title="复选框组 (Checkbox Group) 属性"
     :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
@@ -171,7 +191,7 @@ const checkedGroup = ref(['Vue'])
     ]">
 </ApiTable>
 
-## 复选框组 (Checkbox Group) 事件
+<br />
 
 <ApiTable title="复选框组 (Checkbox Group) 事件"
     :headers="['事件', '描述', '回调参数']"
@@ -191,8 +211,26 @@ const checkedGroup = ref(['Vue'])
 </ApiTable>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const checked = ref('Vue')
 const checkedGroup = ref(['Vue'])
+
+// 所有选项
+const options = ['Vue', 'Nuxt']
+
+// 全选状态
+const checkAll = computed(() => {
+  return checkedGroup.value.length === options.length
+})
+
+// 计算半选状态
+const isIndeterminate = computed(() => {
+  return checkedGroup.value.length > 0 && checkedGroup.value.length < options.length
+})
+
+// 全选/取消全选处理
+const onCheckAllChange = (checked: boolean) => {
+  checkedGroup.value = checked ? [...options] : []
+}
 </script>
\ No newline at end of file
diff --git a/playground/src/example/checkbox/indeterminate.vue b/playground/src/example/checkbox/indeterminate.vue
new file mode 100644
index 00000000..227e5efd
--- /dev/null
+++ b/playground/src/example/checkbox/indeterminate.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="p-32">
+    <ShadcnCheckbox :modelValue="checkAll"
+                    :value="true"
+                    :indeterminate="isIndeterminate"
+                    @update:modelValue="onCheckAllChange">全选
+    </ShadcnCheckbox>
+
+    <ShadcnDivider/>
+
+    <ShadcnCheckboxGroup v-model="checkedGroup">
+      <ShadcnCheckbox value="Vue">Vue</ShadcnCheckbox>
+      <ShadcnCheckbox value="Nuxt">Nuxt</ShadcnCheckbox>
+    </ShadcnCheckboxGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+// 所有选项
+const options = ['Vue', 'Nuxt']
+
+// 选中的值
+const checkedGroup = ref<string[]>([])
+
+// 全选状态
+const checkAll = computed(() => {
+  return checkedGroup.value.length === options.length
+})
+
+// 计算半选状态
+const isIndeterminate = computed(() => {
+  return checkedGroup.value.length > 0 && checkedGroup.value.length < options.length
+})
+
+// 全选/取消全选处理
+const onCheckAllChange = (checked: boolean) => {
+  checkedGroup.value = checked ? [...options] : []
+}
+</script>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 33006f9f..388d5123 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,153 +1,17 @@
 <template>
-  <div class="p-32 space-y-4">
-    <ShadcnCodeEditor :auto-complete-config="{
-                          endpoint: [
-                              {
-                                  url: 'http://jsonplaceholder.typicode.com/posts',
-                                  transform: (data: any) => data.map(item => ({
-                                      label: item.title,
-                                      insertText: item.body,
-                                      detail: item.title
-                                  }))
-                              },
-                              {
-                                url: 'https://jsonplaceholder.typicode.com/photos',
-                                transform: (data: any) => data.map(item => ({
-                                    label: item.id,
-                                    insertText: item.url,
-                                    detail: item.id
-                                }))
-                              }
-                          ],
-                          method: 'GET',
-                          trigger: ['.', '@'],
-                          transform: (allResults: any[]) => {
-                              return allResults
-                          }
-                          // requestParams: (context) => ({
-                          //     word: context.word,
-                          //     line: context.position.lineNumber.toString()
-                          // }),
-                          // requestBody: (context) => ({
-                          //     code: context.modelValue,
-                          //     position: context.position
-                          // })
-                        }"/>
-
-    <ShadcnDataTable :columns="columns"
-                     :data="data"
-                     height="300"
-                     row-selection="multipleRow"
-                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
-                     :column-move="true"
-                     :context-menu="true"
-                     @on-cell-click="handleCellClick"
-                     @on-resizable="handleResizable"
-                     @on-page-change="console.log('页码改变' + $event)"
-                     @on-size-change="console.log('每页条数改变' + $event)"
-                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)"
-                     @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
-                     @on-cell-edit="onCellEdit"
-                     @on-row-edit="onRowEdit">
-    </ShadcnDataTable>
+  <div class="p-32">
+    <ShadcnSwitch v-model="value">
+    </ShadcnSwitch>
+
+    <ShadcnSwitch v-model="value">
+      <template #open>我是左面很长的一段信息</template>
+      <template #close>我是右面很长的一段信息</template>
+    </ShadcnSwitch>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref } from 'vue'
-import { setLocale } from '@/utils/locale.ts'
-import TableCellSelectEditor from '@/ui/data-table/components/TableCellSelectEditor.vue'
-
-setLocale('zh-CN')
-
-const { proxy } = getCurrentInstance()!
-
-const columns = ref([
-  { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
-  {
-    key: 'title', label: '标题', editable: true, cellEditor: TableCellSelectEditor,
-    cellEditorProps: {
-      options: [
-        { label: 'Active', value: 'active' },
-        { label: 'Inactive', value: 'inactive' }
-      ]
-    }
-  },
-  { key: 'author', label: '作者', sortable: true, resizable: true },
-  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true, editable: true },
-  { key: 'category', label: '分类', sortable: true, align: 'center' },
-  { key: 'date', label: '发布日期', sortable: true }
-])
-
-const data = ref([
-  {
-    index: 1,
-    title: '深入理解 Vue.js 响应式系统的原理与实现',
-    author: '张文豪',
-    description: 'Vue.js 的响应式系统是其最核心的特性之一，本文将深入探讨其实现原理。从最基本的 Object.defineProperty 到 Proxy 的使用，从依赖收集到派发更新，从计算属性到监听器，我们会逐步分析响应式系统的每个环节。同时也会讨论 Vue 3 中新的响应式系统的改进和优化，以及如何在实际开发中更好地利用响应式特性。',
-    category: '前端开发',
-    date: '2024-01-15'
-  },
-  {
-    index: 2,
-    title: 'TypeScript 高级特性与实践指南',
-    author: '李明',
-    description: 'TypeScript 作为 JavaScript 的超集，为我们提供了强大的类型系统和面向对象编程的能力。本文将详细介绍 TypeScript 中的高级类型、泛型、装饰器等特性，并结合实际项目经验，探讨如何在大型项目中更好地应用这些特性。我们还会分享一些在实际开发中遇到的类型设计难题及其解决方案，帮助开发者更好地理解和使用 TypeScript。',
-    category: '编程语言',
-    date: '2024-01-20'
-  },
-  {
-    index: 3,
-    title: '现代前端工程化实践：从搭建到部署',
-    author: '王建国',
-    description: '随着前端项目的复杂度不断提升，工程化已经成为必不可少的环节。本文将从项目初始化开始，详细讲解现代前端工程化的各个方面，包括构建工具的选择与配置、代码规范的制定与执行、测试框架的搭建、CI/CD 流程的设计等。通过实际案例，展示如何搭建一个完整的前端工程化体系，提高开发效率和代码质量。',
-    category: '工程化',
-    date: '2024-01-25'
-  },
-  {
-    index: 4,
-    title: '微前端架构实践与性能优化',
-    author: '赵云',
-    description: '微前端作为一种新兴的架构模式，能够帮助我们更好地管理大型前端应用。本文将分享微前端的实践经验，包括框架选型、应用拆分策略、路由管理、通信机制等关键问题的解决方案。同时，我们还会深入讨论微前端架构下的性能优化策略，包括资源加载优化、预加载策略、缓存管理等，帮助开发者构建高性能的微前端应用。',
-    category: '架构设计',
-    date: '2024-01-30'
-  },
-  {
-    index: 5,
-    title: 'React 性能优化最佳实践',
-    author: '陈思',
-    description: '在 React 应用开发中，性能优化是一个永恒的主题。本文将深入探讨 React 应用的性能优化技巧，从组件渲染优化到状态管理，从代码分割到懒加载，从服务端渲染到缓存策略，我们会通过具体的案例来展示各种优化手段的效果和实现方法。同时也会介绍一些性能检测和分析工具，帮助开发者更好地发现和解决性能问题。',
-    category: '性能优化',
-    date: '2024-02-01'
-  }
-])
-
-for (let i = 0; i < 1000; i++) {
-  const randomIndex = Math.floor(Math.random() * data.value.length)
-  const item = { ...data.value[randomIndex] }
-  item.index = data.value.length + 1
-  data.value.push(item)
-}
-
-const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
-  if (playload) {
-    console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
-  }
-}
-
-const handleResizable = (column: any, width: number) => {
-  console.log(`调整了 ${ column.label } 列的宽度为 ${ width }`)
-}
-
-// @ts-ignore
-const onCellEdit = (value: any) => proxy?.$Message.success({
-  content: `编辑的列 [ ${ value.key } ] 的值为 [ ${ value.value } ]`,
-  showIcon: true
-})
+import { ref } from 'vue'
 
-// @ts-ignore
-const onRowEdit = (value: any) => proxy?.$Message.success({
-  content: `编辑的行 [ ${ value.rowIndex } ] 的值为 [ ${ JSON.stringify(value.values) } ]`,
-  showIcon: true
-})
+const value = ref(null)
 </script>
\ No newline at end of file
diff --git a/src/ui/checkbox/ShadcnCheckbox.vue b/src/ui/checkbox/ShadcnCheckbox.vue
index 6d091727..8f788c20 100644
--- a/src/ui/checkbox/ShadcnCheckbox.vue
+++ b/src/ui/checkbox/ShadcnCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="[
-                'inline-flex items-center',
+                'inline-flex items-center w-fit',
                 {
                   'cursor-pointer': !disabled,
                   'cursor-not-allowed opacity-50': disabled
@@ -17,13 +17,24 @@
     <div :class="['flex items-center justify-center rounded border transition-colors duration-300',
                   Size[size],
                   {
-                    'bg-blue-400': type === 'primary' && isChecked,
-                    'bg-green-400': type === 'success' && isChecked,
-                    'bg-yellow-400': type === 'warning' && isChecked,
-                    'bg-red-400': type === 'error' && isChecked,
-                    'bg-white': !isChecked
+                    'bg-blue-400': type === 'primary' && (isChecked || indeterminate),
+                    'bg-green-400': type === 'success' && (isChecked || indeterminate),
+                    'bg-yellow-400': type === 'warning' && (isChecked || indeterminate),
+                    'bg-red-400': type === 'error' && (isChecked || indeterminate),
+                    'bg-white': !isChecked && !indeterminate
                   }]">
-      <svg v-if="isChecked"
+      <svg v-if="indeterminate"
+           xmlns="http://www.w3.org/2000/svg"
+           fill="none"
+           viewBox="0 0 24 24"
+           stroke="currentColor"
+           :class="['text-white', ToggleSize[size]]">
+        <path stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 12h14"/>
+      </svg>
+      <svg v-else-if="isChecked"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
@@ -70,12 +81,14 @@ const props = withDefaults(defineProps<{
   value?: any,
   disabled?: boolean,
   size?: keyof typeof Size,
-  type?: 'primary' | 'success' | 'warning' | 'error'
+  type?: 'primary' | 'success' | 'warning' | 'error',
+  indeterminate?: boolean
 }>(), {
   modelValue: null,
   disabled: false,
   size: 'default',
-  type: 'primary'
+  type: 'primary',
+  indeterminate: false
 })
 
 // Get the checkboxGroup data
@@ -103,4 +116,4 @@ const onChange = () => {
     }
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/code-editor/ShadcnCodeEditor.vue b/src/ui/code-editor/ShadcnCodeEditor.vue
index a4450123..46cee6be 100644
--- a/src/ui/code-editor/ShadcnCodeEditor.vue
+++ b/src/ui/code-editor/ShadcnCodeEditor.vue
@@ -87,7 +87,7 @@ const initEditor = () => {
     acceptSuggestionOnEnter: 'off',
     hover: {
       enabled: false
-    },
+    }
   }
 
   editor = monaco.editor.create(editorContainer.value, options)
diff --git a/src/ui/switch/ShadcnSwitch.vue b/src/ui/switch/ShadcnSwitch.vue
index 4070becb..735febdf 100644
--- a/src/ui/switch/ShadcnSwitch.vue
+++ b/src/ui/switch/ShadcnSwitch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="['relative inline-flex items-center',
-                Size[size],
+  <div :class="[
+                'relative inline-flex items-center',
                 {
                   'cursor-pointer': !disabled,
                   'cursor-not-allowed opacity-50': disabled
@@ -9,45 +9,50 @@
        @click="toggleSwitch">
 
     <!-- Switch track -->
-    <div :class="['relative w-full flex items-center justify-between',
-                  Size[size]
+    <div :class="['relative flex items-center justify-between rounded-full transition-colors duration-300',
+                  {
+                    'pr-1': !isActive,
+                    'pl-1': isActive
+                  },
+                  Size[size],
+                  {
+                    'bg-blue-400': type === 'primary' && isActive,
+                    'bg-green-400': type === 'success' && isActive,
+                    'bg-yellow-400': type === 'warning' && isActive,
+                    'bg-red-400': type === 'error' && isActive,
+                    'bg-gray-300': !isActive
+                  }
                 ]">
-
-      <div v-if="$slots.close && isActive" class="absolute left-0 pl-1.5 text-white text-xs z-10">
-        <slot name="close"/>
-      </div>
-
-      <div :class="['absolute w-full h-full rounded-full transition-colors duration-300',
-                    {
-                      'bg-blue-400': type === 'primary' && isActive,
-                      'bg-green-400': type === 'success' && isActive,
-                      'bg-yellow-400': type === 'warning' && isActive,
-                      'bg-red-400': type === 'error' && isActive,
-                      'bg-gray-300': !isActive
-                    }
-                  ]">
+      <!-- Open text -->
+      <div v-if="$slots.open && !isActive"
+           class="ml-6 text-white text-xs whitespace-nowrap"
+           :class="TextSize[size]">
+        <slot name="open"/>
       </div>
 
-      <div v-if="$slots.open && !isActive" class="absolute right-0 pr-1.5 text-white text-xs">
-        <slot name="open"/>
+      <!-- Close text -->
+      <div v-if="$slots.close && isActive"
+           class="mr-6 text-white text-xs whitespace-nowrap ml-auto"
+           :class="TextSize[size]">
+        <slot name="close"/>
       </div>
 
       <!-- Switch toggle -->
-      <div :class="['absolute h-full bg-white rounded-full transition-all duration-300',
+      <div :class="['absolute bg-white rounded-full transition-all duration-300',
                     ToggleSize[size],
                     {
-                      'left-0': !isActive,
-                      'right-0': isActive
+                      'left-0.5': !isActive,
+                      'right-0.5': isActive
                     }
                   ]">
       </div>
-
-      <!-- Hidden checkbox for accessibility -->
-      <input type="checkbox"
-             class="sr-only"
-             :checked="isActive"
-             @change="onChange"/>
     </div>
+
+    <!-- Hidden checkbox for accessibility -->
+    <input type="checkbox"
+           class="sr-only"
+           :checked="isActive"
+           @change="onChange"/>
   </div>
 </template>
 
@@ -56,17 +61,22 @@ import { computed } from 'vue'
 
 const emit = defineEmits(['update:modelValue', 'on-change'])
 
-enum Size
-{
-  small = 'w-10 h-5',
-  default = 'w-14 h-6',
-  large = 'w-20 h-8'
+enum Size {
+  small = 'h-5 min-w-[2.5rem]',
+  default = 'h-6 min-w-[3.5rem]',
+  large = 'h-8 min-w-[5rem]'
 }
 
 const ToggleSize = {
-  small: 'w-5 h-4',
-  default: 'w-6 h-6',
-  large: 'w-8 h-6'
+  small: 'w-4 h-4',
+  default: 'w-5 h-5',
+  large: 'w-7 h-7'
+}
+
+const TextSize = {
+  small: 'text-xs',
+  default: 'text-sm',
+  large: 'text-base'
 }
 
 const props = withDefaults(defineProps<{
@@ -104,4 +114,4 @@ const onChange = (event: Event) => {
   emit('update:modelValue', newValue)
   emit('on-change', newValue)
 }
-</script>
+</script>
\ No newline at end of file