diff --git a/apps/example/src/router/modules/component.example.ts b/apps/example/src/router/modules/component.example.ts
index f9fae455..516ec032 100755
--- a/apps/example/src/router/modules/component.example.ts
+++ b/apps/example/src/router/modules/component.example.ts
@@ -16,7 +16,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'alert',
       name: 'componentExampleAlert',
-      component: () => import('@/views/component_example/alert/index.vue'),
+      component: () => import('@/views/component_example/alert.vue'),
       meta: {
         title: '提示',
       },
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'avatar',
       name: 'componentExampleAvatar',
-      component: () => import('@/views/component_example/avatar/index.vue'),
+      component: () => import('@/views/component_example/avatar.vue'),
       meta: {
         title: '头像',
       },
@@ -32,7 +32,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'button',
       name: 'componentExampleButton',
-      component: () => import('@/views/component_example/button/index.vue'),
+      component: () => import('@/views/component_example/button.vue'),
       meta: {
         title: '按钮',
       },
@@ -40,7 +40,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'button_group',
       name: 'componentExampleButtonGroup',
-      component: () => import('@/views/component_example/button_group/index.vue'),
+      component: () => import('@/views/component_example/button_group.vue'),
       meta: {
         title: '按钮组',
       },
@@ -48,7 +48,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'card',
       name: 'componentExampleCard',
-      component: () => import('@/views/component_example/card/index.vue'),
+      component: () => import('@/views/component_example/card.vue'),
       meta: {
         title: '卡片',
       },
@@ -56,7 +56,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'checkbox',
       name: 'componentExampleCheckbox',
-      component: () => import('@/views/component_example/checkbox/index.vue'),
+      component: () => import('@/views/component_example/checkbox.vue'),
       meta: {
         title: '复选框',
       },
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'checkbox_group',
       name: 'componentExampleCheckboxGroup',
-      component: () => import('@/views/component_example/checkbox_group/index.vue'),
+      component: () => import('@/views/component_example/checkbox_group.vue'),
       meta: {
         title: '复选框组',
       },
@@ -72,7 +72,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'collapsible',
       name: 'componentExampleCollapsible',
-      component: () => import('@/views/component_example/collapsible/index.vue'),
+      component: () => import('@/views/component_example/collapsible.vue'),
       meta: {
         title: '折叠面板',
       },
@@ -80,7 +80,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'context_menu',
       name: 'componentExampleContextMenu',
-      component: () => import('@/views/component_example/context_menu/index.vue'),
+      component: () => import('@/views/component_example/context_menu.vue'),
       meta: {
         title: '右键菜单',
       },
@@ -88,7 +88,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'divider',
       name: 'componentExampleDivider',
-      component: () => import('@/views/component_example/divider/index.vue'),
+      component: () => import('@/views/component_example/divider.vue'),
       meta: {
         title: '分割线',
       },
@@ -96,7 +96,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'drawer',
       name: 'componentExampleDrawer',
-      component: () => import('@/views/component_example/drawer/index.vue'),
+      component: () => import('@/views/component_example/drawer.vue'),
       meta: {
         title: '抽屉',
       },
@@ -104,7 +104,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'dropdown',
       name: 'componentExampleDropdown',
-      component: () => import('@/views/component_example/dropdown/index.vue'),
+      component: () => import('@/views/component_example/dropdown.vue'),
       meta: {
         title: '下拉菜单',
       },
@@ -112,7 +112,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'file_upload',
       name: 'componentExampleFileUpload',
-      component: () => import('@/views/component_example/file_upload/index.vue'),
+      component: () => import('@/views/component_example/file_upload.vue'),
       meta: {
         title: '文件上传',
       },
@@ -120,7 +120,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'fixed_bar',
       name: 'componentExampleFixedactionbar',
-      component: () => import('@/views/component_example/fixed_bar/index.vue'),
+      component: () => import('@/views/component_example/fixed_bar.vue'),
       meta: {
         title: '固定栏',
         copyright: false,
@@ -129,15 +129,23 @@ const routes: RouteRecordRaw = {
     {
       path: 'hover_card',
       name: 'componentExampleHoverCard',
-      component: () => import('@/views/component_example/hover_card/index.vue'),
+      component: () => import('@/views/component_example/hover_card.vue'),
       meta: {
         title: '悬浮卡片',
       },
     },
+    {
+      path: 'icon',
+      name: 'componentExampleIcon',
+      component: () => import('@/views/component_example/icon.vue'),
+      meta: {
+        title: '图标',
+      },
+    },
     {
       path: 'image_preview',
       name: 'componentExampleImagePreview',
-      component: () => import('@/views/component_example/image_preview/index.vue'),
+      component: () => import('@/views/component_example/image_preview.vue'),
       meta: {
         title: '图片预览',
       },
@@ -145,7 +153,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'image_upload',
       name: 'componentExampleImageUpload',
-      component: () => import('@/views/component_example/image_upload/index.vue'),
+      component: () => import('@/views/component_example/image_upload.vue'),
       meta: {
         title: '图片上传',
       },
@@ -153,7 +161,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'input',
       name: 'componentExampleInput',
-      component: () => import('@/views/component_example/input/index.vue'),
+      component: () => import('@/views/component_example/input.vue'),
       meta: {
         title: '输入框',
       },
@@ -161,7 +169,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'input_otp',
       name: 'componentExampleInputOtp',
-      component: () => import('@/views/component_example/input_otp/index.vue'),
+      component: () => import('@/views/component_example/input_otp.vue'),
       meta: {
         title: '一次性密码输入框',
       },
@@ -169,7 +177,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'kbd',
       name: 'componentExampleKbd',
-      component: () => import('@/views/component_example/kbd/index.vue'),
+      component: () => import('@/views/component_example/kbd.vue'),
       meta: {
         title: '键盘',
       },
@@ -177,7 +185,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'modal',
       name: 'componentExampleModal',
-      component: () => import('@/views/component_example/modal/index.vue'),
+      component: () => import('@/views/component_example/modal.vue'),
       meta: {
         title: '弹窗',
       },
@@ -185,7 +193,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'number_field',
       name: 'componentExampleNumberField',
-      component: () => import('@/views/component_example/number_field/index.vue'),
+      component: () => import('@/views/component_example/number_field.vue'),
       meta: {
         title: '数字输入框',
       },
@@ -193,7 +201,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'page_header',
       name: 'componentExamplePageheader',
-      component: () => import('@/views/component_example/page_header/index.vue'),
+      component: () => import('@/views/component_example/page_header.vue'),
       meta: {
         title: '页头',
       },
@@ -201,7 +209,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'page_main',
       name: 'componentExamplePagemain',
-      component: () => import('@/views/component_example/page_main/index.vue'),
+      component: () => import('@/views/component_example/page_main.vue'),
       meta: {
         title: '内容块',
       },
@@ -209,7 +217,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'pagination',
       name: 'componentExamplePagination',
-      component: () => import('@/views/component_example/pagination/index.vue'),
+      component: () => import('@/views/component_example/pagination.vue'),
       meta: {
         title: '分页',
       },
@@ -217,7 +225,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'password_strength',
       name: 'componentExamplePasswordStrength',
-      component: () => import('@/views/component_example/password_strength/index.vue'),
+      component: () => import('@/views/component_example/password_strength.vue'),
       meta: {
         title: '密码强度',
       },
@@ -225,7 +233,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'popover',
       name: 'componentExamplePopover',
-      component: () => import('@/views/component_example/popover/index.vue'),
+      component: () => import('@/views/component_example/popover.vue'),
       meta: {
         title: '浮动面板',
       },
@@ -233,7 +241,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'progress',
       name: 'componentExampleProgress',
-      component: () => import('@/views/component_example/progress/index.vue'),
+      component: () => import('@/views/component_example/progress.vue'),
       meta: {
         title: '进度条',
       },
@@ -241,7 +249,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'radio_group',
       name: 'componentExampleRadioGroup',
-      component: () => import('@/views/component_example/radio_group/index.vue'),
+      component: () => import('@/views/component_example/radio_group.vue'),
       meta: {
         title: '单选组',
       },
@@ -249,7 +257,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'scroll_area',
       name: 'componentExampleScrollArea',
-      component: () => import('@/views/component_example/scroll_area/index.vue'),
+      component: () => import('@/views/component_example/scroll_area.vue'),
       meta: {
         title: '滚动区域',
       },
@@ -257,7 +265,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'search_bar',
       name: 'componentExampleSearchBar',
-      component: () => import('@/views/component_example/search_bar/index.vue'),
+      component: () => import('@/views/component_example/search_bar.vue'),
       meta: {
         title: '搜索面板',
       },
@@ -265,7 +273,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'select',
       name: 'componentExampleSelect',
-      component: () => import('@/views/component_example/select/index.vue'),
+      component: () => import('@/views/component_example/select.vue'),
       meta: {
         title: '选择器',
       },
@@ -273,7 +281,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'slider',
       name: 'componentExampleSlider',
-      component: () => import('@/views/component_example/slider/index.vue'),
+      component: () => import('@/views/component_example/slider.vue'),
       meta: {
         title: '滑块',
       },
@@ -281,7 +289,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'switch',
       name: 'componentExampleSwitch',
-      component: () => import('@/views/component_example/switch/index.vue'),
+      component: () => import('@/views/component_example/switch.vue'),
       meta: {
         title: '开关',
       },
@@ -289,7 +297,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'tabs',
       name: 'componentExampleTabs',
-      component: () => import('@/views/component_example/tabs/index.vue'),
+      component: () => import('@/views/component_example/tabs.vue'),
       meta: {
         title: '标签页',
       },
@@ -297,7 +305,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'textarea',
       name: 'componentExampleTextarea',
-      component: () => import('@/views/component_example/textarea/index.vue'),
+      component: () => import('@/views/component_example/textarea.vue'),
       meta: {
         title: '文本域',
       },
@@ -305,7 +313,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'toast',
       name: 'componentExampleToast',
-      component: () => import('@/views/component_example/toast/index.vue'),
+      component: () => import('@/views/component_example/toast.vue'),
       meta: {
         title: '轻提示',
       },
@@ -313,7 +321,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'tooltip',
       name: 'componentExampleTooltip',
-      component: () => import('@/views/component_example/tooltip/index.vue'),
+      component: () => import('@/views/component_example/tooltip.vue'),
       meta: {
         title: '文字提示',
       },
@@ -321,7 +329,7 @@ const routes: RouteRecordRaw = {
     {
       path: 'trend',
       name: 'componentExampleTrend',
-      component: () => import('@/views/component_example/trend/index.vue'),
+      component: () => import('@/views/component_example/trend.vue'),
       meta: {
         title: '趋势标记',
       },
diff --git a/apps/example/src/router/modules/icon.example.ts b/apps/example/src/router/modules/icon.example.ts
index 451f3c22..b404b392 100755
--- a/apps/example/src/router/modules/icon.example.ts
+++ b/apps/example/src/router/modules/icon.example.ts
@@ -1,28 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
 const routes: RouteRecordRaw = {
   path: '/icon_example',
-  component: Layout,
+  redirect: '/component_example/icon',
   meta: {
     title: '图标',
     icon: 'i-ri:remixicon-line',
   },
-  children: [
-    {
-      path: '',
-      name: 'iconExample',
-      component: () => import('@/views/icon_example/index.vue'),
-      meta: {
-        title: '图标',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
 }
 
 export default routes
diff --git a/apps/example/src/views/component_example/alert.vue b/apps/example/src/views/component_example/alert.vue
new file mode 100644
index 00000000..42c883bf
--- /dev/null
+++ b/apps/example/src/views/component_example/alert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { alert } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="提示" description="FaAlert" />
+    <FaPageMain
+      v-for="example in alert"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/alert/_demo2.vue b/apps/example/src/views/component_example/alert/_demo2.vue
deleted file mode 100644
index eb3aa459..00000000
--- a/apps/example/src/views/component_example/alert/_demo2.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <FaAlert
-      icon="i-lucide:info"
-      title="普通提示"
-      description="数据已同步完成，可以继续后续操作。"
-    />
-    <FaAlert
-      icon="i-lucide:circle-alert"
-      title="危险提示"
-      description="删除后数据将无法恢复，请谨慎操作。"
-      variant="destructive"
-    />
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/alert/index.vue b/apps/example/src/views/component_example/alert/index.vue
deleted file mode 100644
index cffbb50a..00000000
--- a/apps/example/src/views/component_example/alert/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="提示" description="FaAlert" />
-    <FaPageMain>
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="不同样式">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="自定义描述">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/avatar.vue b/apps/example/src/views/component_example/avatar.vue
new file mode 100644
index 00000000..9bfb4e99
--- /dev/null
+++ b/apps/example/src/views/component_example/avatar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { avatar } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="头像" description="FaAvatar" />
+    <FaPageMain
+      v-for="example in avatar"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/avatar/_demo1.vue b/apps/example/src/views/component_example/avatar/_demo1.vue
deleted file mode 100755
index ca2ecefd..00000000
--- a/apps/example/src/views/component_example/avatar/_demo1.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="flex gap-4">
-    <FaAvatar src="https://fantastic-admin.hurui.me/logo.svg" />
-    <FaAvatar src="" fallback="Hooray" />
-    <div class="flex space-x--2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background">
-      <FaTooltip text="Fantastic-admin">
-        <FaAvatar src="https://github.com/fantastic-admin.png" class="transition hover:(scale-110 z-1)" />
-      </FaTooltip>
-      <FaTooltip text="Hooray">
-        <FaAvatar src="https://github.com/hooray.png" class="transition hover:(scale-110 z-1)" />
-      </FaTooltip>
-      <FaTooltip text="Admin">
-        <FaAvatar src="https://api.dicebear.com/9.x/bottts-neutral/svg?seed=admin" class="transition hover:(scale-110 z-1)" />
-      </FaTooltip>
-    </div>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/avatar/index.vue b/apps/example/src/views/component_example/avatar/index.vue
deleted file mode 100755
index 5ef57d52..00000000
--- a/apps/example/src/views/component_example/avatar/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="头像" description="FaAvatar" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/button.vue b/apps/example/src/views/component_example/button.vue
new file mode 100644
index 00000000..92ec48bc
--- /dev/null
+++ b/apps/example/src/views/component_example/button.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { button } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="按钮" description="FaButton" />
+    <FaPageMain
+      v-for="example in button"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/button/index.vue b/apps/example/src/views/component_example/button/index.vue
deleted file mode 100755
index 49397fa4..00000000
--- a/apps/example/src/views/component_example/button/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="按钮" description="FaButton" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/button_group.vue b/apps/example/src/views/component_example/button_group.vue
new file mode 100644
index 00000000..0b3ef4cd
--- /dev/null
+++ b/apps/example/src/views/component_example/button_group.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { buttonGroup } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="按钮组" description="FaButtonGroup" />
+    <FaPageMain
+      v-for="example in buttonGroup"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/button_group/index.vue b/apps/example/src/views/component_example/button_group/index.vue
deleted file mode 100755
index 88a28c3d..00000000
--- a/apps/example/src/views/component_example/button_group/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-import Demo5 from './_demo5.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="按钮组" description="FaButtonGroup" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="垂直" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="分割线" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="嵌套" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-    <FaPageMain title="与其他组件组合" main-class="p-4">
-      <Demo5 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/card.vue b/apps/example/src/views/component_example/card.vue
new file mode 100644
index 00000000..bf6abbf3
--- /dev/null
+++ b/apps/example/src/views/component_example/card.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { card } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="卡片" description="FaCard" />
+    <FaPageMain
+      v-for="example in card"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/card/_demo1.vue b/apps/example/src/views/component_example/card/_demo1.vue
deleted file mode 100755
index 5a3560ce..00000000
--- a/apps/example/src/views/component_example/card/_demo1.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <FaCard title="卡片标题" description="卡片描述" class="w-80">
-    卡片内容
-    <template #footer>
-      卡片底部
-    </template>
-  </FaCard>
-</template>
diff --git a/apps/example/src/views/component_example/card/index.vue b/apps/example/src/views/component_example/card/index.vue
deleted file mode 100755
index 19db0800..00000000
--- a/apps/example/src/views/component_example/card/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="卡片" description="FaCard" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/checkbox.vue b/apps/example/src/views/component_example/checkbox.vue
new file mode 100644
index 00000000..f46d16aa
--- /dev/null
+++ b/apps/example/src/views/component_example/checkbox.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { checkbox } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="复选框" description="FaCheckbox" />
+    <FaPageMain
+      v-for="example in checkbox"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/checkbox/_demo1.vue b/apps/example/src/views/component_example/checkbox/_demo1.vue
deleted file mode 100644
index d0fc10b4..00000000
--- a/apps/example/src/views/component_example/checkbox/_demo1.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const checked = ref(false)
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <FaCheckbox v-model="checked">
-      同意协议
-    </FaCheckbox>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/checkbox/_demo2.vue b/apps/example/src/views/component_example/checkbox/_demo2.vue
deleted file mode 100644
index d56a9e4e..00000000
--- a/apps/example/src/views/component_example/checkbox/_demo2.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const checked = ref<'indeterminate' | boolean>('indeterminate')
-</script>
-
-<template>
-  <FaCheckbox v-model="checked">
-    部分选中
-  </FaCheckbox>
-</template>
diff --git a/apps/example/src/views/component_example/checkbox/index.vue b/apps/example/src/views/component_example/checkbox/index.vue
deleted file mode 100644
index 5399a3c1..00000000
--- a/apps/example/src/views/component_example/checkbox/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="复选框" description="FaCheckbox" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="半选状态" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/checkbox_group.vue b/apps/example/src/views/component_example/checkbox_group.vue
new file mode 100644
index 00000000..ae887e2d
--- /dev/null
+++ b/apps/example/src/views/component_example/checkbox_group.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { checkboxGroup } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="复选框组" description="FaCheckboxGroup" />
+    <FaPageMain
+      v-for="example in checkboxGroup"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/checkbox_group/index.vue b/apps/example/src/views/component_example/checkbox_group/index.vue
deleted file mode 100644
index 12176d6a..00000000
--- a/apps/example/src/views/component_example/checkbox_group/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="复选框组" description="FaCheckboxGroup" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="带描述和禁用态" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="自定义选项内容" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="最少 / 最多选择" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/collapsible.vue b/apps/example/src/views/component_example/collapsible.vue
new file mode 100644
index 00000000..2546e5a0
--- /dev/null
+++ b/apps/example/src/views/component_example/collapsible.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { collapsible } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="折叠面板" description="FaCollapsible" />
+    <FaPageMain
+      v-for="example in collapsible"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/collapsible/_demo1.vue b/apps/example/src/views/component_example/collapsible/_demo1.vue
deleted file mode 100755
index 5d6a2a2d..00000000
--- a/apps/example/src/views/component_example/collapsible/_demo1.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <FaCollapsible>
-    <template #trigger="{ open }">
-      <FaButton>
-        {{ open ? '收起' : '展开' }}
-      </FaButton>
-    </template>
-    <div class="mt-4 space-y-2">
-      <div v-for="item in 10" :key="item" class="px-4 py-2 border rounded-md">
-        {{ item }}
-      </div>
-    </div>
-  </FaCollapsible>
-</template>
diff --git a/apps/example/src/views/component_example/collapsible/_demo2.vue b/apps/example/src/views/component_example/collapsible/_demo2.vue
deleted file mode 100755
index c2d4fcdb..00000000
--- a/apps/example/src/views/component_example/collapsible/_demo2.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaButton @click="open = !open">
-    {{ open ? '收起' : '展开' }}
-  </FaButton>
-  <FaCollapsible v-model="open">
-    <div class="mt-4 space-y-2">
-      <div v-for="item in 10" :key="item" class="px-4 py-2 border rounded-md">
-        {{ item }}
-      </div>
-    </div>
-  </FaCollapsible>
-</template>
diff --git a/apps/example/src/views/component_example/collapsible/index.vue b/apps/example/src/views/component_example/collapsible/index.vue
deleted file mode 100755
index fa52162d..00000000
--- a/apps/example/src/views/component_example/collapsible/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="折叠面板" description="FaCollapsible" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="手动控制" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/context_menu.vue b/apps/example/src/views/component_example/context_menu.vue
new file mode 100644
index 00000000..36f4190f
--- /dev/null
+++ b/apps/example/src/views/component_example/context_menu.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { contextMenu } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="右键菜单" description="FaContextMenu" />
+    <FaPageMain
+      v-for="example in contextMenu"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/context_menu/_demo1.vue b/apps/example/src/views/component_example/context_menu/_demo1.vue
deleted file mode 100755
index 62ce0309..00000000
--- a/apps/example/src/views/component_example/context_menu/_demo1.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-function handleClick(text: string) {
-  useFaToast()(text)
-}
-</script>
-
-<template>
-  <FaContextMenu
-    :items="[
-      [
-        { label: 'Open', handle: () => handleClick('Open') },
-        { label: 'Edit', icon: 'i-ep:edit', handle: () => handleClick('Edit') },
-        { label: 'Copy', disabled: true, handle: () => handleClick('Copy') },
-      ],
-      [
-        { label: 'Delete', variant: 'destructive', handle: () => handleClick('Delete') },
-      ],
-    ]"
-  >
-    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
-      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
-    </div>
-  </FaContextMenu>
-</template>
diff --git a/apps/example/src/views/component_example/context_menu/_demo2.vue b/apps/example/src/views/component_example/context_menu/_demo2.vue
deleted file mode 100755
index fd89adaa..00000000
--- a/apps/example/src/views/component_example/context_menu/_demo2.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-function handleClick(text: string) {
-  useFaToast()(text)
-}
-</script>
-
-<template>
-  <FaContextMenu
-    :items="[
-      [
-        { label: 'Open', handle: () => handleClick('Open') },
-        {
-          label: 'More',
-          items: [
-            [
-              { label: 'Save Page...', handle: () => handleClick('Save Page...') },
-            ],
-          ],
-        },
-      ],
-    ]"
-  >
-    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
-      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
-    </div>
-  </FaContextMenu>
-</template>
diff --git a/apps/example/src/views/component_example/context_menu/index.vue b/apps/example/src/views/component_example/context_menu/index.vue
deleted file mode 100755
index 94b78458..00000000
--- a/apps/example/src/views/component_example/context_menu/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="右键菜单" description="FaContextMenu" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="嵌套" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/divider.vue b/apps/example/src/views/component_example/divider.vue
new file mode 100644
index 00000000..c1080e55
--- /dev/null
+++ b/apps/example/src/views/component_example/divider.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { divider } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="分割线" description="FaDivider" />
+    <FaPageMain
+      v-for="example in divider"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/divider/_demo1.vue b/apps/example/src/views/component_example/divider/_demo1.vue
deleted file mode 100755
index 3ae680f2..00000000
--- a/apps/example/src/views/component_example/divider/_demo1.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <FaDivider>center</FaDivider>
-  <FaDivider position="start">
-    start
-  </FaDivider>
-  <FaDivider position="end">
-    end
-  </FaDivider>
-</template>
diff --git a/apps/example/src/views/component_example/divider/index.vue b/apps/example/src/views/component_example/divider/index.vue
deleted file mode 100755
index 51237058..00000000
--- a/apps/example/src/views/component_example/divider/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="分割线" description="FaDivider" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/drawer.vue b/apps/example/src/views/component_example/drawer.vue
new file mode 100644
index 00000000..59f70a80
--- /dev/null
+++ b/apps/example/src/views/component_example/drawer.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { drawer } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="抽屉" description="FaDrawer" />
+    <FaPageMain
+      v-for="example in drawer"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/drawer/_demo1.vue b/apps/example/src/views/component_example/drawer/_demo1.vue
deleted file mode 100755
index 6b92fefc..00000000
--- a/apps/example/src/views/component_example/drawer/_demo1.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-const drawer = ref(false)
-
-const drawerInfo = ref({
-  side: 'right' as const,
-  closable: true,
-  header: true,
-  footer: true,
-  loading: false,
-  class: '',
-})
-watch(() => drawerInfo.value.loading, (loading) => {
-  if (loading) {
-    setTimeout(() => {
-      drawerInfo.value.loading = false
-    }, 3000)
-  }
-})
-
-function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
-  if (action === 'close') {
-    useFaModal().confirm({
-      title: '提示',
-      content: '确定要关闭吗？',
-      onConfirm: () => {
-        done()
-      },
-    })
-  }
-  else {
-    done()
-  }
-}
-</script>
-
-<template>
-  <FaButton @click="drawer = true">
-    打开
-  </FaButton>
-  <FaDrawer v-model="drawer" title="标题" description="这里是一段描述介绍" :side="drawerInfo.side" :closable="drawerInfo.closable" :loading="drawerInfo.loading" :header="drawerInfo.header" :footer="drawerInfo.footer" :before-close="handleBeforeClose" :content-class="drawerInfo.class">
-    <div class="flex-start-center flex-wrap gap-2">
-      <FaSelect
-        v-model="drawerInfo.side" :options="[
-          { label: '左侧', value: 'left' },
-          { label: '右侧', value: 'right' },
-          { label: '顶部', value: 'top' },
-          { label: '底部', value: 'bottom' },
-        ]" class="w-full"
-      />
-      <FaButton :variant="drawerInfo.closable ? 'default' : 'outline'" class="w-full" @click="drawerInfo.closable = !drawerInfo.closable">
-        关闭按钮
-      </FaButton>
-      <FaButton :variant="drawerInfo.header ? 'default' : 'outline'" class="w-full" @click="drawerInfo.header = !drawerInfo.header">
-        头部区域
-      </FaButton>
-      <FaButton :variant="drawerInfo.footer ? 'default' : 'outline'" class="w-full" @click="drawerInfo.footer = !drawerInfo.footer">
-        尾部区域
-      </FaButton>
-      <FaButton variant="outline" class="w-full" @click="drawerInfo.loading = true">
-        显示加载中
-      </FaButton>
-      <FaButton :variant="!!drawerInfo.class ? 'default' : 'outline'" class="w-full" @click="drawerInfo.class = !!drawerInfo.class ? '' : 'sm:max-w-lg'">
-        调整最大宽度
-      </FaButton>
-    </div>
-  </FaDrawer>
-</template>
diff --git a/apps/example/src/views/component_example/drawer/_demo2.vue b/apps/example/src/views/component_example/drawer/_demo2.vue
deleted file mode 100755
index 34f2cda4..00000000
--- a/apps/example/src/views/component_example/drawer/_demo2.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="tsx">
-const TestComponent = defineComponent({
-  setup() {
-    const val = ref('123')
-    return () => (
-      <div>
-        <FaInput v-model={val.value} class="w-full" />
-      </div>
-    )
-  },
-})
-
-const { open } = useFaDrawer().create({
-  title: '标题',
-  description: '这里是一段描述介绍',
-  beforeClose: (action, done) => {
-    if (action === 'close') {
-      useFaModal().confirm({
-        title: '提示',
-        content: '确定要关闭吗？',
-        onConfirm: () => {
-          done()
-        },
-      })
-    }
-    else {
-      done()
-    }
-  },
-  content: h(TestComponent),
-})
-</script>
-
-<template>
-  <FaButton @click="open">
-    打开
-  </FaButton>
-</template>
diff --git a/apps/example/src/views/component_example/drawer/index.vue b/apps/example/src/views/component_example/drawer/index.vue
deleted file mode 100755
index 52fce968..00000000
--- a/apps/example/src/views/component_example/drawer/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="抽屉" description="FaDrawer" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="函数式调用" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/dropdown.vue b/apps/example/src/views/component_example/dropdown.vue
new file mode 100644
index 00000000..2d741fc6
--- /dev/null
+++ b/apps/example/src/views/component_example/dropdown.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { dropdown } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="下拉菜单" description="FaDropdown" />
+    <FaPageMain
+      v-for="example in dropdown"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/dropdown/_demo1.vue b/apps/example/src/views/component_example/dropdown/_demo1.vue
deleted file mode 100755
index 0be09921..00000000
--- a/apps/example/src/views/component_example/dropdown/_demo1.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-function handleClick(text: string) {
-  useFaToast()(text)
-}
-</script>
-
-<template>
-  <FaDropdown
-    :items="[
-      [
-        { label: 'Open', handle: () => handleClick('Open') },
-        { label: 'Edit', icon: 'i-ep:edit', handle: () => handleClick('Edit') },
-        { label: 'Copy', disabled: true, handle: () => handleClick('Copy') },
-      ],
-      [
-        { label: 'Delete', variant: 'destructive', handle: () => handleClick('Delete') },
-      ],
-    ]"
-  >
-    <FaButton>
-      Actions
-      <FaIcon name="i-ep:caret-bottom" />
-    </FaButton>
-  </FaDropdown>
-</template>
diff --git a/apps/example/src/views/component_example/dropdown/_demo2.vue b/apps/example/src/views/component_example/dropdown/_demo2.vue
deleted file mode 100755
index 305de104..00000000
--- a/apps/example/src/views/component_example/dropdown/_demo2.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-function handleClick(text: string) {
-  useFaToast()(text)
-}
-</script>
-
-<template>
-  <FaDropdown
-    :items="[
-      [
-        { label: 'Open', handle: () => handleClick('Open') },
-        {
-          label: 'More',
-          items: [
-            [
-              { label: 'Save Page...', handle: () => handleClick('Save Page...') },
-            ],
-          ],
-        },
-      ],
-    ]"
-  >
-    <FaButton>
-      Actions
-      <FaIcon name="i-ep:caret-bottom" />
-    </FaButton>
-  </FaDropdown>
-</template>
diff --git a/apps/example/src/views/component_example/dropdown/_demo3.vue b/apps/example/src/views/component_example/dropdown/_demo3.vue
deleted file mode 100644
index 067066c2..00000000
--- a/apps/example/src/views/component_example/dropdown/_demo3.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-const modal = shallowRef(false)
-
-function handleClick(text: string) {
-  useFaToast()(text)
-}
-
-const items = [
-  [
-    { label: 'Preview', icon: 'i-lucide:eye', handle: () => handleClick('Preview') },
-    { label: 'Duplicate', icon: 'i-lucide:copy', handle: () => handleClick('Duplicate') },
-  ],
-  [
-    {
-      label: 'More',
-      items: [
-        [
-          { label: 'Share', handle: () => handleClick('Share') },
-        ],
-        [
-          { label: 'Delete', variant: 'destructive' as const, handle: () => handleClick('Delete') },
-        ],
-      ],
-    },
-  ],
-]
-</script>
-
-<template>
-  <div>
-    <FaButton @click="modal = true">
-      打开
-    </FaButton>
-    <FaModal
-      v-model="modal"
-      title="FaModal 中的下拉菜单"
-      description="在模态框内容区内触发 FaDropdown"
-      :footer="false"
-      class="sm:max-w-2xl"
-      content-class="min-h-auto"
-    >
-      <div class="py-6 flex-center">
-        <FaDropdown :items="items">
-          <FaButton>
-            Actions
-            <FaIcon name="i-ep:caret-bottom" />
-          </FaButton>
-        </FaDropdown>
-      </div>
-    </FaModal>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/dropdown/index.vue b/apps/example/src/views/component_example/dropdown/index.vue
deleted file mode 100755
index a381369c..00000000
--- a/apps/example/src/views/component_example/dropdown/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="下拉菜单" description="FaDropdown" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="嵌套" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="在 FaModal 里展示" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/file_upload.vue b/apps/example/src/views/component_example/file_upload.vue
new file mode 100644
index 00000000..60139709
--- /dev/null
+++ b/apps/example/src/views/component_example/file_upload.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { fileUpload } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="文件上传" description="FaFileUpload" />
+    <FaPageMain
+      v-for="example in fileUpload"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/file_upload/_demo1.vue b/apps/example/src/views/component_example/file_upload/_demo1.vue
deleted file mode 100755
index cedb9cb0..00000000
--- a/apps/example/src/views/component_example/file_upload/_demo1.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
-
-const files = ref<FileItem[]>([])
-
-function handleSuccess() {
-  useFaToast().success('模拟上传成功')
-}
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="files"
-    action="/fake/upload"
-    :after-upload="(response) => response.data.url"
-    multiple
-    @on-success="handleSuccess"
-  />
-</template>
diff --git a/apps/example/src/views/component_example/file_upload/_demo3.vue b/apps/example/src/views/component_example/file_upload/_demo3.vue
deleted file mode 100755
index d3250437..00000000
--- a/apps/example/src/views/component_example/file_upload/_demo3.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
-
-const files = ref<FileItem[]>([])
-
-function handleSuccess() {
-  useFaToast().success('模拟上传成功')
-}
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="files"
-    action="/fake/upload"
-    :after-upload="(response) => response.data.url"
-    multiple
-    @on-success="handleSuccess"
-  >
-    <div>可以在这里显示自定义内容</div>
-  </FaFileUpload>
-</template>
diff --git a/apps/example/src/views/component_example/file_upload/index.vue b/apps/example/src/views/component_example/file_upload/index.vue
deleted file mode 100755
index aa6c9dbd..00000000
--- a/apps/example/src/views/component_example/file_upload/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-import Demo5 from './_demo5.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="文件上传" description="FaFileUpload" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="限制上传数量、大小、类型、点击事件" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="自定义显示" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="自定义上传请求" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-    <FaPageMain title="文件夹上传" main-class="p-4">
-      <Demo5 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/fixed_bar.vue b/apps/example/src/views/component_example/fixed_bar.vue
new file mode 100755
index 00000000..71781ead
--- /dev/null
+++ b/apps/example/src/views/component_example/fixed_bar.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { fixedBar } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="固定栏">
+      <template #description>
+        <div class="space-y-2">
+          <p>FaFixedBar</p>
+          <p>固定在页面顶部或底部，可用于展示页面信息、操作按钮等</p>
+        </div>
+      </template>
+    </FaPageHeader>
+    <FaPageMain
+      v-for="example in fixedBar"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+    <div class="m-4 pt-20 border rounded-lg bg-background flex h-vh justify-center">
+      尝试滚动页面，查看固定效果
+    </div>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/fixed_bar/index.vue b/apps/example/src/views/component_example/fixed_bar/index.vue
deleted file mode 100755
index f7dd7fcc..00000000
--- a/apps/example/src/views/component_example/fixed_bar/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="固定栏">
-      <template #description>
-        <div class="space-y-2">
-          <p>FaFixedBar</p>
-          <p>固定在页面顶部或底部，可用于展示页面信息、操作按钮等</p>
-        </div>
-      </template>
-    </FaPageHeader>
-    <FaPageMain title="固定在页面顶部" main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="固定在页面底部" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain class="h-vh" />
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/hover_card.vue b/apps/example/src/views/component_example/hover_card.vue
new file mode 100644
index 00000000..eb10a1f1
--- /dev/null
+++ b/apps/example/src/views/component_example/hover_card.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { hoverCard } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="悬浮卡片" description="FaHoverCard" />
+    <FaPageMain
+      v-for="example in hoverCard"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/hover_card/index.vue b/apps/example/src/views/component_example/hover_card/index.vue
deleted file mode 100755
index 1b2e507a..00000000
--- a/apps/example/src/views/component_example/hover_card/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="悬浮卡片" description="FaHoverCard" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/icon.vue b/apps/example/src/views/component_example/icon.vue
new file mode 100644
index 00000000..020c0b51
--- /dev/null
+++ b/apps/example/src/views/component_example/icon.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { icon } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="图标" description="FaIcon" />
+    <FaPageMain
+      v-for="example in icon"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/image_preview.vue b/apps/example/src/views/component_example/image_preview.vue
new file mode 100644
index 00000000..d02902e3
--- /dev/null
+++ b/apps/example/src/views/component_example/image_preview.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { imagePreview } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="图片预览" description="FaImagePreview" />
+    <FaPageMain
+      v-for="example in imagePreview"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/image_preview/_demo1.vue b/apps/example/src/views/component_example/image_preview/_demo1.vue
deleted file mode 100755
index 1ef510d8..00000000
--- a/apps/example/src/views/component_example/image_preview/_demo1.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="space-x-4">
-    <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" />
-    <FaImagePreview src="http://www.baidu.com" class="size-25" />
-    <FaImagePreview src="http://www.baidu.com">
-      <template #error>
-        <div class="text-sm text-secondary-foreground/50 flex-col-center">
-          <div>
-            自定义错误信息
-          </div>
-          <div>
-            图片加载失败
-          </div>
-        </div>
-      </template>
-    </FaImagePreview>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/image_preview/_demo3.vue b/apps/example/src/views/component_example/image_preview/_demo3.vue
deleted file mode 100644
index 4ba65c10..00000000
--- a/apps/example/src/views/component_example/image_preview/_demo3.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const modal = ref(false)
-</script>
-
-<template>
-  <div>
-    <FaButton @click="modal = true">
-      打开
-    </FaButton>
-    <FaModal
-      v-model="modal"
-      title="FaModal 中的图片预览"
-      description="点击图片后仍可继续进入全屏预览"
-      :footer="false"
-      class="sm:max-w-3xl"
-      content-class="min-h-auto"
-    >
-      <div class="py-4 flex-center">
-        <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" />
-      </div>
-    </FaModal>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/image_preview/index.vue b/apps/example/src/views/component_example/image_preview/index.vue
deleted file mode 100755
index d1754949..00000000
--- a/apps/example/src/views/component_example/image_preview/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="图片预览" description="FaImagePreview" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="函数式调用" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="在 FaModal 里展示" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/image_upload.vue b/apps/example/src/views/component_example/image_upload.vue
new file mode 100644
index 00000000..8beb6ac3
--- /dev/null
+++ b/apps/example/src/views/component_example/image_upload.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { imageUpload } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="图片上传" description="FaImageUpload" />
+    <FaPageMain
+      v-for="example in imageUpload"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/image_upload/_demo1.vue b/apps/example/src/views/component_example/image_upload/_demo1.vue
deleted file mode 100755
index ef6441e7..00000000
--- a/apps/example/src/views/component_example/image_upload/_demo1.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const files = ref<string[]>([])
-
-function handleSuccess() {
-  useFaToast().success('模拟上传成功')
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="files"
-    action="/fake/upload"
-    :after-upload="(response) => response.data.url"
-    @on-success="handleSuccess"
-  />
-</template>
diff --git a/apps/example/src/views/component_example/image_upload/_demo2.vue b/apps/example/src/views/component_example/image_upload/_demo2.vue
deleted file mode 100755
index c6dbda58..00000000
--- a/apps/example/src/views/component_example/image_upload/_demo2.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const files = ref<string[]>(['https://fantastic-admin.hurui.me/logo.svg'])
-
-function handleSuccess() {
-  useFaToast().success('模拟上传成功')
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="files"
-    action="/fake/upload"
-    :after-upload="(response) => `${response.data.url}?fake=${Math.random()}`"
-    :max="2"
-    @on-success="handleSuccess"
-  />
-</template>
diff --git a/apps/example/src/views/component_example/image_upload/index.vue b/apps/example/src/views/component_example/image_upload/index.vue
deleted file mode 100755
index 757fdfdb..00000000
--- a/apps/example/src/views/component_example/image_upload/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-import Demo5 from './_demo5.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="图片上传" description="FaImageUpload" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="多图上传" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="上传前校验" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="自定义上传请求" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-    <FaPageMain title="文件夹上传" main-class="p-4">
-      <Demo5 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/input.vue b/apps/example/src/views/component_example/input.vue
new file mode 100644
index 00000000..fa431616
--- /dev/null
+++ b/apps/example/src/views/component_example/input.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { input } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="输入框" description="FaInput" />
+    <FaPageMain
+      v-for="example in input"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/input/index.vue b/apps/example/src/views/component_example/input/index.vue
deleted file mode 100755
index a21ccc62..00000000
--- a/apps/example/src/views/component_example/input/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="输入框" description="FaInput" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="密码框" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="插槽" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/input_otp.vue b/apps/example/src/views/component_example/input_otp.vue
new file mode 100644
index 00000000..9edbe246
--- /dev/null
+++ b/apps/example/src/views/component_example/input_otp.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { inputOtp } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="一次性密码输入框" description="FaInputOTP" />
+    <FaPageMain
+      v-for="example in inputOtp"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/input_otp/_demo1.vue b/apps/example/src/views/component_example/input_otp/_demo1.vue
deleted file mode 100755
index 5bd2aaf1..00000000
--- a/apps/example/src/views/component_example/input_otp/_demo1.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const input = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="input" />
-</template>
diff --git a/apps/example/src/views/component_example/input_otp/_demo2.vue b/apps/example/src/views/component_example/input_otp/_demo2.vue
deleted file mode 100755
index a9f00366..00000000
--- a/apps/example/src/views/component_example/input_otp/_demo2.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const input = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="input" :length="4" />
-</template>
diff --git a/apps/example/src/views/component_example/input_otp/_demo3.vue b/apps/example/src/views/component_example/input_otp/_demo3.vue
deleted file mode 100755
index 04ddc755..00000000
--- a/apps/example/src/views/component_example/input_otp/_demo3.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const input = ref('')
-
-function handleComplete() {
-  useFaToast().info(input.value)
-}
-</script>
-
-<template>
-  <FaInputOTP v-model="input" @complete="handleComplete" />
-</template>
diff --git a/apps/example/src/views/component_example/input_otp/index.vue b/apps/example/src/views/component_example/input_otp/index.vue
deleted file mode 100755
index 2f9b1b30..00000000
--- a/apps/example/src/views/component_example/input_otp/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="一次性密码输入框" description="FaInputOTP" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="长度" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="回调" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/kbd.vue b/apps/example/src/views/component_example/kbd.vue
new file mode 100644
index 00000000..21948d60
--- /dev/null
+++ b/apps/example/src/views/component_example/kbd.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { kbd, kbdGroup } from '@fantastic-admin/components/examples'
+
+const examples = [
+  ...kbd,
+  ...kbdGroup.map(example => ({
+    ...example,
+    title: '组合',
+  })),
+]
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="键盘" description="FaKbd" />
+    <FaPageMain
+      v-for="example in examples"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/kbd/_demo2.vue b/apps/example/src/views/component_example/kbd/_demo2.vue
deleted file mode 100755
index 49c1dc3b..00000000
--- a/apps/example/src/views/component_example/kbd/_demo2.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaKbd>⇧</FaKbd>
-    <FaKbd>⌥</FaKbd>
-    <FaKbd>⌃</FaKbd>
-  </FaKbdGroup>
-</template>
diff --git a/apps/example/src/views/component_example/kbd/index.vue b/apps/example/src/views/component_example/kbd/index.vue
deleted file mode 100755
index 59070bb6..00000000
--- a/apps/example/src/views/component_example/kbd/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="键盘" description="FaKbd" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="组合" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/label.vue b/apps/example/src/views/component_example/label.vue
new file mode 100644
index 00000000..89cf74a4
--- /dev/null
+++ b/apps/example/src/views/component_example/label.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { label } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="标签" description="FaLabel" />
+    <FaPageMain
+      v-for="example in label"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/modal.vue b/apps/example/src/views/component_example/modal.vue
new file mode 100644
index 00000000..1010fe35
--- /dev/null
+++ b/apps/example/src/views/component_example/modal.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { modal } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="弹窗" description="FaModal" />
+    <FaPageMain
+      v-for="example in modal"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/modal/_demo1.vue b/apps/example/src/views/component_example/modal/_demo1.vue
deleted file mode 100755
index 6485694a..00000000
--- a/apps/example/src/views/component_example/modal/_demo1.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-const modal = ref(false)
-const modalInfo = ref({
-  maximizable: false,
-  closable: true,
-  draggable: false,
-  alignCenter: false,
-  center: false,
-  header: true,
-  footer: true,
-  contentHeight: '',
-  loading: false,
-  class: '',
-})
-watch(() => modalInfo.value.loading, (loading) => {
-  if (loading) {
-    setTimeout(() => {
-      modalInfo.value.loading = false
-    }, 3000)
-  }
-})
-
-function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
-  if (action === 'close') {
-    useFaModal().confirm({
-      title: '提示',
-      content: '确定要关闭吗？',
-      onConfirm: () => {
-        done()
-      },
-    })
-  }
-  else {
-    done()
-  }
-}
-</script>
-
-<template>
-  <FaButton @click="modal = true">
-    打开
-  </FaButton>
-  <FaModal v-model="modal" title="标题" description="这里是一段描述介绍" :maximizable="modalInfo.maximizable" :closable="modalInfo.closable" :draggable="modalInfo.draggable" :align-center="modalInfo.alignCenter" :center="modalInfo.center" :loading="modalInfo.loading" :header="modalInfo.header" :footer="modalInfo.footer" :before-close="handleBeforeClose" :class="modalInfo.class">
-    <div :class="modalInfo.contentHeight">
-      <div class="flex-start-center flex-wrap gap-2">
-        <FaButton :variant="modalInfo.maximizable ? 'default' : 'outline'" class="w-full" @click="modalInfo.maximizable = !modalInfo.maximizable">
-          最大化按钮
-        </FaButton>
-        <FaButton :variant="modalInfo.closable ? 'default' : 'outline'" class="w-full" @click="modalInfo.closable = !modalInfo.closable">
-          关闭按钮
-        </FaButton>
-        <FaButton :variant="modalInfo.draggable ? 'default' : 'outline'" class="w-full" @click="modalInfo.draggable = !modalInfo.draggable">
-          拖拽
-        </FaButton>
-        <FaButton :variant="modalInfo.alignCenter ? 'default' : 'outline'" class="w-full" @click="modalInfo.alignCenter = !modalInfo.alignCenter">
-          窗口居中
-        </FaButton>
-        <FaButton :variant="modalInfo.center ? 'default' : 'outline'" class="w-full" @click="modalInfo.center = !modalInfo.center">
-          居中显示
-        </FaButton>
-        <FaButton :variant="modalInfo.header ? 'default' : 'outline'" class="w-full" @click="modalInfo.header = !modalInfo.header">
-          头部区域
-        </FaButton>
-        <FaButton :variant="modalInfo.footer ? 'default' : 'outline'" class="w-full" @click="modalInfo.footer = !modalInfo.footer">
-          尾部区域
-        </FaButton>
-        <FaButton :variant="!!modalInfo.contentHeight ? 'default' : 'outline'" class="w-full" @click="modalInfo.contentHeight = !!modalInfo.contentHeight ? '' : 'h-400'">
-          切换内容高度
-        </FaButton>
-        <FaButton variant="outline" class="w-full" @click="modalInfo.loading = true">
-          显示加载中
-        </FaButton>
-        <FaButton :variant="!!modalInfo.class ? 'default' : 'outline'" class="w-full" @click="modalInfo.class = !!modalInfo.class ? '' : 'sm:max-w-2xl'">
-          调整最大宽度
-        </FaButton>
-      </div>
-    </div>
-  </FaModal>
-</template>
diff --git a/apps/example/src/views/component_example/modal/_demo2.vue b/apps/example/src/views/component_example/modal/_demo2.vue
deleted file mode 100755
index 9689b587..00000000
--- a/apps/example/src/views/component_example/modal/_demo2.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-function showModalInfo() {
-  useFaModal().info({
-    title: '温馨提醒',
-    content: '这是 info 弹窗',
-    onConfirm: () => {
-      useFaToast().info('你点了确定')
-    },
-  })
-}
-function showModalSuccess() {
-  useFaModal().success({
-    title: '温馨提醒',
-    content: '这是 success 弹窗',
-    onConfirm: () => {
-      useFaToast().info('你点了确定')
-    },
-  })
-}
-function showModalWarning() {
-  useFaModal().warning({
-    title: '温馨提醒',
-    content: '这是 warning 弹窗',
-    onConfirm: () => {
-      useFaToast().info('你点了确定')
-    },
-  })
-}
-function showModalError() {
-  useFaModal().error({
-    title: '温馨提醒',
-    content: '这是 confirm 弹窗',
-    onConfirm: () => {
-      useFaToast().info('你点了确定')
-    },
-  })
-}
-function showModalConfirm() {
-  useFaModal().confirm({
-    title: '温馨提醒',
-    content: '这是 confirm 弹窗',
-    onConfirm: () => {
-      useFaToast().info('你点了确定')
-    },
-  })
-}
-function showModalDoubleConfirm() {
-  const { update } = useFaModal().confirm({
-    title: '温馨提醒',
-    content: '这是 confirm 弹窗',
-    beforeClose: (action, done) => {
-      if (action === 'confirm') {
-        update({
-          title: '二次确认',
-          content: '确定要关闭吗？',
-          confirmButtonText: '我确定',
-          cancelButtonText: '我取消',
-          beforeClose: (action) => {
-            if (action === 'confirm') {
-              done()
-            }
-            else {
-              done()
-            }
-          },
-        })
-      }
-      else {
-        done()
-      }
-    },
-  })
-}
-function showModalPromiseConfirm() {
-  useFaModal().confirm({
-    title: '温馨提醒',
-    content: '这是 confirm 弹窗',
-    confirmButtonText: '确认（随机成功或失败）',
-    beforeClose: async (action, done) => {
-      if (action === 'confirm') {
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        if (Math.random() > 0.5) {
-          useFaToast().success('成功了！')
-          done()
-        }
-        else {
-          useFaToast().error('失败了！')
-        }
-      }
-      else {
-        done()
-      }
-    },
-  })
-}
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <FaButton @click="showModalInfo">
-      Info
-    </FaButton>
-    <FaButton @click="showModalSuccess">
-      Success
-    </FaButton>
-    <FaButton @click="showModalWarning">
-      Warning
-    </FaButton>
-    <FaButton @click="showModalError">
-      Error
-    </FaButton>
-    <FaButton @click="showModalConfirm">
-      Confirm
-    </FaButton>
-    <FaButton @click="showModalDoubleConfirm">
-      Double Confirm
-    </FaButton>
-    <FaButton @click="showModalPromiseConfirm">
-      Confirm with promise
-    </FaButton>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/modal/_demo3.vue b/apps/example/src/views/component_example/modal/_demo3.vue
deleted file mode 100755
index 3964a509..00000000
--- a/apps/example/src/views/component_example/modal/_demo3.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="tsx">
-const TestComponent = defineComponent({
-  props: {
-    close: {
-      type: Function,
-    },
-  },
-  setup(props) {
-    const val = ref('123')
-    return () => (
-      <div class="flex flex-col gap-4">
-        <fa-input v-model={val.value} class="w-full" />
-        <fa-button onClick={() => props.close?.()}>
-          组件内部关闭弹窗
-        </fa-button>
-      </div>
-    )
-  },
-})
-
-const { open, close } = useFaModal().create({
-  title: '标题',
-  description: '这里是一段描述介绍',
-  beforeClose: (action, done) => {
-    if (action === 'close') {
-      useFaModal().confirm({
-        title: '提示',
-        content: '确定要关闭吗？',
-        onConfirm: () => {
-          done()
-        },
-      })
-    }
-    else {
-      done()
-    }
-  },
-  content: () => h(TestComponent, { close }),
-})
-</script>
-
-<template>
-  <FaButton @click="open">
-    打开
-  </FaButton>
-</template>
diff --git a/apps/example/src/views/component_example/modal/index.vue b/apps/example/src/views/component_example/modal/index.vue
deleted file mode 100755
index 0d12fff9..00000000
--- a/apps/example/src/views/component_example/modal/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="弹窗" description="FaModal" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="对话框" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="函数式调用" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/number_field.vue b/apps/example/src/views/component_example/number_field.vue
new file mode 100644
index 00000000..4754ed95
--- /dev/null
+++ b/apps/example/src/views/component_example/number_field.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { numberField } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="数字输入框" description="FaNumberField" />
+    <FaPageMain
+      v-for="example in numberField"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/number_field/_demo1.vue b/apps/example/src/views/component_example/number_field/_demo1.vue
deleted file mode 100755
index 1c398d82..00000000
--- a/apps/example/src/views/component_example/number_field/_demo1.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref(0)
-</script>
-
-<template>
-  <FaNumberField v-model="value" />
-</template>
diff --git a/apps/example/src/views/component_example/number_field/_demo2.vue b/apps/example/src/views/component_example/number_field/_demo2.vue
deleted file mode 100755
index 8da75c9e..00000000
--- a/apps/example/src/views/component_example/number_field/_demo2.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref(0)
-</script>
-
-<template>
-  <FaNumberField v-model="value" :min="0" :max="10" :step="0.1" />
-</template>
diff --git a/apps/example/src/views/component_example/number_field/index.vue b/apps/example/src/views/component_example/number_field/index.vue
deleted file mode 100755
index 4f2bf9e2..00000000
--- a/apps/example/src/views/component_example/number_field/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="数字输入框" description="FaInput" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="最小值 / 最大值 / 步长" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/page_header.vue b/apps/example/src/views/component_example/page_header.vue
new file mode 100755
index 00000000..df4eeb2c
--- /dev/null
+++ b/apps/example/src/views/component_example/page_header.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { pageHeader } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="页头" description="FaPageHeader" />
+    <FaPageMain
+      v-for="example in pageHeader"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/page_header/_demo1.vue b/apps/example/src/views/component_example/page_header/_demo1.vue
deleted file mode 100755
index e3cc7513..00000000
--- a/apps/example/src/views/component_example/page_header/_demo1.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <FaPageHeader title="页面标题">
-    <template #description>
-      <p>提供两块插槽：</p>
-      <p>一块是 description 区域插槽，一块是右侧区域</p>
-    </template>
-    <FaButton variant="outline">
-      <FaIcon name="i-ep:arrow-left" />
-      返回
-    </FaButton>
-  </FaPageHeader>
-</template>
diff --git a/apps/example/src/views/component_example/page_header/index.vue b/apps/example/src/views/component_example/page_header/index.vue
deleted file mode 100755
index f6022577..00000000
--- a/apps/example/src/views/component_example/page_header/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="页头" description="FaPageHeader" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/page_main.vue b/apps/example/src/views/component_example/page_main.vue
new file mode 100755
index 00000000..90da3d76
--- /dev/null
+++ b/apps/example/src/views/component_example/page_main.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { pageMain } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="内容块" description="FaPageMain" />
+    <FaPageMain
+      v-for="example in pageMain"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/page_main/_demo1.vue b/apps/example/src/views/component_example/page_main/_demo1.vue
deleted file mode 100755
index 451abe61..00000000
--- a/apps/example/src/views/component_example/page_main/_demo1.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <FaPageMain>
-    PageMain 是最常用的页面组件，几乎所有页面都会使用到
-  </FaPageMain>
-</template>
diff --git a/apps/example/src/views/component_example/page_main/_demo2.vue b/apps/example/src/views/component_example/page_main/_demo2.vue
deleted file mode 100755
index 93a06a8e..00000000
--- a/apps/example/src/views/component_example/page_main/_demo2.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <FaPageMain title="你可以设置一个自定义的标题">
-    这里放页面内容
-  </FaPageMain>
-</template>
diff --git a/apps/example/src/views/component_example/page_main/_demo4.vue b/apps/example/src/views/component_example/page_main/_demo4.vue
deleted file mode 100755
index 483d40d8..00000000
--- a/apps/example/src/views/component_example/page_main/_demo4.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <FaPageMain title="带展开/收起功能" collaspe height="100px">
-    <div class="space-y-4">
-      <h1 class="text-4xl font-bold">
-        Fantastic-admin
-      </h1>
-      <img src="@/assets/images/logo.svg" class="w-20">
-      <p>用过的人都说好！！！</p>
-    </div>
-  </FaPageMain>
-</template>
diff --git a/apps/example/src/views/component_example/page_main/index.vue b/apps/example/src/views/component_example/page_main/index.vue
deleted file mode 100755
index c761ae5e..00000000
--- a/apps/example/src/views/component_example/page_main/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="内容块" description="FaPageMain" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/pagination.vue b/apps/example/src/views/component_example/pagination.vue
new file mode 100644
index 00000000..e686e739
--- /dev/null
+++ b/apps/example/src/views/component_example/pagination.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { pagination } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="分页" description="FaPagination" />
+    <FaPageMain
+      v-for="example in pagination"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/pagination/_demo1.vue b/apps/example/src/views/component_example/pagination/_demo1.vue
deleted file mode 100644
index d27c66d9..00000000
--- a/apps/example/src/views/component_example/pagination/_demo1.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-</script>
-
-<template>
-  <FaPagination :page="page" :size="size" :total="total" />
-</template>
diff --git a/apps/example/src/views/component_example/pagination/_demo2.vue b/apps/example/src/views/component_example/pagination/_demo2.vue
deleted file mode 100644
index 977dcada..00000000
--- a/apps/example/src/views/component_example/pagination/_demo2.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-</script>
-
-<template>
-  <FaPagination :page="page" :size="size" :total="total" layout="jumper, pager, ->, total, sizes" />
-  <div class="my-4 border-t" />
-  <FaPagination :page="page" :size="size" :total="total" layout="pager" />
-</template>
diff --git a/apps/example/src/views/component_example/pagination/index.vue b/apps/example/src/views/component_example/pagination/index.vue
deleted file mode 100644
index 5badfdc0..00000000
--- a/apps/example/src/views/component_example/pagination/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="分页" description="FaPagination" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="布局" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/password_strength.vue b/apps/example/src/views/component_example/password_strength.vue
new file mode 100644
index 00000000..33160057
--- /dev/null
+++ b/apps/example/src/views/component_example/password_strength.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { passwordStrength } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="密码强度" description="FaPasswordStrength" />
+    <FaPageMain
+      v-for="example in passwordStrength"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/password_strength/index.vue b/apps/example/src/views/component_example/password_strength/index.vue
deleted file mode 100755
index 0b612a6b..00000000
--- a/apps/example/src/views/component_example/password_strength/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="密码强度" description="FaPasswordStrength" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/popover.vue b/apps/example/src/views/component_example/popover.vue
new file mode 100644
index 00000000..f2488d45
--- /dev/null
+++ b/apps/example/src/views/component_example/popover.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { popover } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="浮动面板" description="FaPopover" />
+    <FaPageMain
+      v-for="example in popover"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/popover/_demo1.vue b/apps/example/src/views/component_example/popover/_demo1.vue
deleted file mode 100755
index b5263c72..00000000
--- a/apps/example/src/views/component_example/popover/_demo1.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <FaPopover>
-    <FaButton>
-      浮动面板
-      <FaIcon name="i-ep:caret-bottom" />
-    </FaButton>
-    <template #panel>
-      <div class="flex h-30 w-60 items-center justify-center">
-        面板内容
-      </div>
-    </template>
-  </FaPopover>
-</template>
diff --git a/apps/example/src/views/component_example/popover/index.vue b/apps/example/src/views/component_example/popover/index.vue
deleted file mode 100755
index 82df51bf..00000000
--- a/apps/example/src/views/component_example/popover/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="浮动面板" description="FaPopover" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="手动关闭" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/progress.vue b/apps/example/src/views/component_example/progress.vue
new file mode 100644
index 00000000..8696b1ae
--- /dev/null
+++ b/apps/example/src/views/component_example/progress.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { progress } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="进度条" description="FaProgress" />
+    <FaPageMain
+      v-for="example in progress"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/progress/_demo1.vue b/apps/example/src/views/component_example/progress/_demo1.vue
deleted file mode 100755
index 601b7039..00000000
--- a/apps/example/src/views/component_example/progress/_demo1.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <FaProgress :model-value="33" />
-</template>
diff --git a/apps/example/src/views/component_example/progress/index.vue b/apps/example/src/views/component_example/progress/index.vue
deleted file mode 100755
index 7def6596..00000000
--- a/apps/example/src/views/component_example/progress/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="进度条" description="FaProgress" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/radio_group.vue b/apps/example/src/views/component_example/radio_group.vue
new file mode 100644
index 00000000..f2aee632
--- /dev/null
+++ b/apps/example/src/views/component_example/radio_group.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { radioGroup } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="单选组" description="FaRadioGroup" />
+    <FaPageMain
+      v-for="example in radioGroup"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/radio_group/index.vue b/apps/example/src/views/component_example/radio_group/index.vue
deleted file mode 100644
index 85b22b68..00000000
--- a/apps/example/src/views/component_example/radio_group/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="单选组" description="FaRadioGroup" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="带描述和禁用态" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="自定义选项内容" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/scroll_area.vue b/apps/example/src/views/component_example/scroll_area.vue
new file mode 100644
index 00000000..b3e1330a
--- /dev/null
+++ b/apps/example/src/views/component_example/scroll_area.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { scrollArea } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="滚动区域" description="FaScrollArea" />
+    <FaPageMain
+      v-for="example in scrollArea"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/scroll_area/_demo1.vue b/apps/example/src/views/component_example/scroll_area/_demo1.vue
deleted file mode 100755
index 6874e97d..00000000
--- a/apps/example/src/views/component_example/scroll_area/_demo1.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const scrollbar = ref(true)
-const mask = ref(false)
-</script>
-
-<template>
-  <div class="flex-col-start gap-4">
-    <div class="flex-col-start gap-4">
-      <div class="flex-center-start gap-4">
-        <div class="text-sm">
-          显示滚动条
-        </div>
-        <FaSwitch v-model="scrollbar" />
-      </div>
-      <div class="flex-center-start gap-4">
-        <div class="text-sm">
-          显示遮罩
-        </div>
-        <FaSwitch v-model="mask" />
-      </div>
-    </div>
-    <FaScrollArea :scrollbar :mask class="border rounded-md h-72 w-48">
-      <div v-for="tag in 20" :key="tag" class="text-sm p-4">
-        {{ tag }}
-      </div>
-    </FaScrollArea>
-    <FaScrollArea horizontal :scrollbar :mask class="border rounded-md w-96">
-      <div class="flex-center-start">
-        <div v-for="tag in 20" :key="tag" class="text-sm flex-center h-16 w-16">
-          {{ tag }}
-        </div>
-      </div>
-    </FaScrollArea>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/scroll_area/index.vue b/apps/example/src/views/component_example/scroll_area/index.vue
deleted file mode 100755
index a9252fcd..00000000
--- a/apps/example/src/views/component_example/scroll_area/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="滚动区域" description="FaScrollArea" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/search_bar.vue b/apps/example/src/views/component_example/search_bar.vue
new file mode 100755
index 00000000..65b264c0
--- /dev/null
+++ b/apps/example/src/views/component_example/search_bar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { searchBar } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="搜索面板" description="FaSearchBar" />
+    <FaPageMain
+      v-for="example in searchBar"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/search_bar/_demo1.vue b/apps/example/src/views/component_example/search_bar/_demo1.vue
deleted file mode 100755
index 77209bfc..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo1.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-</script>
-
-<template>
-  <FaSearchBar>
-    <template #default="{ fold }">
-      <ElForm :model="search" size="default" label-width="120px">
-        <ElRow>
-          <ElCol :span="12">
-            <ElFormItem label="姓名 / 手机号">
-              <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="6">
-            <ElFormItem label="部门">
-              <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-                <ElOption label="技术部" :value="1" />
-                <ElOption label="设计部" :value="2" />
-                <ElOption label="行政部" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="职位">
-              <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-                <ElOption label="程序员" :value="1" />
-                <ElOption label="设计师" :value="2" />
-                <ElOption label="人事" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="角色">
-              <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-                <ElOption label="主管" :value="1" />
-                <ElOption label="普通职员" :value="2" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="24">
-            <ElFormItem label="角色">
-              <ElCheckbox :value="true">
-                备选项
-              </ElCheckbox>
-              <ElCheckbox :value="false">
-                备选项
-              </ElCheckbox>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElFormItem>
-          <ElButton type="primary">
-            <template #icon>
-              <FaIcon name="i-ep:search" />
-            </template>
-            筛选
-          </ElButton>
-          <ElButton>导出</ElButton>
-          <ElButton type="primary" link>
-            查看已导出记录
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
diff --git a/apps/example/src/views/component_example/search_bar/_demo2.vue b/apps/example/src/views/component_example/search_bar/_demo2.vue
deleted file mode 100755
index 513bdf0c..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo2.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-</script>
-
-<template>
-  <FaSearchBar :fold="false">
-    <template #default="{ fold }">
-      <ElForm :model="search" size="default" label-width="120px">
-        <ElRow>
-          <ElCol :span="12">
-            <ElFormItem label="姓名 / 手机号">
-              <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="6">
-            <ElFormItem label="部门">
-              <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-                <ElOption label="技术部" :value="1" />
-                <ElOption label="设计部" :value="2" />
-                <ElOption label="行政部" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="职位">
-              <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-                <ElOption label="程序员" :value="1" />
-                <ElOption label="设计师" :value="2" />
-                <ElOption label="人事" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="角色">
-              <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-                <ElOption label="主管" :value="1" />
-                <ElOption label="普通职员" :value="2" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="24">
-            <ElFormItem label="复选框">
-              <ElCheckbox v-model="search.check1">
-                备选项
-              </ElCheckbox>
-              <ElCheckbox v-model="search.check2">
-                备选项
-              </ElCheckbox>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElFormItem>
-          <ElButton type="primary">
-            <template #icon>
-              <FaIcon name="i-ep:search" />
-            </template>
-            筛选
-          </ElButton>
-          <ElButton>导出</ElButton>
-          <ElButton type="primary" link>
-            查看已导出记录
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
diff --git a/apps/example/src/views/component_example/search_bar/_demo3.vue b/apps/example/src/views/component_example/search_bar/_demo3.vue
deleted file mode 100755
index 9438cd7e..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo3.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-</script>
-
-<template>
-  <FaSearchBar background>
-    <template #default="{ fold }">
-      <ElForm :model="search" size="default" label-width="120px">
-        <ElRow>
-          <ElCol :span="12">
-            <ElFormItem label="姓名 / 手机号">
-              <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="6">
-            <ElFormItem label="部门">
-              <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-                <ElOption label="技术部" :value="1" />
-                <ElOption label="设计部" :value="2" />
-                <ElOption label="行政部" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="职位">
-              <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-                <ElOption label="程序员" :value="1" />
-                <ElOption label="设计师" :value="2" />
-                <ElOption label="人事" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="角色">
-              <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-                <ElOption label="主管" :value="1" />
-                <ElOption label="普通职员" :value="2" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="24">
-            <ElFormItem label="复选框">
-              <ElCheckbox :value="true">
-                备选项
-              </ElCheckbox>
-              <ElCheckbox :value="false">
-                备选项
-              </ElCheckbox>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElFormItem>
-          <ElButton type="primary">
-            <template #icon>
-              <FaIcon name="i-ep:search" />
-            </template>
-            筛选
-          </ElButton>
-          <ElButton>导出</ElButton>
-          <ElButton type="primary" link>
-            查看已导出记录
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
diff --git a/apps/example/src/views/component_example/search_bar/_demo4.vue b/apps/example/src/views/component_example/search_bar/_demo4.vue
deleted file mode 100755
index 6f868230..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo4.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-
-function onToggle(fold: boolean) {
-  useFaToast()(fold ? '收起' : '展开')
-}
-</script>
-
-<template>
-  <FaSearchBar @toggle="onToggle">
-    <template #default="{ fold }">
-      <ElForm :model="search" size="default" label-width="120px">
-        <ElRow>
-          <ElCol :span="12">
-            <ElFormItem label="姓名 / 手机号">
-              <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="6">
-            <ElFormItem label="部门">
-              <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-                <ElOption label="技术部" :value="1" />
-                <ElOption label="设计部" :value="2" />
-                <ElOption label="行政部" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="职位">
-              <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-                <ElOption label="程序员" :value="1" />
-                <ElOption label="设计师" :value="2" />
-                <ElOption label="人事" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6">
-            <ElFormItem label="角色">
-              <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-                <ElOption label="主管" :value="1" />
-                <ElOption label="普通职员" :value="2" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElRow v-show="!fold">
-          <ElCol :span="24">
-            <ElFormItem label="复选框">
-              <ElCheckbox :value="true">
-                备选项
-              </ElCheckbox>
-              <ElCheckbox :value="false">
-                备选项
-              </ElCheckbox>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-        <ElFormItem>
-          <ElButton type="primary">
-            <template #icon>
-              <FaIcon name="i-ep:search" />
-            </template>
-            筛选
-          </ElButton>
-          <ElButton>导出</ElButton>
-          <ElButton type="primary" link>
-            查看已导出记录
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
diff --git a/apps/example/src/views/component_example/search_bar/_demo5.vue b/apps/example/src/views/component_example/search_bar/_demo5.vue
deleted file mode 100755
index c76cd09e..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo5.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-</script>
-
-<template>
-  <FaSearchBar :show-toggle="false">
-    <template #default="{ fold, toggle }">
-      <ElForm :model="search" size="default" label-width="120px" inline class="search-form">
-        <ElFormItem label="姓名 / 手机号" class="search-form-item-name">
-          <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-        </ElFormItem>
-        <ElFormItem v-show="!fold" label="部门">
-          <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-            <ElOption label="技术部" :value="1" />
-            <ElOption label="设计部" :value="2" />
-            <ElOption label="行政部" :value="3" />
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem v-show="!fold" label="职位">
-          <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-            <ElOption label="程序员" :value="1" />
-            <ElOption label="设计师" :value="2" />
-            <ElOption label="人事" :value="3" />
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem v-show="!fold" label="角色">
-          <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-            <ElOption label="主管" :value="1" />
-            <ElOption label="普通职员" :value="2" />
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem v-show="!fold" label="复选框">
-          <ElCheckbox v-model="search.check1">
-            备选项
-          </ElCheckbox>
-          <ElCheckbox v-model="search.check2">
-            备选项
-          </ElCheckbox>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton type="primary">
-            <template #icon>
-              <FaIcon name="i-ep:search" />
-            </template>
-            筛选
-          </ElButton>
-          <ElButton link @click="toggle">
-            <template #icon>
-              <FaIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top' " />
-            </template>
-            {{ fold ? '展开' : '收起' }}
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
-
-<style scoped>
-.search-form {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
-
-  :deep(.el-form-item) {
-    grid-column: auto / span 1;
-
-    &:last-child {
-      grid-column-end: -1;
-
-      .el-form-item__content {
-        justify-content: flex-end;
-      }
-    }
-
-    &.search-form-item-name {
-      grid-column: auto / span 2;
-    }
-  }
-}
-</style>
diff --git a/apps/example/src/views/component_example/search_bar/_demo6.vue b/apps/example/src/views/component_example/search_bar/_demo6.vue
deleted file mode 100755
index d140fc82..00000000
--- a/apps/example/src/views/component_example/search_bar/_demo6.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-const search = ref({
-  name: '',
-  department_id: '',
-  department_job_id: '',
-  role_id: '',
-  check1: true,
-  check2: false,
-})
-</script>
-
-<template>
-  <FaSearchBar :show-toggle="false">
-    <template #default="{ fold, toggle }">
-      <ElForm :model="search" size="default" label-width="120px">
-        <ElRow>
-          <ElCol :span="12">
-            <ElFormItem label="姓名 / 手机号">
-              <ElInput v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
-            </ElFormItem>
-          </ElCol>
-          <ElCol v-show="!fold" :span="6">
-            <ElFormItem label="部门">
-              <ElSelect v-model="search.department_id" clearable placeholder="请选择部门">
-                <ElOption label="技术部" :value="1" />
-                <ElOption label="设计部" :value="2" />
-                <ElOption label="行政部" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol v-show="!fold" :span="6">
-            <ElFormItem label="职位">
-              <ElSelect v-model="search.department_job_id" clearable placeholder="请选择职位">
-                <ElOption label="程序员" :value="1" />
-                <ElOption label="设计师" :value="2" />
-                <ElOption label="人事" :value="3" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol v-show="!fold" :span="6">
-            <ElFormItem label="角色">
-              <ElSelect v-model="search.role_id" clearable placeholder="请选择角色">
-                <ElOption label="主管" :value="1" />
-                <ElOption label="普通职员" :value="2" />
-              </ElSelect>
-            </ElFormItem>
-          </ElCol>
-          <ElCol v-show="!fold" :span="6">
-            <ElFormItem label="复选框">
-              <ElCheckbox v-model="search.check1">
-                备选项
-              </ElCheckbox>
-              <ElCheckbox v-model="search.check2">
-                备选项
-              </ElCheckbox>
-            </ElFormItem>
-          </ElCol>
-          <ElCol :span="6" :offset="6">
-            <ElFormItem label-width="0" class="action-box">
-              <ElButton type="primary">
-                <template #icon>
-                  <FaIcon name="i-ep:search" />
-                </template>
-                筛选
-              </ElButton>
-              <ElButton link @click="toggle">
-                <template #icon>
-                  <FaIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top' " />
-                </template>
-                {{ fold ? '展开' : '收起' }}
-              </ElButton>
-            </ElFormItem>
-          </ElCol>
-        </ElRow>
-      </ElForm>
-    </template>
-  </FaSearchBar>
-</template>
-
-<style scoped>
-.action-box {
-  :deep(.el-form-item__content) {
-    justify-content: flex-end;
-  }
-}
-</style>
diff --git a/apps/example/src/views/component_example/search_bar/index.vue b/apps/example/src/views/component_example/search_bar/index.vue
deleted file mode 100755
index 46795f7b..00000000
--- a/apps/example/src/views/component_example/search_bar/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-import Demo5 from './_demo5.vue'
-import Demo6 from './_demo6.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="搜索面板" description="FaSearchBar" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="默认展开" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="显示背景" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="切换事件" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-    <FaPageMain title="自定义切换按钮（搭配自定义 grid 布局）" main-class="p-4">
-      <Demo5 />
-    </FaPageMain>
-    <FaPageMain title="自定义切换按钮（搭配 el-row 组件）" main-class="p-4">
-      <Demo6 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/select.vue b/apps/example/src/views/component_example/select.vue
new file mode 100644
index 00000000..17e07883
--- /dev/null
+++ b/apps/example/src/views/component_example/select.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { select } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="选择器" description="FaSelect" />
+    <FaPageMain
+      v-for="example in select"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/select/_demo1.vue b/apps/example/src/views/component_example/select/_demo1.vue
deleted file mode 100755
index a3d16250..00000000
--- a/apps/example/src/views/component_example/select/_demo1.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const select = ref('1')
-</script>
-
-<template>
-  <FaSelect
-    v-model="select"
-    :options="[
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2', disabled: true },
-      { label: 'Option 3', value: '3' },
-    ]"
-  />
-</template>
diff --git a/apps/example/src/views/component_example/select/_demo2.vue b/apps/example/src/views/component_example/select/_demo2.vue
deleted file mode 100755
index 08bfac2a..00000000
--- a/apps/example/src/views/component_example/select/_demo2.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const select = ref('1')
-</script>
-
-<template>
-  <FaSelect
-    v-model="select"
-    :options="[
-      {
-        label: 'Group 1',
-        options: [
-          { label: 'Option 1', value: '1' },
-          { label: 'Option 2', value: '2' },
-        ],
-      },
-      {
-        label: 'Group 2',
-        options: [
-          { label: 'Option 3', value: '3' },
-          { label: 'Option 4', value: '4' },
-        ],
-      },
-    ]"
-  />
-</template>
diff --git a/apps/example/src/views/component_example/select/_demo3.vue b/apps/example/src/views/component_example/select/_demo3.vue
deleted file mode 100755
index 1a443f12..00000000
--- a/apps/example/src/views/component_example/select/_demo3.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const select = ref([])
-</script>
-
-<template>
-  <FaSelect
-    v-model="select"
-    :options="[
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
-    ]"
-    multiple
-  />
-</template>
diff --git a/apps/example/src/views/component_example/select/_demo5.vue b/apps/example/src/views/component_example/select/_demo5.vue
deleted file mode 100644
index a08119b8..00000000
--- a/apps/example/src/views/component_example/select/_demo5.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const modal = shallowRef(false)
-const cityInFaModal = shallowRef('shanghai')
-
-const options = [
-  { label: 'Beijing', value: 'beijing' },
-  { label: 'Shanghai', value: 'shanghai' },
-  { label: 'Shenzhen', value: 'shenzhen' },
-]
-</script>
-
-<template>
-  <div>
-    <div class="flex gap-2">
-      <FaButton @click="modal = true">
-        打开 FaModal
-      </FaButton>
-    </div>
-    <FaModal
-      v-model="modal"
-      title="FaModal 中的选择器"
-      description="在模态框内容区内使用 FaSelect"
-      :footer="false"
-      class="sm:max-w-lg"
-      content-class="min-h-auto"
-    >
-      <div class="py-4 flex flex-col gap-4">
-        <FaSelect
-          v-model="cityInFaModal"
-          :options="options"
-          placeholder="请选择城市"
-          class="w-full"
-        />
-        <div class="text-sm text-muted-foreground">
-          当前值：{{ cityInFaModal }}
-        </div>
-      </div>
-    </FaModal>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/select/index.vue b/apps/example/src/views/component_example/select/index.vue
deleted file mode 100755
index fe570733..00000000
--- a/apps/example/src/views/component_example/select/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
-import Demo4 from './_demo4.vue'
-import Demo5 from './_demo5.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="选择器" description="FaSelect" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="组" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="多选" main-class="p-4">
-      <Demo3 />
-    </FaPageMain>
-    <FaPageMain title="定位模式" main-class="p-4">
-      <Demo4 />
-    </FaPageMain>
-    <FaPageMain title="在 FaModal 里展示" main-class="p-4">
-      <Demo5 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/slider.vue b/apps/example/src/views/component_example/slider.vue
new file mode 100644
index 00000000..9f2fff3a
--- /dev/null
+++ b/apps/example/src/views/component_example/slider.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { slider } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="滑块" description="FaSlider" />
+    <FaPageMain
+      v-for="example in slider"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/slider/_demo1.vue b/apps/example/src/views/component_example/slider/_demo1.vue
deleted file mode 100755
index 4a043cd8..00000000
--- a/apps/example/src/views/component_example/slider/_demo1.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref<number[]>([0])
-</script>
-
-<template>
-  <FaSlider v-model="value" />
-</template>
diff --git a/apps/example/src/views/component_example/slider/_demo2.vue b/apps/example/src/views/component_example/slider/_demo2.vue
deleted file mode 100755
index 0bc33d1e..00000000
--- a/apps/example/src/views/component_example/slider/_demo2.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref<number[]>([0])
-</script>
-
-<template>
-  <FaSlider v-model="value" orientation="vertical" class="data-[orientation=vertical]:h-100" />
-</template>
diff --git a/apps/example/src/views/component_example/slider/index.vue b/apps/example/src/views/component_example/slider/index.vue
deleted file mode 100755
index 34dd8126..00000000
--- a/apps/example/src/views/component_example/slider/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="滑块" description="FaSlider" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="垂直滑块" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/switch.vue b/apps/example/src/views/component_example/switch.vue
new file mode 100644
index 00000000..09fca80f
--- /dev/null
+++ b/apps/example/src/views/component_example/switch.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { switch as switchExamples } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="开关" description="FaSwitch" />
+    <FaPageMain
+      v-for="example in switchExamples"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/switch/_demo1.vue b/apps/example/src/views/component_example/switch/_demo1.vue
deleted file mode 100755
index 61fc5451..00000000
--- a/apps/example/src/views/component_example/switch/_demo1.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const switchVal = ref(false)
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <FaSwitch v-model="switchVal" />
-    <FaSwitch v-model="switchVal" on-icon="ri:sun-line" off-icon="ri:moon-line" />
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/switch/_demo2.vue b/apps/example/src/views/component_example/switch/_demo2.vue
deleted file mode 100755
index f76908f6..00000000
--- a/apps/example/src/views/component_example/switch/_demo2.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const switchVal = ref(false)
-
-function handleBeforeChange() {
-  return new Promise<boolean>((resolve) => {
-    useFaModal().confirm({
-      title: '确认信息',
-      content: '确认吗？',
-      onConfirm: () => {
-        resolve(true)
-      },
-      onCancel: () => {
-        resolve(false)
-      },
-    })
-  })
-}
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <FaSwitch v-model="switchVal" :before-change="handleBeforeChange" />
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/switch/index.vue b/apps/example/src/views/component_example/switch/index.vue
deleted file mode 100755
index d06870f1..00000000
--- a/apps/example/src/views/component_example/switch/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="开关" description="FaSwitch" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="确认" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/tabs.vue b/apps/example/src/views/component_example/tabs.vue
new file mode 100644
index 00000000..09a71a0e
--- /dev/null
+++ b/apps/example/src/views/component_example/tabs.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { tabs } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="标签页" description="FaTabs" />
+    <FaPageMain
+      v-for="example in tabs"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/tabs/_demo1.vue b/apps/example/src/views/component_example/tabs/_demo1.vue
deleted file mode 100755
index 4eb8217f..00000000
--- a/apps/example/src/views/component_example/tabs/_demo1.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const tabs = ref(1)
-</script>
-
-<template>
-  <FaTabs v-model="tabs" :list="[{ label: '标签1', value: 1 }, { label: '标签2', value: 2 }, { label: '标签3', value: 3 }]" class="w-80">
-    <template #1>
-      标签1
-    </template>
-    <template #2>
-      标签2
-    </template>
-    <template #3>
-      标签3
-    </template>
-  </FaTabs>
-</template>
diff --git a/apps/example/src/views/component_example/tabs/index.vue b/apps/example/src/views/component_example/tabs/index.vue
deleted file mode 100755
index 69ccca77..00000000
--- a/apps/example/src/views/component_example/tabs/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="标签页" description="FaTabs" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/textarea.vue b/apps/example/src/views/component_example/textarea.vue
new file mode 100644
index 00000000..e17e07b3
--- /dev/null
+++ b/apps/example/src/views/component_example/textarea.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { textarea } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="文本域" description="FaTextarea" />
+    <FaPageMain
+      v-for="example in textarea"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/textarea/_demo1.vue b/apps/example/src/views/component_example/textarea/_demo1.vue
deleted file mode 100755
index fc56b47b..00000000
--- a/apps/example/src/views/component_example/textarea/_demo1.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <FaTextarea v-model="value" placeholder="请输入内容" />
-</template>
diff --git a/apps/example/src/views/component_example/textarea/index.vue b/apps/example/src/views/component_example/textarea/index.vue
deleted file mode 100755
index 7ab50ff5..00000000
--- a/apps/example/src/views/component_example/textarea/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="文本域" description="FaTextarea" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="插槽" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/toast.vue b/apps/example/src/views/component_example/toast.vue
new file mode 100644
index 00000000..ed00006a
--- /dev/null
+++ b/apps/example/src/views/component_example/toast.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { toast } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="轻提示" description="FaToast" />
+    <FaPageMain
+      v-for="example in toast"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/toast/_demo1.vue b/apps/example/src/views/component_example/toast/_demo1.vue
deleted file mode 100755
index 05ea4c57..00000000
--- a/apps/example/src/views/component_example/toast/_demo1.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-function showToast(type?: 'success' | 'error' | 'info' | 'warning' | 'action' | 'loading1' | 'loading2') {
-  if (type) {
-    if (type === 'loading1') {
-      useFaToast().promise(() => new Promise((resolve) => {
-        setTimeout(resolve, 2000)
-      }), {
-        loading: '加载中',
-        success: () => '加载成功',
-        error: () => '加载失败',
-        position: 'top-right',
-        duration: 3000,
-      })
-    }
-    else if (type === 'loading2') {
-      const loading = useFaToast().loading('加载中', {
-        position: 'top-right',
-        duration: Infinity,
-      })
-      setTimeout(() => {
-        useFaToast().dismiss(loading)
-        useFaToast()('Fantastic-admin 杰出的管理系统框架', {
-          description: '开箱即用，提供舒适开发体验',
-          position: 'top-right',
-          duration: 3000,
-        })
-      }, 2000)
-    }
-    else if (type === 'action') {
-      useFaToast()('Fantastic-admin 杰出的管理系统框架', {
-        description: '开箱即用，提供舒适开发体验',
-        position: 'top-right',
-        duration: 3000,
-        action: {
-          label: 'Undo',
-          onClick: () => {
-            useFaToast().success('操作成功')
-          },
-        },
-      })
-    }
-    else {
-      useFaToast()[type]('Fantastic-admin 杰出的管理系统框架', {
-        description: '开箱即用，提供舒适开发体验',
-        position: 'top-right',
-        duration: 3000,
-      })
-    }
-  }
-  else {
-    useFaToast()('Fantastic-admin 杰出的管理系统框架', {
-      description: '开箱即用，提供舒适开发体验',
-      position: 'top-right',
-      duration: 3000,
-    })
-  }
-}
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <FaButton @click="showToast()">
-      默认
-    </FaButton>
-    <FaButton @click="showToast('success')">
-      成功
-    </FaButton>
-    <FaButton @click="showToast('error')">
-      错误
-    </FaButton>
-    <FaButton @click="showToast('info')">
-      信息
-    </FaButton>
-    <FaButton @click="showToast('warning')">
-      警告
-    </FaButton>
-    <FaButton @click="showToast('action')">
-      操作
-    </FaButton>
-    <FaButton @click="showToast('loading1')">
-      加载中 1
-    </FaButton>
-    <FaButton @click="showToast('loading2')">
-      加载中 2
-    </FaButton>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/toast/index.vue b/apps/example/src/views/component_example/toast/index.vue
deleted file mode 100755
index 3e2a88f5..00000000
--- a/apps/example/src/views/component_example/toast/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="轻提示" description="FaToast" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/tooltip.vue b/apps/example/src/views/component_example/tooltip.vue
new file mode 100644
index 00000000..dc69d641
--- /dev/null
+++ b/apps/example/src/views/component_example/tooltip.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { tooltip } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="文字提示" description="FaTooltip" />
+    <FaPageMain
+      v-for="example in tooltip"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/tooltip/_demo1.vue b/apps/example/src/views/component_example/tooltip/_demo1.vue
deleted file mode 100755
index a4315a5d..00000000
--- a/apps/example/src/views/component_example/tooltip/_demo1.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <FaTooltip text="注意噢！">
-    <FaIcon name="i-ri:question-line" />
-  </FaTooltip>
-</template>
diff --git a/apps/example/src/views/component_example/tooltip/index.vue b/apps/example/src/views/component_example/tooltip/index.vue
deleted file mode 100755
index 6a9f3b0a..00000000
--- a/apps/example/src/views/component_example/tooltip/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Demo1 from './_demo1.vue'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="文字提示" description="FaTooltip" />
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/trend/index.vue b/apps/example/src/views/component_example/trend.vue
similarity index 55%
rename from apps/example/src/views/component_example/trend/index.vue
rename to apps/example/src/views/component_example/trend.vue
index 915905ed..36281c7a 100755
--- a/apps/example/src/views/component_example/trend/index.vue
+++ b/apps/example/src/views/component_example/trend.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Demo1 from './_demo1.vue'
-import Demo2 from './_demo2.vue'
-import Demo3 from './_demo3.vue'
+import { trend } from '@fantastic-admin/components/examples'
 </script>
 
 <template>
@@ -14,14 +12,13 @@ import Demo3 from './_demo3.vue'
         </div>
       </template>
     </FaPageHeader>
-    <FaPageMain main-class="p-4">
-      <Demo1 />
-    </FaPageMain>
-    <FaPageMain title="颜色反转" main-class="p-4">
-      <Demo2 />
-    </FaPageMain>
-    <FaPageMain title="前缀后缀" main-class="p-4">
-      <Demo3 />
+    <FaPageMain
+      v-for="example in trend"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
     </FaPageMain>
   </div>
 </template>
diff --git a/apps/example/src/views/icon_example/index.vue b/apps/example/src/views/icon_example/index.vue
deleted file mode 100755
index e7801bce..00000000
--- a/apps/example/src/views/icon_example/index.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { icons } from '@/iconify'
-
-const { copy, isSupported } = useClipboard()
-
-function onCopy(iconName: string) {
-  if (isSupported.value) {
-    copy(`<FaIcon name="i-${iconName}" />`)
-    useFaToast().success('复制成功', {
-      description: `<FaIcon name="i-${iconName}" />`,
-    })
-  }
-}
-
-const webImage = ref('https://picsum.photos/50')
-function change() {
-  webImage.value = ''
-  webImage.value = `https://picsum.photos/50?random=${Math.random()}`
-}
-
-const fa = new URL('@/assets/images/logo.svg', import.meta.url).href
-
-const active = ref(false)
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="FaIcon" description="FaIcon 是统一的图标组件，支持 Iconify、UnoCSS、SVG 雪碧图和图片 URL 四种图标来源" />
-
-    <!-- Iconify -->
-    <FaPageMain title="Iconify">
-      <div class="gap-4 grid grid-cols-2 xl:grid-cols-3">
-        <div v-for="(icon, key) in icons" :key="key" class="p-4">
-          <p class="text-sm font-medium mb-3">
-            {{ icon.info.name }}
-          </p>
-          <div class="flex flex-wrap gap-2">
-            <FaTooltip v-for="(item, index) in icon.info.samples" :key="index" :text="`i-${icon.prefix}:${item}`">
-              <FaButton variant="outline" size="icon" class="size-10" @click="onCopy(`${icon.prefix}:${item}`)">
-                <FaIcon :name="`${icon.prefix}:${item}`" class="size-5" />
-              </FaButton>
-            </FaTooltip>
-          </div>
-        </div>
-      </div>
-    </FaPageMain>
-
-    <!-- SVG Icon -->
-    <FaPageMain title="SVG Icon">
-      <div class="space-y-4">
-        <div>
-          <p class="text-sm text-muted-foreground font-medium mb-3">
-            单色
-          </p>
-          <div class="flex gap-4">
-            <div v-for="name in ['example-emotion-line', 'example-emotion-laugh-line', 'example-emotion-unhappy-line']" :key="name" class="p-3 flex flex-col gap-1.5 w-20 items-center">
-              <FaIcon :name="name" class="size-10" />
-              <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name.replace('example-', '') }}</span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <p class="text-sm text-muted-foreground font-medium mb-3">
-            彩色
-          </p>
-          <div class="flex gap-4">
-            <div v-for="name in ['example-crown', 'example-star', 'example-vip']" :key="name" class="p-3 flex flex-col gap-1.5 w-20 items-center">
-              <FaIcon :name="name" class="size-10" />
-              <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name.replace('example-', '') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </FaPageMain>
-
-    <!-- Image Icon -->
-    <FaPageMain title="Image Icon">
-      <div class="flex gap-6">
-        <div class="p-4 flex flex-col gap-3 items-center">
-          <span class="text-xs text-muted-foreground font-medium">网络图片</span>
-          <FaIcon :name="webImage" class="size-12" />
-          <div class="flex gap-2">
-            <FaButton size="sm" @click="change">
-              更换图片
-            </FaButton>
-            <FaButton size="sm" variant="outline" @click="webImage = 'https://xxx/'">
-              触发错误
-            </FaButton>
-          </div>
-        </div>
-        <div class="p-4 flex flex-col gap-3 items-center">
-          <span class="text-xs text-muted-foreground font-medium">本地图片</span>
-          <FaIcon :name="fa" class="size-12" />
-        </div>
-      </div>
-    </FaPageMain>
-
-    <!-- Icon Transition -->
-    <FaPageMain title="Icon Transition">
-      <div class="flex gap-6 items-end">
-        <div class="px-6 py-4 flex flex-col gap-3 items-center">
-          <span class="text-xs text-muted-foreground font-medium">无动画</span>
-          <FaIcon :name="active ? 'i-lucide:heart' : 'i-lucide:star'" class="size-8" />
-        </div>
-        <div class="px-6 py-4 flex flex-col gap-3 items-center">
-          <span class="text-xs text-muted-foreground font-medium">开启动画</span>
-          <FaIcon :name="active ? 'i-lucide:heart' : 'i-lucide:star'" class="size-8" transition />
-        </div>
-        <FaButton @click="active = !active">
-          切换图标
-        </FaButton>
-      </div>
-    </FaPageMain>
-  </div>
-</template>
diff --git a/packages/components/package.json b/packages/components/package.json
index 8f63f4d1..d5bd5fd0 100755
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -7,6 +7,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./examples": "./src/examples.ts",
     "./resolver": "./resolver.ts"
   },
   "peerDependencies": {
diff --git a/packages/components/src/basic/alert/README.md b/packages/components/src/basic/alert/README.md
index a8a4c6c5..22995218 100644
--- a/packages/components/src/basic/alert/README.md
+++ b/packages/components/src/basic/alert/README.md
@@ -26,57 +26,6 @@
 |------|------|
 | `description` | 自定义描述内容，会覆盖 `description` prop 的显示 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaAlert
-    icon="i-lucide:info"
-    title="提示信息"
-    description="这是一条普通提示，用于展示页面说明或操作反馈。"
-  />
-</template>
-```
-
-### 不同样式
-
-```vue
-<template>
-  <div class="space-y-4">
-    <FaAlert
-      icon="i-lucide:info"
-      title="普通提示"
-      description="这是一条普通提示。"
-    />
-    <FaAlert
-      icon="i-lucide:circle-alert"
-      title="危险提示"
-      description="这是一条需要用户注意的危险提示。"
-      variant="destructive"
-    />
-  </div>
-</template>
-```
-
-### 自定义描述内容
-
-```vue
-<template>
-  <FaAlert icon="i-lucide:terminal" title="命令执行完成">
-    <template #description>
-      <div>
-        已成功生成文件，可继续进行下一步操作。
-        <FaButton variant="link" class="h-auto px-0">
-          查看详情
-        </FaButton>
-      </div>
-    </template>
-  </FaAlert>
-</template>
-```
-
 ## 注意事项
 
 1. **图标设置**：`icon` 使用 Iconify 图标名称，留空则不显示图标
diff --git a/apps/example/src/views/component_example/alert/_demo1.vue b/packages/components/src/basic/alert/_examples/_basic.vue
similarity index 56%
rename from apps/example/src/views/component_example/alert/_demo1.vue
rename to packages/components/src/basic/alert/_examples/_basic.vue
index 8e8e27d4..308c9fb4 100644
--- a/apps/example/src/views/component_example/alert/_demo1.vue
+++ b/packages/components/src/basic/alert/_examples/_basic.vue
@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaAlert from '../index.vue'
+</script>
+
 <template>
   <FaAlert
     icon="i-lucide:info"
diff --git a/apps/example/src/views/component_example/alert/_demo3.vue b/packages/components/src/basic/alert/_examples/_slot.vue
similarity index 64%
rename from apps/example/src/views/component_example/alert/_demo3.vue
rename to packages/components/src/basic/alert/_examples/_slot.vue
index 4dfabd7b..7205807f 100644
--- a/apps/example/src/views/component_example/alert/_demo3.vue
+++ b/packages/components/src/basic/alert/_examples/_slot.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaAlert from '../index.vue'
+</script>
+
 <template>
   <FaAlert icon="i-lucide:terminal" title="命令执行完成">
     <template #description>
diff --git a/packages/components/src/basic/alert/_examples/_variant.vue b/packages/components/src/basic/alert/_examples/_variant.vue
new file mode 100644
index 00000000..bc9bd0b6
--- /dev/null
+++ b/packages/components/src/basic/alert/_examples/_variant.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaAlert from '../index.vue'
+</script>
+
+<template>
+  <FaAlert
+    icon="i-lucide:circle-alert"
+    title="危险提示"
+    description="删除后数据将无法恢复，请谨慎操作。"
+    variant="destructive"
+  />
+</template>
diff --git a/packages/components/src/basic/alert/_examples/index.ts b/packages/components/src/basic/alert/_examples/index.ts
new file mode 100644
index 00000000..998ab95b
--- /dev/null
+++ b/packages/components/src/basic/alert/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import Variant from './_variant.vue'
+import VariantRaw from './_variant.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '警告类型',
+    component: Variant,
+    componentRaw: VariantRaw,
+  },
+  {
+    title: '自定义描述',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+]
diff --git a/packages/components/src/basic/avatar/README.md b/packages/components/src/basic/avatar/README.md
index d804adcb..2baade95 100644
--- a/packages/components/src/basic/avatar/README.md
+++ b/packages/components/src/basic/avatar/README.md
@@ -25,86 +25,6 @@
 |------|------|
 | `default` | 自定义降级内容（覆盖 fallback） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaAvatar src="https://example.com/avatar.jpg" fallback="张三" />
-</template>
-```
-
-### 基础头像
-
-```vue
-<template>
-  <FaAvatar src="https://example.com/avatar.jpg" />
-</template>
-```
-
-### 带降级文本
-
-```vue
-<template>
-  <FaAvatar src="https://example.com/avatar.jpg" fallback="张三" />
-  <FaAvatar src="invalid-url.jpg" fallback="李四" />
-</template>
-```
-
-### 自定义降级内容
-
-```vue
-<template>
-  <FaAvatar src="invalid-url.jpg">
-    <FaIcon name="i-lucide:user" />
-  </FaAvatar>
-</template>
-```
-
-### 不同尺寸
-
-```vue
-<template>
-  <FaAvatar src="https://example.com/avatar.jpg" class="size-8" />
-  <FaAvatar src="https://example.com/avatar.jpg" class="size-10" />
-  <FaAvatar src="https://example.com/avatar.jpg" class="size-12" />
-  <FaAvatar src="https://example.com/avatar.jpg" class="size-16" />
-</template>
-```
-
-### 圆形头像
-
-```vue
-<template>
-  <FaAvatar src="https://example.com/avatar.jpg" class="rounded-full" />
-</template>
-```
-
-### 头像列表
-
-```vue
-<template>
-  <div class="flex -space-x-2">
-    <FaAvatar src="https://example.com/avatar1.jpg" class="size-8 rounded-full ring-2 ring-white" />
-    <FaAvatar src="https://example.com/avatar2.jpg" class="size-8 rounded-full ring-2 ring-white" />
-    <FaAvatar src="https://example.com/avatar3.jpg" class="size-8 rounded-full ring-2 ring-white" />
-    <FaAvatar fallback="+5" class="size-8 rounded-full ring-2 ring-white bg-muted" />
-  </div>
-</template>
-```
-
-### 带状态标识
-
-```vue
-<template>
-  <div class="relative">
-    <FaAvatar src="https://example.com/avatar.jpg" class="size-12 rounded-full" />
-    <span class="absolute bottom-0 right-0 size-3 bg-green-500 rounded-full ring-2 ring-white" />
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **图片加载失败**：当图片加载失败时，会自动显示 `fallback` 文本或自定义 slot 内容
diff --git a/packages/components/src/basic/avatar/_examples/_basic.vue b/packages/components/src/basic/avatar/_examples/_basic.vue
new file mode 100644
index 00000000..6dd6f07b
--- /dev/null
+++ b/packages/components/src/basic/avatar/_examples/_basic.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaAvatar from '../index.vue'
+</script>
+
+<template>
+  <FaAvatar src="https://fantastic-admin.hurui.me/logo.svg" />
+</template>
diff --git a/packages/components/src/basic/avatar/_examples/_custom-style.vue b/packages/components/src/basic/avatar/_examples/_custom-style.vue
new file mode 100644
index 00000000..5cfdcc2a
--- /dev/null
+++ b/packages/components/src/basic/avatar/_examples/_custom-style.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTooltip from '../../tooltip/index.vue'
+import FaAvatar from '../index.vue'
+</script>
+
+<template>
+  <div class="flex space-x--2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background">
+    <FaTooltip text="Fantastic-admin">
+      <FaAvatar src="https://github.com/fantastic-admin.png" class="transition hover:(scale-110 z-1)" />
+    </FaTooltip>
+    <FaTooltip text="Hooray">
+      <FaAvatar src="https://github.com/hooray.png" class="transition hover:(scale-110 z-1)" />
+    </FaTooltip>
+    <FaTooltip text="Admin">
+      <FaAvatar src="https://api.dicebear.com/9.x/bottts-neutral/svg?seed=admin" class="transition hover:(scale-110 z-1)" />
+    </FaTooltip>
+  </div>
+</template>
diff --git a/packages/components/src/basic/avatar/_examples/_fallback.vue b/packages/components/src/basic/avatar/_examples/_fallback.vue
new file mode 100644
index 00000000..fa30d920
--- /dev/null
+++ b/packages/components/src/basic/avatar/_examples/_fallback.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaAvatar from '../index.vue'
+</script>
+
+<template>
+  <FaAvatar src="" fallback="Hooray" />
+</template>
diff --git a/packages/components/src/basic/avatar/_examples/index.ts b/packages/components/src/basic/avatar/_examples/index.ts
new file mode 100644
index 00000000..2828d910
--- /dev/null
+++ b/packages/components/src/basic/avatar/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Fallback from './_fallback.vue'
+import FallbackRaw from './_fallback.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '回退显示',
+    component: Fallback,
+    componentRaw: FallbackRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+]
diff --git a/packages/components/src/basic/button-group/README.md b/packages/components/src/basic/button-group/README.md
index 4436746c..31efe4c7 100644
--- a/packages/components/src/basic/button-group/README.md
+++ b/packages/components/src/basic/button-group/README.md
@@ -21,121 +21,6 @@
 |------|------|
 | default | 默认插槽，放置 FaButton 组件 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaButtonGroup>
-    <FaButton>
-      <FaIcon name="i-mdi:eye" />
-      查看详情
-    </FaButton>
-    <FaButton>
-      <FaIcon name="i-mdi:pencil" />
-      编辑
-    </FaButton>
-    <FaButton>
-      <FaIcon name="i-mdi:delete" />
-      删除
-    </FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 垂直排列
-
-```vue
-<template>
-  <FaButtonGroup orientation="vertical">
-    <FaButton>操作 1</FaButton>
-    <FaButton>操作 2</FaButton>
-    <FaButton>操作 3</FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 带分割线
-
-```vue
-<template>
-  <FaButtonGroup :separator="true">
-    <FaButton variant="outline">复制</FaButton>
-    <FaButton variant="outline">粘贴</FaButton>
-    <FaButton variant="outline">剪切</FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 工具栏按钮组
-
-```vue
-<template>
-  <FaButtonGroup>
-    <FaButton variant="ghost" size="icon">
-      <FaIcon name="i-lucide:bold" />
-    </FaButton>
-    <FaButton variant="ghost" size="icon">
-      <FaIcon name="i-lucide:italic" />
-    </FaButton>
-    <FaButton variant="ghost" size="icon">
-      <FaIcon name="i-lucide:underline" />
-    </FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 垂直菜单
-
-```vue
-<template>
-  <FaButtonGroup orientation="vertical" :separator="true" class="w-48">
-    <FaButton variant="ghost" class="justify-start">
-      <FaIcon name="i-heroicons:user" class="mr-2" />
-      个人资料
-    </FaButton>
-    <FaButton variant="ghost" class="justify-start">
-      <FaIcon name="i-heroicons:cog" class="mr-2" />
-      账户设置
-    </FaButton>
-    <FaButton variant="ghost" class="justify-start">
-      <FaIcon name="i-heroicons:shield-check" class="mr-2" />
-      安全选项
-    </FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 与其他组件组合
-
-```vue
-<template>
-  <FaButtonGroup>
-    <FaSelect v-model="action" class="w-32">
-      <FaSelectOption value="export">导出</FaSelectOption>
-      <FaSelectOption value="import">导入</FaSelectOption>
-    </FaSelect>
-    <FaButton>执行</FaButton>
-  </FaButtonGroup>
-</template>
-```
-
-### 嵌套按钮组
-
-```vue
-<template>
-  <FaButtonGroup>
-    <FaButton>左侧</FaButton>
-    <FaButtonGroup :separator="true">
-      <FaButton>嵌套 1</FaButton>
-      <FaButton>嵌套 2</FaButton>
-    </FaButtonGroup>
-    <FaButton>右侧</FaButton>
-  </FaButtonGroup>
-</template>
-```
-
 ## 注意事项
 
 - 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/apps/example/src/views/component_example/button_group/_demo1.vue b/packages/components/src/basic/button-group/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 60%
rename from apps/example/src/views/component_example/button_group/_demo1.vue
rename to packages/components/src/basic/button-group/_examples/_basic.vue
index 36d89c2f..de742019
--- a/apps/example/src/views/component_example/button_group/_demo1.vue
+++ b/packages/components/src/basic/button-group/_examples/_basic.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaButtonGroup from '../index.vue'
+</script>
+
 <template>
   <FaButtonGroup>
     <FaButton>
diff --git a/apps/example/src/views/component_example/button_group/_demo4.vue b/packages/components/src/basic/button-group/_examples/_nested.vue
old mode 100755
new mode 100644
similarity index 74%
rename from apps/example/src/views/component_example/button_group/_demo4.vue
rename to packages/components/src/basic/button-group/_examples/_nested.vue
index c35b2f53..d1733331
--- a/apps/example/src/views/component_example/button_group/_demo4.vue
+++ b/packages/components/src/basic/button-group/_examples/_nested.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaButtonGroup from '../index.vue'
+</script>
+
 <template>
   <FaButtonGroup>
     <FaButtonGroup>
diff --git a/apps/example/src/views/component_example/button_group/_demo3.vue b/packages/components/src/basic/button-group/_examples/_separator.vue
old mode 100755
new mode 100644
similarity index 84%
rename from apps/example/src/views/component_example/button_group/_demo3.vue
rename to packages/components/src/basic/button-group/_examples/_separator.vue
index c3310c7f..a6881335
--- a/apps/example/src/views/component_example/button_group/_demo3.vue
+++ b/packages/components/src/basic/button-group/_examples/_separator.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaButtonGroup from '../index.vue'
+</script>
+
 <template>
   <div class="flex flex-col gap-4 items-start">
     <FaButtonGroup separator>
diff --git a/apps/example/src/views/component_example/button_group/_demo2.vue b/packages/components/src/basic/button-group/_examples/_vertical.vue
old mode 100755
new mode 100644
similarity index 61%
rename from apps/example/src/views/component_example/button_group/_demo2.vue
rename to packages/components/src/basic/button-group/_examples/_vertical.vue
index ef1f2813..155c2cb5
--- a/apps/example/src/views/component_example/button_group/_demo2.vue
+++ b/packages/components/src/basic/button-group/_examples/_vertical.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaButtonGroup from '../index.vue'
+</script>
+
 <template>
   <FaButtonGroup orientation="vertical">
     <FaButton>
diff --git a/apps/example/src/views/component_example/button_group/_demo5.vue b/packages/components/src/basic/button-group/_examples/_with-components.vue
old mode 100755
new mode 100644
similarity index 73%
rename from apps/example/src/views/component_example/button_group/_demo5.vue
rename to packages/components/src/basic/button-group/_examples/_with-components.vue
index 28945bb6..8b8a04e0
--- a/apps/example/src/views/component_example/button_group/_demo5.vue
+++ b/packages/components/src/basic/button-group/_examples/_with-components.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-const currency = ref('CNY')
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDropdown from '../../dropdown/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaButtonGroup from '../index.vue'
+
+const currency = shallowRef('CNY')
 </script>
 
 <template>
diff --git a/packages/components/src/basic/button-group/_examples/index.ts b/packages/components/src/basic/button-group/_examples/index.ts
new file mode 100644
index 00000000..bfcd6c1e
--- /dev/null
+++ b/packages/components/src/basic/button-group/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Nested from './_nested.vue'
+import NestedRaw from './_nested.vue?raw'
+import Separator from './_separator.vue'
+import SeparatorRaw from './_separator.vue?raw'
+import Vertical from './_vertical.vue'
+import VerticalRaw from './_vertical.vue?raw'
+import WithComponents from './_with-components.vue'
+import WithComponentsRaw from './_with-components.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '垂直',
+    component: Vertical,
+    componentRaw: VerticalRaw,
+  },
+  {
+    title: '分割线',
+    component: Separator,
+    componentRaw: SeparatorRaw,
+  },
+  {
+    title: '嵌套',
+    component: Nested,
+    componentRaw: NestedRaw,
+  },
+  {
+    title: '与其他组件组合',
+    component: WithComponents,
+    componentRaw: WithComponentsRaw,
+  },
+]
diff --git a/packages/components/src/basic/button/README.md b/packages/components/src/basic/button/README.md
index 01f67737..804cde25 100644
--- a/packages/components/src/basic/button/README.md
+++ b/packages/components/src/basic/button/README.md
@@ -26,88 +26,6 @@
 |------|------|
 | `default` | 按钮内容（图标、文字等） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaButton>默认按钮</FaButton>
-  <FaButton variant="destructive">危险按钮</FaButton>
-  <FaButton variant="outline">边框按钮</FaButton>
-</template>
-```
-
-### 不同样式变体
-
-```vue
-<template>
-  <FaButton>默认</FaButton>
-  <FaButton variant="secondary">次要</FaButton>
-  <FaButton variant="destructive">危险</FaButton>
-  <FaButton variant="outline">边框</FaButton>
-  <FaButton variant="ghost">幽灵</FaButton>
-  <FaButton variant="link">链接</FaButton>
-</template>
-```
-
-### 不同尺寸
-
-```vue
-<template>
-  <FaButton size="sm">小按钮</FaButton>
-  <FaButton>默认尺寸</FaButton>
-  <FaButton size="lg">大按钮</FaButton>
-  <FaButton size="icon"><FaIcon name="i-lucide:search" /></FaButton>
-  <FaButton size="icon-sm"><FaIcon name="i-lucide:search" /></FaButton>
-  <FaButton size="icon-lg"><FaIcon name="i-lucide:search" /></FaButton>
-</template>
-```
-
-### 加载状态
-
-```vue
-<script setup lang="ts">
-const loading = ref(false)
-
-function handleClick() {
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-  }, 2000)
-}
-</script>
-
-<template>
-  <FaButton :loading="loading" @click="handleClick">
-    {{ loading ? '加载中...' : '点击加载' }}
-  </FaButton>
-</template>
-```
-
-### 禁用状态
-
-```vue
-<template>
-  <FaButton disabled>禁用按钮</FaButton>
-  <FaButton :disabled="true" variant="outline">禁用边框按钮</FaButton>
-</template>
-```
-
-### 带图标按钮
-
-```vue
-<template>
-  <FaButton>
-    <FaIcon name="i-lucide:plus" />
-    添加
-  </FaButton>
-  <FaButton size="icon">
-    <FaIcon name="i-lucide:search" />
-  </FaButton>
-</template>
-```
-
 ## 注意事项
 
 1. **loading 状态**：设置 `loading` 为 `true` 时，按钮会自动显示旋转加载图标并禁用点击
diff --git a/packages/components/src/basic/button/_examples/_basic.vue b/packages/components/src/basic/button/_examples/_basic.vue
new file mode 100644
index 00000000..d6cb8592
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/_basic.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
+</script>
+
+<template>
+  <FaButton>
+    按钮
+  </FaButton>
+</template>
diff --git a/packages/components/src/basic/button/_examples/_disabled.vue b/packages/components/src/basic/button/_examples/_disabled.vue
new file mode 100644
index 00000000..aa206975
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/_disabled.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaButton disabled>
+      禁用按钮
+    </FaButton>
+    <FaButton variant="outline" disabled>
+      禁用边框按钮
+    </FaButton>
+    <FaButton variant="secondary" disabled>
+      禁用次要按钮
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/button/_examples/_loading.vue b/packages/components/src/basic/button/_examples/_loading.vue
new file mode 100644
index 00000000..b1123620
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/_loading.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaButton loading>
+      加载中
+    </FaButton>
+    <FaButton variant="outline" loading>
+      保存中
+    </FaButton>
+    <FaButton variant="secondary" loading>
+      提交中
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/button/_examples/_size.vue b/packages/components/src/basic/button/_examples/_size.vue
new file mode 100644
index 00000000..4d42bd0d
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/_size.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import FaButton from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 items-center">
+    <FaButton size="sm">
+      小按钮
+    </FaButton>
+    <FaButton>
+      默认尺寸
+    </FaButton>
+    <FaButton size="lg">
+      大按钮
+    </FaButton>
+    <FaButton size="icon-sm" variant="outline">
+      <FaIcon name="i-lucide:search" />
+    </FaButton>
+    <FaButton size="icon" variant="outline">
+      <FaIcon name="i-lucide:settings" />
+    </FaButton>
+    <FaButton size="icon-lg" variant="outline">
+      <FaIcon name="i-lucide:plus" />
+    </FaButton>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/button/_demo1.vue b/packages/components/src/basic/button/_examples/_variant.vue
old mode 100755
new mode 100644
similarity index 51%
rename from apps/example/src/views/component_example/button/_demo1.vue
rename to packages/components/src/basic/button/_examples/_variant.vue
index a6a42532..95d02af0
--- a/apps/example/src/views/component_example/button/_demo1.vue
+++ b/packages/components/src/basic/button/_examples/_variant.vue
@@ -1,28 +1,27 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
+</script>
+
 <template>
-  <div class="flex gap-4">
+  <div class="flex flex-wrap gap-4">
     <FaButton>
-      按钮
+      默认按钮
     </FaButton>
     <FaButton variant="destructive">
-      按钮
+      危险按钮
     </FaButton>
     <FaButton variant="outline">
-      按钮
+      边框按钮
     </FaButton>
     <FaButton variant="secondary">
-      按钮
+      次要按钮
     </FaButton>
     <FaButton variant="ghost">
-      按钮
+      幽灵按钮
     </FaButton>
     <FaButton variant="link">
-      按钮
-    </FaButton>
-    <FaButton disabled>
-      按钮
-    </FaButton>
-    <FaButton loading>
-      按钮
+      链接按钮
     </FaButton>
   </div>
 </template>
diff --git a/packages/components/src/basic/button/_examples/index.ts b/packages/components/src/basic/button/_examples/index.ts
new file mode 100644
index 00000000..dbf0a417
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Loading from './_loading.vue'
+import LoadingRaw from './_loading.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+import Variant from './_variant.vue'
+import VariantRaw from './_variant.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '变体',
+    component: Variant,
+    componentRaw: VariantRaw,
+  },
+  {
+    title: '尺寸',
+    component: Size,
+    componentRaw: SizeRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '加载',
+    component: Loading,
+    componentRaw: LoadingRaw,
+  },
+]
diff --git a/packages/components/src/basic/card/README.md b/packages/components/src/basic/card/README.md
index 85afb969..8e9533c3 100644
--- a/packages/components/src/basic/card/README.md
+++ b/packages/components/src/basic/card/README.md
@@ -29,106 +29,6 @@
 | `default` | 卡片内容 |
 | `footer` | 卡片页脚 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaCard title="卡片标题" description="卡片描述">
-    卡片内容
-  </FaCard>
-</template>
-```
-
-### 基础卡片
-
-```vue
-<template>
-  <FaCard title="标题" description="描述信息">
-    <p>这是卡片的内容区域。</p>
-  </FaCard>
-</template>
-```
-
-### 仅标题
-
-```vue
-<template>
-  <FaCard title="卡片标题">
-    <p>只有标题的卡片内容。</p>
-  </FaCard>
-</template>
-```
-
-### 自定义头部
-
-```vue
-<template>
-  <FaCard>
-    <template #header>
-      <div class="flex items-center gap-2">
-        <FaIcon name="i-lucide:user" />
-        <span>用户信息</span>
-      </div>
-    </template>
-    <p>卡片内容...</p>
-  </FaCard>
-</template>
-```
-
-### 带页脚
-
-```vue
-<template>
-  <FaCard title="操作卡片">
-    <p>卡片内容...</p>
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <FaButton variant="outline">取消</FaButton>
-        <FaButton>确定</FaButton>
-      </div>
-    </template>
-  </FaCard>
-</template>
-```
-
-### 完整卡片
-
-```vue
-<template>
-  <FaCard 
-    title="用户信息" 
-    description="用户的基本信息"
-    class="w-96"
-  >
-    <div class="space-y-2">
-      <p><strong>姓名：</strong>张三</p>
-      <p><strong>邮箱：</strong>zhangsan@example.com</p>
-      <p><strong>手机：</strong>13800138000</p>
-    </div>
-    <template #footer>
-      <FaButton variant="outline" class="w-full">查看详情</FaButton>
-    </template>
-  </FaCard>
-</template>
-```
-
-### 自定义样式
-
-```vue
-<template>
-  <FaCard 
-    title="自定义样式"
-    header-class="bg-primary text-primary-foreground"
-    content-class="p-6"
-    footer-class="border-t bg-muted"
-  >
-    <p>自定义样式的卡片内容。</p>
-  </FaCard>
-</template>
-```
-
 ## 注意事项
 
 1. **区域显示**：只有提供对应内容（props 或 slots）的区域才会显示
diff --git a/packages/components/src/basic/card/_examples/_basic.vue b/packages/components/src/basic/card/_examples/_basic.vue
new file mode 100644
index 00000000..29b2791b
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_basic.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCard from '../index.vue'
+</script>
+
+<template>
+  <FaCard title="卡片标题" class="w-80">
+    卡片内容
+  </FaCard>
+</template>
diff --git a/packages/components/src/basic/card/_examples/_custom-style.vue b/packages/components/src/basic/card/_examples/_custom-style.vue
new file mode 100644
index 00000000..04edbdee
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_custom-style.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCard from '../index.vue'
+</script>
+
+<template>
+  <FaCard
+    title="自定义样式"
+    description="通过 class、headerClass、contentClass 和 footerClass 调整区域样式。"
+    class="py-0 gap-0 w-96 overflow-hidden"
+    header-class="bg-primary/8 py-4"
+    content-class="py-6 text-sm leading-6"
+    footer-class="bg-muted text-sm text-muted-foreground py-3"
+  >
+    这里是自定义内容区域，可以根据业务场景调整间距、背景和边框。
+    <template #footer>
+      自定义页脚区域
+    </template>
+  </FaCard>
+</template>
diff --git a/packages/components/src/basic/card/_examples/_description.vue b/packages/components/src/basic/card/_examples/_description.vue
new file mode 100644
index 00000000..738148c3
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_description.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCard from '../index.vue'
+</script>
+
+<template>
+  <FaCard title="卡片标题" description="这是一段辅助描述，用于补充说明卡片内容。" class="w-80">
+    卡片内容
+  </FaCard>
+</template>
diff --git a/packages/components/src/basic/card/_examples/_slot.vue b/packages/components/src/basic/card/_examples/_slot.vue
new file mode 100644
index 00000000..cfc61592
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_slot.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaCard from '../index.vue'
+</script>
+
+<template>
+  <FaCard class="w-96">
+    <template #header>
+      <div class="flex gap-4 items-center justify-between">
+        <div>
+          <div class="text-base font-semibold">
+            自定义头部
+          </div>
+          <div class="text-sm text-muted-foreground">
+            header slot 会覆盖 title 和 description
+          </div>
+        </div>
+        <FaIcon name="i-lucide:badge-check" class="text-primary size-5" />
+      </div>
+    </template>
+
+    卡片内容区域
+
+    <template #footer>
+      <div class="flex gap-2 w-full justify-end">
+        <FaButton variant="outline">
+          取消
+        </FaButton>
+        <FaButton>
+          确定
+        </FaButton>
+      </div>
+    </template>
+  </FaCard>
+</template>
diff --git a/packages/components/src/basic/card/_examples/index.ts b/packages/components/src/basic/card/_examples/index.ts
new file mode 100644
index 00000000..329f051c
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Description from './_description.vue'
+import DescriptionRaw from './_description.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '描述',
+    component: Description,
+    componentRaw: DescriptionRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+]
diff --git a/packages/components/src/basic/checkbox-group/README.md b/packages/components/src/basic/checkbox-group/README.md
index f294f10e..76a103fe 100644
--- a/packages/components/src/basic/checkbox-group/README.md
+++ b/packages/components/src/basic/checkbox-group/README.md
@@ -50,180 +50,6 @@ export interface CheckboxGroupOption {
 
 通过 `v-model` 实现双向绑定。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref(['music'])
-
-const options = [
-  { label: '阅读', value: 'reading' },
-  { label: '音乐', value: 'music' },
-  { label: '运动', value: 'sports' },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup v-model="value" :options="options" />
-</template>
-```
-
-### 带描述文案
-
-```vue
-<script setup lang="ts">
-const value = ref(['dashboard', 'report'])
-
-const options = [
-  {
-    label: '看板订阅',
-    value: 'dashboard',
-    description: '每天 8:00 推送核心经营指标。',
-  },
-  {
-    label: '周报摘要',
-    value: 'report',
-    description: '每周一汇总关键数据变化。',
-  },
-  {
-    label: '系统告警',
-    value: 'alarm',
-    description: '异常波动时立即通知处理人。',
-  },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup v-model="value" :options="options" />
-</template>
-```
-
-### 禁用选项
-
-```vue
-<script setup lang="ts">
-const value = ref(['basic'])
-
-const options = [
-  { label: '基础能力', value: 'basic' },
-  { label: '审批流', value: 'approval' },
-  { label: '审计日志', value: 'audit', disabled: true },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup v-model="value" :options="options" />
-</template>
-```
-
-### 多列排列
-
-```vue
-<script setup lang="ts">
-const value = ref(['desktop', 'tablet'])
-
-const options = [
-  { label: '桌面端', value: 'desktop' },
-  { label: '平板端', value: 'tablet' },
-  { label: '移动端', value: 'mobile' },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup
-    v-model="value"
-    :options="options"
-    class="gap-4 md:grid-cols-3"
-  />
-</template>
-```
-
-### 最少 / 最多选择
-
-```vue
-<script setup lang="ts">
-const value = ref(['dashboard'])
-
-const options = [
-  { label: '看板订阅', value: 'dashboard' },
-  { label: '周报摘要', value: 'report' },
-  { label: '系统告警', value: 'alarm' },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup
-    v-model="value"
-    :options="options"
-    :min="1"
-    :max="2"
-  />
-</template>
-```
-
-### 自定义选项内容
-
-```vue
-<script setup lang="ts">
-const value = ref(['focus', 'balanced'])
-
-const options = [
-  {
-    label: '专注模式',
-    value: 'focus',
-    summary: '任务优先',
-    description: '突出主任务，弱化辅助信息。',
-  },
-  {
-    label: '平衡模式',
-    value: 'balanced',
-    summary: '默认体验',
-    description: '信息密度与可读性保持平衡。',
-  },
-  {
-    label: '高密度模式',
-    value: 'dense',
-    summary: '信息看板',
-    description: '适合大屏运营与监控看板。',
-  },
-]
-</script>
-
-<template>
-  <FaCheckboxGroup
-    v-model="value"
-    :options="options"
-    class="gap-4 md:grid-cols-3"
-  >
-    <template #option="{ option, checked }">
-      <div
-        :class="[
-          'flex w-full items-start justify-between gap-3 rounded-xl border px-4 py-3',
-          checked ? 'border-primary bg-primary/5' : 'border-border',
-        ]"
-      >
-        <div class="min-w-0">
-          <div class="flex items-center gap-2">
-            <span class="truncate font-medium">{{ option.label }}</span>
-            <span class="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
-              {{ option.summary }}
-            </span>
-          </div>
-          <div class="text-xs text-muted-foreground leading-5">
-            {{ option.description }}
-          </div>
-        </div>
-        <span class="text-xs" :class="checked ? 'text-primary' : 'text-muted-foreground'">
-          {{ checked ? '已选中' : '可选择' }}
-        </span>
-      </div>
-    </template>
-  </FaCheckboxGroup>
-</template>
-```
-
 ## 注意事项
 
 1. **数据驱动**：组选项必须通过 `options` 传入，不再使用多个 `FaCheckbox` 手工拼接。
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo1.vue b/packages/components/src/basic/checkbox-group/_examples/_basic.vue
similarity index 70%
rename from apps/example/src/views/component_example/checkbox_group/_demo1.vue
rename to packages/components/src/basic/checkbox-group/_examples/_basic.vue
index e019a5a2..3aaef74b 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo1.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_basic.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const value = ref(['music'])
+import { computed, shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckboxGroup from '../index.vue'
+
+const value = shallowRef(['music'])
 
 const options = [
   { label: '阅读', value: 'reading' },
@@ -20,7 +25,7 @@ const currentText = computed(() =>
     <FaCheckboxGroup v-model="value" :options="options" />
     <FaCheckboxGroup v-model="value" :options="options" class="flex" />
     <div class="text-sm text-muted-foreground">
-      当前值：{{ currentText }}
+      当前值：{{ currentText || '未选择' }}
     </div>
   </div>
 </template>
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo3.vue b/packages/components/src/basic/checkbox-group/_examples/_custom-option.vue
similarity index 85%
rename from apps/example/src/views/component_example/checkbox_group/_demo3.vue
rename to packages/components/src/basic/checkbox-group/_examples/_custom-option.vue
index ad797d0a..d12f2793 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo3.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_custom-option.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const value = ref(['focus', 'balanced'])
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckboxGroup from '../index.vue'
+
+const value = shallowRef(['focus', 'balanced'])
 
 const options = [
   {
@@ -33,7 +38,8 @@ const options = [
     >
       <template #option="{ option, checked, disabled }">
         <div
-          class="px-4 py-3 border rounded-xl flex gap-3 w-full transition-colors items-start justify-between" :class="[
+          class="px-4 py-3 border rounded-xl flex gap-3 w-full transition-colors items-start justify-between"
+          :class="[
             checked ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40',
             disabled && 'opacity-60',
           ]"
@@ -56,7 +62,7 @@ const options = [
       </template>
     </FaCheckboxGroup>
     <div class="text-sm text-muted-foreground">
-      当前值：{{ value.join('、') }}
+      当前值：{{ value.join('、') || '未选择' }}
     </div>
   </div>
 </template>
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo2.vue b/packages/components/src/basic/checkbox-group/_examples/_description.vue
similarity index 74%
rename from apps/example/src/views/component_example/checkbox_group/_demo2.vue
rename to packages/components/src/basic/checkbox-group/_examples/_description.vue
index 8d2a6466..e7e89cfa 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo2.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_description.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const value = ref(['dashboard', 'report'])
+import { computed, shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckboxGroup from '../index.vue'
+
+const value = shallowRef(['dashboard', 'report'])
 
 const options = [
   {
@@ -16,7 +21,6 @@ const options = [
     label: '系统告警',
     value: 'alarm',
     description: '异常波动时立即通知处理人。',
-    disabled: true,
   },
 ]
 
@@ -32,7 +36,7 @@ const currentText = computed(() =>
   <div class="gap-4 grid">
     <FaCheckboxGroup v-model="value" :options="options" />
     <div class="text-sm text-muted-foreground">
-      当前值：{{ currentText }}
+      当前值：{{ currentText || '未选择' }}
     </div>
   </div>
 </template>
diff --git a/packages/components/src/basic/checkbox-group/_examples/_disabled.vue b/packages/components/src/basic/checkbox-group/_examples/_disabled.vue
new file mode 100644
index 00000000..c8de8284
--- /dev/null
+++ b/packages/components/src/basic/checkbox-group/_examples/_disabled.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckboxGroup from '../index.vue'
+
+const value = shallowRef(['basic'])
+
+const options = [
+  { label: '基础能力', value: 'basic' },
+  { label: '审批流', value: 'approval' },
+  { label: '审计日志', value: 'audit', disabled: true },
+]
+
+const currentText = computed(() =>
+  options
+    .filter(option => value.value.includes(option.value))
+    .map(option => option.label)
+    .join('、'),
+)
+</script>
+
+<template>
+  <div class="gap-4 grid">
+    <FaCheckboxGroup v-model="value" :options="options" />
+    <div class="text-sm text-muted-foreground">
+      当前值：{{ currentText || '未选择' }}
+    </div>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo4.vue b/packages/components/src/basic/checkbox-group/_examples/_limit.vue
similarity index 75%
rename from apps/example/src/views/component_example/checkbox_group/_demo4.vue
rename to packages/components/src/basic/checkbox-group/_examples/_limit.vue
index 755f8d1f..37871da4 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo4.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_limit.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-const value = ref(['dashboard'])
+import { computed, shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckboxGroup from '../index.vue'
+
+const value = shallowRef(['dashboard'])
 
 const options = [
   { label: '看板订阅', value: 'dashboard' },
@@ -24,7 +29,7 @@ const currentText = computed(() =>
       :max="2"
     />
     <div class="text-sm text-muted-foreground">
-      当前值：{{ currentText }}
+      当前值：{{ currentText || '未选择' }}
     </div>
     <div class="text-xs text-muted-foreground leading-5">
       已选数量小于等于 1 时，已选项会被禁用；已选数量大于等于 2 时，未选项会被禁用。
diff --git a/packages/components/src/basic/checkbox-group/_examples/index.ts b/packages/components/src/basic/checkbox-group/_examples/index.ts
new file mode 100644
index 00000000..2e2e7b0f
--- /dev/null
+++ b/packages/components/src/basic/checkbox-group/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomOption from './_custom-option.vue'
+import CustomOptionRaw from './_custom-option.vue?raw'
+import Description from './_description.vue'
+import DescriptionRaw from './_description.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Limit from './_limit.vue'
+import LimitRaw from './_limit.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '描述',
+    component: Description,
+    componentRaw: DescriptionRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '数量限制',
+    component: Limit,
+    componentRaw: LimitRaw,
+  },
+  {
+    title: '自定义选项内容',
+    component: CustomOption,
+    componentRaw: CustomOptionRaw,
+  },
+]
diff --git a/packages/components/src/basic/checkbox/README.md b/packages/components/src/basic/checkbox/README.md
index bc28a344..21833a95 100644
--- a/packages/components/src/basic/checkbox/README.md
+++ b/packages/components/src/basic/checkbox/README.md
@@ -33,86 +33,6 @@
 
 通过 `v-model` 实现双向绑定。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const checked = ref(false)
-</script>
-
-<template>
-  <FaCheckbox v-model="checked">
-    我已阅读并同意服务条款
-  </FaCheckbox>
-</template>
-```
-
-### 半选状态
-
-```vue
-<script setup lang="ts">
-const checked = ref<boolean | 'indeterminate'>('indeterminate')
-</script>
-
-<template>
-  <FaCheckbox v-model="checked">
-    部分选中
-  </FaCheckbox>
-</template>
-```
-
-### 禁用状态
-
-```vue
-<script setup lang="ts">
-const checked = ref(true)
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <FaCheckbox disabled>
-      禁用未选中
-    </FaCheckbox>
-    <FaCheckbox v-model="checked" disabled>
-      禁用已选中
-    </FaCheckbox>
-  </div>
-</template>
-```
-
-### 无标签复选框
-
-```vue
-<script setup lang="ts">
-const checked = ref(false)
-</script>
-
-<template>
-  <FaCheckbox v-model="checked" />
-</template>
-```
-
-### 自定义样式
-
-```vue
-<script setup lang="ts">
-const checked = ref(false)
-</script>
-
-<template>
-  <FaCheckbox
-    v-model="checked"
-    class="gap-3"
-    item-class="size-5 rounded-md"
-    label-class="text-primary font-medium"
-  >
-    自定义样式
-  </FaCheckbox>
-</template>
-```
-
 ## 注意事项
 
 1. **单个使用**：`FaCheckbox` 只负责单个复选框，不承担组选项逻辑。
diff --git a/packages/components/src/basic/checkbox/_examples/_basic.vue b/packages/components/src/basic/checkbox/_examples/_basic.vue
new file mode 100644
index 00000000..04bd6b53
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_basic.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckbox from '../index.vue'
+
+type CheckboxValue = boolean | 'indeterminate' | undefined
+
+const checked = shallowRef<CheckboxValue>(false)
+</script>
+
+<template>
+  <FaCheckbox v-model="checked">
+    同意协议
+  </FaCheckbox>
+</template>
diff --git a/packages/components/src/basic/checkbox/_examples/_custom-style.vue b/packages/components/src/basic/checkbox/_examples/_custom-style.vue
new file mode 100644
index 00000000..a87e992c
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_custom-style.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckbox from '../index.vue'
+
+type CheckboxValue = boolean | 'indeterminate' | undefined
+
+const checked = shallowRef<CheckboxValue>(true)
+</script>
+
+<template>
+  <FaCheckbox
+    v-model="checked"
+    class="px-3 py-2 border border-primary/20 rounded-lg bg-primary/5 gap-3"
+    item-class="size-5 rounded-md border-primary"
+    label-class="text-primary font-medium w-full"
+  >
+    开启精细化配置
+  </FaCheckbox>
+</template>
diff --git a/packages/components/src/basic/checkbox/_examples/_disabled.vue b/packages/components/src/basic/checkbox/_examples/_disabled.vue
new file mode 100644
index 00000000..4269f683
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_disabled.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckbox from '../index.vue'
+
+type CheckboxValue = boolean | 'indeterminate' | undefined
+
+const unchecked = shallowRef<CheckboxValue>(false)
+const checked = shallowRef<CheckboxValue>(true)
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <FaCheckbox v-model="unchecked" disabled>
+      禁用未选中
+    </FaCheckbox>
+    <FaCheckbox v-model="checked" disabled>
+      禁用已选中
+    </FaCheckbox>
+  </div>
+</template>
diff --git a/packages/components/src/basic/checkbox/_examples/_indeterminate.vue b/packages/components/src/basic/checkbox/_examples/_indeterminate.vue
new file mode 100644
index 00000000..c10fe2cb
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_indeterminate.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaCheckbox from '../index.vue'
+
+type CheckboxValue = boolean | 'indeterminate' | undefined
+
+const checked = shallowRef<CheckboxValue>('indeterminate')
+</script>
+
+<template>
+  <FaCheckbox v-model="checked">
+    部分选中
+  </FaCheckbox>
+</template>
diff --git a/packages/components/src/basic/checkbox/_examples/index.ts b/packages/components/src/basic/checkbox/_examples/index.ts
new file mode 100644
index 00000000..0e95b851
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Indeterminate from './_indeterminate.vue'
+import IndeterminateRaw from './_indeterminate.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '半选状态',
+    component: Indeterminate,
+    componentRaw: IndeterminateRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+]
diff --git a/packages/components/src/basic/collapsible/README.md b/packages/components/src/basic/collapsible/README.md
index e0b77351..8ddfb0fb 100644
--- a/packages/components/src/basic/collapsible/README.md
+++ b/packages/components/src/basic/collapsible/README.md
@@ -25,147 +25,6 @@
 | `trigger` | 触发元素，slot props: `{ open: boolean }` |
 | `default` | 可折叠的内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaCollapsible v-model="open">
-    <template #trigger="{ open }">
-      <FaButton variant="ghost">点击{{ open ? '收起' : '展开' }}</FaButton>
-    </template>
-    <div class="mt-2">
-      这是可折叠的内容区域。
-    </div>
-  </FaCollapsible>
-</template>
-```
-
-### 基础折叠
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaCollapsible v-model="open">
-    <template #trigger>
-      <div class="flex items-center justify-between p-4 border rounded-lg cursor-pointer" @click="open = !open">
-        <span>点击展开详情</span>
-        <FaIcon :name="open ? 'i-lucide:chevron-up' : 'i-lucide:chevron-down'" />
-      </div>
-    </template>
-    <div class="mt-2 p-4 border rounded-lg bg-muted">
-      <p>这是折叠的内容...</p>
-    </div>
-  </FaCollapsible>
-</template>
-```
-
-### FAQ 折叠列表
-
-```vue
-<script setup lang="ts">
-const openIndex = ref<number | null>(null)
-
-const faqs = [
-  { question: '如何重置密码？', answer: '在设置页面点击"重置密码"...' },
-  { question: '如何修改邮箱？', answer: '在个人中心修改邮箱地址...' },
-  { question: '如何联系客服？', answer: '点击右下角在线客服图标...' },
-]
-</script>
-
-<template>
-  <div class="space-y-2">
-    <FaCollapsible v-for="(faq, index) in faqs" :key="index" v-model="faqs[index].open">
-      <template #trigger>
-        <div 
-          class="flex items-center justify-between p-4 border rounded-lg cursor-pointer hover:bg-muted"
-          @click="openIndex = openIndex === index ? null : index"
-        >
-          <span class="font-medium">{{ faq.question }}</span>
-          <FaIcon :name="openIndex === index ? 'i-lucide:chevron-up' : 'i-lucide:chevron-down'" />
-        </div>
-      </template>
-      <div class="p-4 pt-0 text-muted-foreground">
-        {{ faq.answer }}
-      </div>
-    </FaCollapsible>
-  </div>
-</template>
-```
-
-### 手风琴效果（互斥展开）
-
-```vue
-<script setup lang="ts">
-const activeIndex = ref(0)
-const items = [
-  { title: '章节一', content: '内容一...' },
-  { title: '章节二', content: '内容二...' },
-  { title: '章节三', content: '内容三...' },
-]
-</script>
-
-<template>
-  <div class="space-y-2">
-    <FaCollapsible 
-      v-for="(item, index) in items" 
-      :key="index" 
-      :model-value="activeIndex === index"
-    >
-      <template #trigger>
-        <div 
-          class="p-4 border rounded-lg cursor-pointer hover:bg-muted"
-          @click="activeIndex = activeIndex === index ? -1 : index"
-        >
-          {{ item.title }}
-        </div>
-      </template>
-      <div class="p-4 pt-0">
-        {{ item.content }}
-      </div>
-    </FaCollapsible>
-  </div>
-</template>
-```
-
-### 带动画图标
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaCollapsible v-model="open">
-    <template #trigger="{ open }">
-      <div class="flex items-center gap-2">
-        <FaIcon 
-          :name="'i-lucide:folder'" 
-          class="transition-transform duration-200" 
-          :class="open ? 'rotate-180' : ''"
-        />
-        <span>项目文件</span>
-      </div>
-    </template>
-    <div class="mt-2 pl-8">
-      <ul class="space-y-1">
-        <li>文件 1</li>
-        <li>文件 2</li>
-        <li>文件 3</li>
-      </ul>
-    </div>
-  </FaCollapsible>
-</template>
-```
-
 ## 注意事项
 
 1. **触发器可选**：不提供 `trigger` slot 时，仅渲染可折叠内容
diff --git a/packages/components/src/basic/collapsible/_examples/_basic.vue b/packages/components/src/basic/collapsible/_examples/_basic.vue
new file mode 100644
index 00000000..133540f7
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/_basic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaCollapsible from '../index.vue'
+</script>
+
+<template>
+  <FaCollapsible>
+    <template #trigger="{ open }">
+      <FaButton>
+        {{ open ? '收起' : '展开' }}
+      </FaButton>
+    </template>
+    <div class="mt-4 space-y-2">
+      <div v-for="item in 5" :key="item" class="px-4 py-2 border rounded-md">
+        内容 {{ item }}
+      </div>
+    </div>
+  </FaCollapsible>
+</template>
diff --git a/packages/components/src/basic/collapsible/_examples/_controlled.vue b/packages/components/src/basic/collapsible/_examples/_controlled.vue
new file mode 100644
index 00000000..a2bf90e2
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/_controlled.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaCollapsible from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = !open">
+    {{ open ? '收起' : '展开' }}
+  </FaButton>
+  <FaCollapsible v-model="open">
+    <div class="mt-4 space-y-2">
+      <div v-for="item in 5" :key="item" class="px-4 py-2 border rounded-md">
+        内容 {{ item }}
+      </div>
+    </div>
+  </FaCollapsible>
+</template>
diff --git a/packages/components/src/basic/collapsible/_examples/index.ts b/packages/components/src/basic/collapsible/_examples/index.ts
new file mode 100644
index 00000000..cc579d3d
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Controlled from './_controlled.vue'
+import ControlledRaw from './_controlled.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '手动控制',
+    component: Controlled,
+    componentRaw: ControlledRaw,
+  },
+]
diff --git a/packages/components/src/basic/context-menu/README.md b/packages/components/src/basic/context-menu/README.md
index 1bf7113f..0985860f 100644
--- a/packages/components/src/basic/context-menu/README.md
+++ b/packages/components/src/basic/context-menu/README.md
@@ -44,231 +44,6 @@ interface MenuSubItem {
 | `default` | 触发元素（必填） |
 | `label` | 菜单头部标签 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '复制', icon: 'i-lucide:copy', handle: () => console.log('复制') },
-    { label: '粘贴', icon: 'i-lucide:clipboard', handle: () => console.log('粘贴') },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <div class="h-64 border rounded-lg flex-center">
-      右键点击我
-    </div>
-  </FaContextMenu>
-</template>
-```
-
-### 基础右键菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '复制', icon: 'i-lucide:copy', handle: () => console.log('复制') },
-    { label: '剪切', icon: 'i-lucide:scissors', handle: () => console.log('剪切') },
-    { label: '粘贴', icon: 'i-lucide:clipboard', handle: () => console.log('粘贴') },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <div class="h-64 border-2 border-dashed rounded-lg flex-center text-muted-foreground">
-      右键点击显示菜单
-    </div>
-  </FaContextMenu>
-</template>
-```
-
-### 带分组的菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '新建', icon: 'i-lucide:file-plus' },
-    { label: '打开', icon: 'i-lucide:folder-open' },
-  ],
-  [
-    { label: '保存', icon: 'i-lucide:save' },
-    { label: '另存为', icon: 'i-lucide:file-down' },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <div class="h-64 border rounded-lg flex-center">右键点击</div>
-  </FaContextMenu>
-</template>
-```
-
-### 带子菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '查看', icon: 'i-lucide:eye' },
-    { 
-      label: '排序方式',
-      items: [
-        [{ label: '名称', icon: 'i-lucide:sort-alpha-asc' }],
-        [{ label: '日期', icon: 'i-lucide:calendar' }],
-        [{ label: '大小', icon: 'i-lucide:hard-drive' }],
-      ]
-    },
-  ],
-  [
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive' },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <div class="h-64 border rounded-lg flex-center">右键点击</div>
-  </FaContextMenu>
-</template>
-```
-
-### 带标签的菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '查看大图', handle: () => {} },
-    { label: '下载图片', handle: () => {} },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <img src="https://example.com/image.jpg" class="w-64 rounded" />
-    <template #label>
-      图片操作
-    </template>
-  </FaContextMenu>
-</template>
-```
-
-### 禁用菜单项
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '复制', icon: 'i-lucide:copy', handle: () => {} },
-    { label: '剪切', icon: 'i-lucide:scissors', disabled: true },
-    { label: '粘贴', icon: 'i-lucide:clipboard', handle: () => {} },
-  ],
-]
-</script>
-
-<template>
-  <FaContextMenu :items="items">
-    <div class="h-64 border rounded-lg flex-center">右键点击</div>
-  </FaContextMenu>
-</template>
-```
-
-### 表格行右键菜单
-
-```vue
-<script setup lang="ts">
-const data = ref([
-  { id: 1, name: '项目 1', status: 'active' },
-  { id: 2, name: '项目 2', status: 'inactive' },
-])
-
-function getMenuItems(row: any) {
-  return [
-    [
-      { label: '查看', icon: 'i-lucide:eye', handle: () => console.log('查看', row) },
-      { label: '编辑', icon: 'i-lucide:edit', handle: () => console.log('编辑', row) },
-    ],
-    [
-      { label: '删除', icon: 'i-lucide:trash', variant: 'destructive', handle: () => console.log('删除', row) },
-    ],
-  ]
-}
-</script>
-
-<template>
-  <table class="w-full">
-    <thead>
-      <tr>
-        <th>名称</th>
-        <th>状态</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="row in data" :key="row.id" class="hover:bg-muted/50">
-        <FaContextMenu :items="getMenuItems(row)">
-          <td class="p-3 cursor-context-menu">{{ row.name }}</td>
-        </FaContextMenu>
-        <td class="p-3">{{ row.status }}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-```
-
-### 文件列表右键菜单
-
-```vue
-<script setup lang="ts">
-const files = ref([
-  { name: 'document.pdf', type: 'pdf' },
-  { name: 'image.jpg', type: 'image' },
-])
-
-function getFileMenu(file: any) {
-  return [
-    [
-      { label: '打开', icon: 'i-lucide:folder-open', handle: () => {} },
-      { label: '重命名', icon: 'i-lucide:edit', handle: () => {} },
-    ],
-    [
-      { label: '下载', icon: 'i-lucide:download', handle: () => {} },
-      { label: '分享', icon: 'i-lucide:share', handle: () => {} },
-    ],
-    [
-      { label: '删除', icon: 'i-lucide:trash', variant: 'destructive', handle: () => {} },
-    ],
-  ]
-}
-</script>
-
-<template>
-  <div class="space-y-2">
-    <div 
-      v-for="file in files" 
-      :key="file.name"
-      class="flex items-center gap-3 p-3 border rounded hover:bg-muted/50 cursor-pointer"
-    >
-      <FaContextMenu :items="getFileMenu(file)">
-        <div class="flex items-center gap-3 flex-1">
-          <FaIcon name="i-lucide:file-text" />
-          <span>{{ file.name }}</span>
-        </div>
-      </FaContextMenu>
-    </div>
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **items 结构**：二维数组，每个子数组为一组，组间自动添加分割线
diff --git a/packages/components/src/basic/context-menu/_examples/_basic.vue b/packages/components/src/basic/context-menu/_examples/_basic.vue
new file mode 100644
index 00000000..54185342
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_basic.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaContextMenu from '../index.vue'
+
+interface ContextMenuItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface ContextMenuSubItem {
+  label: string
+  items: ContextMenuItems
+}
+
+type ContextMenuItems = (ContextMenuItem | ContextMenuSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', handle: () => handleClick('打开') },
+    { label: '编辑', handle: () => handleClick('编辑') },
+    { label: '复制', handle: () => handleClick('复制') },
+  ],
+] satisfies ContextMenuItems
+</script>
+
+<template>
+  <FaContextMenu :items="items">
+    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
+      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
+    </div>
+  </FaContextMenu>
+</template>
diff --git a/packages/components/src/basic/context-menu/_examples/_disabled.vue b/packages/components/src/basic/context-menu/_examples/_disabled.vue
new file mode 100644
index 00000000..e2bd992b
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_disabled.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaContextMenu from '../index.vue'
+
+interface ContextMenuItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface ContextMenuSubItem {
+  label: string
+  items: ContextMenuItems
+}
+
+type ContextMenuItems = (ContextMenuItem | ContextMenuSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', handle: () => handleClick('打开') },
+    { label: '复制', disabled: true, handle: () => handleClick('复制') },
+    { label: '移动到', disabled: true, handle: () => handleClick('移动到') },
+  ],
+  [
+    { label: '刷新', handle: () => handleClick('刷新') },
+  ],
+] satisfies ContextMenuItems
+</script>
+
+<template>
+  <FaContextMenu :items="items">
+    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
+      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
+    </div>
+  </FaContextMenu>
+</template>
diff --git a/packages/components/src/basic/context-menu/_examples/_icon.vue b/packages/components/src/basic/context-menu/_examples/_icon.vue
new file mode 100644
index 00000000..c786bc1b
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_icon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaContextMenu from '../index.vue'
+
+interface ContextMenuItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface ContextMenuSubItem {
+  label: string
+  items: ContextMenuItems
+}
+
+type ContextMenuItems = (ContextMenuItem | ContextMenuSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', icon: 'i-lucide:folder-open', handle: () => handleClick('打开') },
+    { label: '重命名', icon: 'i-lucide:pencil', handle: () => handleClick('重命名') },
+    { label: '复制链接', icon: 'i-lucide:link', handle: () => handleClick('复制链接') },
+  ],
+  [
+    { label: '下载', icon: 'i-lucide:download', handle: () => handleClick('下载') },
+  ],
+] satisfies ContextMenuItems
+</script>
+
+<template>
+  <FaContextMenu :items="items">
+    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
+      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
+    </div>
+  </FaContextMenu>
+</template>
diff --git a/packages/components/src/basic/context-menu/_examples/_nested.vue b/packages/components/src/basic/context-menu/_examples/_nested.vue
new file mode 100644
index 00000000..e43c2608
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_nested.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaContextMenu from '../index.vue'
+
+interface ContextMenuItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface ContextMenuSubItem {
+  label: string
+  items: ContextMenuItems
+}
+
+type ContextMenuItems = (ContextMenuItem | ContextMenuSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', handle: () => handleClick('打开') },
+    {
+      label: '更多操作',
+      items: [
+        [
+          { label: '保存页面', handle: () => handleClick('保存页面') },
+          { label: '导出为 PDF', handle: () => handleClick('导出为 PDF') },
+        ],
+        [
+          { label: '复制路径', handle: () => handleClick('复制路径') },
+        ],
+      ],
+    },
+  ],
+] satisfies ContextMenuItems
+</script>
+
+<template>
+  <FaContextMenu :items="items">
+    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
+      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
+    </div>
+  </FaContextMenu>
+</template>
diff --git a/packages/components/src/basic/context-menu/_examples/_warning.vue b/packages/components/src/basic/context-menu/_examples/_warning.vue
new file mode 100644
index 00000000..ed4e4dd7
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_warning.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaContextMenu from '../index.vue'
+
+interface ContextMenuItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface ContextMenuSubItem {
+  label: string
+  items: ContextMenuItems
+}
+
+type ContextMenuItems = (ContextMenuItem | ContextMenuSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '查看详情', handle: () => handleClick('查看详情') },
+    { label: '复制副本', handle: () => handleClick('复制副本') },
+  ],
+  [
+    { label: '删除', variant: 'destructive', handle: () => handleClick('删除') },
+  ],
+] satisfies ContextMenuItems
+</script>
+
+<template>
+  <FaContextMenu :items="items">
+    <div class="text-sm border rounded-md border-dashed flex h-[150px] w-[300px] items-center justify-center">
+      <FaIcon name="i-hugeicons:mouse-right-click-06" class="op-50 size-12" />
+    </div>
+  </FaContextMenu>
+</template>
diff --git a/packages/components/src/basic/context-menu/_examples/index.ts b/packages/components/src/basic/context-menu/_examples/index.ts
new file mode 100644
index 00000000..f5327c5e
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+import Nested from './_nested.vue'
+import NestedRaw from './_nested.vue?raw'
+import Warning from './_warning.vue'
+import WarningRaw from './_warning.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '图标',
+    component: Icon,
+    componentRaw: IconRaw,
+  },
+  {
+    title: '警告',
+    component: Warning,
+    componentRaw: WarningRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '嵌套',
+    component: Nested,
+    componentRaw: NestedRaw,
+  },
+]
diff --git a/packages/components/src/basic/divider/README.md b/packages/components/src/basic/divider/README.md
index 5b74cad2..8afc093a 100644
--- a/packages/components/src/basic/divider/README.md
+++ b/packages/components/src/basic/divider/README.md
@@ -23,89 +23,6 @@
 |------|------|
 | `default` | 分割线中间的文字内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaDivider />
-  <FaDivider>分割文字</FaDivider>
-</template>
-```
-
-### 基础分割线
-
-```vue
-<template>
-  <div>内容上方</div>
-  <FaDivider />
-  <div>内容下方</div>
-</template>
-```
-
-### 带文字的分割线
-
-```vue
-<template>
-  <FaDivider>更多信息</FaDivider>
-</template>
-```
-
-### 文字在起始位置
-
-```vue
-<template>
-  <FaDivider position="start">起始位置</FaDivider>
-</template>
-```
-
-### 文字在末尾位置
-
-```vue
-<template>
-  <FaDivider position="end">末尾位置</FaDivider>
-</template>
-```
-
-### 带图标的分割线
-
-```vue
-<template>
-  <FaDivider>
-    <span class="flex items-center gap-2">
-      <FaIcon name="i-lucide:star" />
-      推荐内容
-    </span>
-  </FaDivider>
-</template>
-```
-
-### 多个分割线
-
-```vue
-<template>
-  <div>第一部分</div>
-  <FaDivider>第二章</FaDivider>
-  <div>第二部分</div>
-  <FaDivider>第三章</FaDivider>
-  <div>第三部分</div>
-</template>
-```
-
-### 自定义样式
-
-```vue
-<template>
-  <FaDivider class="text-primary">
-    彩色文字
-  </FaDivider>
-  <FaDivider class="my-8">
-    大间距
-  </FaDivider>
-</template>
-```
-
 ## 注意事项
 
 1. **文字居中**：默认情况下文字居中显示
diff --git a/packages/components/src/basic/divider/_examples/_basic.vue b/packages/components/src/basic/divider/_examples/_basic.vue
new file mode 100644
index 00000000..558c60a8
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/_basic.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaDivider from '../index.vue'
+</script>
+
+<template>
+  <div>
+    <div class="text-sm text-muted-foreground">
+      上方内容
+    </div>
+    <FaDivider />
+    <div class="text-sm text-muted-foreground">
+      下方内容
+    </div>
+    <FaDivider>
+      分割文字
+    </FaDivider>
+  </div>
+</template>
diff --git a/packages/components/src/basic/divider/_examples/_position.vue b/packages/components/src/basic/divider/_examples/_position.vue
new file mode 100644
index 00000000..8141ec87
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/_position.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaDivider from '../index.vue'
+</script>
+
+<template>
+  <div>
+    <FaDivider>
+      center
+    </FaDivider>
+    <FaDivider position="start">
+      start
+    </FaDivider>
+    <FaDivider position="end">
+      end
+    </FaDivider>
+  </div>
+</template>
diff --git a/packages/components/src/basic/divider/_examples/index.ts b/packages/components/src/basic/divider/_examples/index.ts
new file mode 100644
index 00000000..b1b877dc
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Position from './_position.vue'
+import PositionRaw from './_position.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '位置',
+    component: Position,
+    componentRaw: PositionRaw,
+  },
+]
diff --git a/packages/components/src/basic/drawer/README.md b/packages/components/src/basic/drawer/README.md
index 961bb280..62708ccb 100644
--- a/packages/components/src/basic/drawer/README.md
+++ b/packages/components/src/basic/drawer/README.md
@@ -83,197 +83,6 @@ function openDrawer() {
 </script>
 ```
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaButton @click="open = true">打开抽屉</FaButton>
-  <FaDrawer v-model="open" title="抽屉标题">
-    <div>抽屉内容</div>
-  </FaDrawer>
-</template>
-```
-
-### 基础抽屉
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaButton @click="open = true">打开抽屉</FaButton>
-  <FaDrawer v-model="open" title="抽屉标题" description="抽屉描述">
-    <div>这是抽屉内容</div>
-  </FaDrawer>
-</template>
-```
-
-### 不同弹出方向
-
-```vue
-<script setup lang="ts">
-const drawers = reactive({
-  top: false,
-  bottom: false,
-  left: false,
-  right: false,
-})
-</script>
-
-<template>
-  <div class="flex gap-2">
-    <FaButton @click="drawers.top = true">上方抽屉</FaButton>
-    <FaButton @click="drawers.bottom = true">下方抽屉</FaButton>
-    <FaButton @click="drawers.left = true">左侧抽屉</FaButton>
-    <FaButton @click="drawers.right = true">右侧抽屉</FaButton>
-  </div>
-  
-  <FaDrawer v-model="drawers.top" side="top" title="上方抽屉">内容</FaDrawer>
-  <FaDrawer v-model="drawers.bottom" side="bottom" title="下方抽屉">内容</FaDrawer>
-  <FaDrawer v-model="drawers.left" side="left" title="左侧抽屉">内容</FaDrawer>
-  <FaDrawer v-model="drawers.right" side="right" title="右侧抽屉">内容</FaDrawer>
-</template>
-```
-
-### 带底部按钮
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-
-function handleConfirm() {
-  console.log('确认操作')
-  open.value = false
-}
-
-function handleCancel() {
-  console.log('取消操作')
-  open.value = false
-}
-</script>
-
-<template>
-  <FaButton @click="open = true">打开抽屉</FaButton>
-  <FaDrawer
-    v-model="open"
-    title="确认操作"
-    show-cancel-button
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <div>请确认是否继续？</div>
-  </FaDrawer>
-</template>
-```
-
-### 关闭前确认
-
-```vue
-<script setup lang="ts">
-import { useFaModal } from '@/ui/components/modal'
-
-const open = ref(false)
-
-function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
-  if (action === 'close') {
-    useFaModal().confirm({
-      title: '提示',
-      content: '确定要关闭吗？未保存的内容将丢失。',
-      onConfirm: () => done(),
-    })
-  }
-  else {
-    done()
-  }
-}
-</script>
-
-<template>
-  <FaDrawer v-model="open" title="编辑" :before-close="handleBeforeClose">
-    <form>
-      <FaInput placeholder="请输入..." />
-    </form>
-  </FaDrawer>
-</template>
-```
-
-### 加载状态
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-const loading = ref(false)
-
-function handleSubmit() {
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    open.value = false
-  }, 2000)
-}
-</script>
-
-<template>
-  <FaDrawer v-model="open" title="提交表单" :loading="loading" :confirm-button-loading="loading" @confirm="handleSubmit">
-    <form class="flex flex-col gap-4">
-      <FaInput placeholder="输入内容" />
-    </form>
-  </FaDrawer>
-</template>
-```
-
-### 自定义头部和底部
-
-```vue
-<template>
-  <FaDrawer v-model="open">
-    <template #header>
-      <div class="flex-between">
-        <span class="font-bold">自定义标题</span>
-        <FaIcon name="i-lucide:info" />
-      </div>
-    </template>
-    <div>抽屉内容</div>
-    <template #footer>
-      <div class="flex gap-2">
-        <FaButton variant="outline">取消</FaButton>
-        <FaButton>保存</FaButton>
-      </div>
-    </template>
-  </FaDrawer>
-</template>
-```
-
-### 调整抽屉宽度
-
-```vue
-<template>
-  <FaDrawer v-model="open" title="大抽屉" content-class="sm:max-w-2xl">
-    <div>这是一个较宽的抽屉</div>
-  </FaDrawer>
-</template>
-```
-
-### 居中显示
-
-```vue
-<template>
-  <FaDrawer v-model="open" title="居中抽屉" centered show-cancel-button>
-    <div class="text-center">
-      <p>这是一个居中的抽屉</p>
-      <p>按钮也会居中对齐</p>
-    </div>
-  </FaDrawer>
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 控制抽屉打开状态
diff --git a/packages/components/src/basic/drawer/_examples/_basic.vue b/packages/components/src/basic/drawer/_examples/_basic.vue
new file mode 100644
index 00000000..680ef987
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_basic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开抽屉
+  </FaButton>
+  <FaDrawer v-model="open" title="抽屉标题">
+    <div class="text-sm text-muted-foreground">
+      这里是抽屉内容区域。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_center-border-loading.vue b/packages/components/src/basic/drawer/_examples/_center-border-loading.vue
new file mode 100644
index 00000000..1af58aee
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_center-border-loading.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const centeredOpen = shallowRef(false)
+const borderlessOpen = shallowRef(false)
+const loadingOpen = shallowRef(false)
+const loading = shallowRef(false)
+
+function openLoadingDrawer() {
+  loadingOpen.value = true
+  loading.value = true
+  window.setTimeout(() => {
+    loading.value = false
+  }, 1800)
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="centeredOpen = true">
+      居中
+    </FaButton>
+    <FaButton variant="outline" @click="borderlessOpen = true">
+      无边框
+    </FaButton>
+    <FaButton variant="secondary" @click="openLoadingDrawer">
+      载入
+    </FaButton>
+  </div>
+
+  <FaDrawer v-model="centeredOpen" title="居中抽屉" centered show-cancel-button>
+    <div class="text-sm text-muted-foreground text-center">
+      标题、描述和底部按钮会居中显示。
+    </div>
+  </FaDrawer>
+  <FaDrawer v-model="borderlessOpen" title="无边框抽屉" :bordered="false" show-cancel-button>
+    <div class="text-sm text-muted-foreground">
+      头部和底部不显示分割线。
+    </div>
+  </FaDrawer>
+  <FaDrawer v-model="loadingOpen" title="载入状态" :loading="loading">
+    <div class="text-sm text-muted-foreground">
+      抽屉主体区域会显示载入遮罩。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_closable.vue b/packages/components/src/basic/drawer/_examples/_closable.vue
new file mode 100644
index 00000000..9244d3c9
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_closable.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const closableOpen = shallowRef(false)
+const notClosableOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="closableOpen = true">
+      显示关闭按钮
+    </FaButton>
+    <FaButton variant="outline" @click="notClosableOpen = true">
+      隐藏关闭按钮
+    </FaButton>
+  </div>
+
+  <FaDrawer v-model="closableOpen" title="显示关闭按钮" closable>
+    右上角会显示关闭按钮。
+  </FaDrawer>
+  <FaDrawer v-model="notClosableOpen" title="隐藏关闭按钮" :closable="false">
+    右上角不会显示关闭按钮，可通过底部按钮关闭。
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_custom-style.vue b/packages/components/src/basic/drawer/_examples/_custom-style.vue
new file mode 100644
index 00000000..5620ec26
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_custom-style.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开抽屉
+  </FaButton>
+  <FaDrawer
+    v-model="open"
+    title="自定义样式"
+    description="通过 contentClass、headerClass 和 footerClass 调整抽屉区域样式。"
+    content-class="sm:max-w-xl border-primary/30"
+    header-class="bg-primary/8"
+    footer-class="bg-muted/50"
+    show-cancel-button
+  >
+    <div class="text-sm leading-6 p-4 rounded-lg bg-muted/50">
+      可以根据业务场景调整宽度、背景、边框和底部区域样式。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_event.vue b/packages/components/src/basic/drawer/_examples/_event.vue
new file mode 100644
index 00000000..e1b5dc74
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_event.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../../toast'
+import FaDrawer from '../index.vue'
+
+const open = shallowRef(false)
+const toast = useToast()
+
+function notify(eventName: string) {
+  toast(`触发事件：${eventName}`)
+}
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开抽屉
+  </FaButton>
+  <FaDrawer
+    v-model="open"
+    title="触发事件"
+    show-cancel-button
+    @open="notify('open')"
+    @opened="notify('opened')"
+    @close="notify('close')"
+    @closed="notify('closed')"
+    @confirm="notify('confirm')"
+    @cancel="notify('cancel')"
+  >
+    <div class="text-sm text-muted-foreground">
+      打开、关闭、确认和取消时会触发对应事件。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_functional.vue b/packages/components/src/basic/drawer/_examples/_functional.vue
new file mode 100644
index 00000000..d6e44ba3
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_functional.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { h } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../../toast'
+import { useDrawer } from '../index'
+
+const toast = useToast()
+
+const { open } = useDrawer().create({
+  title: '函数式调用',
+  description: '通过 useDrawer().create() 创建抽屉。',
+  content: h('div', { class: 'text-sm text-muted-foreground leading-6' }, '这里是函数式调用渲染的内容。'),
+  showCancelButton: true,
+  onConfirm: () => toast('确认操作'),
+  onCancel: () => toast('取消操作'),
+})
+</script>
+
+<template>
+  <FaButton @click="open">
+    打开抽屉
+  </FaButton>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_header-footer.vue b/packages/components/src/basic/drawer/_examples/_header-footer.vue
new file mode 100644
index 00000000..4a8cf5a3
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_header-footer.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const hiddenHeaderOpen = shallowRef(false)
+const hiddenFooterOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="hiddenHeaderOpen = true">
+      隐藏头部
+    </FaButton>
+    <FaButton variant="outline" @click="hiddenFooterOpen = true">
+      隐藏底部
+    </FaButton>
+  </div>
+
+  <FaDrawer v-model="hiddenHeaderOpen" :header="false">
+    <div class="text-sm text-muted-foreground">
+      当前抽屉隐藏了头部区域。
+    </div>
+  </FaDrawer>
+  <FaDrawer v-model="hiddenFooterOpen" title="隐藏底部" :footer="false">
+    <div class="text-sm text-muted-foreground">
+      当前抽屉隐藏了底部操作区。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_overlay-blur.vue b/packages/components/src/basic/drawer/_examples/_overlay-blur.vue
new file mode 100644
index 00000000..ed2e2f4e
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_overlay-blur.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const noOverlayOpen = shallowRef(false)
+const blurOverlayOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="noOverlayOpen = true">
+      无遮罩
+    </FaButton>
+    <FaButton variant="outline" @click="blurOverlayOpen = true">
+      模糊遮罩
+    </FaButton>
+  </div>
+
+  <FaDrawer v-model="noOverlayOpen" title="无遮罩" :overlay="false">
+    打开时不显示背景遮罩。
+  </FaDrawer>
+  <FaDrawer v-model="blurOverlayOpen" title="模糊遮罩" overlay-blur>
+    打开时背景遮罩带模糊效果。
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_side.vue b/packages/components/src/basic/drawer/_examples/_side.vue
new file mode 100644
index 00000000..84d850ec
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_side.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const drawers = reactive({
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="drawers.top = true">
+      上方
+    </FaButton>
+    <FaButton @click="drawers.bottom = true">
+      下方
+    </FaButton>
+    <FaButton @click="drawers.left = true">
+      左侧
+    </FaButton>
+    <FaButton @click="drawers.right = true">
+      右侧
+    </FaButton>
+  </div>
+
+  <FaDrawer v-model="drawers.top" side="top" title="上方抽屉">
+    从页面顶部弹出。
+  </FaDrawer>
+  <FaDrawer v-model="drawers.bottom" side="bottom" title="下方抽屉">
+    从页面底部弹出。
+  </FaDrawer>
+  <FaDrawer v-model="drawers.left" side="left" title="左侧抽屉">
+    从页面左侧弹出。
+  </FaDrawer>
+  <FaDrawer v-model="drawers.right" side="right" title="右侧抽屉">
+    从页面右侧弹出。
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_slot.vue b/packages/components/src/basic/drawer/_examples/_slot.vue
new file mode 100644
index 00000000..93086aa0
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_slot.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaDrawer from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开抽屉
+  </FaButton>
+  <FaDrawer v-model="open">
+    <template #header>
+      <div class="pr-8 flex gap-3 items-start">
+        <FaIcon name="i-lucide:panel-right-open" class="text-primary mt-0.5 size-5" />
+        <div>
+          <div class="font-semibold">
+            自定义头部
+          </div>
+          <div class="text-sm text-muted-foreground">
+            使用 header 插槽替换默认标题。
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="text-sm text-muted-foreground">
+      这里是默认插槽内容。
+    </div>
+
+    <template #footer>
+      <div class="flex gap-2 w-full justify-end">
+        <FaButton variant="outline" @click="open = false">
+          取消
+        </FaButton>
+        <FaButton @click="open = false">
+          保存
+        </FaButton>
+      </div>
+    </template>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/_title-description.vue b/packages/components/src/basic/drawer/_examples/_title-description.vue
new file mode 100644
index 00000000..f93deccf
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_title-description.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaDrawer from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开抽屉
+  </FaButton>
+  <FaDrawer
+    v-model="open"
+    title="成员信息"
+    description="用于补充说明当前抽屉的内容和操作上下文。"
+  >
+    <div class="text-sm text-muted-foreground leading-6">
+      标题和描述会显示在默认头部区域中。
+    </div>
+  </FaDrawer>
+</template>
diff --git a/packages/components/src/basic/drawer/_examples/index.ts b/packages/components/src/basic/drawer/_examples/index.ts
new file mode 100644
index 00000000..c3697b3b
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/index.ts
@@ -0,0 +1,80 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CenterBorderLoading from './_center-border-loading.vue'
+import CenterBorderLoadingRaw from './_center-border-loading.vue?raw'
+import Closable from './_closable.vue'
+import ClosableRaw from './_closable.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import HeaderFooter from './_header-footer.vue'
+import HeaderFooterRaw from './_header-footer.vue?raw'
+import OverlayBlur from './_overlay-blur.vue'
+import OverlayBlurRaw from './_overlay-blur.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import TitleDescription from './_title-description.vue'
+import TitleDescriptionRaw from './_title-description.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '弹出方向',
+    component: Side,
+    componentRaw: SideRaw,
+  },
+  {
+    title: '标题描述',
+    component: TitleDescription,
+    componentRaw: TitleDescriptionRaw,
+  },
+  {
+    title: '显示/隐藏关闭按钮',
+    component: Closable,
+    componentRaw: ClosableRaw,
+  },
+  {
+    title: '居中/边框/载入',
+    component: CenterBorderLoading,
+    componentRaw: CenterBorderLoadingRaw,
+  },
+  {
+    title: '遮罩/模糊',
+    component: OverlayBlur,
+    componentRaw: OverlayBlurRaw,
+  },
+  {
+    title: '显示/隐藏头部底部',
+    component: HeaderFooter,
+    componentRaw: HeaderFooterRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+  {
+    title: '触发事件',
+    component: Event,
+    componentRaw: EventRaw,
+  },
+  {
+    title: '函数式调用',
+    component: Functional,
+    componentRaw: FunctionalRaw,
+  },
+]
diff --git a/packages/components/src/basic/drawer/index.vue b/packages/components/src/basic/drawer/index.vue
index a87429cd..75794b5e 100644
--- a/packages/components/src/basic/drawer/index.vue
+++ b/packages/components/src/basic/drawer/index.vue
@@ -77,8 +77,6 @@ watch(isOpen, (val) => {
   if (val && !hasOpened.value) {
     hasOpened.value = true
   }
-}, {
-  immediate: true,
 })
 
 const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
diff --git a/packages/components/src/basic/dropdown/README.md b/packages/components/src/basic/dropdown/README.md
index 0b96473e..2397547c 100644
--- a/packages/components/src/basic/dropdown/README.md
+++ b/packages/components/src/basic/dropdown/README.md
@@ -50,196 +50,6 @@ interface MenuSubItem {
 | `header` | 菜单头部内容 |
 | `footer` | 菜单底部内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '编辑', icon: 'i-lucide:edit', handle: () => console.log('编辑') },
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive', handle: () => console.log('删除') },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaButton>操作</FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 基础下拉菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '编辑', icon: 'i-lucide:edit', handle: () => console.log('编辑') },
-    { label: '复制', icon: 'i-lucide:copy', handle: () => console.log('复制') },
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive', handle: () => console.log('删除') },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaButton variant="outline">
-      <FaIcon name="i-lucide:more-horizontal" />
-    </FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 带分组的菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '新建文件', icon: 'i-lucide:file' },
-    { label: '新建文件夹', icon: 'i-lucide:folder' },
-  ],
-  [
-    { label: '重命名', icon: 'i-lucide:edit' },
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive' },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaButton>操作</FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 带子菜单
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '编辑', icon: 'i-lucide:edit' },
-    { 
-      label: '分享',
-      items: [
-        [{ label: '微信', icon: 'i-ri:wechat-line' }],
-        [{ label: '微博', icon: 'i-ri:weibo-line' }],
-        [{ label: 'QQ', icon: 'i-ri:qq-line' }],
-      ]
-    },
-  ],
-  [
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive' },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaButton>分享</FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 带头部和底部
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '个人设置', icon: 'i-lucide:user' },
-    { label: '账号安全', icon: 'i-lucide:shield' },
-  ],
-  [
-    { label: '退出登录', icon: 'i-lucide:log-out', variant: 'destructive' },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaAvatar src="https://example.com/avatar.jpg" class="size-8 rounded-full" />
-    <template #header>
-      <div class="px-2 py-1.5">
-        <p class="text-sm font-medium">张三</p>
-        <p class="text-xs text-muted-foreground">zhangsan@example.com</p>
-      </div>
-    </template>
-    <template #footer>
-      <div class="px-2 py-1.5 text-xs text-muted-foreground">
-        v1.0.0
-      </div>
-    </template>
-  </FaDropdown>
-</template>
-```
-
-### 禁用菜单项
-
-```vue
-<script setup lang="ts">
-const items = [
-  [
-    { label: '编辑', icon: 'i-lucide:edit', handle: () => console.log('编辑') },
-    { label: '复制', icon: 'i-lucide:copy', disabled: true },
-    { label: '删除', icon: 'i-lucide:trash', variant: 'destructive' },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <FaButton>操作</FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 控制弹出方向
-
-```vue
-<template>
-  <FaDropdown :items="items" side="top">
-    <FaButton>向上弹出</FaButton>
-  </FaDropdown>
-  
-  <FaDropdown :items="items" side="left">
-    <FaButton>向左弹出</FaButton>
-  </FaDropdown>
-</template>
-```
-
-### 用户菜单
-
-```vue
-<script setup lang="ts">
-const router = useRouter()
-const userStore = useUserStore()
-
-const items = [
-  [
-    { label: '个人中心', icon: 'i-lucide:user', handle: () => router.push('/profile') },
-    { label: '账号设置', icon: 'i-lucide:settings', handle: () => router.push('/settings') },
-  ],
-  [
-    { label: '退出登录', icon: 'i-lucide:log-out', variant: 'destructive', handle: () => userStore.logout() },
-  ],
-]
-</script>
-
-<template>
-  <FaDropdown :items="items">
-    <div class="flex items-center gap-2 cursor-pointer">
-      <FaAvatar :src="userStore.avatar" class="size-8 rounded-full" />
-      <span>{{ userStore.username }}</span>
-    </div>
-  </FaDropdown>
-</template>
-```
-
 ## 注意事项
 
 1. **items 结构**：`items` 是二维数组，每个子数组为一组，组与组之间会自动添加分割线
diff --git a/packages/components/src/basic/dropdown/_examples/_align.vue b/packages/components/src/basic/dropdown/_examples/_align.vue
new file mode 100644
index 00000000..9e6d0318
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_align.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '个人设置', icon: 'i-lucide:user', handle: () => handleClick('个人设置') },
+    { label: '账号安全', icon: 'i-lucide:shield', handle: () => handleClick('账号安全') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaDropdown :items="items" align="start">
+      <FaButton variant="outline">
+        Start
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" align="center">
+      <FaButton variant="outline">
+        Center
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" align="end">
+      <FaButton variant="outline">
+        End
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+  </div>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_basic.vue b/packages/components/src/basic/dropdown/_examples/_basic.vue
new file mode 100644
index 00000000..63f1f5a2
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_basic.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  handle?: () => void
+}
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '查看详情', handle: () => handleClick('查看详情') },
+    { label: '编辑', handle: () => handleClick('编辑') },
+    { label: '复制', handle: () => handleClick('复制') },
+  ],
+] satisfies DropdownItem[][]
+</script>
+
+<template>
+  <FaDropdown :items="items">
+    <FaButton>
+      操作
+      <FaIcon name="i-ep:caret-bottom" />
+    </FaButton>
+  </FaDropdown>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_disabled.vue b/packages/components/src/basic/dropdown/_examples/_disabled.vue
new file mode 100644
index 00000000..8690b224
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_disabled.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', handle: () => handleClick('打开') },
+    { label: '复制', disabled: true, handle: () => handleClick('复制') },
+    { label: '移动到', disabled: true, handle: () => handleClick('移动到') },
+  ],
+  [
+    { label: '刷新', handle: () => handleClick('刷新') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <FaDropdown :items="items">
+    <FaButton variant="outline">
+      更多操作
+      <FaIcon name="i-ep:caret-bottom" />
+    </FaButton>
+  </FaDropdown>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_icon.vue b/packages/components/src/basic/dropdown/_examples/_icon.vue
new file mode 100644
index 00000000..ef7775e8
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_icon.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', icon: 'i-lucide:folder-open', handle: () => handleClick('打开') },
+    { label: '重命名', icon: 'i-lucide:pencil', handle: () => handleClick('重命名') },
+    { label: '复制链接', icon: 'i-lucide:link', handle: () => handleClick('复制链接') },
+  ],
+  [
+    { label: '下载', icon: 'i-lucide:download', handle: () => handleClick('下载') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <FaDropdown :items="items">
+    <FaButton variant="outline">
+      文件操作
+      <FaIcon name="i-ep:caret-bottom" />
+    </FaButton>
+  </FaDropdown>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_nested.vue b/packages/components/src/basic/dropdown/_examples/_nested.vue
new file mode 100644
index 00000000..f550157b
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_nested.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '打开', handle: () => handleClick('打开') },
+    {
+      label: '更多操作',
+      items: [
+        [
+          { label: '保存页面', handle: () => handleClick('保存页面') },
+          { label: '导出为 PDF', handle: () => handleClick('导出为 PDF') },
+        ],
+        [
+          { label: '复制路径', handle: () => handleClick('复制路径') },
+        ],
+      ],
+    },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <FaDropdown :items="items">
+    <FaButton variant="outline">
+      页面操作
+      <FaIcon name="i-ep:caret-bottom" />
+    </FaButton>
+  </FaDropdown>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_offset.vue b/packages/components/src/basic/dropdown/_examples/_offset.vue
new file mode 100644
index 00000000..1f5fc08f
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_offset.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '新建文件', icon: 'i-lucide:file-plus', handle: () => handleClick('新建文件') },
+    { label: '新建文件夹', icon: 'i-lucide:folder-plus', handle: () => handleClick('新建文件夹') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaDropdown :items="items" :side-offset="12">
+      <FaButton variant="outline">
+        Side offset
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" align="start" :align-offset="24">
+      <FaButton variant="outline">
+        Align offset
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" :side-offset="12" :align-offset="-24">
+      <FaButton variant="outline">
+        Both
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+  </div>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_side.vue b/packages/components/src/basic/dropdown/_examples/_side.vue
new file mode 100644
index 00000000..02721885
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_side.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: 'Preview', icon: 'i-lucide:eye', handle: () => handleClick('Preview') },
+    { label: 'Duplicate', icon: 'i-lucide:copy', handle: () => handleClick('Duplicate') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaDropdown :items="items" side="top">
+      <FaButton variant="outline">
+        Top
+        <FaIcon name="i-ep:caret-top" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" side="right">
+      <FaButton variant="outline">
+        Right
+        <FaIcon name="i-ep:caret-right" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" side="bottom">
+      <FaButton variant="outline">
+        Bottom
+        <FaIcon name="i-ep:caret-bottom" />
+      </FaButton>
+    </FaDropdown>
+    <FaDropdown :items="items" side="left">
+      <FaButton variant="outline">
+        Left
+        <FaIcon name="i-ep:caret-left" />
+      </FaButton>
+    </FaDropdown>
+  </div>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/_warning.vue b/packages/components/src/basic/dropdown/_examples/_warning.vue
new file mode 100644
index 00000000..7e5b34b5
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_warning.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaDropdown from '../index.vue'
+
+interface DropdownItem {
+  label: string
+  icon?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean
+  handle?: () => void
+}
+
+interface DropdownSubItem {
+  label: string
+  items: DropdownItems
+}
+
+type DropdownItems = (DropdownItem | DropdownSubItem)[][]
+
+const toast = useToast()
+
+function handleClick(text: string) {
+  toast(text)
+}
+
+const items = [
+  [
+    { label: '查看详情', handle: () => handleClick('查看详情') },
+    { label: '复制副本', handle: () => handleClick('复制副本') },
+  ],
+  [
+    { label: '删除', variant: 'destructive', handle: () => handleClick('删除') },
+  ],
+] satisfies DropdownItems
+</script>
+
+<template>
+  <FaDropdown :items="items">
+    <FaButton variant="outline">
+      项目操作
+      <FaIcon name="i-ep:caret-bottom" />
+    </FaButton>
+  </FaDropdown>
+</template>
diff --git a/packages/components/src/basic/dropdown/_examples/index.ts b/packages/components/src/basic/dropdown/_examples/index.ts
new file mode 100644
index 00000000..e233ce67
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/index.ts
@@ -0,0 +1,59 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+import Nested from './_nested.vue'
+import NestedRaw from './_nested.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+import Warning from './_warning.vue'
+import WarningRaw from './_warning.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '图标',
+    component: Icon,
+    componentRaw: IconRaw,
+  },
+  {
+    title: '警告',
+    component: Warning,
+    componentRaw: WarningRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '嵌套',
+    component: Nested,
+    componentRaw: NestedRaw,
+  },
+  {
+    title: '弹出方向',
+    component: Side,
+    componentRaw: SideRaw,
+  },
+  {
+    title: '对齐方式',
+    component: Align,
+    componentRaw: AlignRaw,
+  },
+  {
+    title: '偏移',
+    component: Offset,
+    componentRaw: OffsetRaw,
+  },
+]
diff --git a/packages/components/src/basic/file-upload/README.md b/packages/components/src/basic/file-upload/README.md
index 68094738..25963f7f 100644
--- a/packages/components/src/basic/file-upload/README.md
+++ b/packages/components/src/basic/file-upload/README.md
@@ -76,119 +76,6 @@ interface FileItem {
 
 将鼠标移入当前组件，或通过 `Tab` 聚焦当前组件后，可直接按 `Ctrl+V` / `Cmd+V` 粘贴剪贴板中的文件。启用 `directory` 后，粘贴上传不可用。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
-
-const fileList = ref<FileItem[]>([])
-
-function afterUpload(response: any) {
-  return response.data.url
-}
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="fileList"
-    action="/api/upload"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 上传前校验
-
-组件不再内置文件格式或大小校验。如需校验，请通过 `beforeUpload` 实现。
-
-```vue
-<script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
-
-const fileList = ref<FileItem[]>([])
-
-function beforeUpload(file: File) {
-  const isLt2M = file.size <= 2 * 1024 * 1024
-  const isPdf = file.type === 'application/pdf'
-
-  if (!isPdf) {
-    useFaToast().error('只能上传 PDF 文件')
-    return false
-  }
-  if (!isLt2M) {
-    useFaToast().error('文件不能超过 2MB')
-    return false
-  }
-  return true
-}
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="fileList"
-    action="/api/upload"
-    :before-upload="beforeUpload"
-  />
-</template>
-```
-
-### 自定义上传请求
-
-```vue
-<script setup lang="ts">
-import type { FileItem, FileUploadRequestOptions } from '@fantastic-admin/components'
-
-const fileList = ref<FileItem[]>([])
-
-async function httpRequest({ file, onProgress }: FileUploadRequestOptions) {
-  onProgress(50)
-
-  const formData = new FormData()
-  formData.append('file', file)
-
-  const response = await fetch('/api/custom-upload', {
-    method: 'POST',
-    body: formData,
-  })
-
-  onProgress(100)
-  return await response.json()
-}
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="fileList"
-    :http-request="httpRequest"
-    :after-upload="response => response.url"
-  />
-</template>
-```
-
-### 文件夹上传
-
-启用 `directory` 后，文件选择器只能选择文件夹。选择文件夹后，文件夹内的文件会作为扁平文件列表逐个上传。
-
-```vue
-<script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
-
-const fileList = ref<FileItem[]>([])
-</script>
-
-<template>
-  <FaFileUpload
-    v-model="fileList"
-    action="/api/upload"
-    directory
-    :max="0"
-  />
-</template>
-```
-
 ## 注意事项
 
 1. **文件列表**：`modelValue` 是必需的双向绑定属性。
diff --git a/packages/components/src/basic/file-upload/_examples/_basic.vue b/packages/components/src/basic/file-upload/_examples/_basic.vue
new file mode 100644
index 00000000..928be1f3
--- /dev/null
+++ b/packages/components/src/basic/file-upload/_examples/_basic.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { FileItem } from '../index.vue'
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaFileUpload from '../index.vue'
+
+const toast = useToast()
+const files = ref<FileItem[]>([])
+
+function handleSuccess() {
+  toast.success('模拟上传成功')
+}
+</script>
+
+<template>
+  <FaFileUpload
+    v-model="files"
+    action="/fake/upload"
+    :after-upload="response => response.data.url"
+    multiple
+    @on-success="handleSuccess"
+  />
+</template>
diff --git a/apps/example/src/views/component_example/file_upload/_demo4.vue b/packages/components/src/basic/file-upload/_examples/_custom-request.vue
similarity index 63%
rename from apps/example/src/views/component_example/file_upload/_demo4.vue
rename to packages/components/src/basic/file-upload/_examples/_custom-request.vue
index 7e87f711..f551e8da 100644
--- a/apps/example/src/views/component_example/file_upload/_demo4.vue
+++ b/packages/components/src/basic/file-upload/_examples/_custom-request.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { FileItem, FileUploadRequestOptions } from '@fantastic-admin/components'
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { FileItem, FileUploadRequestOptions } from '../index.vue'
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaFileUpload from '../index.vue'
 
+const toast = useToast()
 const files = ref<FileItem[]>([])
 
 async function httpRequest({ file, onProgress }: FileUploadRequestOptions) {
@@ -15,7 +20,7 @@ async function httpRequest({ file, onProgress }: FileUploadRequestOptions) {
 }
 
 function handleSuccess() {
-  useFaToast().success('自定义上传完成')
+  toast.success('自定义上传完成')
 }
 </script>
 
diff --git a/apps/example/src/views/component_example/file_upload/_demo5.vue b/packages/components/src/basic/file-upload/_examples/_directory.vue
similarity index 70%
rename from apps/example/src/views/component_example/file_upload/_demo5.vue
rename to packages/components/src/basic/file-upload/_examples/_directory.vue
index 2263d584..0d7bc9cc 100644
--- a/apps/example/src/views/component_example/file_upload/_demo5.vue
+++ b/packages/components/src/basic/file-upload/_examples/_directory.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import type { FileItem, FileUploadRequestOptions } from '@fantastic-admin/components'
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { FileItem, FileUploadRequestOptions } from '../index.vue'
+import { ref } from 'vue'
+import FaFileUpload from '../index.vue'
 
 const files = ref<FileItem[]>([])
 
diff --git a/packages/components/src/basic/file-upload/_examples/_slot.vue b/packages/components/src/basic/file-upload/_examples/_slot.vue
new file mode 100644
index 00000000..049cd5cd
--- /dev/null
+++ b/packages/components/src/basic/file-upload/_examples/_slot.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { FileItem } from '../index.vue'
+import { ref } from 'vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaFileUpload from '../index.vue'
+
+const toast = useToast()
+const files = ref<FileItem[]>([])
+
+function handleSuccess() {
+  toast.success('模拟上传成功')
+}
+</script>
+
+<template>
+  <FaFileUpload
+    v-model="files"
+    action="/fake/upload"
+    :after-upload="response => response.data.url"
+    multiple
+    @on-success="handleSuccess"
+  >
+    <FaIcon name="i-lucide:folder-up" class="text-3xl text-primary mb-2" />
+    <div class="text-sm font-medium">
+      上传项目附件
+    </div>
+    <div class="text-xs text-muted-foreground mt-1">
+      支持拖拽、点击选择或粘贴文件
+    </div>
+  </FaFileUpload>
+</template>
diff --git a/apps/example/src/views/component_example/file_upload/_demo2.vue b/packages/components/src/basic/file-upload/_examples/_validation.vue
similarity index 60%
rename from apps/example/src/views/component_example/file_upload/_demo2.vue
rename to packages/components/src/basic/file-upload/_examples/_validation.vue
index f88b6e0e..d51807b9 100644
--- a/apps/example/src/views/component_example/file_upload/_demo2.vue
+++ b/packages/components/src/basic/file-upload/_examples/_validation.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { FileItem } from '@fantastic-admin/components'
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { FileItem } from '../index.vue'
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaFileUpload from '../index.vue'
 
+const toast = useToast()
 const files = ref<FileItem[]>([
   { name: 'logo.svg', size: 1024 * 1024, url: 'https://fantastic-admin.hurui.me/logo.svg' },
 ])
@@ -10,22 +15,22 @@ function beforeUpload(file: File) {
   const isLt200K = file.size <= 200 * 1024
 
   if (!isPng) {
-    useFaToast().error('只能上传 PNG 文件')
+    toast.error('只能上传 PNG 文件')
     return false
   }
   if (!isLt200K) {
-    useFaToast().error('文件大小不能超过 200KB')
+    toast.error('文件大小不能超过 200KB')
     return false
   }
   return true
 }
 
 function handleSuccess() {
-  useFaToast().success('模拟上传成功')
+  toast.success('模拟上传成功')
 }
 
 function handleClick(fileItem: FileItem) {
-  useFaToast().info(fileItem.name, {
+  toast.info(fileItem.name, {
     description: fileItem.url,
   })
 }
@@ -35,7 +40,7 @@ function handleClick(fileItem: FileItem) {
   <FaFileUpload
     v-model="files"
     action="/fake/upload"
-    :after-upload="(response) => response.data.url"
+    :after-upload="response => response.data.url"
     :before-upload="beforeUpload"
     multiple
     :max="5"
diff --git a/packages/components/src/basic/file-upload/_examples/index.ts b/packages/components/src/basic/file-upload/_examples/index.ts
new file mode 100644
index 00000000..ddbc5419
--- /dev/null
+++ b/packages/components/src/basic/file-upload/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomRequest from './_custom-request.vue'
+import CustomRequestRaw from './_custom-request.vue?raw'
+import Directory from './_directory.vue'
+import DirectoryRaw from './_directory.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import Validation from './_validation.vue'
+import ValidationRaw from './_validation.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '上传前校验、限制数量、点击事件',
+    component: Validation,
+    componentRaw: ValidationRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '自定义上传请求',
+    component: CustomRequest,
+    componentRaw: CustomRequestRaw,
+  },
+  {
+    title: '文件夹上传',
+    component: Directory,
+    componentRaw: DirectoryRaw,
+  },
+]
diff --git a/packages/components/src/basic/fixed-bar/README.md b/packages/components/src/basic/fixed-bar/README.md
index 979f65f5..d158e2d8 100644
--- a/packages/components/src/basic/fixed-bar/README.md
+++ b/packages/components/src/basic/fixed-bar/README.md
@@ -20,159 +20,6 @@
 |------|------|
 | default | 默认插槽，固定栏内容 |
 
-## 示例
-
-### 固定在顶部
-
-```vue
-<template>
-  <FaFixedBar position="top">
-    <div class="flex items-center gap-4">
-      <FaInput v-model="keyword" placeholder="搜索..." />
-      <FaButton>搜索</FaButton>
-    </div>
-  </FaFixedBar>
-</template>
-```
-
-### 固定在底部
-
-```vue
-<template>
-  <FaFixedBar position="bottom">
-    <div class="flex justify-end gap-2">
-      <FaButton variant="outline">取消</FaButton>
-      <FaButton type="primary">确认提交</FaButton>
-    </div>
-  </FaFixedBar>
-</template>
-```
-
-### 顶部筛选栏
-
-```vue
-<script setup lang="ts">
-const filters = ref([50])
-</script>
-
-<template>
-  <FaFixedBar position="top">
-    <div class="flex items-center gap-4">
-      <span class="text-sm font-bold">透明度：</span>
-      <FaSlider v-model="filters" :min="0" :max="100" />
-      <span class="text-sm w-12">{{ filters[0] }}%</span>
-    </div>
-  </FaFixedBar>
-
-  <!-- 页面内容 -->
-  <div class="pt-20">
-    <div v-for="i in 50" :key="i" class="h-24 border-b">
-      内容 {{ i }}
-    </div>
-  </div>
-</template>
-```
-
-### 底部操作栏
-
-```vue
-<template>
-  <FaPageMain title="订单详情">
-    <div v-for="i in 30" :key="i" class="py-4 border-b">
-      订单项 {{ i }}
-    </div>
-  </FaPageMain>
-
-  <FaFixedBar position="bottom">
-    <div class="flex items-center justify-between w-full">
-      <div>
-        <span class="text-sm text-muted-foreground">合计：</span>
-        <span class="text-xl font-bold text-primary">¥ 1,234.00</span>
-      </div>
-      <div class="flex gap-2">
-        <FaButton variant="outline">联系客服</FaButton>
-        <FaButton type="primary">立即支付</FaButton>
-      </div>
-    </div>
-  </FaFixedBar>
-</template>
-```
-
-### 顶部搜索栏
-
-```vue
-<script setup lang="ts">
-const keyword = ref('')
-const searchHistory = ref([])
-</script>
-
-<template>
-  <FaFixedBar position="top">
-    <div class="flex items-center gap-2">
-      <FaInput
-        v-model="keyword"
-        placeholder="输入关键词搜索"
-        class="w-64"
-        @enter="search"
-      />
-      <FaButton @click="search">
-        <FaIcon name="i-heroicons:magnifying-glass" />
-      </FaButton>
-    </div>
-  </FaFixedBar>
-
-  <div class="pt-16">
-    <!-- 搜索结果列表 -->
-  </div>
-</template>
-```
-
-### 底部表单提交栏
-
-```vue
-<script setup lang="ts">
-const formData = ref({})
-const isSubmitting = ref(false)
-
-async function submit() {
-  isSubmitting.value = true
-  try {
-    await saveData(formData.value)
-    useFaToast().success('保存成功')
-  } finally {
-    isSubmitting.value = false
-  }
-}
-</script>
-
-<template>
-  <FaPageMain title="编辑资料">
-    <div class="space-y-4 pb-20">
-      <FaFormItem label="姓名">
-        <FaInput v-model="formData.name" />
-      </FaFormItem>
-      <FaFormItem label="邮箱">
-        <FaInput v-model="formData.email" />
-      </FaFormItem>
-      <!-- 更多表单项 -->
-    </div>
-  </FaPageMain>
-
-  <FaFixedBar position="bottom">
-    <div class="flex justify-end gap-2">
-      <FaButton variant="outline" @click="reset">重置</FaButton>
-      <FaButton
-        type="primary"
-        :loading="isSubmitting"
-        @click="submit"
-      >
-        保存修改
-      </FaButton>
-    </div>
-  </FaFixedBar>
-</template>
-```
-
 ## 注意事项
 
 1. 固定栏会自动计算侧边栏宽度并适配
diff --git a/apps/example/src/views/component_example/fixed_bar/_demo2.vue b/packages/components/src/basic/fixed-bar/_examples/_bottom.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/fixed_bar/_demo2.vue
rename to packages/components/src/basic/fixed-bar/_examples/_bottom.vue
index 195dc999..4e239ab8
--- a/apps/example/src/views/component_example/fixed_bar/_demo2.vue
+++ b/packages/components/src/basic/fixed-bar/_examples/_bottom.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../../slider/index.vue'
+import FaFixedBar from '../index.vue'
+
 const height = ref([50])
 </script>
 
diff --git a/apps/example/src/views/component_example/fixed_bar/_demo1.vue b/packages/components/src/basic/fixed-bar/_examples/_top.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/fixed_bar/_demo1.vue
rename to packages/components/src/basic/fixed-bar/_examples/_top.vue
index 945d9a00..137d4749
--- a/apps/example/src/views/component_example/fixed_bar/_demo1.vue
+++ b/packages/components/src/basic/fixed-bar/_examples/_top.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../../slider/index.vue'
+import FaFixedBar from '../index.vue'
+
 const height = ref([50])
 </script>
 
diff --git a/packages/components/src/basic/fixed-bar/_examples/index.ts b/packages/components/src/basic/fixed-bar/_examples/index.ts
new file mode 100644
index 00000000..a6431097
--- /dev/null
+++ b/packages/components/src/basic/fixed-bar/_examples/index.ts
@@ -0,0 +1,17 @@
+import Bottom from './_bottom.vue'
+import BottomRaw from './_bottom.vue?raw'
+import Top from './_top.vue'
+import TopRaw from './_top.vue?raw'
+
+export default [
+  {
+    title: '固定在页面顶部',
+    component: Top,
+    componentRaw: TopRaw,
+  },
+  {
+    title: '固定在页面底部',
+    component: Bottom,
+    componentRaw: BottomRaw,
+  },
+]
diff --git a/packages/components/src/basic/hover-card/README.md b/packages/components/src/basic/hover-card/README.md
index 82f3f9d3..43f609dc 100644
--- a/packages/components/src/basic/hover-card/README.md
+++ b/packages/components/src/basic/hover-card/README.md
@@ -29,157 +29,6 @@
 | `default` | 触发元素（必填） |
 | `card` | 悬浮卡片内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaHoverCard>
-    <a href="#">悬停我</a>
-    <template #card>
-      <div class="p-4">
-        <p>悬浮卡片内容</p>
-      </div>
-    </template>
-  </FaHoverCard>
-</template>
-```
-
-### 基础悬浮卡片
-
-```vue
-<template>
-  <FaHoverCard>
-    <a href="#" class="text-primary hover:underline">@张三</a>
-    <template #card>
-      <div class="p-4 w-64">
-        <div class="flex items-center gap-3">
-          <FaAvatar src="https://example.com/avatar.jpg" class="size-10 rounded-full" />
-          <div>
-            <p class="font-medium">张三</p>
-            <p class="text-sm text-muted-foreground">@zhangsan</p>
-          </div>
-        </div>
-      </div>
-    </template>
-  </FaHoverCard>
-</template>
-```
-
-### 链接预览
-
-```vue
-<template>
-  <FaHoverCard>
-    <a href="https://github.com" class="text-primary hover:underline">GitHub</a>
-    <template #card>
-      <div class="p-4 w-80">
-        <div class="flex items-start gap-3">
-          <FaIcon name="i-ri:github-fill" class="size-8" />
-          <div>
-            <p class="font-medium">GitHub</p>
-            <p class="text-sm text-muted-foreground mt-1">
-              全球最大的代码托管平台，提供代码仓库、Issue 跟踪、CI/CD 等功能。
-            </p>
-          </div>
-        </div>
-      </div>
-    </template>
-  </FaHoverCard>
-</template>
-```
-
-### 图片预览
-
-```vue
-<template>
-  <FaHoverCard>
-    <img src="https://example.com/thumb.jpg" class="w-32 rounded cursor-pointer" />
-    <template #card>
-      <img src="https://example.com/large.jpg" class="w-80 rounded" />
-    </template>
-  </FaHoverCard>
-</template>
-```
-
-### 日期悬停提示
-
-```vue
-<template>
-  <FaHoverCard>
-    <span class="border-b border-dotted cursor-help">2024-01-15</span>
-    <template #card>
-      <div class="p-3">
-        <p class="text-sm">2024 年 1 月 15 日 星期一</p>
-        <p class="text-xs text-muted-foreground mt-1">距今 30 天</p>
-      </div>
-    </template>
-  </FaHoverCard>
-</template>
-```
-
-### 不同弹出方向
-
-```vue
-<template>
-  <div class="space-y-8 p-8">
-    <div class="flex gap-4">
-      <FaHoverCard side="top">
-        <FaButton>上方弹出</FaButton>
-        <template #card>上方内容</template>
-      </FaHoverCard>
-      <FaHoverCard side="bottom">
-        <FaButton>下方弹出</FaButton>
-        <template #card>下方内容</template>
-      </FaHoverCard>
-    </div>
-    <div class="flex gap-4">
-      <FaHoverCard side="left">
-        <FaButton>左侧弹出</FaButton>
-        <template #card>左侧内容</template>
-      </FaHoverCard>
-      <FaHoverCard side="right">
-        <FaButton>右侧弹出</FaButton>
-        <template #card>右侧内容</template>
-      </FaHoverCard>
-    </div>
-  </div>
-</template>
-```
-
-### 用户详细信息
-
-```vue
-<template>
-  <FaHoverCard>
-    <div class="flex items-center gap-3 cursor-pointer">
-      <FaAvatar src="https://example.com/avatar.jpg" class="size-10 rounded-full" />
-      <div>
-        <p class="font-medium">张三</p>
-        <p class="text-sm text-muted-foreground">产品经理</p>
-      </div>
-    </div>
-    <template #card>
-      <div class="p-4 w-72">
-        <div class="flex items-center gap-3 mb-3">
-          <FaAvatar src="https://example.com/avatar.jpg" class="size-12 rounded-full" />
-          <div>
-            <p class="font-medium">张三</p>
-            <p class="text-sm text-muted-foreground">zhangsan@example.com</p>
-          </div>
-        </div>
-        <div class="space-y-2 text-sm">
-          <p><strong>部门：</strong>产品部</p>
-          <p><strong>职位：</strong>高级产品经理</p>
-          <p><strong>入职时间：</strong>2020-03-15</p>
-        </div>
-      </div>
-    </template>
-  </FaHoverCard>
-</template>
-```
-
 ## 注意事项
 
 1. **触发元素**：必须提供 `default` slot 作为触发元素
diff --git a/packages/components/src/basic/hover-card/_examples/_align.vue b/packages/components/src/basic/hover-card/_examples/_align.vue
new file mode 100644
index 00000000..0d572316
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_align.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaHoverCard from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaHoverCard align="start">
+      <FaButton variant="link">
+        Start
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          起始位置对齐
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard align="center">
+      <FaButton variant="link">
+        Center
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          居中对齐
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard align="end">
+      <FaButton variant="link">
+        End
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          结束位置对齐
+        </div>
+      </template>
+    </FaHoverCard>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/hover_card/_demo1.vue b/packages/components/src/basic/hover-card/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 73%
rename from apps/example/src/views/component_example/hover_card/_demo1.vue
rename to packages/components/src/basic/hover-card/_examples/_basic.vue
index ddeb88f5..ff746476
--- a/apps/example/src/views/component_example/hover_card/_demo1.vue
+++ b/packages/components/src/basic/hover-card/_examples/_basic.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaAvatar from '../../avatar/index.vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaHoverCard from '../index.vue'
+</script>
+
 <template>
   <FaHoverCard class="min-w-auto">
     <FaButton variant="link">
diff --git a/packages/components/src/basic/hover-card/_examples/_offset.vue b/packages/components/src/basic/hover-card/_examples/_offset.vue
new file mode 100644
index 00000000..b26153a2
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_offset.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaHoverCard from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaHoverCard :side-offset="12">
+      <FaButton variant="link">
+        Side offset
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          与触发元素保持更大距离
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard align="start" :align-offset="24">
+      <FaButton variant="link">
+        Align offset
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          沿对齐方向偏移
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard :side-offset="12" :align-offset="-24">
+      <FaButton variant="link">
+        Both
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          同时设置两种偏移
+        </div>
+      </template>
+    </FaHoverCard>
+  </div>
+</template>
diff --git a/packages/components/src/basic/hover-card/_examples/_side.vue b/packages/components/src/basic/hover-card/_examples/_side.vue
new file mode 100644
index 00000000..6c1efa2f
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_side.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaHoverCard from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaHoverCard side="top">
+      <FaButton variant="link">
+        Top
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          从上方弹出
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard side="right">
+      <FaButton variant="link">
+        Right
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          从右侧弹出
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard side="bottom">
+      <FaButton variant="link">
+        Bottom
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          从下方弹出
+        </div>
+      </template>
+    </FaHoverCard>
+    <FaHoverCard side="left">
+      <FaButton variant="link">
+        Left
+      </FaButton>
+      <template #card>
+        <div class="text-sm">
+          从左侧弹出
+        </div>
+      </template>
+    </FaHoverCard>
+  </div>
+</template>
diff --git a/packages/components/src/basic/hover-card/_examples/index.ts b/packages/components/src/basic/hover-card/_examples/index.ts
new file mode 100644
index 00000000..f8954126
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/index.ts
@@ -0,0 +1,31 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '弹出方向',
+    component: Side,
+    componentRaw: SideRaw,
+  },
+  {
+    title: '对齐方式',
+    component: Align,
+    componentRaw: AlignRaw,
+  },
+  {
+    title: '偏移',
+    component: Offset,
+    componentRaw: OffsetRaw,
+  },
+]
diff --git a/packages/components/src/basic/icon/README.md b/packages/components/src/basic/icon/README.md
index acb79f77..a3a35aab 100644
--- a/packages/components/src/basic/icon/README.md
+++ b/packages/components/src/basic/icon/README.md
@@ -18,97 +18,6 @@
 | `transition` | `boolean` | `false` | 是否开启图标切换动画 |
 | `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaIcon name="i-lucide:search" />
-  <FaIcon name="heroicons:information-circle" />
-</template>
-```
-
-### UnoCSS 图标（推荐）
-
-```vue
-<template>
-  <FaIcon name="i-lucide:home" />
-  <FaIcon name="i-ri:user-line" />
-  <FaIcon name="i-ant-design:search-outlined" />
-</template>
-```
-
-### Iconify 图标
-
-```vue
-<template>
-  <FaIcon name="heroicons:academic-cap" />
-  <FaIcon name="ph:bell" />
-</template>
-```
-
-### SVG 雪碧图
-
-先在项目中引入 SVG 雪碧图，然后使用：
-
-```vue
-<template>
-  <FaIcon name="icon-custom" />
-</template>
-```
-
-### 图片图标
-
-```vue
-<template>
-  <!-- 网络图片 -->
-  <FaIcon name="https://example.com/icon.svg" />
-
-  <!-- 本地图片 -->
-  <FaIcon name="/assets/icons/logo.svg" />
-  <FaIcon name="./icon.png" />
-</template>
-```
-
-### 自定义尺寸和颜色
-
-```vue
-<template>
-  <!-- 通过 class 控制尺寸 -->
-  <FaIcon name="i-lucide:search" class="text-xl" />
-  <FaIcon name="i-lucide:home" class="size-6" />
-
-  <!-- 通过 class 控制颜色 -->
-  <FaIcon name="i-lucide:heart" class="text-red-500" />
-  <FaIcon name="i-lucide:star" class="text-yellow-500" />
-</template>
-```
-
-### 动态图标
-
-```vue
-<script setup lang="ts">
-const isActive = ref(false)
-</script>
-
-<template>
-  <!-- 默认：直接切换，无动画 -->
-  <FaIcon :name="isActive ? 'i-lucide:star' : 'i-lucide:star-outline'" />
-
-  <!-- 开启切换动画 -->
-  <FaIcon :name="isActive ? 'i-lucide:star' : 'i-lucide:star-outline'" transition />
-</template>
-```
-
-### 带点击事件的图标
-
-```vue
-<template>
-  <FaIcon name="i-lucide:trash-2" class="cursor-pointer hover:text-destructive" @click="handleDelete" />
-</template>
-```
-
 ## 注意事项
 
 ### 图标格式说明
diff --git a/packages/components/src/basic/icon/_examples/_iconify.vue b/packages/components/src/basic/icon/_examples/_iconify.vue
new file mode 100644
index 00000000..0eec70fd
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_iconify.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../index.vue'
+
+const icons = [
+  'lucide:bell',
+  'lucide:calendar-days',
+  'ri:github-fill',
+  'logos:vue',
+  'logos:vitejs',
+]
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <div v-for="name in icons" :key="name" class="p-3 flex flex-col gap-2 w-28 items-center">
+      <FaIcon :name="name" class="size-9" />
+      <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name }}</span>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/icon/_examples/_image.vue b/packages/components/src/basic/icon/_examples/_image.vue
new file mode 100644
index 00000000..0dc5f707
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_image.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../index.vue'
+
+const imageUrl = shallowRef('https://picsum.photos/80')
+
+function changeImage() {
+  imageUrl.value = `https://picsum.photos/80?random=${Math.random()}`
+}
+
+function showError() {
+  imageUrl.value = 'https://xxx/'
+}
+
+const logo = new URL('./logo.svg', import.meta.url).href
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-6 items-end">
+    <div class="p-4 border rounded-lg flex flex-col gap-3 items-center">
+      <span class="text-xs text-muted-foreground font-medium">网络图片</span>
+      <FaIcon :name="imageUrl" class="size-14" />
+      <div class="flex gap-2">
+        <FaButton size="sm" @click="changeImage">
+          更换图片
+        </FaButton>
+        <FaButton size="sm" variant="outline" @click="showError">
+          触发错误
+        </FaButton>
+      </div>
+    </div>
+    <div class="p-4 border rounded-lg flex flex-col gap-3 items-center">
+      <span class="text-xs text-muted-foreground font-medium">相对路径</span>
+      <FaIcon :name="logo" class="size-14" />
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/icon/_examples/_svg.vue b/packages/components/src/basic/icon/_examples/_svg.vue
new file mode 100644
index 00000000..1a29265c
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_svg.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../index.vue'
+
+const monoIcons = [
+  'example-emotion-line',
+  'example-emotion-laugh-line',
+  'example-emotion-unhappy-line',
+]
+
+const colorIcons = [
+  'example-crown',
+  'example-star',
+  'example-vip',
+]
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <div class="text-sm text-muted-foreground font-medium mb-3">
+        单色
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <div v-for="name in monoIcons" :key="name" class="p-3 flex flex-col gap-1.5 w-24 items-center">
+          <FaIcon :name="name" class="size-10" />
+          <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name.replace('example-', '') }}</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="text-sm text-muted-foreground font-medium mb-3">
+        彩色
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <div v-for="name in colorIcons" :key="name" class="p-3 flex flex-col gap-1.5 w-24 items-center">
+          <FaIcon :name="name" class="size-10" />
+          <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name.replace('example-', '') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/icon/_examples/_transition.vue b/packages/components/src/basic/icon/_examples/_transition.vue
new file mode 100644
index 00000000..2e7a9d7f
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_transition.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../index.vue'
+
+const active = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-6 items-end">
+    <div class="px-6 py-4 border rounded-lg flex flex-col gap-3 items-center">
+      <span class="text-xs text-muted-foreground font-medium">无动画</span>
+      <FaIcon :name="active ? 'i-lucide:heart' : 'i-lucide:star'" class="size-8" />
+    </div>
+    <div class="px-6 py-4 border rounded-lg flex flex-col gap-3 items-center">
+      <span class="text-xs text-muted-foreground font-medium">过渡动画</span>
+      <FaIcon :name="active ? 'i-lucide:heart' : 'i-lucide:star'" class="text-primary size-8" transition />
+    </div>
+    <FaButton @click="active = !active">
+      切换图标
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/icon/_examples/_unocss.vue b/packages/components/src/basic/icon/_examples/_unocss.vue
new file mode 100644
index 00000000..03e0a9a1
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_unocss.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../index.vue'
+
+const icons = [
+  'i-lucide:search',
+  'i-lucide:settings',
+  'i-ep:edit',
+  'i-ri:notification-3-line',
+  'i-tabler:chart-area-line',
+]
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <div v-for="name in icons" :key="name" class="p-3 flex flex-col gap-2 w-32 items-center">
+      <FaIcon :name="name" class="text-primary size-9" />
+      <span class="text-xs text-muted-foreground text-center w-full truncate">{{ name }}</span>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/icon/_examples/index.ts b/packages/components/src/basic/icon/_examples/index.ts
new file mode 100644
index 00000000..7148d0a6
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/index.ts
@@ -0,0 +1,38 @@
+import Iconify from './_iconify.vue'
+import IconifyRaw from './_iconify.vue?raw'
+import Image from './_image.vue'
+import ImageRaw from './_image.vue?raw'
+import Svg from './_svg.vue'
+import SvgRaw from './_svg.vue?raw'
+import Transition from './_transition.vue'
+import TransitionRaw from './_transition.vue?raw'
+import Unocss from './_unocss.vue'
+import UnocssRaw from './_unocss.vue?raw'
+
+export default [
+  {
+    title: 'SVG文件',
+    component: Svg,
+    componentRaw: SvgRaw,
+  },
+  {
+    title: 'Iconify',
+    component: Iconify,
+    componentRaw: IconifyRaw,
+  },
+  {
+    title: 'UnoCSS',
+    component: Unocss,
+    componentRaw: UnocssRaw,
+  },
+  {
+    title: 'Image',
+    component: Image,
+    componentRaw: ImageRaw,
+  },
+  {
+    title: '过渡动画',
+    component: Transition,
+    componentRaw: TransitionRaw,
+  },
+]
diff --git a/packages/components/src/basic/icon/_examples/logo.svg b/packages/components/src/basic/icon/_examples/logo.svg
new file mode 100644
index 00000000..488039c9
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -46 256 256" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#35495e" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>
diff --git a/packages/components/src/basic/image-preview/README.md b/packages/components/src/basic/image-preview/README.md
index 57b237a3..18dbb1ac 100644
--- a/packages/components/src/basic/image-preview/README.md
+++ b/packages/components/src/basic/image-preview/README.md
@@ -32,162 +32,6 @@
 | `load` | - | 图片加载成功时触发 |
 | `error` | - | 图片加载失败时触发 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaImagePreview src="https://example.com/image.jpg" />
-</template>
-```
-
-### 基础图片预览
-
-```vue
-<template>
-  <FaImagePreview src="https://example.com/image.jpg" />
-</template>
-```
-
-### 自定义尺寸
-
-```vue
-<template>
-  <FaImagePreview src="https://example.com/image.jpg" class="w-64 h-48" />
-  <FaImagePreview src="https://example.com/image.jpg" class="w-96 h-72" />
-</template>
-```
-
-### 图片列表
-
-```vue
-<template>
-  <div class="grid grid-cols-3 gap-4">
-    <FaImagePreview 
-      v-for="(image, index) in images" 
-      :key="index"
-      :src="image" 
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const images = [
-  'https://example.com/image1.jpg',
-  'https://example.com/image2.jpg',
-  'https://example.com/image3.jpg',
-]
-</script>
-```
-
-### 自定义加载状态
-
-```vue
-<template>
-  <FaImagePreview src="https://example.com/image.jpg">
-    <template #loading>
-      <div class="flex flex-col items-center gap-2">
-        <FaIcon name="i-line-md:loading-twotone-loop" class="size-8 text-primary" />
-        <span class="text-sm text-muted-foreground">加载中...</span>
-      </div>
-    </template>
-  </FaImagePreview>
-</template>
-```
-
-### 自定义错误状态
-
-```vue
-<template>
-  <FaImagePreview src="invalid-url.jpg">
-    <template #error>
-      <div class="flex flex-col items-center gap-2">
-        <FaIcon name="i-lucide:image-off" class="size-8 text-muted-foreground" />
-        <span class="text-sm text-muted-foreground">加载失败</span>
-      </div>
-    </template>
-  </FaImagePreview>
-</template>
-```
-
-### 监听加载事件
-
-```vue
-<script setup lang="ts">
-function handleLoad() {
-  console.log('图片加载成功')
-}
-
-function handleError() {
-  console.log('图片加载失败')
-}
-</script>
-
-<template>
-  <FaImagePreview 
-    src="https://example.com/image.jpg" 
-    @load="handleLoad"
-    @error="handleError"
-  />
-</template>
-```
-
-### 头像式预览
-
-```vue
-<template>
-  <FaImagePreview src="https://example.com/avatar.jpg" class="rounded-full" />
-</template>
-```
-
-### 商品图片预览
-
-```vue
-<template>
-  <FaCard title="商品图片">
-    <div class="grid grid-cols-2 gap-4">
-      <FaImagePreview 
-        v-for="(image, index) in productImages" 
-        :key="index"
-        :src="image"
-        class="aspect-square"
-      />
-    </div>
-  </FaCard>
-</template>
-
-<script setup lang="ts">
-const productImages = [
-  'https://example.com/product1.jpg',
-  'https://example.com/product2.jpg',
-  'https://example.com/product3.jpg',
-  'https://example.com/product4.jpg',
-]
-</script>
-```
-
-### 带描述的画廊
-
-```vue
-<template>
-  <div class="grid grid-cols-3 gap-6">
-    <div v-for="(photo, index) in photos" :key="index">
-      <FaImagePreview :src="photo.url" class="w-full aspect-video" />
-      <p class="text-sm text-center mt-2 text-muted-foreground">{{ photo.title }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const photos = [
-  { url: 'https://example.com/photo1.jpg', title: '风景 1' },
-  { url: 'https://example.com/photo2.jpg', title: '风景 2' },
-  { url: 'https://example.com/photo3.jpg', title: '风景 3' },
-]
-</script>
-```
-
 ## 注意事项
 
 1. **点击放大**：点击图片会自动打开全屏预览
diff --git a/packages/components/src/basic/image-preview/_examples/_basic.vue b/packages/components/src/basic/image-preview/_examples/_basic.vue
new file mode 100644
index 00000000..aff2dbb7
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_basic.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaImagePreview from '../index.vue'
+</script>
+
+<template>
+  <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" />
+</template>
diff --git a/packages/components/src/basic/image-preview/_examples/_error.vue b/packages/components/src/basic/image-preview/_examples/_error.vue
new file mode 100644
index 00000000..55480caa
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_error.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import FaImagePreview from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaImagePreview src="https://fantastic-admin.hurui.me/not-found.png" />
+    <FaImagePreview src="https://fantastic-admin.hurui.me/not-found.png">
+      <template #error>
+        <div class="text-sm text-secondary-foreground/50 flex-col-center gap-1">
+          <FaIcon name="i-ph:image-broken-duotone" class="size-8" />
+          <div>
+            图片加载失败
+          </div>
+        </div>
+      </template>
+    </FaImagePreview>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/image_preview/_demo2.vue b/packages/components/src/basic/image-preview/_examples/_functional.vue
old mode 100755
new mode 100644
similarity index 66%
rename from apps/example/src/views/component_example/image_preview/_demo2.vue
rename to packages/components/src/basic/image-preview/_examples/_functional.vue
index 56c1d08a..c870071c
--- a/apps/example/src/views/component_example/image_preview/_demo2.vue
+++ b/packages/components/src/basic/image-preview/_examples/_functional.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { open } = useFaImagePreview()
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useImagePreview } from '../index'
+
+const { open } = useImagePreview()
 
 function openSingle() {
   open('https://fantastic-admin.hurui.me/logo.svg')
@@ -12,7 +16,7 @@ function openMulti() {
   ])
 }
 
-function openMulti2() {
+function openMultiWithIndex() {
   open([
     'https://fantastic-admin.hurui.me/logo.svg',
     'https://fantastic-mobile.hurui.me/logo.png',
@@ -21,14 +25,14 @@ function openMulti2() {
 </script>
 
 <template>
-  <div class="space-x-4">
+  <div class="flex flex-wrap gap-2">
     <FaButton @click="openSingle">
       预览单张
     </FaButton>
     <FaButton @click="openMulti">
       预览多张
     </FaButton>
-    <FaButton @click="openMulti2">
+    <FaButton @click="openMultiWithIndex">
       预览多张（初始预览第2张）
     </FaButton>
   </div>
diff --git a/packages/components/src/basic/image-preview/_examples/_size.vue b/packages/components/src/basic/image-preview/_examples/_size.vue
new file mode 100644
index 00000000..61a264bb
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_size.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaImagePreview from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 items-end">
+    <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" class="size-25" />
+    <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" class="size-40" />
+    <FaImagePreview src="https://fantastic-admin.hurui.me/logo.svg" class="h-40 w-60" />
+  </div>
+</template>
diff --git a/packages/components/src/basic/image-preview/_examples/index.ts b/packages/components/src/basic/image-preview/_examples/index.ts
new file mode 100644
index 00000000..60ace222
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Error from './_error.vue'
+import ErrorRaw from './_error.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '尺寸',
+    component: Size,
+    componentRaw: SizeRaw,
+  },
+  {
+    title: '错误',
+    component: Error,
+    componentRaw: ErrorRaw,
+  },
+  {
+    title: '函数式调用',
+    component: Functional,
+    componentRaw: FunctionalRaw,
+  },
+]
diff --git a/packages/components/src/basic/image-upload/README.md b/packages/components/src/basic/image-upload/README.md
index 4ac180d9..ccadf9c2 100644
--- a/packages/components/src/basic/image-upload/README.md
+++ b/packages/components/src/basic/image-upload/README.md
@@ -64,166 +64,6 @@ interface UploadRequestOptions {
 
 将鼠标移入当前组件，或通过 `Tab` 聚焦当前组件后，可直接按 `Ctrl+V` / `Cmd+V` 粘贴剪贴板中的图片。启用 `directory` 后，粘贴上传不可用。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const images = ref<string[]>([])
-
-function afterUpload(response: any) {
-  return response.url
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="images"
-    action="/api/upload"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 多图上传
-
-```vue
-<script setup lang="ts">
-const gallery = ref<string[]>([])
-
-function afterUpload(response: any) {
-  return response.data.url
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="gallery"
-    action="/api/upload"
-    multiple
-    :max="9"
-    :width="120"
-    :height="120"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 上传前校验
-
-组件不再内置图片格式、大小或尺寸校验。如需校验，请通过 `beforeUpload` 实现。
-
-```vue
-<script setup lang="ts">
-const images = ref<string[]>([])
-
-function beforeUpload(file: File) {
-  const isImage = file.type.startsWith('image/')
-  const isLt3M = file.size <= 3 * 1024 * 1024
-
-  if (!isImage) {
-    useFaToast().error('只能上传图片')
-    return false
-  }
-  if (!isLt3M) {
-    useFaToast().error('图片不能超过 3MB')
-    return false
-  }
-  return true
-}
-
-function afterUpload(response: any) {
-  return response.url
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="images"
-    action="/api/upload"
-    :before-upload="beforeUpload"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 自定义上传请求
-
-```vue
-<script setup lang="ts">
-const images = ref<string[]>([])
-
-async function httpRequest({ file, onProgress }: any) {
-  onProgress(20)
-
-  const formData = new FormData()
-  formData.append('image', file)
-
-  const response = await fetch('/api/custom-upload', {
-    method: 'POST',
-    body: formData,
-  })
-
-  onProgress(100)
-  return await response.json()
-}
-
-function afterUpload(response: any) {
-  return response.data.url
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="images"
-    :http-request="httpRequest"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 文件夹上传
-
-启用 `directory` 后，文件选择器只能选择文件夹。选择文件夹后，文件夹内的文件会作为扁平文件列表逐个上传。
-
-```vue
-<script setup lang="ts">
-const images = ref<string[]>([])
-
-function afterUpload(response: any) {
-  return response.url
-}
-</script>
-
-<template>
-  <FaImageUpload
-    v-model="images"
-    action="/api/upload"
-    directory
-    :max="0"
-    :after-upload="afterUpload"
-  />
-</template>
-```
-
-### 自定义上传按钮
-
-```vue
-<script setup lang="ts">
-const images = ref<string[]>([])
-</script>
-
-<template>
-  <FaImageUpload v-model="images" action="/api/upload">
-    <div class="flex flex-col items-center justify-center size-full">
-      <FaIcon name="i-lucide:image-plus" class="text-3xl text-primary mb-2" />
-      <span class="text-sm text-muted-foreground">添加图片</span>
-    </div>
-  </FaImageUpload>
-</template>
-```
-
 ## 注意事项
 
 1. **图片预览**：上传成功后可点击预览大图。
diff --git a/packages/components/src/basic/image-upload/_examples/_basic.vue b/packages/components/src/basic/image-upload/_examples/_basic.vue
new file mode 100644
index 00000000..fe7ba66d
--- /dev/null
+++ b/packages/components/src/basic/image-upload/_examples/_basic.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaImageUpload from '../index.vue'
+
+const toast = useToast()
+const files = ref<string[]>([])
+
+function handleSuccess() {
+  toast.success('模拟上传成功')
+}
+</script>
+
+<template>
+  <FaImageUpload
+    v-model="files"
+    action="/fake/upload"
+    :after-upload="response => response.data.url"
+    @on-success="handleSuccess"
+  />
+</template>
diff --git a/apps/example/src/views/component_example/image_upload/_demo4.vue b/packages/components/src/basic/image-upload/_examples/_custom-request.vue
similarity index 64%
rename from apps/example/src/views/component_example/image_upload/_demo4.vue
rename to packages/components/src/basic/image-upload/_examples/_custom-request.vue
index 512e3251..2eda1861 100644
--- a/apps/example/src/views/component_example/image_upload/_demo4.vue
+++ b/packages/components/src/basic/image-upload/_examples/_custom-request.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import type { UploadRequestOptions } from '@fantastic-admin/components'
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { UploadRequestOptions } from '../index.vue'
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaImageUpload from '../index.vue'
 
+const toast = useToast()
 const files = ref<string[]>([])
 
 async function httpRequest({ file, onProgress }: UploadRequestOptions) {
@@ -15,7 +20,7 @@ async function httpRequest({ file, onProgress }: UploadRequestOptions) {
 }
 
 function handleSuccess() {
-  useFaToast().success('自定义上传完成')
+  toast.success('自定义上传完成')
 }
 </script>
 
diff --git a/apps/example/src/views/component_example/image_upload/_demo5.vue b/packages/components/src/basic/image-upload/_examples/_directory.vue
similarity index 66%
rename from apps/example/src/views/component_example/image_upload/_demo5.vue
rename to packages/components/src/basic/image-upload/_examples/_directory.vue
index de081bea..0ce00638 100644
--- a/apps/example/src/views/component_example/image_upload/_demo5.vue
+++ b/packages/components/src/basic/image-upload/_examples/_directory.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import type { UploadRequestOptions } from '../index.vue'
+import { ref } from 'vue'
+import FaImageUpload from '../index.vue'
+
 const files = ref<string[]>([])
 
 function beforeUpload(file: File) {
   return file.type.startsWith('image/')
 }
 
-async function httpRequest({ file, onProgress }: {
-  file: File
-  onProgress: (percent: number) => void
-}) {
+async function httpRequest({ file, onProgress }: UploadRequestOptions) {
   onProgress(50)
   await new Promise(resolve => setTimeout(resolve, 200))
   onProgress(100)
diff --git a/packages/components/src/basic/image-upload/_examples/_multiple.vue b/packages/components/src/basic/image-upload/_examples/_multiple.vue
new file mode 100644
index 00000000..21dd4fdc
--- /dev/null
+++ b/packages/components/src/basic/image-upload/_examples/_multiple.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaImageUpload from '../index.vue'
+
+const toast = useToast()
+const files = ref<string[]>(['https://fantastic-admin.hurui.me/logo.svg'])
+
+function handleSuccess() {
+  toast.success('模拟上传成功')
+}
+</script>
+
+<template>
+  <FaImageUpload
+    v-model="files"
+    action="/fake/upload"
+    :after-upload="response => `${response.data.url}?fake=${Math.random()}`"
+    :max="2"
+    @on-success="handleSuccess"
+  />
+</template>
diff --git a/apps/example/src/views/component_example/image_upload/_demo3.vue b/packages/components/src/basic/image-upload/_examples/_validation.vue
similarity index 55%
rename from apps/example/src/views/component_example/image_upload/_demo3.vue
rename to packages/components/src/basic/image-upload/_examples/_validation.vue
index e30c7ad7..3d058f67 100644
--- a/apps/example/src/views/component_example/image_upload/_demo3.vue
+++ b/packages/components/src/basic/image-upload/_examples/_validation.vue
@@ -1,20 +1,27 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaIcon from '../../icon/index.vue'
+import { useToast } from '../../toast'
+import FaImageUpload from '../index.vue'
+
+const toast = useToast()
 const files = ref<string[]>([])
 
 function beforeUpload(file: File) {
   if (!file.type.startsWith('image/')) {
-    useFaToast().error('请选择图片文件')
+    toast.error('请选择图片文件')
     return false
   }
   if (file.size > 200 * 1024) {
-    useFaToast().error('图片大小不能超过 200KB')
+    toast.error('图片大小不能超过 200KB')
     return false
   }
   return true
 }
 
 function handleSuccess() {
-  useFaToast().success('模拟上传成功')
+  toast.success('模拟上传成功')
 }
 </script>
 
@@ -22,7 +29,7 @@ function handleSuccess() {
   <FaImageUpload
     v-model="files"
     action="/fake/upload"
-    :after-upload="(response) => `${response.data.url}?fake=${Math.random()}`"
+    :after-upload="response => `${response.data.url}?fake=${Math.random()}`"
     :before-upload="beforeUpload"
     :width="200"
     :height="130"
diff --git a/packages/components/src/basic/image-upload/_examples/index.ts b/packages/components/src/basic/image-upload/_examples/index.ts
new file mode 100644
index 00000000..328c1d3c
--- /dev/null
+++ b/packages/components/src/basic/image-upload/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomRequest from './_custom-request.vue'
+import CustomRequestRaw from './_custom-request.vue?raw'
+import Directory from './_directory.vue'
+import DirectoryRaw from './_directory.vue?raw'
+import Multiple from './_multiple.vue'
+import MultipleRaw from './_multiple.vue?raw'
+import Validation from './_validation.vue'
+import ValidationRaw from './_validation.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '多图上传',
+    component: Multiple,
+    componentRaw: MultipleRaw,
+  },
+  {
+    title: '上传前校验',
+    component: Validation,
+    componentRaw: ValidationRaw,
+  },
+  {
+    title: '自定义上传请求',
+    component: CustomRequest,
+    componentRaw: CustomRequestRaw,
+  },
+  {
+    title: '文件夹上传',
+    component: Directory,
+    componentRaw: DirectoryRaw,
+  },
+]
diff --git a/packages/components/src/basic/input-otp/README.md b/packages/components/src/basic/input-otp/README.md
index 141d63d8..fc0ada5e 100644
--- a/packages/components/src/basic/input-otp/README.md
+++ b/packages/components/src/basic/input-otp/README.md
@@ -16,6 +16,8 @@
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | `length` | `number` | `6` | 验证码位数 |
+| `pattern` | `'only-chars' \| 'only-digits' \| 'only-digits-and-chars' \| string` | - | 输入内容匹配模式 |
+| `separator` | `number[]` | `[]` | 分组长度，组与组之间显示分隔符 |
 
 ### Model
 
@@ -29,150 +31,6 @@
 |--------|------|------|
 | `complete` | - | 验证码输入完成时触发 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const code = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="code" />
-</template>
-```
-
-### 基础验证码输入
-
-```vue
-<script setup lang="ts">
-const code = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="code" />
-</template>
-```
-
-### 4 位验证码
-
-```vue
-<script setup lang="ts">
-const code = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="code" :length="4" />
-</template>
-```
-
-### 监听输入完成
-
-```vue
-<script setup lang="ts">
-const code = ref('')
-
-function handleComplete() {
-  console.log('验证码输入完成:', code.value)
-  // 自动提交验证
-  verifyCode(code.value)
-}
-</script>
-
-<template>
-  <FaInputOTP v-model="code" @complete="handleComplete" />
-</template>
-```
-
-### 验证码表单
-
-```vue
-<script setup lang="ts">
-import { toast } from 'vue-sonner'
-
-const code = ref('')
-const sending = ref(false)
-const countdown = ref(0)
-
-function sendCode() {
-  if (countdown.value > 0) return
-  sending.value = true
-  // 发送验证码 API
-  setTimeout(() => {
-    sending.value = false
-    countdown.value = 60
-    const timer = setInterval(() => {
-      countdown.value--
-      if (countdown.value === 0) clearInterval(timer)
-    }, 1000)
-    toast.success('验证码已发送')
-  }, 1000)
-}
-
-function handleComplete() {
-  // 验证验证码
-  console.log('验证:', code.value)
-}
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div class="flex gap-2">
-      <FaInput placeholder="手机号" class="flex-1" />
-      <FaButton :disabled="countdown > 0" :loading="sending" @click="sendCode">
-        {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
-      </FaButton>
-    </div>
-    <FaInputOTP v-model="code" @complete="handleComplete" />
-  </div>
-</template>
-```
-
-### 邮箱验证
-
-```vue
-<script setup lang="ts">
-const email = ref('')
-const code = ref('')
-
-function handleComplete() {
-  // 验证邮箱验证码
-  console.log('邮箱验证:', email.value, code.value)
-}
-</script>
-
-<template>
-  <div class="space-y-4">
-    <FaInput v-model="email" type="email" placeholder="邮箱地址" />
-    <div>
-      <p class="text-sm text-muted-foreground mb-2">请输入发送到 {{ email }} 的验证码</p>
-      <FaInputOTP v-model="code" @complete="handleComplete" />
-    </div>
-  </div>
-</template>
-```
-
-### 密码保护验证
-
-```vue
-<script setup lang="ts">
-const code = ref('')
-
-function handleComplete() {
-  // 验证成功后执行敏感操作
-  console.log('验证通过，执行操作')
-}
-</script>
-
-<template>
-  <FaCard title="安全验证">
-    <p class="text-muted-foreground mb-4">为了您的账号安全，请输入验证码继续操作</p>
-    <FaInputOTP v-model="code" @complete="handleComplete" />
-  </FaCard>
-</template>
-```
-
 ## 注意事项
 
 1. **自动聚焦**：组件会自动聚焦到第一个输入框
diff --git a/packages/components/src/basic/input-otp/_examples/_basic.vue b/packages/components/src/basic/input-otp/_examples/_basic.vue
new file mode 100644
index 00000000..b7cd3355
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInputOTP from '../index.vue'
+
+const input = ref('')
+</script>
+
+<template>
+  <FaInputOTP v-model="input" />
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/_callback.vue b/packages/components/src/basic/input-otp/_examples/_callback.vue
new file mode 100644
index 00000000..32721561
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_callback.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import { useToast } from '../../toast'
+import FaInputOTP from '../index.vue'
+
+const input = ref('')
+const inputText = ref('等待输入')
+const completeText = ref('等待完成')
+const toast = useToast()
+
+function handleInput(value: string) {
+  inputText.value = `input: ${value || '空值'}`
+}
+
+function handleComplete(value: string) {
+  completeText.value = `complete: ${value}`
+  toast(value)
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <FaInputOTP v-model="input" @input="handleInput" @complete="handleComplete" />
+    <div class="text-sm text-muted-foreground space-y-1">
+      <div>{{ inputText }}</div>
+      <div>{{ completeText }}</div>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/_disabled.vue b/packages/components/src/basic/input-otp/_examples/_disabled.vue
new file mode 100644
index 00000000..d700f4fb
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInputOTP from '../index.vue'
+
+const input = ref('123456')
+</script>
+
+<template>
+  <FaInputOTP v-model="input" disabled />
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/_length.vue b/packages/components/src/basic/input-otp/_examples/_length.vue
new file mode 100644
index 00000000..8fe35392
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_length.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInputOTP from '../index.vue'
+
+const input = ref('')
+</script>
+
+<template>
+  <FaInputOTP v-model="input" :length="4" />
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/_pattern.vue b/packages/components/src/basic/input-otp/_examples/_pattern.vue
new file mode 100644
index 00000000..8046a7e1
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_pattern.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInputOTP from '../index.vue'
+
+const chars = ref('')
+const digits = ref('')
+const digitsAndChars = ref('')
+const custom = ref('')
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="space-y-2">
+      <div class="text-sm text-muted-foreground">
+        仅字母
+      </div>
+      <FaInputOTP v-model="chars" pattern="only-chars" />
+    </div>
+    <div class="space-y-2">
+      <div class="text-sm text-muted-foreground">
+        仅数字
+      </div>
+      <FaInputOTP v-model="digits" pattern="only-digits" />
+    </div>
+    <div class="space-y-2">
+      <div class="text-sm text-muted-foreground">
+        字母和数字
+      </div>
+      <FaInputOTP v-model="digitsAndChars" pattern="only-digits-and-chars" />
+    </div>
+    <div class="space-y-2">
+      <div class="text-sm text-muted-foreground">
+        自定义：仅允许 A-F 和 0-9
+      </div>
+      <FaInputOTP v-model="custom" pattern="^[A-F0-9]*$" />
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/_separator.vue b/packages/components/src/basic/input-otp/_examples/_separator.vue
new file mode 100644
index 00000000..6fd23a31
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_separator.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInputOTP from '../index.vue'
+
+const input = ref('')
+</script>
+
+<template>
+  <FaInputOTP v-model="input" :separator="[2, 3]" />
+</template>
diff --git a/packages/components/src/basic/input-otp/_examples/index.ts b/packages/components/src/basic/input-otp/_examples/index.ts
new file mode 100644
index 00000000..4660c4bf
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/index.ts
@@ -0,0 +1,45 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Callback from './_callback.vue'
+import CallbackRaw from './_callback.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Length from './_length.vue'
+import LengthRaw from './_length.vue?raw'
+import Pattern from './_pattern.vue'
+import PatternRaw from './_pattern.vue?raw'
+import Separator from './_separator.vue'
+import SeparatorRaw from './_separator.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '长度',
+    component: Length,
+    componentRaw: LengthRaw,
+  },
+  {
+    title: '模式',
+    component: Pattern,
+    componentRaw: PatternRaw,
+  },
+  {
+    title: '分隔符',
+    component: Separator,
+    componentRaw: SeparatorRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '回调',
+    component: Callback,
+    componentRaw: CallbackRaw,
+  },
+]
diff --git a/packages/components/src/basic/input-otp/index.vue b/packages/components/src/basic/input-otp/index.vue
index 0110a967..0a6a732b 100644
--- a/packages/components/src/basic/input-otp/index.vue
+++ b/packages/components/src/basic/input-otp/index.vue
@@ -1,33 +1,90 @@
 <script setup lang="ts">
-import { useId } from 'vue'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp'
+import { computed, useId } from 'vue'
+import { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp'
 
 defineOptions({
   name: 'BuiltInInputOTP',
 })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     length?: number
+    pattern?: 'only-chars' | 'only-digits' | 'only-digits-and-chars' | (string & NonNullable<unknown>)
+    separator?: number[]
+    disabled?: boolean
   }>(),
   {
     length: 6,
+    separator: () => [],
   },
 )
 
 const emit = defineEmits<{
-  complete: []
+  input: [value: string]
+  complete: [value: string]
 }>()
 
 const modelValue = defineModel<string>()
 
 const id = useId()
+
+const pattern = computed(() => {
+  switch (props.pattern) {
+    case 'only-chars':
+      return REGEXP_ONLY_CHARS
+    case 'only-digits':
+      return REGEXP_ONLY_DIGITS
+    case 'only-digits-and-chars':
+      return REGEXP_ONLY_DIGITS_AND_CHARS
+    default:
+      return props.pattern
+  }
+})
+
+const groups = computed(() => {
+  const result: { start: number, length: number }[] = []
+  let start = 0
+
+  for (const value of props.separator) {
+    const groupLength = Math.trunc(value)
+
+    if (groupLength <= 0) {
+      continue
+    }
+    if (start >= props.length) {
+      break
+    }
+
+    result.push({
+      start,
+      length: Math.min(groupLength, props.length - start),
+    })
+    start += groupLength
+  }
+
+  if (start < props.length) {
+    result.push({
+      start,
+      length: props.length - start,
+    })
+  }
+
+  return result
+})
 </script>
 
 <template>
-  <InputOTP :id v-model="modelValue" :maxlength="length" @complete="emit('complete')">
-    <InputOTPGroup>
-      <InputOTPSlot v-for="(item, index) in length" :key="item" :index="index" />
-    </InputOTPGroup>
+  <InputOTP :id v-model="modelValue" :maxlength="length" :pattern :disabled @input="emit('input', $event)" @complete="emit('complete', $event)">
+    <template v-for="(group, groupIndex) in groups" :key="group.start">
+      <InputOTPGroup>
+        <InputOTPSlot
+          v-for="item in group.length"
+          :key="group.start + item"
+          :index="group.start + item - 1"
+        />
+      </InputOTPGroup>
+      <InputOTPSeparator v-if="groupIndex < groups.length - 1" />
+    </template>
   </InputOTP>
 </template>
diff --git a/packages/components/src/basic/input/README.md b/packages/components/src/basic/input/README.md
index fe02653d..8dd5bd3a 100644
--- a/packages/components/src/basic/input/README.md
+++ b/packages/components/src/basic/input/README.md
@@ -42,155 +42,6 @@
 |--------|------|
 | `ref` | 获取原生 input 元素引用 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <FaInput v-model="value" placeholder="请输入..." />
-</template>
-```
-
-### 基础输入框
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <FaInput v-model="value" placeholder="请输入内容" />
-</template>
-```
-
-### 密码输入框
-
-```vue
-<script setup lang="ts">
-const password = ref('')
-</script>
-
-<template>
-  <FaInput v-model="password" type="password" placeholder="请输入密码" />
-</template>
-```
-
-### 带清空按钮
-
-```vue
-<script setup lang="ts">
-const value = ref('可清空的内容')
-
-function handleClear() {
-  console.log('内容已清空')
-}
-</script>
-
-<template>
-  <FaInput v-model="value" clearable @clear="handleClear" />
-</template>
-```
-
-### 带前缀图标
-
-```vue
-<template>
-  <FaInput v-model="value" placeholder="搜索...">
-    <template #start>
-      <FaIcon name="i-lucide:search" />
-    </template>
-  </FaInput>
-</template>
-```
-
-### 带后缀按钮
-
-```vue
-<template>
-  <FaInput v-model="value" placeholder="请输入验证码">
-    <template #end>
-      <FaButton size="sm">获取</FaButton>
-    </template>
-  </FaInput>
-</template>
-```
-
-### 前后缀同时使用
-
-```vue
-<template>
-  <FaInput v-model="value">
-    <template #start>
-      <FaIcon name="i-lucide:user" />
-    </template>
-    <template #end>
-      <FaIcon name="i-lucide:check-circle" class="text-green-500" />
-    </template>
-  </FaInput>
-</template>
-```
-
-### 禁用状态
-
-```vue
-<template>
-  <FaInput v-model="value" disabled placeholder="禁用状态" />
-</template>
-```
-
-### 搜索框
-
-```vue
-<script setup lang="ts">
-const keyword = ref('')
-
-function handleSearch() {
-  console.log('搜索:', keyword.value)
-}
-</script>
-
-<template>
-  <FaInput v-model="keyword" clearable placeholder="搜索..." @keyup.enter="handleSearch">
-    <template #start>
-      <FaIcon name="i-lucide:search" />
-    </template>
-  </FaInput>
-</template>
-```
-
-### 密码强度指示
-
-```vue
-<script setup lang="ts">
-const password = ref('')
-
-const strength = computed(() => {
-  const pwd = password.value
-  if (!pwd) return 0
-  let score = 0
-  if (pwd.length >= 8) score++
-  if (/[A-Z]/.test(pwd)) score++
-  if (/[0-9]/.test(pwd)) score++
-  if (/[^A-Za-z0-9]/.test(pwd)) score++
-  return score
-})
-</script>
-
-<template>
-  <div>
-    <FaInput v-model="password" type="password" clearable placeholder="请输入密码" />
-    <div class="flex gap-1 mt-2">
-      <div v-for="i in 4" :key="i" class="h-1 flex-1 rounded" :class="i <= strength ? 'bg-green-500' : 'bg-gray-200'" />
-    </div>
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/apps/example/src/views/component_example/input/_demo1.vue b/packages/components/src/basic/input/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 52%
rename from apps/example/src/views/component_example/input/_demo1.vue
rename to packages/components/src/basic/input/_examples/_basic.vue
index d27bb660..3e2d079e
--- a/apps/example/src/views/component_example/input/_demo1.vue
+++ b/packages/components/src/basic/input/_examples/_basic.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../index.vue'
+
 const value = ref('')
 </script>
 
diff --git a/packages/components/src/basic/input/_examples/_clearable.vue b/packages/components/src/basic/input/_examples/_clearable.vue
new file mode 100644
index 00000000..ea5dc648
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/_clearable.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../index.vue'
+
+const value = ref('可清空的内容')
+</script>
+
+<template>
+  <FaInput v-model="value" clearable placeholder="请输入内容" />
+</template>
diff --git a/packages/components/src/basic/input/_examples/_disabled.vue b/packages/components/src/basic/input/_examples/_disabled.vue
new file mode 100644
index 00000000..61e12f4a
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../index.vue'
+
+const value = ref('禁用状态')
+</script>
+
+<template>
+  <FaInput v-model="value" disabled placeholder="请输入内容" />
+</template>
diff --git a/apps/example/src/views/component_example/input/_demo2.vue b/packages/components/src/basic/input/_examples/_password.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/input/_demo2.vue
rename to packages/components/src/basic/input/_examples/_password.vue
index 019f4669..95091c4e
--- a/apps/example/src/views/component_example/input/_demo2.vue
+++ b/packages/components/src/basic/input/_examples/_password.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../index.vue'
+
 const value = ref('')
 </script>
 
diff --git a/apps/example/src/views/component_example/input/_demo3.vue b/packages/components/src/basic/input/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 76%
rename from apps/example/src/views/component_example/input/_demo3.vue
rename to packages/components/src/basic/input/_examples/_slot.vue
index 2afebf96..719f50cb
--- a/apps/example/src/views/component_example/input/_demo3.vue
+++ b/packages/components/src/basic/input/_examples/_slot.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaTooltip from '../../tooltip/index.vue'
+import FaInput from '../index.vue'
+
 const value = ref('')
 const value2 = ref('')
 </script>
diff --git a/packages/components/src/basic/input/_examples/index.ts b/packages/components/src/basic/input/_examples/index.ts
new file mode 100644
index 00000000..df8ce2c3
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Clearable from './_clearable.vue'
+import ClearableRaw from './_clearable.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Password from './_password.vue'
+import PasswordRaw from './_password.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '可清空',
+    component: Clearable,
+    componentRaw: ClearableRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '密码',
+    component: Password,
+    componentRaw: PasswordRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+]
diff --git a/packages/components/src/basic/kbd-group/README.md b/packages/components/src/basic/kbd-group/README.md
index 379b5f24..611d1cf9 100644
--- a/packages/components/src/basic/kbd-group/README.md
+++ b/packages/components/src/basic/kbd-group/README.md
@@ -21,71 +21,6 @@
 |------|------|
 | `default` | 包含的 `FaKbd` 组件 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaKbd>K</FaKbd>
-  </FaKbdGroup>
-</template>
-```
-
-### 双键组合
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaKbd>K</FaKbd>
-  </FaKbdGroup>
-</template>
-```
-
-### 三键组合
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>Ctrl</FaKbd>
-    <FaKbd>Shift</FaKbd>
-    <FaKbd>P</FaKbd>
-  </FaKbdGroup>
-</template>
-```
-
-### 带加号分隔符
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <span class="text-muted-foreground">+</span>
-    <FaKbd>K</FaKbd>
-  </FaKbdGroup>
-</template>
-```
-
-### 在表格中展示快捷键
-
-```vue
-<template>
-  <table>
-    <tr>
-      <td>搜索</td>
-      <td><FaKbdGroup><FaKbd>⌘</FaKbd><FaKbd>K</FaKbd></FaKbdGroup></td>
-    </tr>
-    <tr>
-      <td>新建</td>
-      <td><FaKbdGroup><FaKbd>⌘</FaKbd><FaKbd>N</FaKbd></FaKbdGroup></td>
-    </tr>
-  </table>
-</template>
-```
-
 ## 注意事项
 
 1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
diff --git a/packages/components/src/basic/kbd-group/_examples/_basic.vue b/packages/components/src/basic/kbd-group/_examples/_basic.vue
new file mode 100644
index 00000000..50e738f9
--- /dev/null
+++ b/packages/components/src/basic/kbd-group/_examples/_basic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaKbd from '../../kbd/index.vue'
+import FaKbdGroup from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <FaKbdGroup>
+      <FaKbd>⌘</FaKbd>
+      <FaKbd>⇧</FaKbd>
+      <FaKbd>K</FaKbd>
+    </FaKbdGroup>
+    <FaKbdGroup>
+      <FaKbd>Ctrl</FaKbd>
+      <FaKbd>Alt</FaKbd>
+      <FaKbd>Delete</FaKbd>
+    </FaKbdGroup>
+  </div>
+</template>
diff --git a/packages/components/src/basic/kbd-group/_examples/index.ts b/packages/components/src/basic/kbd-group/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/kbd-group/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+]
diff --git a/packages/components/src/basic/kbd/README.md b/packages/components/src/basic/kbd/README.md
index 69f37754..362ff273 100644
--- a/packages/components/src/basic/kbd/README.md
+++ b/packages/components/src/basic/kbd/README.md
@@ -21,65 +21,6 @@
 |------|------|
 | `default` | 按键内容（字符、图标等） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaKbd>⌘</FaKbd>
-  <FaKbd>K</FaKbd>
-</template>
-```
-
-### 单个按键
-
-```vue
-<template>
-  <FaKbd>⌘</FaKbd>
-  <FaKbd>K</FaKbd>
-  <FaKbd>Enter</FaKbd>
-</template>
-```
-
-### 组合按键（与 FaKbdGroup 配合使用）
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaKbd>K</FaKbd>
-  </FaKbdGroup>
-  
-  <FaKbdGroup>
-    <FaKbd>Ctrl</FaKbd>
-    <FaKbd>Shift</FaKbd>
-    <FaKbd>P</FaKbd>
-  </FaKbdGroup>
-</template>
-```
-
-### 带图标的快捷键
-
-```vue
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaIcon name="i-lucide:command" />
-  </FaKbdGroup>
-</template>
-```
-
-### 在提示文字中使用
-
-```vue
-<template>
-  <div class="text-muted-foreground">
-    按 <FaKbdGroup><FaKbd>⌘</FaKbd><FaKbd>K</FaKbd></FaKbdGroup> 快速搜索
-  </div>
-</template>
-```
-
 ## 注意事项
 
 ### 样式特点
diff --git a/apps/example/src/views/component_example/kbd/_demo1.vue b/packages/components/src/basic/kbd/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 50%
rename from apps/example/src/views/component_example/kbd/_demo1.vue
rename to packages/components/src/basic/kbd/_examples/_basic.vue
index b3abb6a1..331b94f1
--- a/apps/example/src/views/component_example/kbd/_demo1.vue
+++ b/packages/components/src/basic/kbd/_examples/_basic.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaKbd from '../index.vue'
+</script>
+
 <template>
   <div class="flex flex-col gap-2">
     <FaKbd>Ctrl</FaKbd>
diff --git a/packages/components/src/basic/kbd/_examples/index.ts b/packages/components/src/basic/kbd/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/kbd/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+]
diff --git a/packages/components/src/basic/label/README.md b/packages/components/src/basic/label/README.md
index a18faebc..3832ede1 100644
--- a/packages/components/src/basic/label/README.md
+++ b/packages/components/src/basic/label/README.md
@@ -23,83 +23,6 @@
 |------|------|
 | `default` | 表单项内容（输入框、选择器等） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaLabel label="用户名">
-    <FaInput v-model="username" />
-  </FaLabel>
-</template>
-```
-
-### 基础标签
-
-```vue
-<template>
-  <FaLabel label="用户名">
-    <FaInput v-model="form.username" />
-  </FaLabel>
-  <FaLabel label="邮箱">
-    <FaInput v-model="form.email" />
-  </FaLabel>
-</template>
-```
-
-### 固定标签宽度（对齐多表单字段）
-
-```vue
-<template>
-  <div class="space-y-4">
-    <FaLabel label="用户名" :label-width="100">
-      <FaInput v-model="form.username" />
-    </FaLabel>
-    <FaLabel label="邮箱地址" :label-width="100">
-      <FaInput v-model="form.email" />
-    </FaLabel>
-    <FaLabel label="手机号" :label-width="100">
-      <FaInput v-model="form.phone" />
-    </FaLabel>
-  </div>
-</template>
-```
-
-### 使用字符串宽度
-
-```vue
-<template>
-  <FaLabel label="用户名" label-width="120px">
-    <FaInput v-model="form.username" />
-  </FaLabel>
-</template>
-```
-
-### 标签后内容
-
-```vue
-<template>
-  <FaLabel label="密码">
-    <div class="flex gap-2">
-      <FaInput v-model="form.password" type="password" class="flex-1" />
-      <FaButton variant="outline">生成</FaButton>
-    </div>
-  </FaLabel>
-</template>
-```
-
-### 无标签文本（仅布局）
-
-```vue
-<template>
-  <FaLabel>
-    <FaCheckbox v-model="form.remember" />
-    记住我
-  </FaLabel>
-</template>
-```
-
 ## 注意事项
 
 1. **labelWidth 类型**：
diff --git a/packages/components/src/basic/label/_examples/_basic.vue b/packages/components/src/basic/label/_examples/_basic.vue
new file mode 100644
index 00000000..d11b1041
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_basic.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaInput from '../../input/index.vue'
+import FaLabel from '../index.vue'
+
+const form = reactive({
+  name: '',
+  email: '',
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaLabel label="用户名">
+      <FaInput v-model="form.name" placeholder="请输入用户名" class="w-72" />
+    </FaLabel>
+    <FaLabel label="邮箱">
+      <FaInput v-model="form.email" placeholder="请输入邮箱" class="w-72" />
+    </FaLabel>
+  </div>
+</template>
diff --git a/packages/components/src/basic/label/_examples/_custom.vue b/packages/components/src/basic/label/_examples/_custom.vue
new file mode 100644
index 00000000..821a4235
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_custom.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaCheckbox from '../../checkbox/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaInput from '../../input/index.vue'
+import FaLabel from '../index.vue'
+
+const keyword = shallowRef('')
+const remember = shallowRef(false)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaLabel>
+      <div class="text-muted-foreground flex shrink-0 gap-2 w-24 items-center">
+        <FaIcon name="i-lucide:search" />
+        <span>关键词</span>
+      </div>
+      <FaInput v-model="keyword" placeholder="请输入关键词" class="w-72" />
+    </FaLabel>
+    <FaLabel>
+      <FaCheckbox v-model="remember" />
+      <span>记住当前筛选条件</span>
+    </FaLabel>
+  </div>
+</template>
diff --git a/packages/components/src/basic/label/_examples/_form.vue b/packages/components/src/basic/label/_examples/_form.vue
new file mode 100644
index 00000000..f5ba2845
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_form.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaTextarea from '../../textarea/index.vue'
+import FaLabel from '../index.vue'
+
+const form = reactive({
+  title: '',
+  type: 'notice',
+  description: '',
+})
+
+const typeOptions = [
+  { label: '公告', value: 'notice' },
+  { label: '消息', value: 'message' },
+  { label: '任务', value: 'task' },
+]
+</script>
+
+<template>
+  <div class="max-w-xl space-y-4">
+    <FaLabel label="标题" label-width="5rem">
+      <FaInput v-model="form.title" placeholder="请输入标题" class="w-full" />
+    </FaLabel>
+    <FaLabel label="类型" label-width="5rem">
+      <FaSelect v-model="form.type" :options="typeOptions" class="w-full" />
+    </FaLabel>
+    <FaLabel label="描述" label-width="5rem" class="items-start">
+      <FaTextarea v-model="form.description" placeholder="请输入描述" class="w-full" />
+    </FaLabel>
+    <FaLabel label-width="5rem">
+      <div class="flex gap-2">
+        <FaButton>保存</FaButton>
+        <FaButton variant="outline">
+          重置
+        </FaButton>
+      </div>
+    </FaLabel>
+  </div>
+</template>
diff --git a/packages/components/src/basic/label/_examples/_width.vue b/packages/components/src/basic/label/_examples/_width.vue
new file mode 100644
index 00000000..42a31d8f
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_width.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaLabel from '../index.vue'
+
+const form = reactive({
+  name: '',
+  role: 'admin',
+  phone: '',
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '运营', value: 'operator' },
+  { label: '访客', value: 'guest' },
+]
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaLabel label="用户名" :label-width="88">
+      <FaInput v-model="form.name" placeholder="请输入用户名" class="w-72" />
+    </FaLabel>
+    <FaLabel label="角色" :label-width="88">
+      <FaSelect v-model="form.role" :options="roleOptions" class="w-72" />
+    </FaLabel>
+    <FaLabel label="手机号" :label-width="88">
+      <FaInput v-model="form.phone" placeholder="请输入手机号" class="w-72" />
+    </FaLabel>
+  </div>
+</template>
diff --git a/packages/components/src/basic/label/_examples/index.ts b/packages/components/src/basic/label/_examples/index.ts
new file mode 100644
index 00000000..23fd276c
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Custom from './_custom.vue'
+import CustomRaw from './_custom.vue?raw'
+import Form from './_form.vue'
+import FormRaw from './_form.vue?raw'
+import Width from './_width.vue'
+import WidthRaw from './_width.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '固定宽度',
+    component: Width,
+    componentRaw: WidthRaw,
+  },
+  {
+    title: '表单布局',
+    component: Form,
+    componentRaw: FormRaw,
+  },
+  {
+    title: '自定义内容',
+    component: Custom,
+    componentRaw: CustomRaw,
+  },
+]
diff --git a/packages/components/src/basic/modal/README.md b/packages/components/src/basic/modal/README.md
index f11b33f3..3b3e70b1 100644
--- a/packages/components/src/basic/modal/README.md
+++ b/packages/components/src/basic/modal/README.md
@@ -130,223 +130,6 @@ function showWarning() {
 </template>
 ```
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaButton @click="open = true">打开对话框</FaButton>
-  <FaModal v-model="open" title="对话框标题">
-    <div>对话框内容</div>
-  </FaModal>
-</template>
-```
-
-### 基础对话框
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaButton @click="open = true">打开对话框</FaButton>
-  <FaModal v-model="open" title="对话框标题" description="这里是一段描述">
-    <div>这是对话框内容</div>
-  </FaModal>
-</template>
-```
-
-### 带取消按钮
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-
-function handleConfirm() {
-  console.log('确认')
-  open.value = false
-}
-
-function handleCancel() {
-  console.log('取消')
-  open.value = false
-}
-</script>
-
-<template>
-  <FaModal
-    v-model="open"
-    title="确认操作"
-    show-cancel-button
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <div>请确认是否继续？</div>
-  </FaModal>
-</template>
-```
-
-### 图标对话框
-
-```vue
-<script setup lang="ts">
-const successOpen = ref(false)
-const errorOpen = ref(false)
-</script>
-
-<template>
-  <div class="flex gap-2">
-    <FaButton @click="successOpen = true">成功提示</FaButton>
-    <FaButton @click="errorOpen = true">错误提示</FaButton>
-  </div>
-  
-  <FaModal v-model="successOpen" title="操作成功" icon="success" align-center border>
-    <div>您的操作已成功完成</div>
-  </FaModal>
-  
-  <FaModal v-model="errorOpen" title="操作失败" icon="error" align-center border>
-    <div>操作失败，请稍后重试</div>
-  </FaModal>
-</template>
-```
-
-### 可拖拽对话框
-
-```vue
-<template>
-  <FaModal v-model="open" title="可拖拽" draggable header>
-    <div>可以拖动标题栏来移动对话框</div>
-  </FaModal>
-</template>
-```
-
-### 可最大化对话框
-
-```vue
-<template>
-  <FaModal v-model="open" title="可最大化" maximizable>
-    <div>点击右上角按钮可最大化/还原对话框</div>
-  </FaModal>
-</template>
-```
-
-### 垂直居中对话框
-
-```vue
-<template>
-  <FaModal v-model="open" title="居中对话框" align-center>
-    <div>对话框在屏幕垂直居中显示</div>
-  </FaModal>
-</template>
-```
-
-### 内容居中对话框
-
-```vue
-<template>
-  <FaModal v-model="open" title="内容居中" center>
-    <div class="text-center">
-      <p>标题和内容都居中显示</p>
-      <p>按钮也会居中对齐</p>
-    </div>
-  </FaModal>
-</template>
-```
-
-### 关闭前确认
-
-```vue
-<script setup lang="ts">
-import { useFaModal } from '@/ui/components/modal'
-
-const open = ref(false)
-
-function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
-  if (action === 'close') {
-    useFaModal().confirm({
-      title: '提示',
-      content: '确定要关闭吗？未保存的内容将丢失。',
-      onConfirm: () => done(),
-    })
-  }
-  else {
-    done()
-  }
-}
-</script>
-
-<template>
-  <FaModal v-model="open" title="编辑" :before-close="handleBeforeClose">
-    <form class="flex flex-col gap-4">
-      <FaInput placeholder="请输入..." />
-    </form>
-  </FaModal>
-</template>
-```
-
-### 加载状态
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-const loading = ref(false)
-
-function handleSubmit() {
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-    open.value = false
-  }, 2000)
-}
-</script>
-
-<template>
-  <FaModal v-model="open" title="提交" :loading="loading" :confirm-button-loading="loading" @confirm="handleSubmit">
-    <form class="flex flex-col gap-4">
-      <FaInput placeholder="输入内容" />
-    </form>
-  </FaModal>
-</template>
-```
-
-### 自定义头部和底部
-
-```vue
-<template>
-  <FaModal v-model="open">
-    <template #header>
-      <div class="flex-between">
-        <span class="font-bold">自定义标题</span>
-        <FaIcon name="i-lucide:info" />
-      </div>
-    </template>
-    <div>对话框内容</div>
-    <template #footer>
-      <div class="flex gap-2">
-        <FaButton variant="outline">取消</FaButton>
-        <FaButton>保存</FaButton>
-      </div>
-    </template>
-  </FaModal>
-</template>
-```
-
-### 调整对话框宽度
-
-```vue
-<template>
-  <FaModal v-model="open" title="大对话框" class="sm:max-w-2xl">
-    <div>这是一个较宽的对话框</div>
-  </FaModal>
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 控制对话框打开状态
diff --git a/packages/components/src/basic/modal/_examples/_actions.vue b/packages/components/src/basic/modal/_examples/_actions.vue
new file mode 100644
index 00000000..3b7dbe89
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_actions.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const closableOpen = shallowRef(false)
+const maximizableOpen = shallowRef(false)
+const draggableOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="closableOpen = true">
+      隐藏关闭按钮
+    </FaButton>
+    <FaButton variant="outline" @click="maximizableOpen = true">
+      最大化
+    </FaButton>
+    <FaButton variant="secondary" @click="draggableOpen = true">
+      拖拽
+    </FaButton>
+  </div>
+
+  <FaModal v-model="closableOpen" title="隐藏关闭按钮" :closable="false" show-cancel-button>
+    <div class="text-sm text-muted-foreground">
+      右上角关闭按钮已隐藏，可以通过底部按钮关闭。
+    </div>
+  </FaModal>
+  <FaModal v-model="maximizableOpen" title="可最大化弹窗" maximizable>
+    <div class="text-sm text-muted-foreground">
+      点击右上角最大化按钮可以切换弹窗尺寸。
+    </div>
+  </FaModal>
+  <FaModal v-model="draggableOpen" title="可拖拽弹窗" draggable>
+    <div class="text-sm text-muted-foreground">
+      按住标题栏可以拖动弹窗位置。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_basic.vue b/packages/components/src/basic/modal/_examples/_basic.vue
new file mode 100644
index 00000000..41541553
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_basic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开弹窗
+  </FaButton>
+  <FaModal v-model="open" title="弹窗标题">
+    <div class="text-sm text-muted-foreground">
+      这里是弹窗内容区域。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_center-border-loading.vue b/packages/components/src/basic/modal/_examples/_center-border-loading.vue
new file mode 100644
index 00000000..2f94775a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_center-border-loading.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const centeredOpen = shallowRef(false)
+const borderlessOpen = shallowRef(false)
+const loadingOpen = shallowRef(false)
+const loading = shallowRef(false)
+
+function openLoadingModal() {
+  loadingOpen.value = true
+  loading.value = true
+  window.setTimeout(() => {
+    loading.value = false
+  }, 1800)
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="centeredOpen = true">
+      居中
+    </FaButton>
+    <FaButton variant="outline" @click="borderlessOpen = true">
+      无边框
+    </FaButton>
+    <FaButton variant="secondary" @click="openLoadingModal">
+      载入
+    </FaButton>
+  </div>
+
+  <FaModal v-model="centeredOpen" title="居中弹窗" center align-center show-cancel-button>
+    <div class="text-sm text-muted-foreground text-center">
+      标题、描述和底部按钮会居中显示，弹窗也会垂直居中。
+    </div>
+  </FaModal>
+  <FaModal v-model="borderlessOpen" title="无边框弹窗" :border="false" show-cancel-button>
+    <div class="text-sm text-muted-foreground">
+      头部和底部不显示分割线。
+    </div>
+  </FaModal>
+  <FaModal v-model="loadingOpen" title="载入状态" :loading="loading">
+    <div class="text-sm text-muted-foreground">
+      弹窗主体区域会显示载入遮罩。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_custom-style.vue b/packages/components/src/basic/modal/_examples/_custom-style.vue
new file mode 100644
index 00000000..9bfa639a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_custom-style.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开弹窗
+  </FaButton>
+  <FaModal
+    v-model="open"
+    title="自定义样式"
+    class="sm:max-w-2xl"
+    header-class="bg-muted/40"
+    content-class="min-h-auto"
+    footer-class="bg-muted/40"
+    show-cancel-button
+  >
+    <div class="text-sm text-muted-foreground">
+      可以通过 class、header-class、content-class 和 footer-class 调整弹窗样式。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_dialog.vue b/packages/components/src/basic/modal/_examples/_dialog.vue
new file mode 100644
index 00000000..c4e6ce50
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_dialog.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../../toast'
+import { useModal } from '../index'
+
+const modal = useModal()
+const toast = useToast()
+
+function showInfo() {
+  modal.info({
+    title: '温馨提醒',
+    content: '这是 info 弹窗',
+    onConfirm: () => toast('你点了确定'),
+  })
+}
+
+function showSuccess() {
+  modal.success({
+    title: '操作成功',
+    content: '这是 success 弹窗',
+    onConfirm: () => toast('你点了确定'),
+  })
+}
+
+function showWarning() {
+  modal.warning({
+    title: '风险提醒',
+    content: '这是 warning 弹窗',
+    onConfirm: () => toast('你点了确定'),
+  })
+}
+
+function showError() {
+  modal.error({
+    title: '操作失败',
+    content: '这是 error 弹窗',
+    onConfirm: () => toast('你点了确定'),
+  })
+}
+
+function showConfirm() {
+  modal.confirm({
+    title: '确认操作',
+    content: '这是 confirm 弹窗',
+    onConfirm: () => toast('确认操作'),
+    onCancel: () => toast('取消操作'),
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="showInfo">
+      Info
+    </FaButton>
+    <FaButton variant="outline" @click="showSuccess">
+      Success
+    </FaButton>
+    <FaButton variant="outline" @click="showWarning">
+      Warning
+    </FaButton>
+    <FaButton variant="outline" @click="showError">
+      Error
+    </FaButton>
+    <FaButton variant="secondary" @click="showConfirm">
+      Confirm
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_event.vue b/packages/components/src/basic/modal/_examples/_event.vue
new file mode 100644
index 00000000..e04ab6ad
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_event.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../../toast'
+import FaModal from '../index.vue'
+
+const open = shallowRef(false)
+const toast = useToast()
+
+function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
+  toast(`beforeClose: ${action}`)
+  window.setTimeout(done, 600)
+}
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开弹窗
+  </FaButton>
+  <FaModal
+    v-model="open"
+    title="触发事件"
+    show-cancel-button
+    :before-close="handleBeforeClose"
+    @open="toast('open')"
+    @opened="toast('opened')"
+    @close="toast('close')"
+    @closed="toast('closed')"
+    @confirm="toast('confirm')"
+    @cancel="toast('cancel')"
+  >
+    <div class="text-sm text-muted-foreground">
+      打开、关闭、确认、取消和动画完成等事件都会触发 toast。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_functional.vue b/packages/components/src/basic/modal/_examples/_functional.vue
new file mode 100644
index 00000000..08d88c80
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_functional.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { h } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../../toast'
+import { useModal } from '../index'
+
+const toast = useToast()
+
+const { open } = useModal().create({
+  title: '函数式调用',
+  description: '通过 useModal().create() 创建弹窗。',
+  content: h('div', { class: 'text-sm text-muted-foreground leading-6' }, '这里是函数式调用渲染的内容。'),
+  showCancelButton: true,
+  onConfirm: () => toast('确认操作'),
+  onCancel: () => toast('取消操作'),
+})
+</script>
+
+<template>
+  <FaButton @click="open">
+    打开弹窗
+  </FaButton>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_header-footer.vue b/packages/components/src/basic/modal/_examples/_header-footer.vue
new file mode 100644
index 00000000..a1f67125
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_header-footer.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const headerOpen = shallowRef(false)
+const footerOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="headerOpen = true">
+      隐藏头部
+    </FaButton>
+    <FaButton variant="outline" @click="footerOpen = true">
+      隐藏底部
+    </FaButton>
+  </div>
+
+  <FaModal v-model="headerOpen" :header="false">
+    <div class="text-sm text-muted-foreground">
+      当前弹窗隐藏了头部区域。
+    </div>
+  </FaModal>
+  <FaModal v-model="footerOpen" title="隐藏底部" :footer="false">
+    <div class="text-sm text-muted-foreground">
+      当前弹窗隐藏了底部操作区域。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_overlay-blur.vue b/packages/components/src/basic/modal/_examples/_overlay-blur.vue
new file mode 100644
index 00000000..49e14a6a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_overlay-blur.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const overlayOpen = shallowRef(false)
+const blurOpen = shallowRef(false)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaButton @click="overlayOpen = true">
+      无遮罩
+    </FaButton>
+    <FaButton variant="outline" @click="blurOpen = true">
+      模糊遮罩
+    </FaButton>
+  </div>
+
+  <FaModal v-model="overlayOpen" title="无遮罩弹窗" :overlay="false">
+    <div class="text-sm text-muted-foreground">
+      设置 overlay 为 false 后，不显示背景遮罩。
+    </div>
+  </FaModal>
+  <FaModal v-model="blurOpen" title="模糊遮罩" overlay-blur>
+    <div class="text-sm text-muted-foreground">
+      设置 overlay-blur 后，背景遮罩会带有模糊效果。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_slot.vue b/packages/components/src/basic/modal/_examples/_slot.vue
new file mode 100644
index 00000000..5424d2c8
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_slot.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaModal from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开弹窗
+  </FaButton>
+  <FaModal v-model="open">
+    <template #header>
+      <div class="pr-8 flex gap-3 items-start">
+        <FaIcon name="i-lucide:message-square-warning" class="text-primary mt-0.5 size-5" />
+        <div>
+          <div class="font-semibold">
+            自定义头部
+          </div>
+          <div class="text-sm text-muted-foreground">
+            使用 header 插槽替换默认标题。
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="text-sm text-muted-foreground">
+      这里是默认插槽内容。
+    </div>
+
+    <template #footer>
+      <div class="flex gap-2 w-full justify-end">
+        <FaButton variant="outline" @click="open = false">
+          取消
+        </FaButton>
+        <FaButton @click="open = false">
+          保存
+        </FaButton>
+      </div>
+    </template>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/_title-description.vue b/packages/components/src/basic/modal/_examples/_title-description.vue
new file mode 100644
index 00000000..8a64e8b3
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_title-description.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaModal from '../index.vue'
+
+const open = shallowRef(false)
+</script>
+
+<template>
+  <FaButton @click="open = true">
+    打开弹窗
+  </FaButton>
+  <FaModal v-model="open" title="账号安全验证" description="继续操作前，请确认当前操作由本人发起。">
+    <div class="text-sm text-muted-foreground">
+      描述会显示在标题下方，用于补充说明弹窗目的。
+    </div>
+  </FaModal>
+</template>
diff --git a/packages/components/src/basic/modal/_examples/index.ts b/packages/components/src/basic/modal/_examples/index.ts
new file mode 100644
index 00000000..4477a9ee
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/index.ts
@@ -0,0 +1,80 @@
+import Actions from './_actions.vue'
+import ActionsRaw from './_actions.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CenterBorderLoading from './_center-border-loading.vue'
+import CenterBorderLoadingRaw from './_center-border-loading.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Dialog from './_dialog.vue'
+import DialogRaw from './_dialog.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import HeaderFooter from './_header-footer.vue'
+import HeaderFooterRaw from './_header-footer.vue?raw'
+import OverlayBlur from './_overlay-blur.vue'
+import OverlayBlurRaw from './_overlay-blur.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import TitleDescription from './_title-description.vue'
+import TitleDescriptionRaw from './_title-description.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '标题描述',
+    component: TitleDescription,
+    componentRaw: TitleDescriptionRaw,
+  },
+  {
+    title: '关闭/最大化/拖拽',
+    component: Actions,
+    componentRaw: ActionsRaw,
+  },
+  {
+    title: '居中/边框/载入',
+    component: CenterBorderLoading,
+    componentRaw: CenterBorderLoadingRaw,
+  },
+  {
+    title: '遮罩/模糊',
+    component: OverlayBlur,
+    componentRaw: OverlayBlurRaw,
+  },
+  {
+    title: '显示/隐藏头部底部',
+    component: HeaderFooter,
+    componentRaw: HeaderFooterRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+  {
+    title: '触发事件',
+    component: Event,
+    componentRaw: EventRaw,
+  },
+  {
+    title: '对话框',
+    component: Dialog,
+    componentRaw: DialogRaw,
+  },
+  {
+    title: '函数式调用',
+    component: Functional,
+    componentRaw: FunctionalRaw,
+  },
+]
diff --git a/packages/components/src/basic/modal/index.vue b/packages/components/src/basic/modal/index.vue
index c43951b9..312ff23a 100644
--- a/packages/components/src/basic/modal/index.vue
+++ b/packages/components/src/basic/modal/index.vue
@@ -85,8 +85,6 @@ watch(isOpen, (val) => {
   if (val && !hasOpened.value) {
     hasOpened.value = true
   }
-}, {
-  immediate: true,
 })
 
 const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
diff --git a/packages/components/src/basic/number-field/README.md b/packages/components/src/basic/number-field/README.md
index 64112a0c..afe8c13d 100644
--- a/packages/components/src/basic/number-field/README.md
+++ b/packages/components/src/basic/number-field/README.md
@@ -30,56 +30,6 @@
 |--------|------|----------|
 | update:modelValue | 值更新时触发 | `(value: number)` |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref(0)
-</script>
-
-<template>
-  <FaNumberField v-model="value" />
-</template>
-```
-
-### 最小值 / 最大值 / 步长
-
-```vue
-<script setup lang="ts">
-const value = ref(10)
-</script>
-
-<template>
-  <FaNumberField v-model="value" :min="0" :max="100" :step="5" />
-</template>
-```
-
-### 禁用状态
-
-```vue
-<script setup lang="ts">
-const value = ref(50)
-</script>
-
-<template>
-  <FaNumberField v-model="value" disabled />
-</template>
-```
-
-### 带自定义宽度
-
-```vue
-<script setup lang="ts">
-const value = ref(0)
-</script>
-
-<template>
-  <FaNumberField v-model="value" class="w-[300px]" />
-</template>
-```
-
 ## 注意事项
 
 - 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/number-field/_examples/_basic.vue b/packages/components/src/basic/number-field/_examples/_basic.vue
new file mode 100644
index 00000000..bf0eb1fe
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaNumberField from '../index.vue'
+
+const value = ref(0)
+</script>
+
+<template>
+  <FaNumberField v-model="value" />
+</template>
diff --git a/packages/components/src/basic/number-field/_examples/_disabled.vue b/packages/components/src/basic/number-field/_examples/_disabled.vue
new file mode 100644
index 00000000..cb10efbe
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaNumberField from '../index.vue'
+
+const value = ref(50)
+</script>
+
+<template>
+  <FaNumberField v-model="value" disabled />
+</template>
diff --git a/packages/components/src/basic/number-field/_examples/_min-max.vue b/packages/components/src/basic/number-field/_examples/_min-max.vue
new file mode 100644
index 00000000..cc4a2c74
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_min-max.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaNumberField from '../index.vue'
+
+const value = ref(5)
+</script>
+
+<template>
+  <FaNumberField v-model="value" :min="0" :max="10" />
+</template>
diff --git a/packages/components/src/basic/number-field/_examples/_step.vue b/packages/components/src/basic/number-field/_examples/_step.vue
new file mode 100644
index 00000000..f063b007
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_step.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaNumberField from '../index.vue'
+
+const value = ref(0)
+</script>
+
+<template>
+  <FaNumberField v-model="value" :step="0.1" />
+</template>
diff --git a/packages/components/src/basic/number-field/_examples/index.ts b/packages/components/src/basic/number-field/_examples/index.ts
new file mode 100644
index 00000000..a9026646
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import MinMax from './_min-max.vue'
+import MinMaxRaw from './_min-max.vue?raw'
+import Step from './_step.vue'
+import StepRaw from './_step.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '最大值/最小值',
+    component: MinMax,
+    componentRaw: MinMaxRaw,
+  },
+  {
+    title: '步长',
+    component: Step,
+    componentRaw: StepRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+]
diff --git a/packages/components/src/basic/page-header/README.md b/packages/components/src/basic/page-header/README.md
index ca59c8f8..56c75d41 100644
--- a/packages/components/src/basic/page-header/README.md
+++ b/packages/components/src/basic/page-header/README.md
@@ -28,98 +28,6 @@
 | `description` | 自定义描述内容 |
 | `default` | 右侧操作区内容（按钮等） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaPageHeader title="页面标题" description="页面描述" />
-</template>
-```
-
-### 基础标题
-
-```vue
-<template>
-  <FaPageHeader title="用户管理" />
-</template>
-```
-
-### 标题加描述
-
-```vue
-<template>
-  <FaPageHeader 
-    title="用户管理" 
-    description="管理系统用户信息和权限"
-  />
-</template>
-```
-
-### 自定义标题
-
-```vue
-<template>
-  <FaPageHeader>
-    <template #title>
-      <span class="flex items-center gap-2">
-        <FaIcon name="i-lucide:user" />
-        用户管理
-      </span>
-    </template>
-  </FaPageHeader>
-</template>
-```
-
-### 带操作按钮
-
-```vue
-<template>
-  <FaPageHeader title="用户管理" description="管理系统用户">
-    <FaButton>
-      <FaIcon name="i-lucide:plus" />
-      新增用户
-    </FaButton>
-  </FaPageHeader>
-</template>
-```
-
-### 多个操作按钮
-
-```vue
-<template>
-  <FaPageHeader title="数据报表">
-    <div class="flex gap-2">
-      <FaButton variant="outline">
-        <FaIcon name="i-lucide:download" />
-        导出
-      </FaButton>
-      <FaButton>
-        <FaIcon name="i-lucide:refresh-cw" />
-        刷新
-      </FaButton>
-    </div>
-  </FaPageHeader>
-</template>
-```
-
-### 自定义样式
-
-```vue
-<template>
-  <FaPageHeader 
-    title="自定义样式"
-    class="bg-primary text-primary-foreground"
-    main-class="text-center"
-  >
-    <template #description>
-      <span class="opacity-70">自定义描述的样式</span>
-    </template>
-  </FaPageHeader>
-</template>
-```
-
 ## 注意事项
 
 1. **响应式布局**：标题区在左侧，操作区在右侧，小屏幕时会自动换行
diff --git a/packages/components/src/basic/page-header/_examples/_basic.vue b/packages/components/src/basic/page-header/_examples/_basic.vue
new file mode 100644
index 00000000..6f4a325b
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_basic.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaPageHeader from '../index.vue'
+</script>
+
+<template>
+  <FaPageHeader title="页面标题" />
+</template>
diff --git a/packages/components/src/basic/page-header/_examples/_custom-style.vue b/packages/components/src/basic/page-header/_examples/_custom-style.vue
new file mode 100644
index 00000000..c19772d6
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_custom-style.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaPageHeader from '../index.vue'
+</script>
+
+<template>
+  <FaPageHeader
+    title="自定义样式"
+    description="通过 class、main-class 和 default-class 调整布局和外观。"
+    class="border rounded-lg bg-muted/40"
+    main-class="flex-[1_1_60%]"
+    default-class="flex gap-2"
+  >
+    <FaButton variant="outline">
+      取消
+    </FaButton>
+    <FaButton>
+      保存
+    </FaButton>
+  </FaPageHeader>
+</template>
diff --git a/packages/components/src/basic/page-header/_examples/_description.vue b/packages/components/src/basic/page-header/_examples/_description.vue
new file mode 100644
index 00000000..ac5ecd33
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_description.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaPageHeader from '../index.vue'
+</script>
+
+<template>
+  <FaPageHeader title="用户管理" description="管理系统用户信息和权限配置。" />
+</template>
diff --git a/packages/components/src/basic/page-header/_examples/_slot.vue b/packages/components/src/basic/page-header/_examples/_slot.vue
new file mode 100644
index 00000000..a3d3b12e
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_slot.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaPageHeader from '../index.vue'
+</script>
+
+<template>
+  <FaPageHeader>
+    <template #title>
+      <div class="flex gap-2 items-center">
+        <FaIcon name="i-lucide:user-round-cog" class="text-primary size-6" />
+        用户管理
+      </div>
+    </template>
+    <template #description>
+      <p>提供 title、description 和右侧操作区域插槽。</p>
+    </template>
+    <FaButton variant="outline">
+      <FaIcon name="i-lucide:plus" />
+      新增用户
+    </FaButton>
+  </FaPageHeader>
+</template>
diff --git a/packages/components/src/basic/page-header/_examples/index.ts b/packages/components/src/basic/page-header/_examples/index.ts
new file mode 100644
index 00000000..329f051c
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Description from './_description.vue'
+import DescriptionRaw from './_description.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '描述',
+    component: Description,
+    componentRaw: DescriptionRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+]
diff --git a/packages/components/src/basic/page-main/README.md b/packages/components/src/basic/page-main/README.md
index e0083459..4a975ef1 100644
--- a/packages/components/src/basic/page-main/README.md
+++ b/packages/components/src/basic/page-main/README.md
@@ -28,107 +28,6 @@
 | `title` | 自定义标题内容 |
 | `default` | 主内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaPageMain title="内容标题">
-    页面主内容
-  </FaPageMain>
-</template>
-```
-
-### 基础内容区
-
-```vue
-<template>
-  <FaPageMain>
-    <p>这是页面的主要内容区域。</p>
-  </FaPageMain>
-</template>
-```
-
-### 带标题
-
-```vue
-<template>
-  <FaPageMain title="基本信息">
-    <p>用户的基本信息内容。</p>
-  </FaPageMain>
-</template>
-```
-
-### 可折叠内容区
-
-```vue
-<template>
-  <FaPageMain title="详细信息" :collaspe="true">
-    <div class="space-y-4">
-      <p>详细内容 1...</p>
-      <p>详细内容 2...</p>
-      <p>详细内容 3...</p>
-    </div>
-  </FaPageMain>
-</template>
-```
-
-### 自定义折叠高度
-
-```vue
-<template>
-  <FaPageMain title="日志信息" :collaspe="true" height="200px">
-    <div class="space-y-2">
-      <p v-for="i in 20" :key="i">日志条目 {{ i }}</p>
-    </div>
-  </FaPageMain>
-</template>
-```
-
-### 自定义标题
-
-```vue
-<template>
-  <FaPageMain>
-    <template #title>
-      <div class="flex items-center gap-2">
-        <FaIcon name="i-lucide:info" />
-        系统信息
-      </div>
-    </template>
-    <p>系统信息内容...</p>
-  </FaPageMain>
-</template>
-```
-
-### 与 FaPageHeader 配合使用
-
-```vue
-<template>
-  <FaPageHeader title="用户管理" description="管理系统用户信息" />
-  <FaPageMain title="用户列表">
-    <!-- 用户列表内容 -->
-  </FaPageMain>
-</template>
-```
-
-### 多个内容区
-
-```vue
-<template>
-  <FaPageMain title="基本信息" :collaspe="true">
-    <p>基本信息内容...</p>
-  </FaPageMain>
-  <FaPageMain title="扩展信息" :collaspe="true">
-    <p>扩展信息内容...</p>
-  </FaPageMain>
-  <FaPageMain title="备注信息" :collaspe="true">
-    <p>备注信息内容...</p>
-  </FaPageMain>
-</template>
-```
-
 ## 注意事项
 
 1. **折叠功能**：设置 `collaspe` 为 `true` 后，内容区可以折叠，折叠后会显示渐变遮罩
diff --git a/packages/components/src/basic/page-main/_examples/_basic.vue b/packages/components/src/basic/page-main/_examples/_basic.vue
new file mode 100644
index 00000000..1c323903
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_basic.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaPageMain from '../index.vue'
+</script>
+
+<template>
+  <FaPageMain>
+    PageMain 是最常用的页面内容容器，几乎所有页面都会使用到。
+  </FaPageMain>
+</template>
diff --git a/packages/components/src/basic/page-main/_examples/_collapse.vue b/packages/components/src/basic/page-main/_examples/_collapse.vue
new file mode 100644
index 00000000..f71fb759
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_collapse.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaPageMain from '../index.vue'
+</script>
+
+<template>
+  <FaPageMain title="带展开/收起功能" collaspe height="100px">
+    <div class="space-y-4">
+      <h3 class="text-2xl font-bold">
+        Fantastic-admin
+      </h3>
+      <p class="text-sm text-muted-foreground">
+        设置 collaspe 后，内容区域会在指定高度折叠。
+      </p>
+      <p>鼠标移入内容底部，可以看到展开和收起按钮。</p>
+      <p>这是一段用于撑开内容高度的文本。</p>
+      <p>继续补充一些内容，让折叠效果更明显。</p>
+    </div>
+  </FaPageMain>
+</template>
diff --git a/apps/example/src/views/component_example/page_main/_demo3.vue b/packages/components/src/basic/page-main/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 56%
rename from apps/example/src/views/component_example/page_main/_demo3.vue
rename to packages/components/src/basic/page-main/_examples/_slot.vue
index afd3a5ac..31d8b7d7
--- a/apps/example/src/views/component_example/page_main/_demo3.vue
+++ b/packages/components/src/basic/page-main/_examples/_slot.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaPageMain from '../index.vue'
+</script>
+
 <template>
   <FaPageMain>
     <template #title>
@@ -8,6 +14,6 @@
         </FaButton>
       </div>
     </template>
-    这里放页面内容
+    这里放页面内容。
   </FaPageMain>
 </template>
diff --git a/packages/components/src/basic/page-main/_examples/_title.vue b/packages/components/src/basic/page-main/_examples/_title.vue
new file mode 100644
index 00000000..d8ba9d3d
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_title.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaPageMain from '../index.vue'
+</script>
+
+<template>
+  <FaPageMain title="你可以设置一个自定义的标题">
+    这里放页面内容。
+  </FaPageMain>
+</template>
diff --git a/packages/components/src/basic/page-main/_examples/index.ts b/packages/components/src/basic/page-main/_examples/index.ts
new file mode 100644
index 00000000..9f782f5e
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Collapse from './_collapse.vue'
+import CollapseRaw from './_collapse.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import Title from './_title.vue'
+import TitleRaw from './_title.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '标题',
+    component: Title,
+    componentRaw: TitleRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '折叠',
+    component: Collapse,
+    componentRaw: CollapseRaw,
+  },
+]
diff --git a/packages/components/src/basic/pagination/README.md b/packages/components/src/basic/pagination/README.md
index 39253d5b..04405794 100644
--- a/packages/components/src/basic/pagination/README.md
+++ b/packages/components/src/basic/pagination/README.md
@@ -27,181 +27,6 @@
 | `pageChange` | `page: number` | 页码变化时触发 |
 | `sizeChange` | `size: number` | 每页条数变化时触发 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-</script>
-
-<template>
-  <FaPagination v-model:page="page" v-model:size="size" :total="total" />
-</template>
-```
-
-### 基础分页
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const total = ref(100)
-</script>
-
-<template>
-  <FaPagination v-model:page="page" :total="total" />
-</template>
-```
-
-### 带每页条数选择
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(500)
-</script>
-
-<template>
-  <FaPagination v-model:page="page" v-model:size="size" :total="total" />
-</template>
-```
-
-### 自定义每页条数选项
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(20)
-const total = ref(500)
-</script>
-
-<template>
-  <FaPagination 
-    v-model:page="page" 
-    v-model:size="size" 
-    :total="total"
-    :sizes="[20, 50, 100, 200]"
-  />
-</template>
-```
-
-### 自定义布局（仅页码）
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const total = ref(100)
-</script>
-
-<template>
-  <FaPagination v-model:page="page" :total="total" layout="pager" />
-</template>
-```
-
-### 自定义布局（总条数 + 页码）
-
-```vue
-<template>
-  <FaPagination 
-    v-model:page="page" 
-    :total="total" 
-    layout="total, ->, pager"
-  />
-</template>
-```
-
-### 完整布局
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(1000)
-</script>
-
-<template>
-  <FaPagination 
-    v-model:page="page" 
-    v-model:size="size" 
-    :total="total"
-    layout="total, sizes, ->, pager, jumper"
-  />
-</template>
-```
-
-### 监听分页变化
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-
-function onPageChange(newPage: number) {
-  console.log('页码变为:', newPage)
-  // 加载新页面数据
-}
-
-function onSizeChange(newSize: number) {
-  console.log('每页条数变为:', newSize)
-  page.value = 1 // 重置页码
-  // 加载新数据
-}
-</script>
-
-<template>
-  <FaPagination 
-    v-model:page="page" 
-    v-model:size="size" 
-    :total="total"
-    @page-change="onPageChange"
-    @size-change="onSizeChange"
-  />
-</template>
-```
-
-### 在表格中使用
-
-```vue
-<script setup lang="ts">
-const page = ref(1)
-const size = ref(10)
-const total = ref(100)
-const data = ref([])
-
-// 加载数据
-function loadData() {
-  // API 调用获取数据
-}
-
-watch([page, size], loadData)
-</script>
-
-<template>
-  <div>
-    <table>
-      <thead>
-        <tr>
-          <th>姓名</th>
-          <th>邮箱</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in data" :key="item.id">
-          <td>{{ item.name }}</td>
-          <td>{{ item.email }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <FaPagination v-model:page="page" v-model:size="size" :total="total" />
-  </div>
-</template>
-```
-
 ## 注意事项
 
 ### 布局配置说明
diff --git a/packages/components/src/basic/pagination/_examples/_basic.vue b/packages/components/src/basic/pagination/_examples/_basic.vue
new file mode 100644
index 00000000..b0dd31aa
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_basic.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaPagination from '../index.vue'
+
+const page = ref(1)
+const size = ref(10)
+const total = ref(100)
+</script>
+
+<template>
+  <FaPagination v-model:page="page" v-model:size="size" :total="total" />
+</template>
diff --git a/packages/components/src/basic/pagination/_examples/_event.vue b/packages/components/src/basic/pagination/_examples/_event.vue
new file mode 100644
index 00000000..a2235926
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_event.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaPagination from '../index.vue'
+
+const page = ref(1)
+const size = ref(10)
+const total = ref(100)
+const message = ref('等待分页操作')
+
+function handlePageChange(value: number) {
+  message.value = `当前页码切换为：${value}`
+}
+
+function handleSizeChange(value: number) {
+  message.value = `每页条数切换为：${value}`
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <FaPagination
+      v-model:page="page"
+      v-model:size="size"
+      :total="total"
+      @page-change="handlePageChange"
+      @size-change="handleSizeChange"
+    />
+    <div class="text-sm text-muted-foreground">
+      {{ message }}
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/pagination/_examples/_layout.vue b/packages/components/src/basic/pagination/_examples/_layout.vue
new file mode 100644
index 00000000..736f0d0e
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_layout.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaPagination from '../index.vue'
+
+const page = ref(1)
+const size = ref(10)
+const total = ref(100)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FaPagination v-model:page="page" v-model:size="size" :total="total" layout="jumper, pager, ->, total, sizes" />
+    <FaPagination v-model:page="page" v-model:size="size" :total="total" layout="pager" />
+  </div>
+</template>
diff --git a/packages/components/src/basic/pagination/_examples/index.ts b/packages/components/src/basic/pagination/_examples/index.ts
new file mode 100644
index 00000000..dd6245ec
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Layout from './_layout.vue'
+import LayoutRaw from './_layout.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '布局',
+    component: Layout,
+    componentRaw: LayoutRaw,
+  },
+  {
+    title: '事件',
+    component: Event,
+    componentRaw: EventRaw,
+  },
+]
diff --git a/packages/components/src/basic/password-strength/README.md b/packages/components/src/basic/password-strength/README.md
index 85ecd82e..cc3d4e42 100644
--- a/packages/components/src/basic/password-strength/README.md
+++ b/packages/components/src/basic/password-strength/README.md
@@ -43,54 +43,6 @@ const defaultColorThresholds = [
 
 `colorThresholds` 会按照 `min` 从高到低匹配，例如当前命中 4 条规则时，会使用 `min: 3` 对应的颜色。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const password = ref('')
-</script>
-
-<template>
-  <div>
-    <FaInput v-model="password" type="password" placeholder="请输入密码" />
-    <FaPasswordStrength :password="password" class="mt-2" />
-  </div>
-</template>
-```
-
-### 自定义规则和强度颜色
-
-```vue
-<script setup lang="ts">
-const password = ref('')
-
-const rules = [
-  { label: '长度至少为8个字符', rule: (value: string) => value.length >= 8 },
-  { label: '包含大写字母', rule: (value: string) => /[A-Z]/.test(value) },
-  { label: '包含数字', rule: (value: string) => /\d/.test(value) },
-]
-
-const colorThresholds = [
-  { min: 0, color: 'bg-red-500' },
-  { min: 1, color: 'bg-yellow-500' },
-  { min: 3, color: 'bg-green-500' },
-]
-</script>
-
-<template>
-  <div class="space-y-2">
-    <FaInput v-model="password" type="password" placeholder="请输入密码" />
-    <FaPasswordStrength
-      :password="password"
-      :rules="rules"
-      :color-thresholds="colorThresholds"
-    />
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **实时反馈**：密码强度会随输入实时更新。
diff --git a/apps/example/src/views/component_example/password_strength/_demo1.vue b/packages/components/src/basic/password-strength/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 58%
rename from apps/example/src/views/component_example/password_strength/_demo1.vue
rename to packages/components/src/basic/password-strength/_examples/_basic.vue
index 46656b0a..d7d08123
--- a/apps/example/src/views/component_example/password_strength/_demo1.vue
+++ b/packages/components/src/basic/password-strength/_examples/_basic.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../../input/index.vue'
+import FaPasswordStrength from '../index.vue'
+
 const password = ref('')
 </script>
 
diff --git a/packages/components/src/basic/password-strength/_examples/_custom-rule.vue b/packages/components/src/basic/password-strength/_examples/_custom-rule.vue
new file mode 100644
index 00000000..61597c2e
--- /dev/null
+++ b/packages/components/src/basic/password-strength/_examples/_custom-rule.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaInput from '../../input/index.vue'
+import FaPasswordStrength from '../index.vue'
+
+const password = ref('')
+
+const rules = [
+  { label: '长度至少为 10 个字符', rule: (value: string) => value.length >= 10 },
+  { label: '包含大写字母', rule: (value: string) => /[A-Z]/.test(value) },
+  { label: '包含数字', rule: (value: string) => /\d/.test(value) },
+  { label: '包含特殊字符', rule: (value: string) => /[^A-Z0-9]/i.test(value) },
+]
+
+const colorThresholds = [
+  { min: 0, color: 'bg-red-500' },
+  { min: 2, color: 'bg-yellow-500' },
+  { min: 4, color: 'bg-green-500' },
+]
+</script>
+
+<template>
+  <div class="flex-col w-80">
+    <FaInput v-model="password" placeholder="请输入密码" class="w-full" />
+    <FaPasswordStrength
+      :password="password"
+      :rules="rules"
+      :color-thresholds="colorThresholds"
+      class="mt-2"
+    />
+  </div>
+</template>
diff --git a/packages/components/src/basic/password-strength/_examples/index.ts b/packages/components/src/basic/password-strength/_examples/index.ts
new file mode 100644
index 00000000..a1ef5d76
--- /dev/null
+++ b/packages/components/src/basic/password-strength/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomRule from './_custom-rule.vue'
+import CustomRuleRaw from './_custom-rule.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '自定义规则',
+    component: CustomRule,
+    componentRaw: CustomRuleRaw,
+  },
+]
diff --git a/packages/components/src/basic/popover/README.md b/packages/components/src/basic/popover/README.md
index 89257bc9..dd57e14c 100644
--- a/packages/components/src/basic/popover/README.md
+++ b/packages/components/src/basic/popover/README.md
@@ -30,182 +30,6 @@
 | `default` | 触发元素 |
 | `panel` | 弹出面板内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaPopover v-model:open="open">
-    <FaButton>打开弹出框</FaButton>
-    <template #panel>
-      <div class="p-4">
-        <p>弹出框内容</p>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
-### 基础弹出框
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaPopover v-model:open="open">
-    <FaButton variant="outline">点击打开</FaButton>
-    <template #panel>
-      <div class="p-4 w-64">
-        <p class="font-medium">弹出框标题</p>
-        <p class="text-sm text-muted-foreground mt-1">这是弹出框的内容区域。</p>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
-### 不同弹出方向
-
-```vue
-<template>
-  <div class="flex gap-4">
-    <FaPopover side="top">
-      <FaButton>向上弹出</FaButton>
-      <template #panel>上方内容</template>
-    </FaPopover>
-    <FaPopover side="bottom">
-      <FaButton>向下弹出</FaButton>
-      <template #panel>下方内容</template>
-    </FaPopover>
-    <FaPopover side="left">
-      <FaButton>向左弹出</FaButton>
-      <template #panel>左侧内容</template>
-    </FaPopover>
-    <FaPopover side="right">
-      <FaButton>向右弹出</FaButton>
-      <template #panel>右侧内容</template>
-    </FaPopover>
-  </div>
-</template>
-```
-
-### 选择器面板
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-const selectedColor = ref('')
-const colors = ['#ef4444', '#22c55e', '#3b82f6', '#f59e0b', '#8b5cf6']
-</script>
-
-<template>
-  <FaPopover v-model:open="open">
-    <FaButton variant="outline">
-      <span :style="{ backgroundColor: selectedColor }" class="inline-block size-4 rounded mr-2" />
-      选择颜色
-    </FaButton>
-    <template #panel>
-      <div class="p-3">
-        <div class="flex gap-2">
-          <button
-            v-for="color in colors"
-            :key="color"
-            :style="{ backgroundColor: color }"
-            class="size-8 rounded cursor-pointer hover:ring-2 hover:ring-offset-2"
-            @click="selectedColor = color; open = false"
-          />
-        </div>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
-### 日期选择器
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-const selectedDate = ref('')
-</script>
-
-<template>
-  <FaPopover v-model:open="open">
-    <FaInput v-model="selectedDate" placeholder="选择日期" readonly @click="open = true" />
-    <template #panel>
-      <div class="p-4">
-        <!-- 日历组件 -->
-        <p>日历选择器内容</p>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
-### 用户信息卡片
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
-<template>
-  <FaPopover v-model:open="open" side="right" :side-offset="10">
-    <FaAvatar src="https://example.com/avatar.jpg" class="size-10 rounded-full cursor-pointer" />
-    <template #panel>
-      <div class="p-4 w-72">
-        <div class="flex items-center gap-3">
-          <FaAvatar src="https://example.com/avatar.jpg" class="size-12 rounded-full" />
-          <div>
-            <p class="font-medium">张三</p>
-            <p class="text-sm text-muted-foreground">前端工程师</p>
-          </div>
-        </div>
-        <div class="mt-4 space-y-2">
-          <p class="text-sm"><strong>邮箱：</strong>zhangsan@example.com</p>
-          <p class="text-sm"><strong>电话：</strong>13800138000</p>
-        </div>
-        <FaButton class="w-full mt-4" @click="open = false">查看主页</FaButton>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
-### 表单弹窗
-
-```vue
-<script setup lang="ts">
-const open = ref(false)
-const form = ref({ name: '', email: '' })
-</script>
-
-<template>
-  <FaPopover v-model:open="open">
-    <FaButton>新增用户</FaButton>
-    <template #panel>
-      <div class="p-4 w-80">
-        <div class="space-y-4">
-          <FaInput v-model="form.name" label="姓名" />
-          <FaInput v-model="form.email" label="邮箱" />
-          <div class="flex justify-end gap-2">
-            <FaButton variant="outline" @click="open = false">取消</FaButton>
-            <FaButton>确定</FaButton>
-          </div>
-        </div>
-      </div>
-    </template>
-  </FaPopover>
-</template>
-```
-
 ## 注意事项
 
 1. **panel 插槽**：弹出内容必须放在 `#panel` 插槽中
diff --git a/packages/components/src/basic/popover/_examples/_align.vue b/packages/components/src/basic/popover/_examples/_align.vue
new file mode 100644
index 00000000..1cd3ce35
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_align.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaPopover from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaPopover align="start">
+      <FaButton variant="outline">
+        Start
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          起始位置对齐
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover align="center">
+      <FaButton variant="outline">
+        Center
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          居中对齐
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover align="end">
+      <FaButton variant="outline">
+        End
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          结束位置对齐
+        </div>
+      </template>
+    </FaPopover>
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/popover/_demo2.vue b/packages/components/src/basic/popover/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 55%
rename from apps/example/src/views/component_example/popover/_demo2.vue
rename to packages/components/src/basic/popover/_examples/_basic.vue
index 7c362507..6afc61c7
--- a/apps/example/src/views/component_example/popover/_demo2.vue
+++ b/packages/components/src/basic/popover/_examples/_basic.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-const open = ref(false)
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaPopover from '../index.vue'
 </script>
 
 <template>
-  <FaPopover v-model:open="open">
+  <FaPopover>
     <FaButton>
       浮动面板
       <FaIcon name="i-ep:caret-bottom" />
     </FaButton>
     <template #panel>
       <div class="flex h-30 w-60 items-center justify-center">
-        <FaButton @click="open = false">
-          关闭
-        </FaButton>
+        面板内容
       </div>
     </template>
   </FaPopover>
diff --git a/packages/components/src/basic/popover/_examples/_offset.vue b/packages/components/src/basic/popover/_examples/_offset.vue
new file mode 100644
index 00000000..2609f59b
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_offset.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaPopover from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaPopover :side-offset="12">
+      <FaButton variant="outline">
+        Side offset
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          与触发元素保持更大距离
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover align="start" :align-offset="24">
+      <FaButton variant="outline">
+        Align offset
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          沿对齐方向偏移
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover :side-offset="12" :align-offset="-24">
+      <FaButton variant="outline">
+        Both
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          同时设置两种偏移
+        </div>
+      </template>
+    </FaPopover>
+  </div>
+</template>
diff --git a/packages/components/src/basic/popover/_examples/_side.vue b/packages/components/src/basic/popover/_examples/_side.vue
new file mode 100644
index 00000000..9cba3103
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_side.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaPopover from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <FaPopover side="top">
+      <FaButton variant="outline">
+        Top
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          从上方弹出
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover side="right">
+      <FaButton variant="outline">
+        Right
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          从右侧弹出
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover side="bottom">
+      <FaButton variant="outline">
+        Bottom
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          从下方弹出
+        </div>
+      </template>
+    </FaPopover>
+    <FaPopover side="left">
+      <FaButton variant="outline">
+        Left
+      </FaButton>
+      <template #panel>
+        <div class="text-sm">
+          从左侧弹出
+        </div>
+      </template>
+    </FaPopover>
+  </div>
+</template>
diff --git a/packages/components/src/basic/popover/_examples/index.ts b/packages/components/src/basic/popover/_examples/index.ts
new file mode 100644
index 00000000..f8954126
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/index.ts
@@ -0,0 +1,31 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '弹出方向',
+    component: Side,
+    componentRaw: SideRaw,
+  },
+  {
+    title: '对齐方式',
+    component: Align,
+    componentRaw: AlignRaw,
+  },
+  {
+    title: '偏移',
+    component: Offset,
+    componentRaw: OffsetRaw,
+  },
+]
diff --git a/packages/components/src/basic/progress/README.md b/packages/components/src/basic/progress/README.md
index b40ce2cc..417563e4 100644
--- a/packages/components/src/basic/progress/README.md
+++ b/packages/components/src/basic/progress/README.md
@@ -23,185 +23,6 @@
 |------|------|--------|------|
 | `modelValue` | `number` | `0` | 进度值（0-100） |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const progress = ref(50)
-</script>
-
-<template>
-  <FaProgress v-model="progress" />
-</template>
-```
-
-### 基础进度条
-
-```vue
-<script setup lang="ts">
-const progress = ref(60)
-</script>
-
-<template>
-  <FaProgress v-model="progress" />
-  <p class="text-sm text-muted-foreground mt-2">当前进度：{{ progress }}%</p>
-</template>
-```
-
-### 不同进度值
-
-```vue
-<template>
-  <div class="space-y-4">
-    <FaProgress :model-value="25" />
-    <FaProgress :model-value="50" />
-    <FaProgress :model-value="75" />
-    <FaProgress :model-value="100" />
-  </div>
-</template>
-```
-
-### 动态进度
-
-```vue
-<script setup lang="ts">
-const progress = ref(0)
-const timer = ref()
-
-function startProgress() {
-  progress.value = 0
-  timer.value = setInterval(() => {
-    progress.value += 10
-    if (progress.value >= 100) {
-      clearInterval(timer.value)
-    }
-  }, 500)
-}
-
-function resetProgress() {
-  clearInterval(timer.value)
-  progress.value = 0
-}
-
-onUnmounted(() => {
-  clearInterval(timer.value)
-})
-</script>
-
-<template>
-  <div class="space-y-4">
-    <FaProgress v-model="progress" />
-    <div class="flex gap-2">
-      <FaButton @click="startProgress">开始</FaButton>
-      <FaButton variant="outline" @click="resetProgress">重置</FaButton>
-    </div>
-  </div>
-</template>
-```
-
-### 自定义尺寸
-
-```vue
-<template>
-  <div class="space-y-4">
-    <FaProgress :model-value="50" class="h-2" />
-    <FaProgress :model-value="50" class="h-4" />
-    <FaProgress :model-value="50" class="h-6" />
-  </div>
-</template>
-```
-
-### 自定义颜色
-
-```vue
-<template>
-  <div class="space-y-4">
-    <FaProgress :model-value="50" class="h-2 [&>[data-slot=progress-indicator]]:bg-blue-500" />
-    <FaProgress :model-value="50" class="h-2 [&>[data-slot=progress-indicator]]:bg-green-500" />
-    <FaProgress :model-value="50" class="h-2 [&>[data-slot=progress-indicator]]:bg-purple-500" />
-  </div>
-</template>
-```
-
-### 带百分比显示
-
-```vue
-<script setup lang="ts">
-const progress = ref(75)
-</script>
-
-<template>
-  <div>
-    <div class="flex justify-between text-sm mb-1">
-      <span>上传进度</span>
-      <span class="text-muted-foreground">{{ progress }}%</span>
-    </div>
-    <FaProgress v-model="progress" class="h-3" />
-  </div>
-</template>
-```
-
-### 多任务进度
-
-```vue
-<script setup lang="ts">
-const tasks = ref([
-  { name: '上传文件', progress: 100 },
-  { name: '处理数据', progress: 60 },
-  { name: '生成报告', progress: 30 },
-])
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div v-for="task in tasks" :key="task.name" class="space-y-1">
-      <div class="flex justify-between text-sm">
-        <span>{{ task.name }}</span>
-        <span class="text-muted-foreground">{{ task.progress }}%</span>
-      </div>
-      <FaProgress v-model="task.progress" class="h-2" />
-    </div>
-  </div>
-</template>
-```
-
-### 文件上传进度
-
-```vue
-<script setup lang="ts">
-const uploadProgress = ref(0)
-
-function handleUpload() {
-  // 模拟上传
-  const timer = setInterval(() => {
-    uploadProgress.value += 10
-    if (uploadProgress.value >= 100) {
-      clearInterval(timer)
-    }
-  }, 300)
-}
-</script>
-
-<template>
-  <FaCard title="文件上传">
-    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="space-y-2">
-      <div class="flex justify-between text-sm">
-        <span>uploading_file.zip</span>
-        <span class="text-muted-foreground">{{ uploadProgress }}%</span>
-      </div>
-      <FaProgress v-model="uploadProgress" class="h-2" />
-    </div>
-    <div v-else-if="uploadProgress === 100" class="flex items-center gap-2 text-green-600">
-      <FaIcon name="i-lucide:check-circle" />
-      <span>上传完成</span>
-    </div>
-    <FaButton v-else @click="handleUpload">选择文件上传</FaButton>
-  </FaCard>
-</template>
-```
-
 ## 注意事项
 
 1. **进度范围**：进度值范围为 0-100
diff --git a/packages/components/src/basic/progress/_examples/_basic.vue b/packages/components/src/basic/progress/_examples/_basic.vue
new file mode 100644
index 00000000..5117cfaf
--- /dev/null
+++ b/packages/components/src/basic/progress/_examples/_basic.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaProgress from '../index.vue'
+</script>
+
+<template>
+  <FaProgress :model-value="33" />
+</template>
diff --git a/packages/components/src/basic/progress/_examples/index.ts b/packages/components/src/basic/progress/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/progress/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+]
diff --git a/packages/components/src/basic/radio-group/README.md b/packages/components/src/basic/radio-group/README.md
index a47302ad..a958c0ac 100644
--- a/packages/components/src/basic/radio-group/README.md
+++ b/packages/components/src/basic/radio-group/README.md
@@ -47,179 +47,6 @@ export interface RadioGroupOption {
 
 通过 `v-model` 实现双向绑定。
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref('comfortable')
-
-const options = [
-  { label: '默认', value: 'default' },
-  { label: '舒适', value: 'comfortable' },
-  { label: '紧凑', value: 'compact' },
-]
-</script>
-
-<template>
-  <FaRadioGroup v-model="value" :options="options" />
-</template>
-```
-
-### 带描述文案
-
-```vue
-<script setup lang="ts">
-const value = ref('growth')
-
-const options = [
-  {
-    label: '创业版',
-    value: 'starter',
-    description: '适合 1-10 人小团队，保留核心能力。',
-  },
-  {
-    label: '成长版',
-    value: 'growth',
-    description: '适合多角色协作，支持审批与审计流程。',
-  },
-  {
-    label: '企业版',
-    value: 'enterprise',
-    description: '高级安全策略与 SSO 即将开放。',
-  },
-]
-</script>
-
-<template>
-  <FaRadioGroup v-model="value" :options="options" />
-</template>
-```
-
-### 禁用状态
-
-```vue
-<script setup lang="ts">
-const value = ref('growth')
-
-const options = [
-  { label: '标准版', value: 'standard' },
-  { label: '专业版', value: 'pro' },
-  { label: '企业版', value: 'enterprise', disabled: true },
-]
-</script>
-
-<template>
-  <FaRadioGroup v-model="value" :options="options" />
-</template>
-```
-
-### 多列排列
-
-```vue
-<script setup lang="ts">
-const value = ref('balanced')
-
-const options = [
-  { label: '专注模式', value: 'focus' },
-  { label: '平衡模式', value: 'balanced' },
-  { label: '高密度模式', value: 'dense' },
-]
-</script>
-
-<template>
-  <FaRadioGroup
-    v-model="value"
-    :options="options"
-    class="gap-4 md:grid-cols-3"
-  />
-</template>
-```
-
-### 自定义选项内容
-
-```vue
-<script setup lang="ts">
-const value = ref('balanced')
-
-const options = [
-  {
-    label: '专注模式',
-    value: 'focus',
-    badge: '录入',
-    description: '突出主任务，弱化辅助信息。',
-  },
-  {
-    label: '平衡模式',
-    value: 'balanced',
-    badge: '推荐',
-    description: '信息密度与可读性保持平衡。',
-  },
-  {
-    label: '高密度模式',
-    value: 'dense',
-    badge: '大屏',
-    description: '适合大屏运营与监控看板。',
-  },
-]
-</script>
-
-<template>
-  <FaRadioGroup
-    v-model="value"
-    :options="options"
-    class="gap-4 md:grid-cols-3"
-  >
-    <template #option="{ option, checked }">
-      <div
-        :class="[
-          'flex w-full items-start justify-between gap-3 rounded-xl border px-4 py-3',
-          checked ? 'border-primary bg-primary/5' : 'border-border',
-        ]"
-      >
-        <div class="min-w-0">
-          <div class="flex items-center gap-2">
-            <span class="truncate font-medium">{{ option.label }}</span>
-            <span class="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
-              {{ option.badge }}
-            </span>
-          </div>
-          <div class="text-xs text-muted-foreground leading-5">
-            {{ option.description }}
-          </div>
-        </div>
-        <span class="text-xs" :class="checked ? 'text-primary' : 'text-muted-foreground'">
-          {{ checked ? '已选中' : '可选择' }}
-        </span>
-      </div>
-    </template>
-  </FaRadioGroup>
-</template>
-```
-
-### 监听变化事件
-
-```vue
-<script setup lang="ts">
-const value = ref('default')
-
-const options = [
-  { label: '默认', value: 'default' },
-  { label: '舒适', value: 'comfortable' },
-  { label: '紧凑', value: 'compact' },
-]
-
-function handleChange(value) {
-  console.log('选中值变化:', value)
-}
-</script>
-
-<template>
-  <FaRadioGroup v-model="value" :options="options" @change="handleChange" />
-</template>
-```
-
 ## 注意事项
 
 1. **初始化值**：组件当前通过 `v-model` 管理选中值，不再提供 `defaultValue`。
diff --git a/apps/example/src/views/component_example/radio_group/_demo1.vue b/packages/components/src/basic/radio-group/_examples/_basic.vue
similarity index 78%
rename from apps/example/src/views/component_example/radio_group/_demo1.vue
rename to packages/components/src/basic/radio-group/_examples/_basic.vue
index 70581127..99630ba2 100644
--- a/apps/example/src/views/component_example/radio_group/_demo1.vue
+++ b/packages/components/src/basic/radio-group/_examples/_basic.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaRadioGroup from '../index.vue'
+
 const value = ref('comfortable')
 
 const options = [
diff --git a/apps/example/src/views/component_example/radio_group/_demo3.vue b/packages/components/src/basic/radio-group/_examples/_custom-option.vue
similarity index 90%
rename from apps/example/src/views/component_example/radio_group/_demo3.vue
rename to packages/components/src/basic/radio-group/_examples/_custom-option.vue
index bfbc11c6..33dc4590 100644
--- a/apps/example/src/views/component_example/radio_group/_demo3.vue
+++ b/packages/components/src/basic/radio-group/_examples/_custom-option.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaRadioGroup from '../index.vue'
+
 const value = ref('balanced')
 
 const options = [
@@ -33,7 +37,8 @@ const options = [
     >
       <template #option="{ option, checked, disabled }">
         <div
-          class="px-4 py-3 border rounded-xl flex gap-3 w-full transition-colors items-start justify-between" :class="[
+          class="px-4 py-3 border rounded-xl flex gap-3 w-full transition-colors items-start justify-between"
+          :class="[
             checked ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40',
             disabled && 'opacity-60',
           ]"
diff --git a/apps/example/src/views/component_example/radio_group/_demo2.vue b/packages/components/src/basic/radio-group/_examples/_description-disabled.vue
similarity index 84%
rename from apps/example/src/views/component_example/radio_group/_demo2.vue
rename to packages/components/src/basic/radio-group/_examples/_description-disabled.vue
index b4e9cd91..267986a1 100644
--- a/apps/example/src/views/component_example/radio_group/_demo2.vue
+++ b/packages/components/src/basic/radio-group/_examples/_description-disabled.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { computed, ref } from 'vue'
+import FaRadioGroup from '../index.vue'
+
 const value = ref('growth')
 
 const options = [
diff --git a/packages/components/src/basic/radio-group/_examples/index.ts b/packages/components/src/basic/radio-group/_examples/index.ts
new file mode 100644
index 00000000..d270275e
--- /dev/null
+++ b/packages/components/src/basic/radio-group/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomOption from './_custom-option.vue'
+import CustomOptionRaw from './_custom-option.vue?raw'
+import DescriptionDisabled from './_description-disabled.vue'
+import DescriptionDisabledRaw from './_description-disabled.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '带描述和禁用态',
+    component: DescriptionDisabled,
+    componentRaw: DescriptionDisabledRaw,
+  },
+  {
+    title: '自定义选项内容',
+    component: CustomOption,
+    componentRaw: CustomOptionRaw,
+  },
+]
diff --git a/packages/components/src/basic/scroll-area/README.md b/packages/components/src/basic/scroll-area/README.md
index 4d7e8094..3800e1d8 100644
--- a/packages/components/src/basic/scroll-area/README.md
+++ b/packages/components/src/basic/scroll-area/README.md
@@ -39,125 +39,6 @@
 | `scrollTo` | `(scrollNumber: number, behavior?: ScrollBehavior) => void` | 滚动到指定位置 |
 | `ref` | - | 内部 ScrollArea 引用 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaScrollArea class="h-64">
-    <div>长内容...</div>
-  </FaScrollArea>
-</template>
-```
-
-### 垂直滚动
-
-```vue
-<template>
-  <FaScrollArea class="h-64 w-96">
-    <div class="space-y-2">
-      <p v-for="i in 50" :key="i">滚动内容 {{ i }}</p>
-    </div>
-  </FaScrollArea>
-</template>
-```
-
-### 水平滚动
-
-```vue
-<template>
-  <FaScrollArea horizontal class="w-96">
-    <div class="flex gap-4">
-      <div v-for="i in 20" :key="i" class="w-32 h-32 bg-muted flex-center">
-        项目 {{ i }}
-      </div>
-    </div>
-  </FaScrollArea>
-</template>
-```
-
-### 隐藏滚动条
-
-```vue
-<template>
-  <FaScrollArea :scrollbar="false" class="h-64">
-    <div>内容（无滚动条）</div>
-  </FaScrollArea>
-</template>
-```
-
-### 渐变遮罩
-
-```vue
-<template>
-  <FaScrollArea :mask="true" class="h-64">
-    <div class="space-y-2">
-      <p v-for="i in 50" :key="i">内容 {{ i }}</p>
-    </div>
-  </FaScrollArea>
-</template>
-```
-
-### 自定义遮罩颜色
-
-```vue
-<template>
-  <FaScrollArea
-    :mask="true"
-    class="h-64"
-  >
-    <div>内容</div>
-  </FaScrollArea>
-</template>
-```
-
-### 监听滚动事件
-
-```vue
-<script setup lang="ts">
-function onScroll(event: Event) {
-  const target = event.target as HTMLElement
-  console.log('scrollTop:', target.scrollTop)
-}
-</script>
-
-<template>
-  <FaScrollArea class="h-64" @on-scroll="onScroll">
-    <div>滚动内容...</div>
-  </FaScrollArea>
-</template>
-```
-
-### 编程式滚动
-
-```vue
-<script setup lang="ts">
-const scrollRef = ref<InstanceType<typeof FaScrollArea>>()
-
-function scrollToTop() {
-  scrollRef.value?.scrollTo(0, 'smooth')
-}
-
-function scrollToBottom() {
-  scrollRef.value?.scrollTo(9999, 'smooth')
-}
-</script>
-
-<template>
-  <FaScrollArea ref="scrollRef" class="h-64">
-    <div class="space-y-2">
-      <p v-for="i in 50" :key="i">内容 {{ i }}</p>
-    </div>
-  </FaScrollArea>
-
-  <div class="flex gap-2 mt-4">
-    <FaButton @click="scrollToTop">回到顶部</FaButton>
-    <FaButton @click="scrollToBottom">滚动到底部</FaButton>
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **必须设置尺寸**：需要设置 `height` 或 `max-height` 等限制高度的样式才能触发滚动
diff --git a/packages/components/src/basic/scroll-area/_examples/_basic.vue b/packages/components/src/basic/scroll-area/_examples/_basic.vue
new file mode 100644
index 00000000..10e401a7
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_basic.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaScrollArea from '../index.vue'
+</script>
+
+<template>
+  <FaScrollArea class="border rounded-md h-72 w-48">
+    <div v-for="item in 20" :key="item" class="text-sm p-4">
+      {{ item }}
+    </div>
+  </FaScrollArea>
+</template>
diff --git a/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue b/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue
new file mode 100644
index 00000000..604f2156
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaScrollArea from '../index.vue'
+</script>
+
+<template>
+  <FaScrollArea :scrollbar="false" class="border rounded-md h-72 w-48">
+    <div v-for="item in 20" :key="item" class="text-sm p-4">
+      {{ item }}
+    </div>
+  </FaScrollArea>
+</template>
diff --git a/packages/components/src/basic/scroll-area/_examples/_horizontal.vue b/packages/components/src/basic/scroll-area/_examples/_horizontal.vue
new file mode 100644
index 00000000..dec9deec
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_horizontal.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaScrollArea from '../index.vue'
+</script>
+
+<template>
+  <FaScrollArea horizontal class="overscroll-contain border rounded-md w-96">
+    <div class="flex-center-start">
+      <div v-for="item in 20" :key="item" class="text-sm flex-center shrink-0 h-16 w-16">
+        {{ item }}
+      </div>
+    </div>
+  </FaScrollArea>
+</template>
diff --git a/packages/components/src/basic/scroll-area/_examples/_mask.vue b/packages/components/src/basic/scroll-area/_examples/_mask.vue
new file mode 100644
index 00000000..ef3440e5
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_mask.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaScrollArea from '../index.vue'
+</script>
+
+<template>
+  <FaScrollArea mask class="border rounded-md h-72 w-48">
+    <div v-for="item in 20" :key="item" class="text-sm p-4">
+      {{ item }}
+    </div>
+  </FaScrollArea>
+</template>
diff --git a/packages/components/src/basic/scroll-area/_examples/index.ts b/packages/components/src/basic/scroll-area/_examples/index.ts
new file mode 100644
index 00000000..3776a12a
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import HiddenScrollbar from './_hidden-scrollbar.vue'
+import HiddenScrollbarRaw from './_hidden-scrollbar.vue?raw'
+import Horizontal from './_horizontal.vue'
+import HorizontalRaw from './_horizontal.vue?raw'
+import Mask from './_mask.vue'
+import MaskRaw from './_mask.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '水平滚动',
+    component: Horizontal,
+    componentRaw: HorizontalRaw,
+  },
+  {
+    title: '隐藏滚动条',
+    component: HiddenScrollbar,
+    componentRaw: HiddenScrollbarRaw,
+  },
+  {
+    title: '遮罩',
+    component: Mask,
+    componentRaw: MaskRaw,
+  },
+]
diff --git a/packages/components/src/basic/search-bar/README.md b/packages/components/src/basic/search-bar/README.md
index fc67cdb6..a0c00497 100644
--- a/packages/components/src/basic/search-bar/README.md
+++ b/packages/components/src/basic/search-bar/README.md
@@ -30,220 +30,6 @@
 |--------|------|------|
 | `toggle` | `value: boolean` | 折叠状态变化时触发 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const fold = ref(true)
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold">
-    <template #default="{ fold, toggle }">
-      <div class="flex gap-4">
-        <FaInput placeholder="关键词" />
-        <FaButton>搜索</FaButton>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 基础搜索栏
-
-```vue
-<script setup lang="ts">
-const fold = ref(true)
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold">
-    <template #default>
-      <div class="flex flex-wrap gap-4">
-        <FaInput placeholder="用户名" class="w-48" />
-        <FaInput placeholder="邮箱" class="w-48" />
-        <FaSelect placeholder="状态" :options="[]" class="w-48" />
-        <div class="flex gap-2">
-          <FaButton>搜索</FaButton>
-          <FaButton variant="outline">重置</FaButton>
-        </div>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 多行筛选表单
-
-```vue
-<script setup lang="ts">
-const fold = ref(true)
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold">
-    <template #default>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <FaInput label="用户名" placeholder="请输入用户名" />
-        <FaInput label="手机号" placeholder="请输入手机号" />
-        <FaInput label="邮箱" placeholder="请输入邮箱" />
-        <FaSelect label="部门" :options="[]" placeholder="请选择部门" />
-        <FaSelect label="角色" :options="[]" placeholder="请选择角色" />
-        <FaSelect label="状态" :options="[]" placeholder="请选择状态" />
-        <FaInput label="创建时间" type="date" />
-        <FaInput label="更新时间" type="date" />
-      </div>
-      <div class="flex gap-2 mt-4">
-        <FaButton>搜索</FaButton>
-        <FaButton variant="outline">重置</FaButton>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 隐藏折叠按钮
-
-```vue
-<template>
-  <FaSearchBar :show-toggle="false">
-    <template #default>
-      <div class="flex gap-4">
-        <FaInput placeholder="搜索关键词" class="flex-1" />
-        <FaButton>搜索</FaButton>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 带背景色
-
-```vue
-<template>
-  <FaSearchBar background>
-    <template #default>
-      <div class="flex gap-4">
-        <FaInput placeholder="关键词" />
-        <FaButton>搜索</FaButton>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 监听折叠状态
-
-```vue
-<script setup lang="ts">
-const fold = ref(true)
-
-function handleToggle(value: boolean) {
-  console.log('折叠状态:', value)
-  // 可以根据折叠状态做其他操作
-}
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold" @toggle="handleToggle">
-    <template #default>
-      <div class="flex gap-4">
-        <FaInput placeholder="关键词" />
-        <FaButton>搜索</FaButton>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
-### 列表页面搜索栏
-
-```vue
-<script setup lang="ts">
-import { useLoading } from '@/composables'
-
-const fold = ref(true)
-const searchForm = ref({
-  keyword: '',
-  status: '',
-  dateRange: [],
-})
-
-const { loading, startLoading, stopLoading } = useLoading()
-
-function handleSearch() {
-  startLoading()
-  // 调用 API 获取数据
-  setTimeout(stopLoading, 1000)
-}
-
-function handleReset() {
-  searchForm.value = {
-    keyword: '',
-    status: '',
-    dateRange: [],
-  }
-  handleSearch()
-}
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold">
-    <template #default>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <FaInput v-model="searchForm.keyword" placeholder="关键词" />
-        <FaSelect v-model="searchForm.status" :options="[
-          { label: '启用', value: '1' },
-          { label: '禁用', value: '0' }
-        ]" placeholder="状态" />
-        <div class="flex gap-2">
-          <FaButton :loading @click="handleSearch">搜索</FaButton>
-          <FaButton variant="outline" @click="handleReset">重置</FaButton>
-        </div>
-      </div>
-    </template>
-  </FaSearchBar>
-  
-  <!-- 列表内容 -->
-  <FaPageMain title="数据列表">
-    <!-- 表格内容 -->
-  </FaPageMain>
-</template>
-```
-
-### 高级筛选
-
-```vue
-<script setup lang="ts">
-const fold = ref(true)
-const showAdvanced = ref(false)
-</script>
-
-<template>
-  <FaSearchBar v-model:fold="fold">
-    <template #default>
-      <div class="space-y-4">
-        <!-- 基础筛选 -->
-        <div class="flex gap-4">
-          <FaInput placeholder="关键词搜索" class="flex-1" />
-          <FaButton>搜索</FaButton>
-        </div>
-        
-        <!-- 高级筛选 -->
-        <div v-if="!fold" class="grid grid-cols-4 gap-4 pt-4 border-t">
-          <FaInput label="创建时间" type="date" />
-          <FaInput label="更新时间" type="date" />
-          <FaSelect label="分类" :options="[]" />
-          <FaSelect label="标签" :options="[]" />
-        </div>
-      </div>
-    </template>
-  </FaSearchBar>
-</template>
-```
-
 ## 注意事项
 
 1. **折叠内容**：当 `fold` 为 `true` 时，内容区域会被折叠（通过 slot 控制显示逻辑）
diff --git a/packages/components/src/basic/search-bar/_examples/_background.vue b/packages/components/src/basic/search-bar/_examples/_background.vue
new file mode 100644
index 00000000..0b50cb4a
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_background.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaSearchBar from '../index.vue'
+
+const form = reactive({
+  keyword: '',
+  type: 'all',
+  creator: '',
+  channel: 'all',
+  visibility: 'all',
+  reviewer: '',
+})
+
+const typeOptions = [
+  { label: '全部类型', value: 'all' },
+  { label: '公告', value: 'notice' },
+  { label: '消息', value: 'message' },
+]
+
+const channelOptions = [
+  { label: '全部渠道', value: 'all' },
+  { label: '站内', value: 'site' },
+  { label: '邮件', value: 'email' },
+  { label: '短信', value: 'sms' },
+]
+
+const visibilityOptions = [
+  { label: '全部范围', value: 'all' },
+  { label: '公开', value: 'public' },
+  { label: '内部', value: 'internal' },
+  { label: '指定用户', value: 'specific' },
+]
+</script>
+
+<template>
+  <FaSearchBar background>
+    <template #default="{ fold }">
+      <div class="gap-3 grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(350px,1fr))]">
+        <FaInput v-model="form.keyword" placeholder="搜索标题" class="w-full" />
+        <FaSelect v-model="form.type" :options="typeOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.creator" placeholder="创建人" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.channel" :options="channelOptions" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.visibility" :options="visibilityOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.reviewer" placeholder="审核人" class="w-full" />
+        <div class="flex gap-2 col-end--1 justify-end">
+          <FaButton>查询</FaButton>
+          <FaButton variant="outline">
+            重置
+          </FaButton>
+        </div>
+      </div>
+    </template>
+  </FaSearchBar>
+</template>
diff --git a/packages/components/src/basic/search-bar/_examples/_basic.vue b/packages/components/src/basic/search-bar/_examples/_basic.vue
new file mode 100644
index 00000000..e32515a0
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_basic.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaSearchBar from '../index.vue'
+
+const form = reactive({
+  keyword: '',
+  status: 'all',
+  department: '',
+  role: 'all',
+  source: 'all',
+  creator: '',
+})
+
+const statusOptions = [
+  { label: '全部状态', value: 'all' },
+  { label: '启用', value: 'enabled' },
+  { label: '禁用', value: 'disabled' },
+]
+
+const roleOptions = [
+  { label: '全部角色', value: 'all' },
+  { label: '管理员', value: 'admin' },
+  { label: '运营', value: 'operator' },
+  { label: '访客', value: 'guest' },
+]
+
+const sourceOptions = [
+  { label: '全部来源', value: 'all' },
+  { label: '后台创建', value: 'admin' },
+  { label: '用户注册', value: 'register' },
+  { label: '批量导入', value: 'import' },
+]
+</script>
+
+<template>
+  <FaSearchBar>
+    <template #default="{ fold }">
+      <div class="gap-3 grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(350px,1fr))]">
+        <FaInput v-model="form.keyword" placeholder="搜索用户名" class="w-full" />
+        <FaSelect v-model="form.status" :options="statusOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.department" placeholder="部门" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.role" :options="roleOptions" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.source" :options="sourceOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.creator" placeholder="创建人" class="w-full" />
+        <div class="flex gap-2 col-end--1 justify-end">
+          <FaButton>查询</FaButton>
+          <FaButton variant="outline">
+            重置
+          </FaButton>
+        </div>
+      </div>
+    </template>
+  </FaSearchBar>
+</template>
diff --git a/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue b/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue
new file mode 100644
index 00000000..910e0969
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaSearchBar from '../index.vue'
+
+const form = reactive({
+  keyword: '',
+  status: 'all',
+  tag: '',
+  column: 'all',
+  author: '',
+  reviewer: '',
+  publishTime: 'all',
+})
+
+const statusOptions = [
+  { label: '全部状态', value: 'all' },
+  { label: '已发布', value: 'published' },
+  { label: '草稿', value: 'draft' },
+]
+
+const columnOptions = [
+  { label: '全部栏目', value: 'all' },
+  { label: '产品动态', value: 'product' },
+  { label: '帮助中心', value: 'help' },
+  { label: '活动公告', value: 'campaign' },
+]
+
+const publishTimeOptions = [
+  { label: '发布时间', value: 'all' },
+  { label: '今天', value: 'today' },
+  { label: '近 7 天', value: 'week' },
+  { label: '近 30 天', value: 'month' },
+]
+</script>
+
+<template>
+  <FaSearchBar :show-toggle="false">
+    <template #default="{ fold, toggle }">
+      <div class="gap-3 grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(350px,1fr))]">
+        <FaInput v-model="form.keyword" placeholder="搜索文章" class="w-full" />
+        <FaSelect v-model="form.status" :options="statusOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.tag" placeholder="标签" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.column" :options="columnOptions" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.author" placeholder="作者" class="w-full" />
+        <FaInput v-show="!fold" v-model="form.reviewer" placeholder="审核人" class="w-full" />
+        <FaSelect v-show="!fold" v-model="form.publishTime" :options="publishTimeOptions" class="w-full" />
+        <div class="flex gap-2 col-end--1 justify-end">
+          <FaButton>查询</FaButton>
+          <FaButton variant="outline">
+            重置
+          </FaButton>
+          <FaButton variant="ghost" @click="toggle">
+            {{ fold ? '展开' : '收起' }}
+            <FaIcon :name="fold ? 'i-lucide:chevron-down' : 'i-lucide:chevron-up'" />
+          </FaButton>
+        </div>
+      </div>
+    </template>
+  </FaSearchBar>
+</template>
diff --git a/packages/components/src/basic/search-bar/_examples/_expanded.vue b/packages/components/src/basic/search-bar/_examples/_expanded.vue
new file mode 100644
index 00000000..019d4504
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_expanded.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { reactive, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaSearchBar from '../index.vue'
+
+const form = reactive({
+  keyword: '',
+  status: 'all',
+  owner: '',
+  priority: 'all',
+  category: 'all',
+  project: '',
+  participant: '',
+})
+
+const fold = shallowRef(false)
+
+const statusOptions = [
+  { label: '全部状态', value: 'all' },
+  { label: '待处理', value: 'pending' },
+  { label: '已完成', value: 'done' },
+]
+
+const priorityOptions = [
+  { label: '全部优先级', value: 'all' },
+  { label: '高', value: 'high' },
+  { label: '中', value: 'medium' },
+  { label: '低', value: 'low' },
+]
+
+const categoryOptions = [
+  { label: '全部分类', value: 'all' },
+  { label: '需求', value: 'feature' },
+  { label: '缺陷', value: 'bug' },
+  { label: '优化', value: 'improvement' },
+]
+</script>
+
+<template>
+  <FaSearchBar v-model:fold="fold">
+    <template #default="{ fold: isFold }">
+      <div class="gap-3 grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(350px,1fr))]">
+        <FaInput v-model="form.keyword" placeholder="搜索任务" class="w-full" />
+        <FaSelect v-model="form.status" :options="statusOptions" class="w-full" />
+        <FaInput v-show="!isFold" v-model="form.owner" placeholder="负责人" class="w-full" />
+        <FaSelect v-show="!isFold" v-model="form.priority" :options="priorityOptions" class="w-full" />
+        <FaSelect v-show="!isFold" v-model="form.category" :options="categoryOptions" class="w-full" />
+        <FaInput v-show="!isFold" v-model="form.project" placeholder="所属项目" class="w-full" />
+        <FaInput v-show="!isFold" v-model="form.participant" placeholder="参与人" class="w-full" />
+        <div class="flex gap-2 col-end--1 justify-end">
+          <FaButton>查询</FaButton>
+          <FaButton variant="outline">
+            重置
+          </FaButton>
+        </div>
+      </div>
+    </template>
+  </FaSearchBar>
+</template>
diff --git a/packages/components/src/basic/search-bar/_examples/index.ts b/packages/components/src/basic/search-bar/_examples/index.ts
new file mode 100644
index 00000000..71798979
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/index.ts
@@ -0,0 +1,31 @@
+import Background from './_background.vue'
+import BackgroundRaw from './_background.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomTrigger from './_custom-trigger.vue'
+import CustomTriggerRaw from './_custom-trigger.vue?raw'
+import Expanded from './_expanded.vue'
+import ExpandedRaw from './_expanded.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '默认展开',
+    component: Expanded,
+    componentRaw: ExpandedRaw,
+  },
+  {
+    title: '背景',
+    component: Background,
+    componentRaw: BackgroundRaw,
+  },
+  {
+    title: '自定义触发按钮',
+    component: CustomTrigger,
+    componentRaw: CustomTriggerRaw,
+  },
+]
diff --git a/packages/components/src/basic/select/README.md b/packages/components/src/basic/select/README.md
index ae78b080..44325dbe 100644
--- a/packages/components/src/basic/select/README.md
+++ b/packages/components/src/basic/select/README.md
@@ -46,172 +46,6 @@ interface GroupOption {
 |--------|------|----------|
 | `change` | 选项变化时触发 | `value: AcceptableValue \| undefined` |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const options = [
-  { label: '选项 1', value: '1' },
-  { label: '选项 2', value: '2' },
-  { label: '选项 3', value: '3' },
-]
-</script>
-
-<template>
-  <FaSelect v-model="value" :options placeholder="请选择..." />
-</template>
-```
-
-### 基础单选
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const options = [
-  { label: '北京', value: 'beijing' },
-  { label: '上海', value: 'shanghai' },
-  { label: '广州', value: 'guangzhou' },
-  { label: '深圳', value: 'shenzhen' },
-]
-</script>
-
-<template>
-  <FaSelect v-model="value" :options placeholder="选择城市" />
-</template>
-```
-
-### 禁用选项
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const options = [
-  { label: '选项 1', value: '1' },
-  { label: '选项 2', value: '2', disabled: true },
-  { label: '选项 3', value: '3' },
-]
-</script>
-
-<template>
-  <FaSelect v-model="value" :options placeholder="请选择" />
-</template>
-```
-
-### 分组选项
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const options = [
-  {
-    label: '热门城市',
-    options: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-      { label: '广州', value: 'guangzhou' },
-    ],
-  },
-  {
-    label: '其他城市',
-    options: [
-      { label: '成都', value: 'chengdu' },
-      { label: '杭州', value: 'hangzhou' },
-      { label: '武汉', value: 'wuhan' },
-    ],
-  },
-]
-</script>
-
-<template>
-  <FaSelect v-model="value" :options placeholder="选择城市" />
-</template>
-```
-
-### 变化事件
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const options = [
-  { label: '选项 1', value: '1' },
-  { label: '选项 2', value: '2' },
-  { label: '选项 3', value: '3' },
-]
-
-function handleChange(value) {
-  console.log('选中值变化:', value)
-}
-</script>
-
-<template>
-  <FaSelect v-model="value" :options placeholder="请选择" @change="handleChange" />
-</template>
-```
-
-### 定位模式
-
-```vue
-<script setup lang="ts">
-const popperValue = ref('2')
-const itemAlignedValue = ref('2')
-
-const options = [
-  { label: '选项 1', value: '1' },
-  { label: '选项 2', value: '2' },
-  { label: '选项 3', value: '3' },
-]
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <FaSelect v-model="popperValue" :options="options" position="popper" />
-    <FaSelect v-model="itemAlignedValue" :options="options" position="item-aligned" />
-  </div>
-</template>
-```
-
-### 禁用选择器
-
-```vue
-<template>
-  <FaSelect v-model="value" :options disabled />
-</template>
-```
-
-### 表单中使用
-
-```vue
-<script setup lang="ts">
-const form = reactive({
-  city: '',
-  district: '',
-})
-
-const cities = [
-  { label: '北京', value: 'beijing' },
-  { label: '上海', value: 'shanghai' },
-  { label: '广州', value: 'guangzhou' },
-]
-</script>
-
-<template>
-  <form>
-    <div class="flex flex-col gap-4">
-      <FaSelect v-model="form.city" :options="cities" placeholder="选择城市" />
-      <FaSelect v-model="form.district" :options="districts" placeholder="选择区域" :disabled="!form.city" />
-    </div>
-  </form>
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/packages/components/src/basic/select/_examples/_basic.vue b/packages/components/src/basic/select/_examples/_basic.vue
new file mode 100644
index 00000000..04be5446
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_basic.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSelect from '../index.vue'
+
+const select = ref('1')
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+]
+</script>
+
+<template>
+  <FaSelect v-model="select" :options="options" />
+</template>
diff --git a/packages/components/src/basic/select/_examples/_disabled.vue b/packages/components/src/basic/select/_examples/_disabled.vue
new file mode 100644
index 00000000..31da9754
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_disabled.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSelect from '../index.vue'
+
+const disabledSelect = ref('1')
+const optionDisabledSelect = ref('1')
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2', disabled: true },
+  { label: 'Option 3', value: '3' },
+]
+</script>
+
+<template>
+  <div class="space-y-2">
+    <FaSelect v-model="disabledSelect" :options="options" disabled />
+    <FaSelect v-model="optionDisabledSelect" :options="options" />
+  </div>
+</template>
diff --git a/packages/components/src/basic/select/_examples/_group.vue b/packages/components/src/basic/select/_examples/_group.vue
new file mode 100644
index 00000000..b5c96d36
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_group.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSelect from '../index.vue'
+
+const select = ref('1')
+
+const options = [
+  {
+    label: 'Group 1',
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+    ],
+  },
+  {
+    label: 'Group 2',
+    options: [
+      { label: 'Option 3', value: '3' },
+      { label: 'Option 4', value: '4' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <FaSelect v-model="select" :options="options" />
+</template>
diff --git a/packages/components/src/basic/select/_examples/_multiple.vue b/packages/components/src/basic/select/_examples/_multiple.vue
new file mode 100644
index 00000000..53af0d9e
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_multiple.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSelect from '../index.vue'
+
+const select = ref<unknown[]>([])
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+]
+</script>
+
+<template>
+  <FaSelect
+    v-model="select"
+    :options="options"
+    multiple
+  />
+</template>
diff --git a/apps/example/src/views/component_example/select/_demo4.vue b/packages/components/src/basic/select/_examples/_position.vue
similarity index 79%
rename from apps/example/src/views/component_example/select/_demo4.vue
rename to packages/components/src/basic/select/_examples/_position.vue
index 5ef2981b..059f2926 100644
--- a/apps/example/src/views/component_example/select/_demo4.vue
+++ b/packages/components/src/basic/select/_examples/_position.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSelect from '../index.vue'
+
 const popperValue = ref('2')
 const itemAlignedValue = ref('2')
 
diff --git a/packages/components/src/basic/select/_examples/index.ts b/packages/components/src/basic/select/_examples/index.ts
new file mode 100644
index 00000000..9e62adc6
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Group from './_group.vue'
+import GroupRaw from './_group.vue?raw'
+import Multiple from './_multiple.vue'
+import MultipleRaw from './_multiple.vue?raw'
+import Position from './_position.vue'
+import PositionRaw from './_position.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '组',
+    component: Group,
+    componentRaw: GroupRaw,
+  },
+  {
+    title: '多选',
+    component: Multiple,
+    componentRaw: MultipleRaw,
+  },
+  {
+    title: '定位模式',
+    component: Position,
+    componentRaw: PositionRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+]
diff --git a/packages/components/src/basic/slider/README.md b/packages/components/src/basic/slider/README.md
index c72b7397..ed3ee9c8 100644
--- a/packages/components/src/basic/slider/README.md
+++ b/packages/components/src/basic/slider/README.md
@@ -34,56 +34,6 @@
 |--------|------|----------|
 | update:modelValue | 值更新时触发 | `(value: number[])` |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref<number[]>([0])
-</script>
-
-<template>
-  <FaSlider v-model="value" />
-</template>
-```
-
-### 垂直滑块
-
-```vue
-<script setup lang="ts">
-const value = ref<number[]>([0])
-</script>
-
-<template>
-  <FaSlider v-model="value" orientation="vertical" />
-</template>
-```
-
-### 范围选择
-
-```vue
-<script setup lang="ts">
-const value = ref<number[]>([20, 60])
-</script>
-
-<template>
-  <FaSlider v-model="value" :min="0" :max="100" />
-</template>
-```
-
-### 自定义步长
-
-```vue
-<script setup lang="ts">
-const value = ref<number[]>([50])
-</script>
-
-<template>
-  <FaSlider v-model="value" :step="10" :min="0" :max="100" />
-</template>
-```
-
 ## 注意事项
 
 - 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/slider/_examples/_alignment.vue b/packages/components/src/basic/slider/_examples/_alignment.vue
new file mode 100644
index 00000000..92ec7d3a
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_alignment.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const containValue = ref<number[]>([30])
+const overflowValue = ref<number[]>([30])
+</script>
+
+<template>
+  <div class="space-y-6">
+    <FaSlider v-model="containValue" thumb-alignment="contain" />
+    <FaSlider v-model="overflowValue" thumb-alignment="overflow" />
+  </div>
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_basic.vue b/packages/components/src/basic/slider/_examples/_basic.vue
new file mode 100644
index 00000000..58ed7a99
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const value = ref<number[]>([30])
+</script>
+
+<template>
+  <FaSlider v-model="value" />
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_inverted.vue b/packages/components/src/basic/slider/_examples/_inverted.vue
new file mode 100644
index 00000000..b175cd7f
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_inverted.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const normalValue = ref<number[]>([30])
+const invertedValue = ref<number[]>([30])
+</script>
+
+<template>
+  <div class="space-y-6">
+    <FaSlider v-model="normalValue" />
+    <FaSlider v-model="invertedValue" inverted />
+  </div>
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_range.vue b/packages/components/src/basic/slider/_examples/_range.vue
new file mode 100644
index 00000000..1c8917fd
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_range.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const value = ref<number[]>([40])
+</script>
+
+<template>
+  <FaSlider v-model="value" :min="20" :max="80" />
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_step.vue b/packages/components/src/basic/slider/_examples/_step.vue
new file mode 100644
index 00000000..0c770ce9
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_step.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const value = ref<number[]>([50])
+</script>
+
+<template>
+  <FaSlider v-model="value" :step="10" />
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_tooltip.vue b/packages/components/src/basic/slider/_examples/_tooltip.vue
new file mode 100644
index 00000000..28fdbcf9
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_tooltip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const withTooltipValue = ref<number[]>([30])
+const withoutTooltipValue = ref<number[]>([70])
+</script>
+
+<template>
+  <div class="space-y-6">
+    <FaSlider v-model="withTooltipValue" />
+    <FaSlider v-model="withoutTooltipValue" :tooltip="false" />
+  </div>
+</template>
diff --git a/packages/components/src/basic/slider/_examples/_vertical.vue b/packages/components/src/basic/slider/_examples/_vertical.vue
new file mode 100644
index 00000000..de37fdb0
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_vertical.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSlider from '../index.vue'
+
+const value = ref<number[]>([30])
+</script>
+
+<template>
+  <FaSlider v-model="value" orientation="vertical" class="data-[orientation=vertical]:h-100" />
+</template>
diff --git a/packages/components/src/basic/slider/_examples/index.ts b/packages/components/src/basic/slider/_examples/index.ts
new file mode 100644
index 00000000..f4e4242a
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/index.ts
@@ -0,0 +1,52 @@
+import Alignment from './_alignment.vue'
+import AlignmentRaw from './_alignment.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Inverted from './_inverted.vue'
+import InvertedRaw from './_inverted.vue?raw'
+import Range from './_range.vue'
+import RangeRaw from './_range.vue?raw'
+import Step from './_step.vue'
+import StepRaw from './_step.vue?raw'
+import Tooltip from './_tooltip.vue'
+import TooltipRaw from './_tooltip.vue?raw'
+import Vertical from './_vertical.vue'
+import VerticalRaw from './_vertical.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '垂直',
+    component: Vertical,
+    componentRaw: VerticalRaw,
+  },
+  {
+    title: '反转',
+    component: Inverted,
+    componentRaw: InvertedRaw,
+  },
+  {
+    title: '最大值/最小值',
+    component: Range,
+    componentRaw: RangeRaw,
+  },
+  {
+    title: '步长',
+    component: Step,
+    componentRaw: StepRaw,
+  },
+  {
+    title: '对齐方式',
+    component: Alignment,
+    componentRaw: AlignmentRaw,
+  },
+  {
+    title: '提示',
+    component: Tooltip,
+    componentRaw: TooltipRaw,
+  },
+]
diff --git a/packages/components/src/basic/switch/README.md b/packages/components/src/basic/switch/README.md
index a12c7945..03754f4a 100644
--- a/packages/components/src/basic/switch/README.md
+++ b/packages/components/src/basic/switch/README.md
@@ -23,133 +23,6 @@
 
 通过 `v-model` 双向绑定，无需单独事件
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const enabled = ref(false)
-</script>
-
-<template>
-  <FaSwitch v-model="enabled" />
-</template>
-```
-
-### 基础开关
-
-```vue
-<script setup lang="ts">
-const enabled = ref(false)
-</script>
-
-<template>
-  <FaSwitch v-model="enabled" />
-</template>
-```
-
-### 带图标的开关
-
-```vue
-<script setup lang="ts">
-const enabled = ref(false)
-</script>
-
-<template>
-  <FaSwitch
-    v-model="enabled"
-    on-icon="i-lucide:sun"
-    off-icon="i-lucide:moon"
-  />
-</template>
-```
-
-### 禁用状态
-
-```vue
-<template>
-  <FaSwitch v-model="enabled" disabled />
-</template>
-```
-
-### 状态变化确认
-
-```vue
-<script setup lang="ts">
-import { useFaModal } from '@/ui/components/modal'
-
-const enabled = ref(false)
-
-async function beforeChange() {
-  return new Promise((resolve) => {
-    useFaModal().confirm({
-      title: '提示',
-      content: '确定要更改状态吗？',
-      onConfirm: () => resolve(true),
-      onCancel: () => resolve(false),
-    })
-  })
-}
-</script>
-
-<template>
-  <FaSwitch v-model="enabled" :before-change="beforeChange" />
-</template>
-```
-
-### 深色模式切换
-
-```vue
-<script setup lang="ts">
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get: () => colorMode.value === 'dark',
-  set: (val) => {
-    colorMode.value = val ? 'dark' : 'light'
-  },
-})
-</script>
-
-<template>
-  <FaSwitch
-    v-model="isDark"
-    on-icon="i-lucide:moon"
-    off-icon="i-lucide:sun"
-  />
-</template>
-```
-
-### 通知开关设置
-
-```vue
-<script setup lang="ts">
-const settings = reactive({
-  emailNotification: true,
-  smsNotification: false,
-  pushNotification: true,
-})
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="flex items-center justify-between">
-      <span>邮件通知</span>
-      <FaSwitch v-model="settings.emailNotification" />
-    </div>
-    <div class="flex items-center justify-between">
-      <span>短信通知</span>
-      <FaSwitch v-model="settings.smsNotification" />
-    </div>
-    <div class="flex items-center justify-between">
-      <span>推送通知</span>
-      <FaSwitch v-model="settings.pushNotification" />
-    </div>
-  </div>
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定，值为 boolean 类型
diff --git a/packages/components/src/basic/switch/_examples/_basic.vue b/packages/components/src/basic/switch/_examples/_basic.vue
new file mode 100644
index 00000000..9f8f5ba5
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSwitch from '../index.vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <FaSwitch v-model="checked" />
+</template>
diff --git a/packages/components/src/basic/switch/_examples/_callback.vue b/packages/components/src/basic/switch/_examples/_callback.vue
new file mode 100644
index 00000000..fa1a8cda
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_callback.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import { useModal } from '../../modal'
+import FaSwitch from '../index.vue'
+
+const checked = ref(false)
+const modal = useModal()
+
+function handleBeforeChange() {
+  return new Promise<boolean>((resolve) => {
+    modal.confirm({
+      title: '确认信息',
+      content: '确认要切换当前状态吗？',
+      onConfirm: () => {
+        resolve(true)
+      },
+      onCancel: () => {
+        resolve(false)
+      },
+    })
+  })
+}
+</script>
+
+<template>
+  <FaSwitch v-model="checked" :before-change="handleBeforeChange" />
+</template>
diff --git a/packages/components/src/basic/switch/_examples/_disabled.vue b/packages/components/src/basic/switch/_examples/_disabled.vue
new file mode 100644
index 00000000..c99bed4d
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_disabled.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSwitch from '../index.vue'
+
+const off = ref(false)
+const on = ref(true)
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <FaSwitch v-model="off" disabled />
+    <FaSwitch v-model="on" disabled />
+  </div>
+</template>
diff --git a/packages/components/src/basic/switch/_examples/_icon.vue b/packages/components/src/basic/switch/_examples/_icon.vue
new file mode 100644
index 00000000..6c6694a7
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_icon.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaSwitch from '../index.vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <FaSwitch v-model="checked" on-icon="ri:sun-line" off-icon="ri:moon-line" />
+</template>
diff --git a/packages/components/src/basic/switch/_examples/index.ts b/packages/components/src/basic/switch/_examples/index.ts
new file mode 100644
index 00000000..b0193580
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Callback from './_callback.vue'
+import CallbackRaw from './_callback.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '图标',
+    component: Icon,
+    componentRaw: IconRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '回调',
+    component: Callback,
+    componentRaw: CallbackRaw,
+  },
+]
diff --git a/packages/components/src/basic/tabs/README.md b/packages/components/src/basic/tabs/README.md
index a5bd7788..4e7157aa 100644
--- a/packages/components/src/basic/tabs/README.md
+++ b/packages/components/src/basic/tabs/README.md
@@ -32,183 +32,6 @@
 |--------|------|------|
 | `update:modelValue` | `value: string \| number` | 标签切换时触发 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('1')
-const list = [
-  { label: '标签一', value: '1' },
-  { label: '标签二', value: '2' },
-  { label: '标签三', value: '3' },
-]
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list>
-    <template #1>内容一</template>
-    <template #2>内容二</template>
-    <template #3>内容三</template>
-  </FaTabs>
-</template>
-```
-
-### 基础标签页
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('1')
-const list = [
-  { label: '基本信息', value: '1' },
-  { label: '详细信息', value: '2' },
-  { label: '其他信息', value: '3' },
-]
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list>
-    <template #1>
-      <p>基本信息内容...</p>
-    </template>
-    <template #2>
-      <p>详细信息内容...</p>
-    </template>
-    <template #3>
-      <p>其他信息内容...</p>
-    </template>
-  </FaTabs>
-</template>
-```
-
-### 带图标的标签
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('1')
-const list = [
-  { icon: 'i-lucide:user', label: '用户', value: '1' },
-  { icon: 'i-lucide:settings', label: '设置', value: '2' },
-  { icon: 'i-lucide:bell', label: '通知', value: '3' },
-]
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list>
-    <template #1>用户内容...</template>
-    <template #2>设置内容...</template>
-    <template #3>通知内容...</template>
-  </FaTabs>
-</template>
-```
-
-### 数字标签值
-
-```vue
-<script setup lang="ts">
-const activeTab = ref(1)
-const list = [
-  { label: '周一', value: 1 },
-  { label: '周二', value: 2 },
-  { label: '周三', value: 3 },
-]
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list>
-    <template #1>星期一的内容</template>
-    <template #2>星期二的内容</template>
-    <template #3>星期三的内容</template>
-  </FaTabs>
-</template>
-```
-
-### 自定义样式
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('1')
-const list = [
-  { label: '标签一', value: '1', class: 'w-32' },
-  { label: '标签二', value: '2', class: 'w-32' },
-]
-</script>
-
-<template>
-  <FaTabs 
-    v-model="activeTab" 
-    :list
-    class="w-full"
-    list-class="bg-muted rounded-lg p-1"
-    content-class="p-6"
-  >
-    <template #1>内容一</template>
-    <template #2>内容二</template>
-  </FaTabs>
-</template>
-```
-
-### 监听标签变化
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('1')
-const list = [
-  { label: '列表', value: '1' },
-  { label: '图表', value: '2' },
-]
-
-function handleTabChange(value: string) {
-  console.log('切换到:', value)
-  // 根据标签值加载不同数据
-}
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list @update:model-value="handleTabChange">
-    <template #1>列表内容...</template>
-    <template #2>图表内容...</template>
-  </FaTabs>
-</template>
-```
-
-### 表单中的标签切换
-
-```vue
-<script setup lang="ts">
-const activeTab = ref('basic')
-const list = [
-  { label: '基本信息', value: 'basic' },
-  { label: '账号安全', value: 'security' },
-  { label: '偏好设置', value: 'preference' },
-]
-</script>
-
-<template>
-  <FaTabs v-model="activeTab" :list>
-    <template #basic>
-      <form class="space-y-4">
-        <FaInput label="用户名" />
-        <FaInput label="邮箱" />
-      </form>
-    </template>
-    <template #security>
-      <form class="space-y-4">
-        <FaInput label="当前密码" type="password" />
-        <FaInput label="新密码" type="password" />
-      </form>
-    </template>
-    <template #preference>
-      <div class="space-y-4">
-        <FaSwitch label="邮件通知" />
-        <FaSwitch label="短信通知" />
-      </div>
-    </template>
-  </FaTabs>
-</template>
-```
-
 ## 注意事项
 
 1. **动态插槽**：内容插槽名对应标签的 `value` 值
diff --git a/packages/components/src/basic/tabs/_examples/_basic.vue b/packages/components/src/basic/tabs/_examples/_basic.vue
new file mode 100644
index 00000000..01c30ad6
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_basic.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaTabs from '../index.vue'
+
+const activeTab = ref('profile')
+
+const list = [
+  { label: '资料', value: 'profile' },
+  { label: '账号', value: 'account' },
+  { label: '通知', value: 'notice' },
+]
+</script>
+
+<template>
+  <FaTabs v-model="activeTab" :list="list" class="w-96">
+    <template #profile>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        这里展示用户基础资料。
+      </div>
+    </template>
+    <template #account>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        这里展示账号安全设置。
+      </div>
+    </template>
+    <template #notice>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        这里展示消息通知偏好。
+      </div>
+    </template>
+  </FaTabs>
+</template>
diff --git a/packages/components/src/basic/tabs/_examples/_custom-style.vue b/packages/components/src/basic/tabs/_examples/_custom-style.vue
new file mode 100644
index 00000000..bb215ae1
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_custom-style.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaTabs from '../index.vue'
+
+const activeTab = ref('overview')
+
+const list = [
+  { label: '总览', value: 'overview', class: 'rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground' },
+  { label: '趋势', value: 'trend', class: 'rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground' },
+  { label: '明细', value: 'detail', class: 'rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground' },
+]
+</script>
+
+<template>
+  <FaTabs
+    v-model="activeTab"
+    :list="list"
+    class="p-3 border rounded-lg w-96"
+    list-class="gap-2 rounded-md bg-transparent p-0"
+    content-class="rounded-md bg-muted/50 p-4 text-sm"
+  >
+    <template #overview>
+      当前数据总览。
+    </template>
+    <template #trend>
+      趋势分析内容。
+    </template>
+    <template #detail>
+      明细数据内容。
+    </template>
+  </FaTabs>
+</template>
diff --git a/packages/components/src/basic/tabs/_examples/_icon.vue b/packages/components/src/basic/tabs/_examples/_icon.vue
new file mode 100644
index 00000000..e3625200
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_icon.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { ref } from 'vue'
+import FaTabs from '../index.vue'
+
+const activeTab = ref('user')
+
+const list = [
+  { icon: 'i-lucide:user', label: '用户', value: 'user' },
+  { icon: 'i-lucide:settings', label: '设置', value: 'setting' },
+  { icon: 'i-lucide:bell', label: '通知', value: 'notice' },
+]
+</script>
+
+<template>
+  <FaTabs v-model="activeTab" :list="list" class="w-96">
+    <template #user>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        用户信息内容。
+      </div>
+    </template>
+    <template #setting>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        系统设置内容。
+      </div>
+    </template>
+    <template #notice>
+      <div class="text-sm p-4 rounded-md bg-muted/50">
+        通知消息内容。
+      </div>
+    </template>
+  </FaTabs>
+</template>
diff --git a/packages/components/src/basic/tabs/_examples/index.ts b/packages/components/src/basic/tabs/_examples/index.ts
new file mode 100644
index 00000000..10091636
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '图标',
+    component: Icon,
+    componentRaw: IconRaw,
+  },
+  {
+    title: '自定义样式',
+    component: CustomStyle,
+    componentRaw: CustomStyleRaw,
+  },
+]
diff --git a/packages/components/src/basic/textarea/README.md b/packages/components/src/basic/textarea/README.md
index 4314eea7..d6efbe4e 100644
--- a/packages/components/src/basic/textarea/README.md
+++ b/packages/components/src/basic/textarea/README.md
@@ -15,6 +15,7 @@
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | `align` | `'inline' \| 'block'` | `'inline'` | 前后缀对齐方式 |
+| `disabled` | `boolean` | `false` | 是否禁用文本域 |
 | `class` | `HTMLAttributes['class']` | - | 组件外层 CSS 类 |
 | `inputClass` | `HTMLAttributes['class']` | - | 文本域 CSS 类 |
 | `startClass` | `HTMLAttributes['class']` | - | 前缀区域 CSS 类 |
@@ -27,133 +28,6 @@
 | `start` | 文本域前缀内容 |
 | `end` | 文本域后缀内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <FaTextarea v-model="value" placeholder="请输入内容..." />
-</template>
-```
-
-### 基础文本域
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <FaTextarea v-model="value" placeholder="请输入描述..." rows="4" />
-</template>
-```
-
-### 带前缀
-
-```vue
-<template>
-  <FaTextarea v-model="value" placeholder="请输入内容">
-    <template #start>
-      <FaIcon name="i-lucide:message-square" />
-    </template>
-  </FaTextarea>
-</template>
-```
-
-### 带后缀
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-
-const charCount = computed(() => value.value?.length || 0)
-</script>
-
-<template>
-  <FaTextarea v-model="value" placeholder="请输入内容（最多 200 字）" rows="4">
-    <template #end>
-      <span class="text-sm text-muted-foreground">{{ charCount }}/200</span>
-    </template>
-  </FaTextarea>
-</template>
-```
-
-### 自定义高度
-
-```vue
-<template>
-  <FaTextarea v-model="value" rows="6" class="h-200" />
-</template>
-```
-
-### 表单中的使用
-
-```vue
-<script setup lang="ts">
-const form = reactive({
-  title: '',
-  content: '',
-})
-
-function handleSubmit() {
-  console.log('提交:', form)
-}
-</script>
-
-<template>
-  <form @submit.prevent="handleSubmit" class="flex flex-col gap-4">
-    <FaInput v-model="form.title" placeholder="标题" />
-    <FaTextarea v-model="form.content" placeholder="内容描述..." rows="5" />
-    <FaButton type="submit">提交</FaButton>
-  </form>
-</template>
-```
-
-### 字数限制
-
-```vue
-<script setup lang="ts">
-const value = ref('')
-const maxLength = 500
-
-const charCount = computed(() => value.value?.length || 0)
-const isOverLimit = computed(() => charCount.value > maxLength)
-</script>
-
-<template>
-  <div>
-    <FaTextarea
-      v-model="value"
-      :input-class="{ 'border-red-500': isOverLimit }"
-      placeholder="请输入内容..."
-      rows="5"
-    >
-      <template #end>
-        <span :class="['text-sm', isOverLimit ? 'text-red-500' : 'text-muted-foreground']">
-          {{ charCount }}/{{ maxLength }}
-        </span>
-      </template>
-    </FaTextarea>
-    <div v-if="isOverLimit" class="text-red-500 text-sm mt-1">
-      已超出字数限制
-    </div>
-  </div>
-</template>
-```
-
-### 禁用状态
-
-```vue
-<template>
-  <FaTextarea v-model="value" disabled placeholder="禁用状态" />
-</template>
-```
-
 ## 注意事项
 
 1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/packages/components/src/basic/textarea/_examples/_basic.vue b/packages/components/src/basic/textarea/_examples/_basic.vue
new file mode 100644
index 00000000..a9b8ac46
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaTextarea from '../index.vue'
+
+const value = shallowRef('')
+</script>
+
+<template>
+  <FaTextarea v-model="value" placeholder="请输入内容" class="w-96" />
+</template>
diff --git a/packages/components/src/basic/textarea/_examples/_disabled.vue b/packages/components/src/basic/textarea/_examples/_disabled.vue
new file mode 100644
index 00000000..b298688e
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaTextarea from '../index.vue'
+
+const value = shallowRef('这是一段不可编辑的文本内容。')
+</script>
+
+<template>
+  <FaTextarea v-model="value" disabled class="w-96" />
+</template>
diff --git a/apps/example/src/views/component_example/textarea/_demo2.vue b/packages/components/src/basic/textarea/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 50%
rename from apps/example/src/views/component_example/textarea/_demo2.vue
rename to packages/components/src/basic/textarea/_examples/_slot.vue
index b4405c96..593a4e80
--- a/apps/example/src/views/component_example/textarea/_demo2.vue
+++ b/packages/components/src/basic/textarea/_examples/_slot.vue
@@ -1,9 +1,22 @@
 <script setup lang="ts">
-const value = ref('')
+// 组件实际使用时无需手动导入，框架会自动导入
+import { shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaTextarea from '../index.vue'
+
+const value = shallowRef('')
 </script>
 
 <template>
-  <FaTextarea v-model="value" placeholder="console.log('Hello, world!');" align="block" start-class="justify-between" end-class="justify-between">
+  <FaTextarea
+    v-model="value"
+    placeholder="console.log('Hello, world!');"
+    align="block"
+    start-class="justify-between"
+    end-class="justify-between"
+    class="w-120"
+  >
     <template #start>
       <span>script.ts</span>
       <FaButton variant="ghost" size="icon" class="size-6">
diff --git a/packages/components/src/basic/textarea/_examples/index.ts b/packages/components/src/basic/textarea/_examples/index.ts
new file mode 100644
index 00000000..21c59688
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+]
diff --git a/packages/components/src/basic/textarea/index.vue b/packages/components/src/basic/textarea/index.vue
index 96f27d6a..45033570 100644
--- a/packages/components/src/basic/textarea/index.vue
+++ b/packages/components/src/basic/textarea/index.vue
@@ -11,6 +11,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<{
   align?: 'inline' | 'block'
+  disabled?: boolean
   class?: HTMLAttributes['class']
   inputClass?: HTMLAttributes['class']
   startClass?: HTMLAttributes['class']
diff --git a/packages/components/src/basic/toast/README.md b/packages/components/src/basic/toast/README.md
index 0fe636a7..ceb92cb9 100644
--- a/packages/components/src/basic/toast/README.md
+++ b/packages/components/src/basic/toast/README.md
@@ -29,180 +29,6 @@
 | `useFaToast().loading(message)` | 加载提示 |
 | `useFaToast().promise(promise, options)` | Promise 提示 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<script setup lang="ts">
-function showToast() {
-  useFaToast().success('操作成功！')
-}
-</script>
-
-<template>
-  <FaButton @click="showToast">显示成功提示</FaButton>
-  <!-- 在应用根组件中添加 -->
-  <FaToast />
-</template>
-```
-
-### 成功提示
-
-```vue
-<script setup lang="ts">
-function handleSuccess() {
-  useFaToast().success('保存成功！')
-}
-</script>
-
-<template>
-  <FaButton @click="handleSuccess">保存</FaButton>
-</template>
-```
-
-### 错误提示
-
-```vue
-<script setup lang="ts">
-function handleError() {
-  useFaToast().error('操作失败，请稍后重试')
-}
-</script>
-
-<template>
-  <FaButton @click="handleError">触发错误</FaButton>
-</template>
-```
-
-### 警告提示
-
-```vue
-<script setup lang="ts">
-function handleWarning() {
-  useFaToast().warning('数据即将过期，请及时更新')
-}
-</script>
-
-<template>
-  <FaButton @click="handleWarning">警告提示</FaButton>
-</template>
-```
-
-### 信息提示
-
-```vue
-<script setup lang="ts">
-function handleInfo() {
-  useFaToast().info('系统将于今晚 22:00 进行维护')
-}
-</script>
-
-<template>
-  <FaButton @click="handleInfo">信息提示</FaButton>
-</template>
-```
-
-### 加载提示
-
-```vue
-<script setup lang="ts">
-function handleLoading() {
-  const loadingToast = useFaToast().loading('正在处理...')
-
-  setTimeout(() => {
-    useFaToast().dismiss(loadingToast)
-    useFaToast().success('处理完成！')
-  }, 2000)
-}
-</script>
-
-<template>
-  <FaButton @click="handleLoading">加载提示</FaButton>
-</template>
-```
-
-### Promise 提示
-
-```vue
-<script setup lang="ts">
-async function handlePromise() {
-  useFaToast().promise(
-    new Promise((resolve) => {
-      setTimeout(resolve, 2000)
-    }),
-    {
-      loading: '正在保存...',
-      success: '保存成功！',
-      error: '保存失败',
-    }
-  )
-}
-</script>
-
-<template>
-  <FaButton @click="handlePromise">Promise 提示</FaButton>
-</template>
-```
-
-### 带描述的提示
-
-```vue
-<script setup lang="ts">
-function handleDescription() {
-  useFaToast().success('上传成功', {
-    description: '文件已上传到服务器',
-  })
-}
-</script>
-
-<template>
-  <FaButton @click="handleDescription">带描述的提示</FaButton>
-</template>
-```
-
-### 带操作的提示
-
-```vue
-<script setup lang="ts">
-function handleAction() {
-  useFaToast().success('删除成功', {
-    action: {
-      label: '撤销',
-      onClick: () => {
-        // 撤销操作
-        console.log('撤销删除')
-      },
-    },
-  })
-}
-</script>
-
-<template>
-  <FaButton @click="handleAction">带操作的提示</FaButton>
-</template>
-```
-
-### 多个提示
-
-```vue
-<script setup lang="ts">
-function handleMultiple() {
-  useFaToast().success('第一条消息')
-  setTimeout(() => {
-    useFaToast().error('第二条消息')
-  }, 500)
-  setTimeout(() => {
-    useFaToast().warning('第三条消息')
-  }, 1000)
-}
-</script>
-
-<template>
-  <FaButton @click="handleMultiple">显示多个提示</FaButton>
-</template>
-```
-
 ## 注意事项
 
 1. **全局组件**：`<FaToast />` 需要在应用根组件中添加一次
diff --git a/packages/components/src/basic/toast/_examples/_action.vue b/packages/components/src/basic/toast/_examples/_action.vue
new file mode 100644
index 00000000..e52c1606
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/_action.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../index'
+
+const toast = useToast()
+
+function showToast() {
+  toast('文件已移入回收站', {
+    description: '你可以在 30 天内恢复该文件',
+    action: {
+      label: '撤销',
+      onClick: () => {
+        toast.success('已撤销删除')
+      },
+    },
+  })
+}
+</script>
+
+<template>
+  <FaButton @click="showToast">
+    显示操作按钮
+  </FaButton>
+</template>
diff --git a/packages/components/src/basic/toast/_examples/_basic.vue b/packages/components/src/basic/toast/_examples/_basic.vue
new file mode 100644
index 00000000..98707fab
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/_basic.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../index'
+
+const toast = useToast()
+
+function showDefault() {
+  toast('Fantastic-admin 杰出的管理系统框架', {
+    description: '开箱即用，提供舒适开发体验',
+  })
+}
+
+function showSuccess() {
+  toast.success('保存成功', {
+    description: '内容已同步到服务器',
+  })
+}
+
+function showError() {
+  toast.error('保存失败', {
+    description: '请检查网络后重试',
+  })
+}
+
+function showInfo() {
+  toast.info('系统通知', {
+    description: '今晚 22:00 将进行例行维护',
+  })
+}
+
+function showWarning() {
+  toast.warning('注意事项', {
+    description: '离开页面前请确认内容已保存',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaButton @click="showDefault">
+      默认
+    </FaButton>
+    <FaButton @click="showSuccess">
+      成功
+    </FaButton>
+    <FaButton @click="showError">
+      错误
+    </FaButton>
+    <FaButton @click="showInfo">
+      信息
+    </FaButton>
+    <FaButton @click="showWarning">
+      警告
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/toast/_examples/_loading.vue b/packages/components/src/basic/toast/_examples/_loading.vue
new file mode 100644
index 00000000..669feab0
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/_loading.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import { useToast } from '../index'
+
+const toast = useToast()
+
+function showLoading() {
+  const loading = toast.loading('正在处理...', {
+    duration: Infinity,
+  })
+
+  setTimeout(() => {
+    toast.dismiss(loading)
+    toast.success('处理完成')
+  }, 2000)
+}
+
+function showPromise() {
+  toast.promise(() => new Promise((resolve) => {
+    setTimeout(resolve, 2000)
+  }), {
+    loading: '正在加载数据',
+    success: () => '数据加载完成',
+    error: () => '数据加载失败',
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaButton @click="showLoading">
+      加载状态
+    </FaButton>
+    <FaButton @click="showPromise">
+      Promise 状态
+    </FaButton>
+  </div>
+</template>
diff --git a/packages/components/src/basic/toast/_examples/index.ts b/packages/components/src/basic/toast/_examples/index.ts
new file mode 100644
index 00000000..7ce673d5
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/index.ts
@@ -0,0 +1,24 @@
+import Action from './_action.vue'
+import ActionRaw from './_action.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Loading from './_loading.vue'
+import LoadingRaw from './_loading.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '操作按钮',
+    component: Action,
+    componentRaw: ActionRaw,
+  },
+  {
+    title: '加载状态',
+    component: Loading,
+    componentRaw: LoadingRaw,
+  },
+]
diff --git a/packages/components/src/basic/tooltip/README.md b/packages/components/src/basic/tooltip/README.md
index 8961423d..75348774 100644
--- a/packages/components/src/basic/tooltip/README.md
+++ b/packages/components/src/basic/tooltip/README.md
@@ -28,117 +28,6 @@
 | `default` | 触发元素（必填） |
 | `content` | 自定义提示内容 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaTooltip text="这是提示文字">
-    <FaButton>悬停显示提示</FaButton>
-  </FaTooltip>
-</template>
-```
-
-### 基础提示
-
-```vue
-<template>
-  <FaTooltip text="这是一个简单的提示">
-    <FaButton>悬停我</FaButton>
-  </FaTooltip>
-</template>
-```
-
-### 不同弹出方向
-
-```vue
-<template>
-  <div class="flex gap-4">
-    <FaTooltip text="上方提示" side="top">
-      <FaButton>上方</FaButton>
-    </FaTooltip>
-    <FaTooltip text="下方提示" side="bottom">
-      <FaButton>下方</FaButton>
-    </FaTooltip>
-    <FaTooltip text="左侧提示" side="left">
-      <FaButton>左侧</FaButton>
-    </FaTooltip>
-    <FaTooltip text="右侧提示" side="right">
-      <FaButton>右侧</FaButton>
-    </FaTooltip>
-  </div>
-</template>
-```
-
-### 自定义延迟
-
-```vue
-<template>
-  <FaTooltip text="快速显示" :delay="100">
-    <FaButton>快速提示</FaButton>
-  </FaTooltip>
-  <FaTooltip text="慢速显示" :delay="1000">
-    <FaButton>慢速提示</FaButton>
-  </FaTooltip>
-</template>
-```
-
-### 自定义内容
-
-```vue
-<template>
-  <FaTooltip>
-    <FaIcon name="i-lucide:info" />
-    <template #content>
-      <div class="space-y-1">
-        <p class="font-medium">提示标题</p>
-        <p class="text-xs text-muted-foreground">这是自定义的提示内容，可以包含多行文字。</p>
-      </div>
-    </template>
-  </FaTooltip>
-</template>
-```
-
-### 禁用提示
-
-```vue
-<script setup lang="ts">
-const showTooltip = ref(false)
-</script>
-
-<template>
-  <FaTooltip text="提示内容" :disabled="!showTooltip">
-    <FaButton>条件提示</FaButton>
-  </FaTooltip>
-</template>
-```
-
-### 图标提示
-
-```vue
-<template>
-  <FaTooltip text="点击查看更多信息">
-    <FaIcon name="i-lucide:help-circle" class="cursor-help" />
-  </FaTooltip>
-</template>
-```
-
-### 表单字段提示
-
-```vue
-<template>
-  <FaLabel label="密码">
-    <div class="flex items-center gap-2">
-      <FaInput v-model="password" type="password" />
-      <FaTooltip text="至少 8 位，包含字母和数字">
-        <FaIcon name="i-lucide:help-circle" class="text-muted-foreground cursor-help" />
-      </FaTooltip>
-    </div>
-  </FaLabel>
-</template>
-```
-
 ## 注意事项
 
 1. **必需插槽**：必须提供 `default` slot 作为触发元素
diff --git a/packages/components/src/basic/tooltip/_examples/_align.vue b/packages/components/src/basic/tooltip/_examples/_align.vue
new file mode 100644
index 00000000..d499f7b0
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_align.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaTooltip from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaTooltip text="起始对齐" align="start">
+      <FaButton variant="ghost">
+        Start
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="居中对齐" align="center">
+      <FaButton variant="ghost">
+        Center
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="末端对齐" align="end">
+      <FaButton variant="ghost">
+        End
+      </FaButton>
+    </FaTooltip>
+  </div>
+</template>
diff --git a/packages/components/src/basic/tooltip/_examples/_basic.vue b/packages/components/src/basic/tooltip/_examples/_basic.vue
new file mode 100644
index 00000000..fe9aa329
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaIcon from '../../icon/index.vue'
+import FaTooltip from '../index.vue'
+</script>
+
+<template>
+  <FaTooltip text="注意噢！">
+    <FaIcon name="i-ri:question-line" class="text-lg cursor-help" />
+  </FaTooltip>
+</template>
diff --git a/packages/components/src/basic/tooltip/_examples/_delay.vue b/packages/components/src/basic/tooltip/_examples/_delay.vue
new file mode 100644
index 00000000..4a486412
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_delay.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaTooltip from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaTooltip text="100ms 后显示" :delay="100">
+      <FaButton variant="ghost">
+        快速显示
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="1000ms 后显示" :delay="1000">
+      <FaButton variant="ghost">
+        延迟显示
+      </FaButton>
+    </FaTooltip>
+  </div>
+</template>
diff --git a/packages/components/src/basic/tooltip/_examples/_disabled.vue b/packages/components/src/basic/tooltip/_examples/_disabled.vue
new file mode 100644
index 00000000..8d0d12b9
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_disabled.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaTooltip from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaTooltip text="正常显示提示">
+      <FaButton variant="ghost">
+        启用
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="该提示已禁用" disabled>
+      <FaButton variant="ghost">
+        禁用
+      </FaButton>
+    </FaTooltip>
+  </div>
+</template>
diff --git a/packages/components/src/basic/tooltip/_examples/_side.vue b/packages/components/src/basic/tooltip/_examples/_side.vue
new file mode 100644
index 00000000..ae3632a1
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_side.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../../button/index.vue'
+import FaTooltip from '../index.vue'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <FaTooltip text="上方提示" side="top">
+      <FaButton variant="ghost">
+        上方
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="右侧提示" side="right">
+      <FaButton variant="ghost">
+        右侧
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="下方提示" side="bottom">
+      <FaButton variant="ghost">
+        下方
+      </FaButton>
+    </FaTooltip>
+    <FaTooltip text="左侧提示" side="left">
+      <FaButton variant="ghost">
+        左侧
+      </FaButton>
+    </FaTooltip>
+  </div>
+</template>
diff --git a/packages/components/src/basic/tooltip/_examples/index.ts b/packages/components/src/basic/tooltip/_examples/index.ts
new file mode 100644
index 00000000..30bdae21
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/index.ts
@@ -0,0 +1,38 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Delay from './_delay.vue'
+import DelayRaw from './_delay.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '延迟显示',
+    component: Delay,
+    componentRaw: DelayRaw,
+  },
+  {
+    title: '弹出方向',
+    component: Side,
+    componentRaw: SideRaw,
+  },
+  {
+    title: '对齐方式',
+    component: Align,
+    componentRaw: AlignRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+]
diff --git a/packages/components/src/basic/trend/README.md b/packages/components/src/basic/trend/README.md
index 64465e31..30bb16ad 100644
--- a/packages/components/src/basic/trend/README.md
+++ b/packages/components/src/basic/trend/README.md
@@ -23,168 +23,6 @@
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
 | `variant` | `'default' \| 'filled' \| 'soft' \| 'outline'` | `'default'` | 视觉风格 |
 
-## 示例
-
-### 基础用法
-
-```vue
-<template>
-  <FaTrend value="12.5%" type="up" />
-</template>
-```
-
-### 不同风格
-
-```vue
-<template>
-  <!-- 默认风格 -->
-  <FaTrend value="12.5%" />
-  
-  <!-- 填充风格，带渐变背景和阴影 -->
-  <FaTrend value="12.5%" variant="filled" />
-  
-  <!-- 柔和风格，带浅色背景 -->
-  <FaTrend value="12.5%" variant="soft" />
-  
-  <!-- 边框风格 -->
-  <FaTrend value="12.5%" variant="outline" />
-</template>
-```
-
-### 尺寸对比
-
-```vue
-<template>
-  <FaTrend value="12.5%" size="small" />
-  <FaTrend value="12.5%" size="medium" />
-  <FaTrend value="12.5%" size="large" />
-</template>
-```
-
-### 带前后缀
-
-```vue
-<template>
-  <FaTrend value="12.5" type="up" suffix="%" />
-  <FaTrend value="¥1,234" type="up" prefix="↑ " />
-  <FaTrend value="$2,345.00" prefix="$" suffix=".00" variant="filled" />
-</template>
-```
-
-### 反转颜色含义
-
-```vue
-<!-- 用于下跌是好事的场景（如错误率、成本等） -->
-<template>
-  <!-- 错误率下降是好事，显示绿色 -->
-  <FaTrend value="5.2%" type="down" reverse variant="filled" />
-  
-  <!-- 成本下降是好事，显示绿色 -->
-  <FaTrend value="¥2,000" type="down" reverse prefix="节省 " variant="soft" />
-</template>
-```
-
-### 数据卡片
-
-```vue
-<template>
-  <div class="grid grid-cols-3 gap-4">
-    <FaCard>
-      <p class="text-sm text-muted-foreground">销售额</p>
-      <p class="text-2xl font-bold">¥123,456</p>
-      <FaTrend value="12.5%" type="up" variant="soft" />
-    </FaCard>
-    <FaCard>
-      <p class="text-sm text-muted-foreground">访问量</p>
-      <p class="text-2xl font-bold">45,678</p>
-      <FaTrend value="8.3%" type="up" variant="filled" />
-    </FaCard>
-    <FaCard>
-      <p class="text-sm text-muted-foreground">转化率</p>
-      <p class="text-2xl font-bold">3.2%</p>
-      <FaTrend value="2.1%" type="down" variant="outline" />
-    </FaCard>
-  </div>
-</template>
-```
-
-### 表格趋势列
-
-```vue
-<script setup lang="ts">
-const stocks = [
-  { name: '股票 A', price: 123.45, change: 5.67, type: 'up' as const },
-  { name: '股票 B', price: 87.65, change: -3.21, type: 'down' as const },
-  { name: '股票 C', price: 54.32, change: 1.23, type: 'up' as const },
-]
-</script>
-
-<template>
-  <table class="w-full">
-    <thead>
-      <tr>
-        <th>股票</th>
-        <th>价格</th>
-        <th>涨跌幅</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="stock in stocks" :key="stock.name">
-        <td>{{ stock.name }}</td>
-        <td>{{ stock.price }}</td>
-        <td>
-          <FaTrend :value="`${Math.abs(stock.change)}%`" :type="stock.type" />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-```
-
-### 成本下降（好事）
-
-```vue
-<script setup lang="ts">
-const costData = {
-  current: 8500,
-  last: 10000,
-  change: 15,
-}
-</script>
-
-<template>
-  <div>
-    <p class="text-sm text-muted-foreground">本月成本</p>
-    <p class="text-2xl font-bold">¥{{ costData.current.toLocaleString() }}</p>
-    <!-- 成本下降是好事，使用 reverse -->
-    <FaTrend value={`${costData.change}%`} type="down" reverse prefix="↓ 优化 " />
-  </div>
-</template>
-```
-
-### 组合使用
-
-```vue
-<template>
-  <div class="flex items-center gap-4">
-    <div>
-      <span class="text-sm text-muted-foreground">较上周</span>
-      <div class="flex items-center gap-2">
-        <span class="text-lg font-medium">+1,234</span>
-        <FaTrend value="12.5%" type="up" />
-      </div>
-    </div>
-    <div>
-      <span class="text-sm text-muted-foreground">环比</span>
-      <div class="flex items-center gap-2">
-        <span class="text-lg font-medium">+5.6%</span>
-        <FaTrend value="5.6%" type="up" />
-      </div>
-    </div>
-  </div>
-</template>
-```
-
 ## 注意事项
 
 ### 颜色规则
diff --git a/packages/components/src/basic/trend/_examples/_basic.vue b/packages/components/src/basic/trend/_examples/_basic.vue
new file mode 100644
index 00000000..e5095e61
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/_basic.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTrend from '../index.vue'
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <FaTrend value="12.3%" />
+    <FaTrend value="12.3%" type="down" />
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/trend/_demo3.vue b/packages/components/src/basic/trend/_examples/_prefix-suffix.vue
old mode 100755
new mode 100644
similarity index 86%
rename from apps/example/src/views/component_example/trend/_demo3.vue
rename to packages/components/src/basic/trend/_examples/_prefix-suffix.vue
index 8dcec6c4..45073e58
--- a/apps/example/src/views/component_example/trend/_demo3.vue
+++ b/packages/components/src/basic/trend/_examples/_prefix-suffix.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTrend from '../index.vue'
+</script>
+
 <template>
   <div class="space-y-4">
     <div>
diff --git a/apps/example/src/views/component_example/trend/_demo2.vue b/packages/components/src/basic/trend/_examples/_reverse.vue
old mode 100755
new mode 100644
similarity index 86%
rename from apps/example/src/views/component_example/trend/_demo2.vue
rename to packages/components/src/basic/trend/_examples/_reverse.vue
index ebd939cb..2ff805b7
--- a/apps/example/src/views/component_example/trend/_demo2.vue
+++ b/packages/components/src/basic/trend/_examples/_reverse.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTrend from '../index.vue'
+</script>
+
 <template>
   <div class="space-y-4">
     <div>
diff --git a/packages/components/src/basic/trend/_examples/_size.vue b/packages/components/src/basic/trend/_examples/_size.vue
new file mode 100644
index 00000000..4c3acaee
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/_size.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTrend from '../index.vue'
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <FaTrend value="12.3%" size="small" />
+    <FaTrend value="12.3%" size="medium" />
+    <FaTrend value="12.3%" size="large" />
+  </div>
+</template>
diff --git a/apps/example/src/views/component_example/trend/_demo1.vue b/packages/components/src/basic/trend/_examples/_variant.vue
old mode 100755
new mode 100644
similarity index 78%
rename from apps/example/src/views/component_example/trend/_demo1.vue
rename to packages/components/src/basic/trend/_examples/_variant.vue
index 96452328..e39ce65e
--- a/apps/example/src/views/component_example/trend/_demo1.vue
+++ b/packages/components/src/basic/trend/_examples/_variant.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaTrend from '../index.vue'
+</script>
+
 <template>
   <div class="space-y-4">
     <div>
@@ -36,15 +41,5 @@
         <FaTrend value="12.3%" variant="outline" type="down" />
       </div>
     </div>
-    <div>
-      <p class="text-sm text-muted-foreground mb-2">
-        尺寸对比
-      </p>
-      <div class="flex gap-2 items-center">
-        <FaTrend value="12.3%" size="small" />
-        <FaTrend value="12.3%" size="medium" />
-        <FaTrend value="12.3%" size="large" />
-      </div>
-    </div>
   </div>
 </template>
diff --git a/packages/components/src/basic/trend/_examples/index.ts b/packages/components/src/basic/trend/_examples/index.ts
new file mode 100644
index 00000000..91121a2c
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import PrefixSuffix from './_prefix-suffix.vue'
+import PrefixSuffixRaw from './_prefix-suffix.vue?raw'
+import Reverse from './_reverse.vue'
+import ReverseRaw from './_reverse.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+import Variant from './_variant.vue'
+import VariantRaw from './_variant.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '风格',
+    component: Variant,
+    componentRaw: VariantRaw,
+  },
+  {
+    title: '尺寸',
+    component: Size,
+    componentRaw: SizeRaw,
+  },
+  {
+    title: '颜色反转',
+    component: Reverse,
+    componentRaw: ReverseRaw,
+  },
+  {
+    title: '前缀/后缀',
+    component: PrefixSuffix,
+    componentRaw: PrefixSuffixRaw,
+  },
+]
diff --git a/packages/components/src/examples.ts b/packages/components/src/examples.ts
new file mode 100644
index 00000000..949ef941
--- /dev/null
+++ b/packages/components/src/examples.ts
@@ -0,0 +1,42 @@
+export { default as alert } from './basic/alert/_examples'
+export { default as avatar } from './basic/avatar/_examples'
+export { default as buttonGroup } from './basic/button-group/_examples'
+export { default as button } from './basic/button/_examples'
+export { default as card } from './basic/card/_examples'
+export { default as checkboxGroup } from './basic/checkbox-group/_examples'
+export { default as checkbox } from './basic/checkbox/_examples'
+export { default as collapsible } from './basic/collapsible/_examples'
+export { default as contextMenu } from './basic/context-menu/_examples'
+export { default as divider } from './basic/divider/_examples'
+export { default as drawer } from './basic/drawer/_examples'
+export { default as dropdown } from './basic/dropdown/_examples'
+export { default as fileUpload } from './basic/file-upload/_examples'
+export { default as fixedBar } from './basic/fixed-bar/_examples'
+export { default as hoverCard } from './basic/hover-card/_examples'
+export { default as icon } from './basic/icon/_examples'
+export { default as imagePreview } from './basic/image-preview/_examples'
+export { default as imageUpload } from './basic/image-upload/_examples'
+export { default as inputOtp } from './basic/input-otp/_examples'
+export { default as input } from './basic/input/_examples'
+export { default as kbdGroup } from './basic/kbd-group/_examples'
+export { default as kbd } from './basic/kbd/_examples'
+export { default as label } from './basic/label/_examples'
+export { default as modal } from './basic/modal/_examples'
+export { default as numberField } from './basic/number-field/_examples'
+export { default as pageHeader } from './basic/page-header/_examples'
+export { default as pageMain } from './basic/page-main/_examples'
+export { default as pagination } from './basic/pagination/_examples'
+export { default as passwordStrength } from './basic/password-strength/_examples'
+export { default as popover } from './basic/popover/_examples'
+export { default as progress } from './basic/progress/_examples'
+export { default as radioGroup } from './basic/radio-group/_examples'
+export { default as scrollArea } from './basic/scroll-area/_examples'
+export { default as searchBar } from './basic/search-bar/_examples'
+export { default as select } from './basic/select/_examples'
+export { default as slider } from './basic/slider/_examples'
+export { default as switch } from './basic/switch/_examples'
+export { default as tabs } from './basic/tabs/_examples'
+export { default as textarea } from './basic/textarea/_examples'
+export { default as toast } from './basic/toast/_examples'
+export { default as tooltip } from './basic/tooltip/_examples'
+export { default as trend } from './basic/trend/_examples'