diff --git a/packages/ui-vue/demos/accordion/basic.vue b/packages/ui-vue/demos/accordion/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..360789373c6a6cf94657b92b5f55e5208740daf5
--- /dev/null
+++ b/packages/ui-vue/demos/accordion/basic.vue
@@ -0,0 +1,6 @@
+<template>
+    <f-accordion>
+        <f-accordion-item title="Accordion Panel One "></f-accordion-item>
+        <f-accordion-item title="Accordion Panel Two "></f-accordion-item>
+    </f-accordion>
+</template>
diff --git a/packages/ui-vue/demos/avartar/basic.vue b/packages/ui-vue/demos/avartar/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bcc9e71973edb8c5d2d0f728d78f8d7710553e29
--- /dev/null
+++ b/packages/ui-vue/demos/avartar/basic.vue
@@ -0,0 +1,3 @@
+<template>
+    <f-avatar></f-avatar>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/alignment.vue b/packages/ui-vue/demos/button-edit/alignment.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5eeaf6f428e1aff5381d4bb6b35648aeade9f65
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/alignment.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('Button Edit 按钮输入框');
+const alignLeft = ref('left');
+const alignCenter = ref('center');
+const alignRight = ref('right');
+</script>
+<template>
+    <div class="my-2">
+        <span>缺省对齐: </span>
+    </div>
+    <f-button-edit v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>居左对齐: </span>
+    </div>
+    <f-button-edit :text-align="alignLeft" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>居中对齐: </span>
+    </div>
+    <f-button-edit :text-align="alignCenter" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>居右对齐: </span>
+    </div>
+    <f-button-edit :text-align="alignRight" v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/basic.vue b/packages/ui-vue/demos/button-edit/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05ae3f65795bd956ac4b7e90f8b7f1a096633cfd
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/basic.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('');
+</script>
+<template>
+    <div class="my-2">
+        <span>输入框文本: </span>
+        <span>{{ text }}</span>
+    </div>
+    <f-button-edit v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/button.vue b/packages/ui-vue/demos/button-edit/button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af83f0418efed987dc2d3a09d03ba9ecd5e98389
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/button.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('');
+const textButtonContent = ref('查询');
+const searchIconContent = ref('<i class="f-icon f-icon-search"></i>');
+const passwordIconContent = ref('<i class="f-icon f-icon-eye"></i>');
+</script>
+<template>
+    <div class="my-2">
+        <span>缺省按钮: </span>
+    </div>
+    <f-button-edit v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>文本按钮: </span>
+    </div>
+    <f-button-edit :button-content="textButtonContent" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>查询按钮: </span>
+    </div>
+    <f-button-edit :button-content="searchIconContent" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>密码按钮: </span>
+    </div>
+    <f-button-edit :button-content="passwordIconContent" v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/clear.vue b/packages/ui-vue/demos/button-edit/clear.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6be71a6cca87b6519c42937a13a1f99011dcbe7
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/clear.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('Button Edit 按钮输入框');
+const enableClear = ref(true);
+</script>
+<template>
+    <div class="my-2 d-flex">
+        <div class="f-demo-label">显示清空按钮:</div>
+        <f-switch v-model="enableClear"></f-switch>
+    </div>
+    <f-button-edit :enable-clear="enableClear" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>只读状态: </span>
+    </div>
+    <f-button-edit :enable-clear="enableClear" readonly v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>禁用状态: </span>
+    </div>
+    <f-button-edit :enable-clear="enableClear" disable v-model="text"></f-button-edit>
+</template>
+<style scoped>
+.f-demo-label {
+    line-height: 1.4rem;
+    margin-right: 8px;
+}
+</style>
diff --git a/packages/ui-vue/demos/button-edit/label.vue b/packages/ui-vue/demos/button-edit/label.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4ddd026982a114b3797e701b9eacd35ddea205d
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/label.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('Button Edit 按钮输入框');
+const enableTitle = ref(true);
+</script>
+<template>
+    <div class="my-2">
+        <span>鼠标悬停在输入框上方，查看文本标签: </span>
+    </div>
+    <f-button-edit :enable-title="enableTitle" v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/placeholder.vue b/packages/ui-vue/demos/button-edit/placeholder.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2693c5f1218d32880146a11b42e3fb9d171a377
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/placeholder.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('');
+const buttonEditPlaceholder = ref('请输入...');
+const forcePlaceholder = ref(true);
+</script>
+<template>
+    <div class="my-2">
+        <span>缺省情况: </span>
+    </div>
+    <f-button-edit :placeholder="buttonEditPlaceholder" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>在缺省情况下，只读状态不显示提示信息: </span>
+    </div>
+    <f-button-edit :placeholder="buttonEditPlaceholder" readonly v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>在缺省情况下，禁用状态不显示提示信息: </span>
+    </div>
+    <f-button-edit :placeholder="buttonEditPlaceholder" disable v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>在只读状态下显示提示信息: </span>
+    </div>
+    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" readonly v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>在禁用状态下显示提示信息: </span>
+    </div>
+    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" disable v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-edit/status.vue b/packages/ui-vue/demos/button-edit/status.vue
new file mode 100644
index 0000000000000000000000000000000000000000..554303cec9b80af41c65341a2067d4fc342e1f46
--- /dev/null
+++ b/packages/ui-vue/demos/button-edit/status.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('Button Edit 按钮输入框');
+const editable = ref(false);
+const disable = ref(true);
+const readonly = ref(true);
+</script>
+<template>
+    <div class="my-2">
+        <span>默认状态: </span>
+    </div>
+    <f-button-edit v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>只读状态: </span>
+    </div>
+    <f-button-edit :readonly="readonly" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>不可编辑状态: </span>
+    </div>
+    <f-button-edit :editable="editable" v-model="text"></f-button-edit>
+    <div class="my-2">
+        <span>禁用状态: </span>
+    </div>
+    <f-button-edit :disable="disable" v-model="text"></f-button-edit>
+</template>
diff --git a/packages/ui-vue/demos/button-group/basic.vue b/packages/ui-vue/demos/button-group/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..719e6b66849e09d5ec8dc77070d41b290eff1565
--- /dev/null
+++ b/packages/ui-vue/demos/button-group/basic.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const data = ref([
+    {
+        id: 'b1',
+        text: '增加',
+        type: 'primary'
+    },
+    {
+        id: 'b2',
+        text: '删除',
+        type: 'warning'
+    },
+    {
+        id: 'b3',
+        text: '保存',
+        type: 'success'
+    },
+    {
+        id: 'b4',
+        text: '编辑',
+        type: 'danger'
+    }
+]);
+const data1 = ref([
+    {
+        id: 'b1',
+        text: '增加',
+        type: 'link'
+    },
+    {
+        id: 'b2',
+        text: '删除',
+        type: 'link',
+        disabled: true
+    },
+    {
+        id: 'b3',
+        text: '保存',
+        type: 'link'
+    },
+    {
+        id: 'b4',
+        text: '编辑',
+        type: 'link',
+        disabled: true
+    }
+]);
+</script>
+
+<template>
+    <div>
+        <f-button-group :count="data.length" :data="data" :placement="'bottom-right'"></f-button-group>
+        <f-button-group :count="2" :data="data1" :placement="'bottom-right'"></f-button-group>
+    </div>
+</template>
diff --git a/packages/ui-vue/demos/button/basic.vue b/packages/ui-vue/demos/button/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04c51a6eb9b56c9b7523923549d207c4754148da
--- /dev/null
+++ b/packages/ui-vue/demos/button/basic.vue
@@ -0,0 +1,8 @@
+<template>
+    <f-button style="margin: 5px"> 主要按钮 </f-button>
+    <f-button style="margin: 5px" :type="'danger'"> 危险按钮 </f-button>
+    <f-button style="margin: 5px" :type="'success'"> 成功按钮 </f-button>
+    <f-button style="margin: 5px" :type="'warning'"> 警告按钮 </f-button>
+    <f-button style="margin: 5px" :type="'secondary'"> 信息按钮 </f-button>
+    <f-button style="margin: 5px" :type="'link'"> 文本按钮 </f-button>
+</template>
diff --git a/packages/ui-vue/demos/button/size.vue b/packages/ui-vue/demos/button/size.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa8042973e13890d240dcddda11ca389fad8ff71
--- /dev/null
+++ b/packages/ui-vue/demos/button/size.vue
@@ -0,0 +1,4 @@
+<template>
+    <f-button style="margin: 5px" :size="'small'"> 小尺寸 </f-button>
+    <f-button style="margin: 5px" :size="'large'"> 大尺寸 </f-button>
+</template>
diff --git a/packages/ui-vue/demos/button/status.vue b/packages/ui-vue/demos/button/status.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49c779408f9f41f35bbe5384ec15a9212d701426
--- /dev/null
+++ b/packages/ui-vue/demos/button/status.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const disabled = ref(true);
+</script>
+<template>
+    <div class="my-2 d-flex">
+        <div class="f-demo-label">禁用按钮:</div>
+        <f-switch v-model="disabled"></f-switch>
+    </div>
+    <div>
+        <f-button style="margin: 5px" :disabled="disabled"> 主要按钮 </f-button>
+        <f-button style="margin: 5px" :type="'danger'" :disabled="disabled"> 危险按钮 </f-button>
+        <f-button style="margin: 5px" :type="'success'" :disabled="disabled"> 成功按钮 </f-button>
+        <f-button style="margin: 5px" :type="'warning'" :disabled="disabled"> 警告按钮 </f-button>
+        <f-button style="margin: 5px" :type="'secondary'" :disabled="disabled"> 信息按钮 </f-button>
+        <f-button style="margin: 5px" :type="'link'" :disabled="disabled"> 文本按钮 </f-button>
+    </div>
+</template>
+<style scoped>
+.f-demo-label {
+    line-height: 1.4rem;
+    margin-right: 8px;
+}
+</style>
diff --git a/packages/ui-vue/demos/switch/basic.vue b/packages/ui-vue/demos/switch/basic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dde7866a6017ed30c19d94e94286853c5ac94e19
--- /dev/null
+++ b/packages/ui-vue/demos/switch/basic.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const status = ref(true);
+</script>
+<template>
+    <f-switch v-model="status"></f-switch>
+</template>
diff --git a/packages/ui-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts b/packages/ui-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts
index e79025490d1e2958a0638b58f97dbe1cf96bb0f0..3e8f9c29d44f169711b5cb9eb495998875ba6d94 100644
--- a/packages/ui-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts
+++ b/packages/ui-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts
@@ -1,3 +1,5 @@
+import path from 'path';
+import fs from 'fs';
 import MarkdownIt from 'markdown-it';
 import mdContainer from 'markdown-it-container';
 import { render } from '../utils/render';
@@ -12,7 +14,20 @@ export const farrisMarkdownPlugin = (md: MarkdownIt, options: any) => {
             const matchDescriptionResult = tokens[index].info.trim().match(/^demo\s*(.*)$/);
             const hasDescription = matchDescriptionResult && matchDescriptionResult.length > 1;
             if (isTagOpening) {
-                const sourceCode = tokens[index + 1].type === 'fence' ? tokens[index + 1].content : '';
+                let sourceCode: string = tokens[index + 1].type === 'fence' ? tokens[index + 1].content : '';
+                const startTag = '{'
+                const endTag = '}'
+                const hasVuePath = sourceCode.trim().indexOf(startTag) > -1 && sourceCode.indexOf(endTag) > -1;
+                if (hasVuePath) {
+                    const start = sourceCode.indexOf(startTag) + startTag.length;
+                    const end = sourceCode.indexOf(endTag, start);
+                    const vueFilePath = sourceCode.slice(start, end);
+                    sourceCode = fs.readFileSync(
+                        path.resolve('', vueFilePath),
+                        'utf-8'
+                    );
+                    tokens[index + 1].content = sourceCode;
+                }
                 return `<demo>${sourceCode ? `<!--vue-demo:${sourceCode}:vue-demo-->` : ''}`;
             } else {
                 return '</demo>';
diff --git a/packages/ui-vue/docs/components/accordion/index.md b/packages/ui-vue/docs/components/accordion/index.md
index 38be22303b10f010fa88febde8cb849f9647d502..27768e8acc71b6d2623a02fac3c9896b9ba27294 100644
--- a/packages/ui-vue/docs/components/accordion/index.md
+++ b/packages/ui-vue/docs/components/accordion/index.md
@@ -7,15 +7,7 @@ Accordion 组件为开发者提供了一种可收折的导航面板。
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-</script>
-<template>
-    <f-accordion>
-        <f-accordion-item title="Accordion Panel One "></f-accordion-item>
-        <f-accordion-item title="Accordion Panel Two "></f-accordion-item>
-    </f-accordion>
-</template>
+{demos/accordion/basic.vue}
 ```
 
 :::
diff --git a/packages/ui-vue/docs/components/avatar/index.md b/packages/ui-vue/docs/components/avatar/index.md
index 35fb0c58264cbdd3618e9b25a741c13d2e7f77f3..e6f850ef2ca4d410277c2ab051d6c3f8dbad7e9f 100644
--- a/packages/ui-vue/docs/components/avatar/index.md
+++ b/packages/ui-vue/docs/components/avatar/index.md
@@ -7,12 +7,7 @@ Avatar 组件用来展示人员头像。
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-</script>
-<template>
-    <f-avatar></f-avatar>
-</template>
+{demos/avartar/basic.vue}
 ```
 
 :::
diff --git a/packages/ui-vue/docs/components/button-edit/index.md b/packages/ui-vue/docs/components/button-edit/index.md
index c527e6fb13d4c9d5f199d69b3092ebce8061ae2c..cb7588fc4c83c0d4a81010e1da2cc9ce1dc0b272 100644
--- a/packages/ui-vue/docs/components/button-edit/index.md
+++ b/packages/ui-vue/docs/components/button-edit/index.md
@@ -7,17 +7,7 @@ Button Edit 是允许在其编辑器内部嵌入按钮的文本输入框。开
 :::demo 使用`v-model`对输入值做双向绑定。
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('');
-</script>
-<template>
-    <div class="my-2">
-        <span>输入框文本: </span>
-        <span>{{ text }}</span>
-    </div>
-    <f-button-edit v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/basic.vue}
 ```
 
 :::
@@ -27,31 +17,7 @@ const text = ref('');
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('Button Edit 按钮输入框');
-const alignLeft = ref('left');
-const alignCenter = ref('center');
-const alignRight = ref('right');
-</script>
-<template>
-    <div class="my-2">
-        <span>缺省对齐: </span>
-    </div>
-    <f-button-edit v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>居左对齐: </span>
-    </div>
-    <f-button-edit :text-align="alignLeft" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>居中对齐: </span>
-    </div>
-    <f-button-edit :text-align="alignCenter" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>居右对齐: </span>
-    </div>
-    <f-button-edit :text-align="alignRight" v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/alignment.vue}
 ```
 
 :::
@@ -61,31 +27,7 @@ const alignRight = ref('right');
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('Button Edit 按钮输入框');
-const editable = ref(false);
-const disable = ref(true);
-const readonly = ref(true);
-</script>
-<template>
-    <div class="my-2">
-        <span>默认状态: </span>
-    </div>
-    <f-button-edit v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>只读状态: </span>
-    </div>
-    <f-button-edit :readonly="readonly" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>不可编辑状态: </span>
-    </div>
-    <f-button-edit :editable="editable" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>禁用状态: </span>
-    </div>
-    <f-button-edit :disable="disable" v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/status.vue}
 ```
 
 :::
@@ -95,31 +37,7 @@ const readonly = ref(true);
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('');
-const textButtonContent = ref('查询');
-const searchIconContent = ref('<i class="f-icon f-icon-search"></i>');
-const passwordIconContent = ref('<i class="f-icon f-icon-eye"></i>');
-</script>
-<template>
-    <div class="my-2">
-        <span>缺省按钮: </span>
-    </div>
-    <f-button-edit v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>文本按钮: </span>
-    </div>
-    <f-button-edit :button-content="textButtonContent" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>查询按钮: </span>
-    </div>
-    <f-button-edit :button-content="searchIconContent" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>密码按钮: </span>
-    </div>
-    <f-button-edit :button-content="passwordIconContent" v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/button.vue}
 ```
 
 :::
@@ -129,32 +47,7 @@ const passwordIconContent = ref('<i class="f-icon f-icon-eye"></i>');
 :::demo 使用清空按钮可以快速置空文本框。
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('Button Edit 按钮输入框');
-const enableClear = ref(true);
-</script>
-<template>
-    <div class="my-2 d-flex">
-        <div class="f-demo-label">显示清空按钮:</div>
-        <f-switch v-model="enableClear"></f-switch>
-    </div>
-    <f-button-edit :enable-clear="enableClear" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>只读状态: </span>
-    </div>
-    <f-button-edit :enable-clear="enableClear" readonly v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>禁用状态: </span>
-    </div>
-    <f-button-edit :enable-clear="enableClear" disable v-model="text"></f-button-edit>
-</template>
-<style scoped>
-.f-demo-label {
-    line-height: 1.4rem;
-    margin-right: 8px;
-}
-</style>
+{demos/button-edit/clear.vue}
 ```
 
 :::
@@ -164,17 +57,7 @@ const enableClear = ref(true);
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('Button Edit 按钮输入框');
-const enableTitle = ref(true);
-</script>
-<template>
-    <div class="my-2">
-        <span>鼠标悬停在输入框上方，查看文本标签: </span>
-    </div>
-    <f-button-edit :enable-title="enableTitle" v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/clear.vue}
 ```
 
 :::
@@ -184,34 +67,7 @@ const enableTitle = ref(true);
 :::demo 使用清空按钮可以快速置空文本框。
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const text = ref('');
-const buttonEditPlaceholder = ref('请输入...');
-const forcePlaceholder = ref(true);
-</script>
-<template>
-    <div class="my-2">
-        <span>缺省情况: </span>
-    </div>
-    <f-button-edit :placeholder="buttonEditPlaceholder" v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>在缺省情况下，只读状态不显示提示信息: </span>
-    </div>
-    <f-button-edit :placeholder="buttonEditPlaceholder" readonly v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>在缺省情况下，禁用状态不显示提示信息: </span>
-    </div>
-    <f-button-edit :placeholder="buttonEditPlaceholder" disable v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>在只读状态下显示提示信息: </span>
-    </div>
-    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" readonly v-model="text"></f-button-edit>
-    <div class="my-2">
-        <span>在禁用状态下显示提示信息: </span>
-    </div>
-    <f-button-edit :placeholder="buttonEditPlaceholder" :force-placeholder="forcePlaceholder" disable v-model="text"></f-button-edit>
-</template>
+{demos/button-edit/placeholder.vue}
 ```
 
 :::
diff --git a/packages/ui-vue/docs/components/button/index.md b/packages/ui-vue/docs/components/button/index.md
index d3df46ff477385c1de05fcc9d32f013ed64b47e5..8ee18e0da99fd9e4f34dab036258d42c1a01f946 100644
--- a/packages/ui-vue/docs/components/button/index.md
+++ b/packages/ui-vue/docs/components/button/index.md
@@ -7,17 +7,7 @@ Button 组件为不同使用场景提供了多种展示样式。
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-</script>
-<template>
-    <f-button style="margin: 5px;"> 主要按钮 </f-button>
-    <f-button style="margin: 5px;" :type="'danger'"> 危险按钮 </f-button>
-    <f-button style="margin: 5px;" :type="'success'"> 成功按钮 </f-button>
-    <f-button style="margin: 5px;" :type="'warning'"> 警告按钮 </f-button>
-    <f-button style="margin: 5px;" :type="'secondary'"> 信息按钮 </f-button>
-    <f-button style="margin: 5px;" :type="'link'"> 文本按钮 </f-button>
-</template>
+{demos/button/basic.vue}
 ```
 
 :::
@@ -27,30 +17,7 @@ import { ref } from 'vue';
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-const disabled = ref(true);
-</script>
-<template>
-    <div class="my-2 d-flex">
-        <div class="f-demo-label">禁用按钮:</div>
-        <f-switch v-model="disabled"></f-switch>
-    </div>
-    <div>
-        <f-button style="margin: 5px;" :disabled="disabled"> 主要按钮 </f-button>
-        <f-button style="margin: 5px;" :type="'danger'" :disabled="disabled"> 危险按钮 </f-button>
-        <f-button style="margin: 5px;" :type="'success'" :disabled="disabled"> 成功按钮 </f-button>
-        <f-button style="margin: 5px;" :type="'warning'" :disabled="disabled"> 警告按钮 </f-button>
-        <f-button style="margin: 5px;" :type="'secondary'" :disabled="disabled"> 信息按钮 </f-button>
-        <f-button style="margin: 5px;" :type="'link'" :disabled="disabled"> 文本按钮 </f-button>
-    </div>
-</template>
-<style scoped>
-.f-demo-label {
-    line-height: 1.4rem;
-    margin-right: 8px;
-}
-</style>
+{demos/button/status.vue}
 ```
 
 :::
@@ -60,13 +27,7 @@ const disabled = ref(true);
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-</script>
-<template>
-    <f-button style="margin: 5px;" :size="'small'"> 小尺寸 </f-button>
-    <f-button style="margin: 5px;" :size="'large'"> 大尺寸 </f-button>
-</template>
+{demos/button/size.vue}
 ```
 
 :::
@@ -76,63 +37,7 @@ import { ref } from 'vue';
 :::demo
 
 ```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const data = ref([
-    {
-        id: 'b1',
-        text: '增加',
-        type: 'primary'
-    },
-    {
-        id: 'b2',
-        text: '删除',
-        type: 'warning'
-    },
-    {
-        id: 'b3',
-        text: '保存',
-        type: 'success'
-    },
-    {
-        id: 'b4',
-        text: '编辑',
-        type: 'danger'
-    }
-]);
-const data1 = ref([
-    {
-        id: 'b1',
-        text: '增加',
-        type: 'link'
-    },
-    {
-        id: 'b2',
-        text: '删除',
-        type: 'link',
-        disabled: true
-    },
-    {
-        id: 'b3',
-        text: '保存',
-        type: 'link'
-    },
-    {
-        id: 'b4',
-        text: '编辑',
-        type: 'link',
-        disabled: true
-    }
-]);
-</script>
-
-<template>
-    <div>
-        <f-button-group :count="data.length" :data="data" :placement="'bottom-right'"></f-button-group>
-        <f-button-group :count="2" :data="data1" :placement="'bottom-right'"></f-button-group>
-    </div>
-</template>
+{demos/button-group/basic.vue}
 
 ```
 
diff --git a/packages/ui-vue/docs/components/switch/index.md b/packages/ui-vue/docs/components/switch/index.md
index 9deb48f2062353d6cde9a26748a5de8918466e69..0f1851c7344897dafaa0208d2079fe36fa247965 100644
--- a/packages/ui-vue/docs/components/switch/index.md
+++ b/packages/ui-vue/docs/components/switch/index.md
@@ -18,6 +18,16 @@ const status = ref(true);
 
 :::
 
+## 基本用法 2
+
+:::demo
+
+```vue
+{demos/switch/basic.vue}
+```
+
+:::
+
 ## 属性
 
 | 属性名 | 类型     | 默认值 | 说明     |
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index ae7f08cdf9bd26bd70a05cc23fa167875164785e..001e9398d13a1061d6feb7c53dc0b53b8eb24bb8 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -1,67 +1,56 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import { ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import HelloWorld from './components/hello-world.vue';
+import Accordion from './components/accordion.vue';
 import Avatar from './components/avatar.vue';
-import Tabs from './components/tabs.vue';
+import Button from './components/button.vue';
 import ButtonEdit from './components/button-edit.vue';
-import FButton from './components/button.vue';
-import FButtonGroup from './components/button-group.vue';
-import Switch from './components/switch.vue';
+import ButtonGroup from './components/button-group.vue';
+import Checkbox from './components/checkbox.vue';
+import ComboList from './components/combo-list.vue';
+import Modal from './components/modal.vue';
+import Notify from './components/notify.vue';
+import Popover from './components/popover.vue';
 import RadioGroup from './components/radio-group.vue';
 import Section from './components/section.vue';
-import Notify from './components/notify.vue';
-import Accordion from './components/accordion.vue';
-import ComboList from './components/combo-list.vue';
-import CheckboxGroup from './components/checkbox.vue';
+import SwitchBasic from '../demos/switch/basic.vue';
+import Tabs from './components/tabs.vue';
 import Tooltip from './components/tooltip.vue';
-import Popover from './components/popover.vue';
-import Modal from './components/modal.vue';
 
-const canEdit = ref(true);
-const disable = ref(false);
-const canAutoComplete = ref(false);
-</script>
-<template>
-    <div>
-        <a href="https://vitejs.dev" target="_blank">
-            <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://vuejs.org/" target="_blank">
-            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-        </a>
-    </div>
-    <HelloWorld msg="Vite + Vue" />
-    <Modal></Modal>
-    <Popover></Popover>
-    <Tooltip></Tooltip>
-    <ButtonEdit></ButtonEdit>
-    <Avatar></Avatar>
-    <FButton></FButton>
-    <FButtonGroup></FButtonGroup>
-    <Switch></Switch>
-    <Section></Section>
-    <Notify></Notify>
-    <Accordion></Accordion>
-    <Tabs></Tabs>
-    <ComboList></ComboList>
-    <RadioGroup></RadioGroup>
-    <CheckboxGroup></CheckboxGroup>
-</template>
+const routes: Record<string, any> = {
+    '/': HelloWorld,
+    '/accordion': Accordion,
+    '/avatar': Avatar,
+    '/button': Button,
+    '/button-edit': ButtonEdit,
+    '/button-group': ButtonGroup,
+    '/checkbox': Checkbox,
+    '/combo-list': ComboList,
+    '/modal': Modal,
+    '/notify': Notify,
+    '/popover': Popover,
+    '/radio-group': RadioGroup,
+    '/section': Section,
+    '/switch/basic': SwitchBasic,
+    '/tabs': Tabs,
+    '/tooltip': Tooltip
+};
 
-<style scoped>
-.logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-}
+const currentPath = ref(window.location.hash);
 
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-}
+const currentView = computed(() => {
+    const routePath: string = `/${currentPath.value.slice(1)}` || '/';
+    return routes[routePath] || HelloWorld;
+});
 
-.logo.vue:hover {
-    filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+onMounted(() => {
+    window.addEventListener('hashchange', () => {
+        currentPath.value = window.location.hash;
+    });
+});
+</script>
+<template>
+    <component :is="currentView" />
+</template>
diff --git a/packages/ui-vue/src/components/button-edit.vue b/packages/ui-vue/src/components/button-edit.vue
index 648f1bbbab717ff67de74c8d4bd19e1b2e6c6fd6..760575fce29e9f7b8cfe2ee4303ff19298171ac2 100644
--- a/packages/ui-vue/src/components/button-edit.vue
+++ b/packages/ui-vue/src/components/button-edit.vue
@@ -13,7 +13,6 @@ const text = ref('');
     <label for="checkbox">editable:{{ canEdit }}</label>
     <input type="checkbox" id="checkbox" v-model="canAutoComplete" />
     <label for="checkbox">auto complete:{{ canAutoComplete }}</label>
-    <input type="text" id="text1" v-model="text" /><input type="text" id="text2" v-model="text" />
     <ButtonEdit :editable="canEdit" :auto-complete="canAutoComplete" :enable-clear="true" v-model="text"></ButtonEdit>
     Text: {{text}}
 </template>
diff --git a/packages/ui-vue/src/components/hello-world.vue b/packages/ui-vue/src/components/hello-world.vue
index b4fe601f396ed503497bb4d99da5c7f7f6efe696..0570e84d8fa8383de6f831c6acf39a924fad3635 100644
--- a/packages/ui-vue/src/components/hello-world.vue
+++ b/packages/ui-vue/src/components/hello-world.vue
@@ -7,6 +7,14 @@ const count = ref(0);
 </script>
 
 <template>
+    <div>
+        <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://vuejs.org/" target="_blank">
+            <img src="/assets/vue.svg" class="logo vue" alt="Vue logo" />
+        </a>
+    </div>
     <h1>{{ msg }}</h1>
 
     <div class="h-card">
@@ -33,4 +41,17 @@ const count = ref(0);
 .read-the-docs {
     color: #888;
 }
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vue:hover {
+    filter: drop-shadow(0 0 2em #42b883aa);
+}
 </style>
diff --git a/packages/ui-vue/src/main.ts b/packages/ui-vue/src/main.ts
index 015f709d777e27d0b6bcec51e45d48a017c4c45e..7cba09d0e7ba0826ef03198a876196c61f371cff 100644
--- a/packages/ui-vue/src/main.ts
+++ b/packages/ui-vue/src/main.ts
@@ -1,9 +1,34 @@
 import { createApp } from 'vue';
 import './style.css';
 import App from './app.vue';
-import Tooltip from '../components/tooltip/index';
-import Popover from '../components/popover/index';
-import Modal from '../components/modal/index';
+import Accordion from '../components/accordion';
+import Avatar from '../components/avatar';
+import Button from '../components/button';
+import ButtonEdit from '../components/button-edit';
+import ComboList from '../components/combo-list';
+import Modal from '../components/modal';
+import Notify from '../components/notify';
+import Popover from '../components/popover';
+import RadioGroup from '../components/radio-group';
+import Section from '../components/section';
+import Switch from '../components/switch';
+import Tabs from '../components/tabs';
+import Text from '../components/text';
+import Tooltip from '../components/tooltip';
 
 const app = createApp(App);
-app.use(Modal).use(Popover).use(Tooltip).mount('#app');
+app.use(Accordion)
+    .use(Avatar)
+    .use(Button)
+    .use(ButtonEdit)
+    .use(ComboList)
+    .use(Modal)
+    .use(Notify)
+    .use(Popover)
+    .use(RadioGroup)
+    .use(Section)
+    .use(Switch)
+    .use(Tabs)
+    .use(Text)
+    .use(Tooltip)
+    .mount('#app');