refactor: 将 example 中内建组件的示例，提取到子包中统一维护

2026-10-07 11:34:10 +08:00 · 2026-05-26 22:44:00 +08:00
parent 4e5bfb923d
commit eb4538c753
408 changed files with 6279 additions and 8024 deletions
@@ -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: '趋势标记',
      },
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,8 +0,0 @@
-<template>
-  <FaCard title="卡片标题" description="卡片描述" class="w-80">
-    卡片内容
-    <template #footer>
-      卡片底部
-    </template>
-  </FaCard>
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const checked = ref<'indeterminate' | boolean>('indeterminate')
-</script>
-
-<template>
-  <FaCheckbox v-model="checked">
-    部分选中
-  </FaCheckbox>
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,9 +0,0 @@
-<template>
-  <FaDivider>center</FaDivider>
-  <FaDivider position="start">
-    start
-  </FaDivider>
-  <FaDivider position="end">
-    end
-  </FaDivider>
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const input = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="input" />
-</template>
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const input = ref('')
-</script>
-
-<template>
-  <FaInputOTP v-model="input" :length="4" />
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -1,8 +0,0 @@
-<template>
-  <FaKbdGroup>
-    <FaKbd>⌘</FaKbd>
-    <FaKbd>⇧</FaKbd>
-    <FaKbd>⌥</FaKbd>
-    <FaKbd>⌃</FaKbd>
-  </FaKbdGroup>
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref(0)
-</script>
-
-<template>
-  <FaNumberField v-model="value" />
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,5 +0,0 @@
-<template>
-  <FaPageMain>
-    PageMain 是最常用的页面组件，几乎所有页面都会使用到
-  </FaPageMain>
-</template>
@@ -1,5 +0,0 @@
-<template>
-  <FaPageMain title="你可以设置一个自定义的标题">
-    这里放页面内容
-  </FaPageMain>
-</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -1,3 +0,0 @@
-<template>
-  <FaProgress :model-value="33" />
-</template>
@@ -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>
@@ -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>
@@ -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>
--- a/Show More
+++ b/Show More