docs: add accordion and button

packages/ui-vue/docs/.vitepress/config/index.ts

@@ -12,7 +12,7 @@ const config = defineConfig({
     themeConfig: {
         nav,
         sidebar,
-        logo: '../../assets/farris_design.jpg',
+        logo: '/assets/farris_design.jpg',
         footer: {
             message: '使用 Apache-2.0 开源许可协议',
             copyright: 'Copyright © 2022'

packages/ui-vue/docs/.vitepress/theme/index.ts

@@ -1,4 +1,6 @@
 // import farris from '../../../components/index';
+import Accordion from '../../../components/accordion';
+import Button from '../../../components/button';
 import ButtonEdit from '../../../components/button-edit';
 import Switch from '../../../components/switch';
 // import DefaultTheme from 'vitepress/theme';
@@ -12,7 +14,7 @@ export default {
     // ...DefaultTheme,
     ...FarrisTheme,
     enhanceApp({ app }) {
-        app.use(ButtonEdit).use(Switch);
+        app.use(Accordion).use(Button).use(ButtonEdit).use(Switch);
         registerComponents(app);
     }
 };

packages/ui-vue/docs/components/accordion/index.md

@@ -1 +1,37 @@
-# Accordion
+# Accordion 手风琴
+
+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>
+```
+
+:::
+
+## 属性
+
+| 属性名      | 类型       | 默认值 | 说明             |
+| :---------- | :--------- | :----- | :--------------- |
+| customClass | `string[]` | []     | 组件自定义样式   |
+| enableFold  | `boolean`  | true   | 是否允许收折     |
+| expanded    | `boolean`  | false  | 是否展开所有面板 |
+| height      | `number`   | --     | 设置组件的高度   |
+| width       | `number`   | --     | 设置组件的宽度   |
+
+## 插槽
+
+::: tip
+暂无内容
+:::

packages/ui-vue/docs/components/button/index.md

@@ -1 +1,62 @@
-# Button
+# Button 按钮
+
+Button 组件为不同使用场景提供了多种展示样式。
+
+## 基本用法
+
+:::demo
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+</script>
+<template>
+    <f-button></f-button>
+</template>
+```
+
+:::
+
+## 状态
+
+:::demo
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const disable = ref(true);
+</script>
+<template>
+    <f-button :disable="disable"></f-button>
+</template>
+```
+
+:::
+
+## 类型
+
+```typescript
+type ButtonType = 'primary' | 'warning' | 'danger' | 'success' | 'link' | 'secondary';
+type SizeType = 'small' | 'large';
+```
+
+## 属性
+
+| 属性名     | 类型                   | 默认值    | 说明                 |
+| :--------- | :--------------------- | :-------- | :------------------- |
+| id         | `string`               | --        | 标记组件的唯一标识   |
+| buttonType | `string as ButtonType` | 'primary' | 按钮显示样式         |
+| disable    | `boolean`              | false     | 将按钮设置为禁用状态 |
+| size       | `string as SizeType`   | 'small'   | 按钮尺寸             |
+
+## 事件
+
+| 事件名 | 类型                | 说明         |
+| :----- | :------------------ | :----------- |
+| click  | `EventEmitter<any>` | 点击按钮事件 |
+
+## 插槽
+
+::: tip
+暂无内容
+:::