docs(Button): 文档案例交互优化 (#497)

docs/.vitepress/components/button/basic.vue

@@ -0,0 +1,108 @@
+<template>
+    <FForm labelWidth="100px">
+        <FFormItem label="按钮大小:">
+            <FRadioGroup
+                v-model="size"
+                :options="[
+                    { label: 'small', value: 'small' },
+                    { label: 'middle(默认)', value: 'middle' },
+                    { label: 'large', value: 'large' },
+                ]"
+            />
+        </FFormItem>
+        <FFormItem label="是否加载状态:">
+            <FRadioGroup
+                v-model="loading"
+                :options="[
+                    { label: '否(默认)', value: false },
+                    { label: '是', value: true },
+                ]"
+            />
+        </FFormItem>
+        <FFormItem label="是否禁用状态:">
+            <FRadioGroup
+                v-model="disabled"
+                :options="[
+                    { label: '否(默认)', value: false },
+                    { label: '是', value: true },
+                ]"
+            />
+        </FFormItem>
+    </FForm>
+
+    <FDivider></FDivider>
+
+    <FSpace>
+        <FButton :size="size" :loading="loading" :disabled="disabled">
+            Default
+        </FButton>
+        <FButton
+            type="primary"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Primary
+        </FButton>
+        <FButton
+            type="text"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Text
+        </FButton>
+        <FButton
+            type="link"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Link
+        </FButton>
+    </FSpace>
+
+    <FDivider></FDivider>
+
+    <FSpace>
+        <FButton
+            type="info"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Info
+        </FButton>
+        <FButton
+            type="success"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Success
+        </FButton>
+        <FButton
+            type="warning"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Warning
+        </FButton>
+        <FButton
+            type="danger"
+            :size="size"
+            :loading="loading"
+            :disabled="disabled"
+        >
+            Danger
+        </FButton>
+    </FSpace>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const size = ref('middle');
+const loading = ref(false);
+const disabled = ref(false);
+</script>

docs/.vitepress/components/button/index.md

@@ -12,46 +12,34 @@ app.use(FButton);
 
 ## 代码演示
 
-### 按钮类型
+### 基础用法
 
---TYPE
+:::demo
+basic.vue
+:::
 
 ### Icon 按钮
 
---ICON
-
-### 按钮 loading 状态
-
---LOADING
-
-### 按钮禁用
-
---DISABLED
+:::demo
+icon.vue
+:::
 
 ### long 按钮
 
---LONG
-
-### 其他按钮
-
---OTHER
-
-### 按钮大小
-
---SIZE
-
---CODE
+:::demo
+long.vue
+:::
 
 ## Props
 
 | 属性     | 说明                                                                               | 类型    | 默认值    |
 | -------- | ---------------------------------------------------------------------------------- | ------- | --------- |
-| disabled | 按钮失效状态                                                                       | boolean | `false`   |
+| disabled | 按钮禁用状态                                                                       | boolean | `false`   |
 | size     | 按钮大小，可选值 `small` `middle` `large`                                          | string  | `middle`  |
 | htmlType | 设置 `button` 的原生 `type` 值，可选值请参考 HTML 标准                             | string  | `button`  |
 | loading  | 按钮加载状态                                                                       | boolean | `false`   |
 | long     | 按钮按钮宽度为父元素宽度                                                           | boolean | `false`   |
-| throttle | 截流                                                                               | number  | `300`     |
+| throttle | 节流                                                                               | number  | `300`     |
 | type     | 设置按钮类型，可选值为 `primary` `text` `link` `info` `success` `warning` `danger` | string  | `default` |
 
 ## Slots

docs/.vitepress/components/button/long.vue

@@ -1,6 +1,7 @@
 <template>
-    <FSpace>
-        <FButton long>Default</FButton>
-        <FButton type="primary" long>Primary</FButton>
+    <FSpace vertical>
+        <FButton size="small" long>Default</FButton>
+        <FButton type="info" long>Info</FButton>
+        <FButton type="primary" size="large" long>Primary</FButton>
     </FSpace>
 </template>