+
- 按钮
+ 默认按钮
- 按钮
+ 危险按钮
- 按钮
+ 边框按钮
- 按钮
+ 次要按钮
- 按钮
+ 幽灵按钮
- 按钮
-
-
- 按钮
-
-
- 按钮
+ 链接按钮
diff --git a/packages/components/src/basic/button/_examples/index.ts b/packages/components/src/basic/button/_examples/index.ts
new file mode 100644
index 00000000..dbf0a417
--- /dev/null
+++ b/packages/components/src/basic/button/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Loading from './_loading.vue'
+import LoadingRaw from './_loading.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+import Variant from './_variant.vue'
+import VariantRaw from './_variant.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '变体',
+ component: Variant,
+ componentRaw: VariantRaw,
+ },
+ {
+ title: '尺寸',
+ component: Size,
+ componentRaw: SizeRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '加载',
+ component: Loading,
+ componentRaw: LoadingRaw,
+ },
+]
diff --git a/packages/components/src/basic/card/README.md b/packages/components/src/basic/card/README.md
index 85afb969..8e9533c3 100644
--- a/packages/components/src/basic/card/README.md
+++ b/packages/components/src/basic/card/README.md
@@ -29,106 +29,6 @@
| `default` | 卡片内容 |
| `footer` | 卡片页脚 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
- 卡片内容
-
-
-```
-
-### 基础卡片
-
-```vue
-
-
- 这是卡片的内容区域。
-
-
-```
-
-### 仅标题
-
-```vue
-
-
- 只有标题的卡片内容。
-
-
-```
-
-### 自定义头部
-
-```vue
-
-
-
-
- 用户信息
-
-
- 卡片内容...
-
-
-```
-
-### 带页脚
-
-```vue
-
-
- 卡片内容...
-
-
- 取消
- 确定
-
-
-
-
-```
-
-### 完整卡片
-
-```vue
-
-
-
-
姓名： 张三
-
邮箱： zhangsan@example.com
-
手机： 13800138000
-
- 查看详情
-
-
-
-```
-
-### 自定义样式
-
-```vue
-
-
- 自定义样式的卡片内容。
-
-
-```
-
## 注意事项
1. **区域显示**：只有提供对应内容（props 或 slots）的区域才会显示
diff --git a/packages/components/src/basic/card/_examples/_basic.vue b/packages/components/src/basic/card/_examples/_basic.vue
new file mode 100644
index 00000000..29b2791b
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_basic.vue
@@ -0,0 +1,10 @@
+
+
+
+
+ 卡片内容
+
+
diff --git a/packages/components/src/basic/card/_examples/_custom-style.vue b/packages/components/src/basic/card/_examples/_custom-style.vue
new file mode 100644
index 00000000..04edbdee
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_custom-style.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ 这里是自定义内容区域，可以根据业务场景调整间距、背景和边框。
+
+ 自定义页脚区域
+
+
+
diff --git a/packages/components/src/basic/card/_examples/_description.vue b/packages/components/src/basic/card/_examples/_description.vue
new file mode 100644
index 00000000..738148c3
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_description.vue
@@ -0,0 +1,10 @@
+
+
+
+
+ 卡片内容
+
+
diff --git a/packages/components/src/basic/card/_examples/_slot.vue b/packages/components/src/basic/card/_examples/_slot.vue
new file mode 100644
index 00000000..cfc61592
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/_slot.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+ 自定义头部
+
+
+ header slot 会覆盖 title 和 description
+
+
+
+
+
+ 卡片内容区域
+
+
+
+
+ 取消
+
+
+ 确定
+
+
+
+
+
diff --git a/packages/components/src/basic/card/_examples/index.ts b/packages/components/src/basic/card/_examples/index.ts
new file mode 100644
index 00000000..329f051c
--- /dev/null
+++ b/packages/components/src/basic/card/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Description from './_description.vue'
+import DescriptionRaw from './_description.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '描述',
+ component: Description,
+ componentRaw: DescriptionRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+]
diff --git a/packages/components/src/basic/checkbox-group/README.md b/packages/components/src/basic/checkbox-group/README.md
index f294f10e..76a103fe 100644
--- a/packages/components/src/basic/checkbox-group/README.md
+++ b/packages/components/src/basic/checkbox-group/README.md
@@ -50,180 +50,6 @@ export interface CheckboxGroupOption {
通过 `v-model` 实现双向绑定。
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 带描述文案
-
-```vue
-
-
-
-
-```
-
-### 禁用选项
-
-```vue
-
-
-
-
-```
-
-### 多列排列
-
-```vue
-
-
-
-
-```
-
-### 最少 / 最多选择
-
-```vue
-
-
-
-
-```
-
-### 自定义选项内容
-
-```vue
-
-
-
-
-
-
-
-
- {{ option.label }}
-
- {{ option.summary }}
-
-
-
- {{ option.description }}
-
-
-
- {{ checked ? '已选中' : '可选择' }}
-
-
-
-
-```
-
## 注意事项
1. **数据驱动**：组选项必须通过 `options` 传入，不再使用多个 `FaCheckbox` 手工拼接。
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo1.vue b/packages/components/src/basic/checkbox-group/_examples/_basic.vue
similarity index 70%
rename from apps/example/src/views/component_example/checkbox_group/_demo1.vue
rename to packages/components/src/basic/checkbox-group/_examples/_basic.vue
index e019a5a2..3aaef74b 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo1.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_basic.vue
@@ -1,5 +1,10 @@
+
+
+
+
+
+ 当前值：{{ currentText || '未选择' }}
+
+
diff --git a/apps/example/src/views/component_example/checkbox_group/_demo4.vue b/packages/components/src/basic/checkbox-group/_examples/_limit.vue
similarity index 75%
rename from apps/example/src/views/component_example/checkbox_group/_demo4.vue
rename to packages/components/src/basic/checkbox-group/_examples/_limit.vue
index 755f8d1f..37871da4 100644
--- a/apps/example/src/views/component_example/checkbox_group/_demo4.vue
+++ b/packages/components/src/basic/checkbox-group/_examples/_limit.vue
@@ -1,5 +1,10 @@
-
-
-
- 我已阅读并同意服务条款
-
-
-```
-
-### 半选状态
-
-```vue
-
-
-
-
- 部分选中
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-
-
-
- 禁用未选中
-
-
- 禁用已选中
-
-
-
-```
-
-### 无标签复选框
-
-```vue
-
-
-
-
-```
-
-### 自定义样式
-
-```vue
-
-
-
-
- 自定义样式
-
-
-```
-
## 注意事项
1. **单个使用**：`FaCheckbox` 只负责单个复选框，不承担组选项逻辑。
diff --git a/packages/components/src/basic/checkbox/_examples/_basic.vue b/packages/components/src/basic/checkbox/_examples/_basic.vue
new file mode 100644
index 00000000..04bd6b53
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_basic.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ 同意协议
+
+
diff --git a/packages/components/src/basic/checkbox/_examples/_custom-style.vue b/packages/components/src/basic/checkbox/_examples/_custom-style.vue
new file mode 100644
index 00000000..a87e992c
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_custom-style.vue
@@ -0,0 +1,21 @@
+
+
+
+
+ 开启精细化配置
+
+
diff --git a/packages/components/src/basic/checkbox/_examples/_disabled.vue b/packages/components/src/basic/checkbox/_examples/_disabled.vue
new file mode 100644
index 00000000..4269f683
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_disabled.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+ 禁用未选中
+
+
+ 禁用已选中
+
+
+
diff --git a/packages/components/src/basic/checkbox/_examples/_indeterminate.vue b/packages/components/src/basic/checkbox/_examples/_indeterminate.vue
new file mode 100644
index 00000000..c10fe2cb
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/_indeterminate.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ 部分选中
+
+
diff --git a/packages/components/src/basic/checkbox/_examples/index.ts b/packages/components/src/basic/checkbox/_examples/index.ts
new file mode 100644
index 00000000..0e95b851
--- /dev/null
+++ b/packages/components/src/basic/checkbox/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Indeterminate from './_indeterminate.vue'
+import IndeterminateRaw from './_indeterminate.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '半选状态',
+ component: Indeterminate,
+ componentRaw: IndeterminateRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+]
diff --git a/packages/components/src/basic/collapsible/README.md b/packages/components/src/basic/collapsible/README.md
index e0b77351..8ddfb0fb 100644
--- a/packages/components/src/basic/collapsible/README.md
+++ b/packages/components/src/basic/collapsible/README.md
@@ -25,147 +25,6 @@
| `trigger` | 触发元素，slot props: `{ open: boolean }` |
| `default` | 可折叠的内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-
- 点击{{ open ? '收起' : '展开' }}
-
-
- 这是可折叠的内容区域。
-
-
-
-```
-
-### 基础折叠
-
-```vue
-
-
-
-
-
-
- 点击展开详情
-
-
-
-
-
-```
-
-### FAQ 折叠列表
-
-```vue
-
-
-
-
-
-
-
- {{ faq.question }}
-
-
-
- {{ faq.answer }}
-
-
-
-```
-
-### 手风琴效果（互斥展开）
-
-```vue
-
-
-
-
-
-
-
- {{ item.title }}
-
-
-
- {{ item.content }}
-
-
-
-```
-
-### 带动画图标
-
-```vue
-
-
-
-
-
-
- 项目文件
-
-
-
-
-
-```
-
## 注意事项
1. **触发器可选**：不提供 `trigger` slot 时，仅渲染可折叠内容
diff --git a/packages/components/src/basic/collapsible/_examples/_basic.vue b/packages/components/src/basic/collapsible/_examples/_basic.vue
new file mode 100644
index 00000000..133540f7
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/_basic.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ {{ open ? '收起' : '展开' }}
+
+
+
+
+
diff --git a/packages/components/src/basic/collapsible/_examples/_controlled.vue b/packages/components/src/basic/collapsible/_examples/_controlled.vue
new file mode 100644
index 00000000..a2bf90e2
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/_controlled.vue
@@ -0,0 +1,22 @@
+
+
+
+
+ {{ open ? '收起' : '展开' }}
+
+
+
+
+
diff --git a/packages/components/src/basic/collapsible/_examples/index.ts b/packages/components/src/basic/collapsible/_examples/index.ts
new file mode 100644
index 00000000..cc579d3d
--- /dev/null
+++ b/packages/components/src/basic/collapsible/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Controlled from './_controlled.vue'
+import ControlledRaw from './_controlled.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '手动控制',
+ component: Controlled,
+ componentRaw: ControlledRaw,
+ },
+]
diff --git a/packages/components/src/basic/context-menu/README.md b/packages/components/src/basic/context-menu/README.md
index 1bf7113f..0985860f 100644
--- a/packages/components/src/basic/context-menu/README.md
+++ b/packages/components/src/basic/context-menu/README.md
@@ -44,231 +44,6 @@ interface MenuSubItem {
| `default` | 触发元素（必填） |
| `label` | 菜单头部标签 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-
- 右键点击我
-
-
-
-```
-
-### 基础右键菜单
-
-```vue
-
-
-
-
-
- 右键点击显示菜单
-
-
-
-```
-
-### 带分组的菜单
-
-```vue
-
-
-
-
- 右键点击
-
-
-```
-
-### 带子菜单
-
-```vue
-
-
-
-
- 右键点击
-
-
-```
-
-### 带标签的菜单
-
-```vue
-
-
-
-
-
- 图片操作
-
-
-
-```
-
-### 禁用菜单项
-
-```vue
-
-
-
-
- 右键点击
-
-
-```
-
-### 表格行右键菜单
-
-```vue
-
-
-
-
-
-
- 名称
- 状态
-
-
-
-
-
-
-
- {{ row.status }}
-
-
-
-
-```
-
-### 文件列表右键菜单
-
-```vue
-
-
-
-
-
-
-
- {{ file.name }}
-
-
-
-
-```
-
## 注意事项
1. **items 结构**：二维数组，每个子数组为一组，组间自动添加分割线
diff --git a/packages/components/src/basic/context-menu/_examples/_basic.vue b/packages/components/src/basic/context-menu/_examples/_basic.vue
new file mode 100644
index 00000000..54185342
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_basic.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/context-menu/_examples/_disabled.vue b/packages/components/src/basic/context-menu/_examples/_disabled.vue
new file mode 100644
index 00000000..e2bd992b
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_disabled.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/context-menu/_examples/_icon.vue b/packages/components/src/basic/context-menu/_examples/_icon.vue
new file mode 100644
index 00000000..c786bc1b
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_icon.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/context-menu/_examples/_nested.vue b/packages/components/src/basic/context-menu/_examples/_nested.vue
new file mode 100644
index 00000000..e43c2608
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_nested.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/context-menu/_examples/_warning.vue b/packages/components/src/basic/context-menu/_examples/_warning.vue
new file mode 100644
index 00000000..ed4e4dd7
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/_warning.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/context-menu/_examples/index.ts b/packages/components/src/basic/context-menu/_examples/index.ts
new file mode 100644
index 00000000..f5327c5e
--- /dev/null
+++ b/packages/components/src/basic/context-menu/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+import Nested from './_nested.vue'
+import NestedRaw from './_nested.vue?raw'
+import Warning from './_warning.vue'
+import WarningRaw from './_warning.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '图标',
+ component: Icon,
+ componentRaw: IconRaw,
+ },
+ {
+ title: '警告',
+ component: Warning,
+ componentRaw: WarningRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '嵌套',
+ component: Nested,
+ componentRaw: NestedRaw,
+ },
+]
diff --git a/packages/components/src/basic/divider/README.md b/packages/components/src/basic/divider/README.md
index 5b74cad2..8afc093a 100644
--- a/packages/components/src/basic/divider/README.md
+++ b/packages/components/src/basic/divider/README.md
@@ -23,89 +23,6 @@
|------|------|
| `default` | 分割线中间的文字内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
- 分割文字
-
-```
-
-### 基础分割线
-
-```vue
-
- 内容上方
- 内容下方
-
-```
-
-### 带文字的分割线
-
-```vue
-
- 更多信息
-
-```
-
-### 文字在起始位置
-
-```vue
-
- 起始位置
-
-```
-
-### 文字在末尾位置
-
-```vue
-
- 末尾位置
-
-```
-
-### 带图标的分割线
-
-```vue
-
-
-
-
-
-
-```
-
-### 多个分割线
-
-```vue
-
- 第一部分
- 第二章
- 第二部分
- 第三章
- 第三部分
-
-```
-
-### 自定义样式
-
-```vue
-
-
- 彩色文字
-
-
- 大间距
-
-
-```
-
## 注意事项
1. **文字居中**：默认情况下文字居中显示
diff --git a/packages/components/src/basic/divider/_examples/_basic.vue b/packages/components/src/basic/divider/_examples/_basic.vue
new file mode 100644
index 00000000..558c60a8
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/_basic.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 上方内容
+
+
+
+ 下方内容
+
+
+ 分割文字
+
+
diff --git a/packages/components/src/basic/divider/_examples/_position.vue b/packages/components/src/basic/divider/_examples/_position.vue
new file mode 100644
index 00000000..8141ec87
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/_position.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+ center
+
+
+ start
+
+
+ end
+
+
+
diff --git a/packages/components/src/basic/divider/_examples/index.ts b/packages/components/src/basic/divider/_examples/index.ts
new file mode 100644
index 00000000..b1b877dc
--- /dev/null
+++ b/packages/components/src/basic/divider/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Position from './_position.vue'
+import PositionRaw from './_position.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '位置',
+ component: Position,
+ componentRaw: PositionRaw,
+ },
+]
diff --git a/packages/components/src/basic/drawer/README.md b/packages/components/src/basic/drawer/README.md
index 961bb280..62708ccb 100644
--- a/packages/components/src/basic/drawer/README.md
+++ b/packages/components/src/basic/drawer/README.md
@@ -83,197 +83,6 @@ function openDrawer() {
```
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
- 打开抽屉
-
- 抽屉内容
-
-
-```
-
-### 基础抽屉
-
-```vue
-
-
-
- 打开抽屉
-
- 这是抽屉内容
-
-
-```
-
-### 不同弹出方向
-
-```vue
-
-
-
-
- 上方抽屉
- 下方抽屉
- 左侧抽屉
- 右侧抽屉
-
-
- 内容
- 内容
- 内容
- 内容
-
-```
-
-### 带底部按钮
-
-```vue
-
-
-
- 打开抽屉
-
- 请确认是否继续？
-
-
-```
-
-### 关闭前确认
-
-```vue
-
-
-
-
-
-
-
-```
-
-### 加载状态
-
-```vue
-
-
-
-
-
-
-
-```
-
-### 自定义头部和底部
-
-```vue
-
-
-
-
- 自定义标题
-
-
- 抽屉内容
-
-
- 取消
- 保存
-
-
-
-
-```
-
-### 调整抽屉宽度
-
-```vue
-
-
- 这是一个较宽的抽屉
-
-
-```
-
-### 居中显示
-
-```vue
-
-
-
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 控制抽屉打开状态
diff --git a/packages/components/src/basic/drawer/_examples/_basic.vue b/packages/components/src/basic/drawer/_examples/_basic.vue
new file mode 100644
index 00000000..680ef987
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_basic.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ 打开抽屉
+
+
+
+ 这里是抽屉内容区域。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_center-border-loading.vue b/packages/components/src/basic/drawer/_examples/_center-border-loading.vue
new file mode 100644
index 00000000..1af58aee
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_center-border-loading.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 居中
+
+
+ 无边框
+
+
+ 载入
+
+
+
+
+
+ 标题、描述和底部按钮会居中显示。
+
+
+
+
+ 头部和底部不显示分割线。
+
+
+
+
+ 抽屉主体区域会显示载入遮罩。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_closable.vue b/packages/components/src/basic/drawer/_examples/_closable.vue
new file mode 100644
index 00000000..9244d3c9
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_closable.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ 显示关闭按钮
+
+
+ 隐藏关闭按钮
+
+
+
+
+ 右上角会显示关闭按钮。
+
+
+ 右上角不会显示关闭按钮，可通过底部按钮关闭。
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_custom-style.vue b/packages/components/src/basic/drawer/_examples/_custom-style.vue
new file mode 100644
index 00000000..5620ec26
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_custom-style.vue
@@ -0,0 +1,28 @@
+
+
+
+
+ 打开抽屉
+
+
+
+ 可以根据业务场景调整宽度、背景、边框和底部区域样式。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_event.vue b/packages/components/src/basic/drawer/_examples/_event.vue
new file mode 100644
index 00000000..e1b5dc74
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_event.vue
@@ -0,0 +1,36 @@
+
+
+
+
+ 打开抽屉
+
+
+
+ 打开、关闭、确认和取消时会触发对应事件。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_functional.vue b/packages/components/src/basic/drawer/_examples/_functional.vue
new file mode 100644
index 00000000..d6e44ba3
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_functional.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ 打开抽屉
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_header-footer.vue b/packages/components/src/basic/drawer/_examples/_header-footer.vue
new file mode 100644
index 00000000..4a8cf5a3
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_header-footer.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ 隐藏头部
+
+
+ 隐藏底部
+
+
+
+
+
+ 当前抽屉隐藏了头部区域。
+
+
+
+
+ 当前抽屉隐藏了底部操作区。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_overlay-blur.vue b/packages/components/src/basic/drawer/_examples/_overlay-blur.vue
new file mode 100644
index 00000000..ed2e2f4e
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_overlay-blur.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ 无遮罩
+
+
+ 模糊遮罩
+
+
+
+
+ 打开时不显示背景遮罩。
+
+
+ 打开时背景遮罩带模糊效果。
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_side.vue b/packages/components/src/basic/drawer/_examples/_side.vue
new file mode 100644
index 00000000..84d850ec
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_side.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+ 上方
+
+
+ 下方
+
+
+ 左侧
+
+
+ 右侧
+
+
+
+
+ 从页面顶部弹出。
+
+
+ 从页面底部弹出。
+
+
+ 从页面左侧弹出。
+
+
+ 从页面右侧弹出。
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_slot.vue b/packages/components/src/basic/drawer/_examples/_slot.vue
new file mode 100644
index 00000000..93086aa0
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_slot.vue
@@ -0,0 +1,46 @@
+
+
+
+
+ 打开抽屉
+
+
+
+
+
+
+
+ 自定义头部
+
+
+ 使用 header 插槽替换默认标题。
+
+
+
+
+
+ 这里是默认插槽内容。
+
+
+
+
+
+ 取消
+
+
+ 保存
+
+
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/_title-description.vue b/packages/components/src/basic/drawer/_examples/_title-description.vue
new file mode 100644
index 00000000..f93deccf
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/_title-description.vue
@@ -0,0 +1,24 @@
+
+
+
+
+ 打开抽屉
+
+
+
+ 标题和描述会显示在默认头部区域中。
+
+
+
diff --git a/packages/components/src/basic/drawer/_examples/index.ts b/packages/components/src/basic/drawer/_examples/index.ts
new file mode 100644
index 00000000..c3697b3b
--- /dev/null
+++ b/packages/components/src/basic/drawer/_examples/index.ts
@@ -0,0 +1,80 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CenterBorderLoading from './_center-border-loading.vue'
+import CenterBorderLoadingRaw from './_center-border-loading.vue?raw'
+import Closable from './_closable.vue'
+import ClosableRaw from './_closable.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import HeaderFooter from './_header-footer.vue'
+import HeaderFooterRaw from './_header-footer.vue?raw'
+import OverlayBlur from './_overlay-blur.vue'
+import OverlayBlurRaw from './_overlay-blur.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import TitleDescription from './_title-description.vue'
+import TitleDescriptionRaw from './_title-description.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '弹出方向',
+ component: Side,
+ componentRaw: SideRaw,
+ },
+ {
+ title: '标题描述',
+ component: TitleDescription,
+ componentRaw: TitleDescriptionRaw,
+ },
+ {
+ title: '显示/隐藏关闭按钮',
+ component: Closable,
+ componentRaw: ClosableRaw,
+ },
+ {
+ title: '居中/边框/载入',
+ component: CenterBorderLoading,
+ componentRaw: CenterBorderLoadingRaw,
+ },
+ {
+ title: '遮罩/模糊',
+ component: OverlayBlur,
+ componentRaw: OverlayBlurRaw,
+ },
+ {
+ title: '显示/隐藏头部底部',
+ component: HeaderFooter,
+ componentRaw: HeaderFooterRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+ {
+ title: '触发事件',
+ component: Event,
+ componentRaw: EventRaw,
+ },
+ {
+ title: '函数式调用',
+ component: Functional,
+ componentRaw: FunctionalRaw,
+ },
+]
diff --git a/packages/components/src/basic/drawer/index.vue b/packages/components/src/basic/drawer/index.vue
index a87429cd..75794b5e 100644
--- a/packages/components/src/basic/drawer/index.vue
+++ b/packages/components/src/basic/drawer/index.vue
@@ -77,8 +77,6 @@ watch(isOpen, (val) => {
if (val && !hasOpened.value) {
hasOpened.value = true
}
-}, {
- immediate: true,
})
const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
diff --git a/packages/components/src/basic/dropdown/README.md b/packages/components/src/basic/dropdown/README.md
index 0b96473e..2397547c 100644
--- a/packages/components/src/basic/dropdown/README.md
+++ b/packages/components/src/basic/dropdown/README.md
@@ -50,196 +50,6 @@ interface MenuSubItem {
| `header` | 菜单头部内容 |
| `footer` | 菜单底部内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
- 操作
-
-
-```
-
-### 基础下拉菜单
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 带分组的菜单
-
-```vue
-
-
-
-
- 操作
-
-
-```
-
-### 带子菜单
-
-```vue
-
-
-
-
- 分享
-
-
-```
-
-### 带头部和底部
-
-```vue
-
-
-
-
-
-
-
张三
-
zhangsan@example.com
-
-
-
- v1.0.0
-
-
-
-
-```
-
-### 禁用菜单项
-
-```vue
-
-
-
-
- 操作
-
-
-```
-
-### 控制弹出方向
-
-```vue
-
-
- 向上弹出
-
-
-
- 向左弹出
-
-
-```
-
-### 用户菜单
-
-```vue
-
-
-
-
-
- {{ userStore.username }}
-
-
-
-```
-
## 注意事项
1. **items 结构**：`items` 是二维数组，每个子数组为一组，组与组之间会自动添加分割线
diff --git a/packages/components/src/basic/dropdown/_examples/_align.vue b/packages/components/src/basic/dropdown/_examples/_align.vue
new file mode 100644
index 00000000..9e6d0318
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_align.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ Start
+
+
+
+
+ Center
+
+
+
+
+ End
+
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_basic.vue b/packages/components/src/basic/dropdown/_examples/_basic.vue
new file mode 100644
index 00000000..63f1f5a2
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_basic.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+ 操作
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_disabled.vue b/packages/components/src/basic/dropdown/_examples/_disabled.vue
new file mode 100644
index 00000000..8690b224
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_disabled.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+ 更多操作
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_icon.vue b/packages/components/src/basic/dropdown/_examples/_icon.vue
new file mode 100644
index 00000000..ef7775e8
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_icon.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+ 文件操作
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_nested.vue b/packages/components/src/basic/dropdown/_examples/_nested.vue
new file mode 100644
index 00000000..f550157b
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_nested.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+ 页面操作
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_offset.vue b/packages/components/src/basic/dropdown/_examples/_offset.vue
new file mode 100644
index 00000000..1f5fc08f
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_offset.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ Side offset
+
+
+
+
+ Align offset
+
+
+
+
+ Both
+
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_side.vue b/packages/components/src/basic/dropdown/_examples/_side.vue
new file mode 100644
index 00000000..02721885
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_side.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Top
+
+
+
+
+ Right
+
+
+
+
+ Bottom
+
+
+
+
+ Left
+
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/_warning.vue b/packages/components/src/basic/dropdown/_examples/_warning.vue
new file mode 100644
index 00000000..7e5b34b5
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/_warning.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+ 项目操作
+
+
+
diff --git a/packages/components/src/basic/dropdown/_examples/index.ts b/packages/components/src/basic/dropdown/_examples/index.ts
new file mode 100644
index 00000000..e233ce67
--- /dev/null
+++ b/packages/components/src/basic/dropdown/_examples/index.ts
@@ -0,0 +1,59 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+import Nested from './_nested.vue'
+import NestedRaw from './_nested.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+import Warning from './_warning.vue'
+import WarningRaw from './_warning.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '图标',
+ component: Icon,
+ componentRaw: IconRaw,
+ },
+ {
+ title: '警告',
+ component: Warning,
+ componentRaw: WarningRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '嵌套',
+ component: Nested,
+ componentRaw: NestedRaw,
+ },
+ {
+ title: '弹出方向',
+ component: Side,
+ componentRaw: SideRaw,
+ },
+ {
+ title: '对齐方式',
+ component: Align,
+ componentRaw: AlignRaw,
+ },
+ {
+ title: '偏移',
+ component: Offset,
+ componentRaw: OffsetRaw,
+ },
+]
diff --git a/packages/components/src/basic/file-upload/README.md b/packages/components/src/basic/file-upload/README.md
index 68094738..25963f7f 100644
--- a/packages/components/src/basic/file-upload/README.md
+++ b/packages/components/src/basic/file-upload/README.md
@@ -76,119 +76,6 @@ interface FileItem {
将鼠标移入当前组件，或通过 `Tab` 聚焦当前组件后，可直接按 `Ctrl+V` / `Cmd+V` 粘贴剪贴板中的文件。启用 `directory` 后，粘贴上传不可用。
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 上传前校验
-
-组件不再内置文件格式或大小校验。如需校验，请通过 `beforeUpload` 实现。
-
-```vue
-
-
-
-
-```
-
-### 自定义上传请求
-
-```vue
-
-
-
-
-```
-
-### 文件夹上传
-
-启用 `directory` 后，文件选择器只能选择文件夹。选择文件夹后，文件夹内的文件会作为扁平文件列表逐个上传。
-
-```vue
-
-
-
-
-```
-
## 注意事项
1. **文件列表**：`modelValue` 是必需的双向绑定属性。
diff --git a/packages/components/src/basic/file-upload/_examples/_basic.vue b/packages/components/src/basic/file-upload/_examples/_basic.vue
new file mode 100644
index 00000000..928be1f3
--- /dev/null
+++ b/packages/components/src/basic/file-upload/_examples/_basic.vue
@@ -0,0 +1,24 @@
+
+
+
+
diff --git a/apps/example/src/views/component_example/file_upload/_demo4.vue b/packages/components/src/basic/file-upload/_examples/_custom-request.vue
similarity index 63%
rename from apps/example/src/views/component_example/file_upload/_demo4.vue
rename to packages/components/src/basic/file-upload/_examples/_custom-request.vue
index 7e87f711..f551e8da 100644
--- a/apps/example/src/views/component_example/file_upload/_demo4.vue
+++ b/packages/components/src/basic/file-upload/_examples/_custom-request.vue
@@ -1,6 +1,11 @@
diff --git a/apps/example/src/views/component_example/file_upload/_demo5.vue b/packages/components/src/basic/file-upload/_examples/_directory.vue
similarity index 70%
rename from apps/example/src/views/component_example/file_upload/_demo5.vue
rename to packages/components/src/basic/file-upload/_examples/_directory.vue
index 2263d584..0d7bc9cc 100644
--- a/apps/example/src/views/component_example/file_upload/_demo5.vue
+++ b/packages/components/src/basic/file-upload/_examples/_directory.vue
@@ -1,5 +1,8 @@
+
+
+
+
+ 上传项目附件
+
+
+ 支持拖拽、点击选择或粘贴文件
+
+
+
diff --git a/apps/example/src/views/component_example/file_upload/_demo2.vue b/packages/components/src/basic/file-upload/_examples/_validation.vue
similarity index 60%
rename from apps/example/src/views/component_example/file_upload/_demo2.vue
rename to packages/components/src/basic/file-upload/_examples/_validation.vue
index f88b6e0e..d51807b9 100644
--- a/apps/example/src/views/component_example/file_upload/_demo2.vue
+++ b/packages/components/src/basic/file-upload/_examples/_validation.vue
@@ -1,6 +1,11 @@
-
-
-
-
- 透明度：
- {{ filters[0] }}%
-
-
-
-
-
-
-```
-
-### 底部操作栏
-
-```vue
-
-
-
- 订单项 {{ i }}
-
-
-
-
-
-
- 合计：
- ¥ 1,234.00
-
-
- 联系客服
- 立即支付
-
-
-
-```
-
-### 顶部搜索栏
-
-```vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### 底部表单提交栏
-
-```vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 重置
-
- 保存修改
-
-
-
-
-```
-
## 注意事项
1. 固定栏会自动计算侧边栏宽度并适配
diff --git a/apps/example/src/views/component_example/fixed_bar/_demo2.vue b/packages/components/src/basic/fixed-bar/_examples/_bottom.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/fixed_bar/_demo2.vue
rename to packages/components/src/basic/fixed-bar/_examples/_bottom.vue
index 195dc999..4e239ab8
--- a/apps/example/src/views/component_example/fixed_bar/_demo2.vue
+++ b/packages/components/src/basic/fixed-bar/_examples/_bottom.vue
@@ -1,4 +1,9 @@
diff --git a/apps/example/src/views/component_example/fixed_bar/_demo1.vue b/packages/components/src/basic/fixed-bar/_examples/_top.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/fixed_bar/_demo1.vue
rename to packages/components/src/basic/fixed-bar/_examples/_top.vue
index 945d9a00..137d4749
--- a/apps/example/src/views/component_example/fixed_bar/_demo1.vue
+++ b/packages/components/src/basic/fixed-bar/_examples/_top.vue
@@ -1,4 +1,9 @@
diff --git a/packages/components/src/basic/fixed-bar/_examples/index.ts b/packages/components/src/basic/fixed-bar/_examples/index.ts
new file mode 100644
index 00000000..a6431097
--- /dev/null
+++ b/packages/components/src/basic/fixed-bar/_examples/index.ts
@@ -0,0 +1,17 @@
+import Bottom from './_bottom.vue'
+import BottomRaw from './_bottom.vue?raw'
+import Top from './_top.vue'
+import TopRaw from './_top.vue?raw'
+
+export default [
+ {
+ title: '固定在页面顶部',
+ component: Top,
+ componentRaw: TopRaw,
+ },
+ {
+ title: '固定在页面底部',
+ component: Bottom,
+ componentRaw: BottomRaw,
+ },
+]
diff --git a/packages/components/src/basic/hover-card/README.md b/packages/components/src/basic/hover-card/README.md
index 82f3f9d3..43f609dc 100644
--- a/packages/components/src/basic/hover-card/README.md
+++ b/packages/components/src/basic/hover-card/README.md
@@ -29,157 +29,6 @@
| `default` | 触发元素（必填） |
| `card` | 悬浮卡片内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
- 悬停我
-
-
-
-
-
-```
-
-### 基础悬浮卡片
-
-```vue
-
-
- @张三
-
-
-
-
-
-```
-
-### 链接预览
-
-```vue
-
-
- GitHub
-
-
-
-
-
-
GitHub
-
- 全球最大的代码托管平台，提供代码仓库、Issue 跟踪、CI/CD 等功能。
-
-
-
-
-
-
-```
-
-### 图片预览
-
-```vue
-
-
-
-
-
-
-```
-
-### 日期悬停提示
-
-```vue
-
-
- 2024-01-15
-
-
-
2024 年 1 月 15 日 星期一
-
距今 30 天
-
-
-
-```
-
-### 不同弹出方向
-
-```vue
-
-
-
-
- 上方弹出
- 上方内容
-
-
- 下方弹出
- 下方内容
-
-
-
-
- 左侧弹出
- 左侧内容
-
-
- 右侧弹出
- 右侧内容
-
-
-
-```
-
-### 用户详细信息
-
-```vue
-
-
-
-
-
-
-
-
-
张三
-
zhangsan@example.com
-
-
-
-
部门： 产品部
-
职位： 高级产品经理
-
入职时间： 2020-03-15
-
-
-
-
-```
-
## 注意事项
1. **触发元素**：必须提供 `default` slot 作为触发元素
diff --git a/packages/components/src/basic/hover-card/_examples/_align.vue b/packages/components/src/basic/hover-card/_examples/_align.vue
new file mode 100644
index 00000000..0d572316
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_align.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Start
+
+
+
+ 起始位置对齐
+
+
+
+
+
+ Center
+
+
+
+ 居中对齐
+
+
+
+
+
+ End
+
+
+
+ 结束位置对齐
+
+
+
+
diff --git a/apps/example/src/views/component_example/hover_card/_demo1.vue b/packages/components/src/basic/hover-card/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 73%
rename from apps/example/src/views/component_example/hover_card/_demo1.vue
rename to packages/components/src/basic/hover-card/_examples/_basic.vue
index ddeb88f5..ff746476
--- a/apps/example/src/views/component_example/hover_card/_demo1.vue
+++ b/packages/components/src/basic/hover-card/_examples/_basic.vue
@@ -1,3 +1,11 @@
+
+
diff --git a/packages/components/src/basic/hover-card/_examples/_offset.vue b/packages/components/src/basic/hover-card/_examples/_offset.vue
new file mode 100644
index 00000000..b26153a2
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_offset.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Side offset
+
+
+
+ 与触发元素保持更大距离
+
+
+
+
+
+ Align offset
+
+
+
+ 沿对齐方向偏移
+
+
+
+
+
+ Both
+
+
+
+ 同时设置两种偏移
+
+
+
+
diff --git a/packages/components/src/basic/hover-card/_examples/_side.vue b/packages/components/src/basic/hover-card/_examples/_side.vue
new file mode 100644
index 00000000..6c1efa2f
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/_side.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Top
+
+
+
+ 从上方弹出
+
+
+
+
+
+ Right
+
+
+
+ 从右侧弹出
+
+
+
+
+
+ Bottom
+
+
+
+ 从下方弹出
+
+
+
+
+
+ Left
+
+
+
+ 从左侧弹出
+
+
+
+
diff --git a/packages/components/src/basic/hover-card/_examples/index.ts b/packages/components/src/basic/hover-card/_examples/index.ts
new file mode 100644
index 00000000..f8954126
--- /dev/null
+++ b/packages/components/src/basic/hover-card/_examples/index.ts
@@ -0,0 +1,31 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '弹出方向',
+ component: Side,
+ componentRaw: SideRaw,
+ },
+ {
+ title: '对齐方式',
+ component: Align,
+ componentRaw: AlignRaw,
+ },
+ {
+ title: '偏移',
+ component: Offset,
+ componentRaw: OffsetRaw,
+ },
+]
diff --git a/packages/components/src/basic/icon/README.md b/packages/components/src/basic/icon/README.md
index acb79f77..a3a35aab 100644
--- a/packages/components/src/basic/icon/README.md
+++ b/packages/components/src/basic/icon/README.md
@@ -18,97 +18,6 @@
| `transition` | `boolean` | `false` | 是否开启图标切换动画 |
| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-```
-
-### UnoCSS 图标（推荐）
-
-```vue
-
-
-```
-
-### Iconify 图标
-
-```vue
-
-
-```
-
-### SVG 雪碧图
-
-先在项目中引入 SVG 雪碧图，然后使用：
-
-```vue
-
-
-```
-
-### 图片图标
-
-```vue
-
-
-
-```
-
-### 自定义尺寸和颜色
-
-```vue
-
-
-
-```
-
-### 动态图标
-
-```vue
-
-
-
-
-
-```
-
-### 带点击事件的图标
-
-```vue
-
-
-```
-
## 注意事项
### 图标格式说明
diff --git a/packages/components/src/basic/icon/_examples/_iconify.vue b/packages/components/src/basic/icon/_examples/_iconify.vue
new file mode 100644
index 00000000..0eec70fd
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_iconify.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/packages/components/src/basic/icon/_examples/_image.vue b/packages/components/src/basic/icon/_examples/_image.vue
new file mode 100644
index 00000000..0dc5f707
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_image.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
网络图片
+
+
+
+ 更换图片
+
+
+ 触发错误
+
+
+
+
+ 相对路径
+
+
diff --git a/packages/components/src/basic/icon/_examples/_svg.vue b/packages/components/src/basic/icon/_examples/_svg.vue
new file mode 100644
index 00000000..1a29265c
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_svg.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ 单色
+
+
+
+ {{ name.replace('example-', '') }}
+
+
+
+
+
+ 彩色
+
+
+
+ {{ name.replace('example-', '') }}
+
+
+
+
diff --git a/packages/components/src/basic/icon/_examples/_transition.vue b/packages/components/src/basic/icon/_examples/_transition.vue
new file mode 100644
index 00000000..2e7a9d7f
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_transition.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+ 无动画
+
+
+ 过渡动画
+
+
+ 切换图标
+
+
diff --git a/packages/components/src/basic/icon/_examples/_unocss.vue b/packages/components/src/basic/icon/_examples/_unocss.vue
new file mode 100644
index 00000000..03e0a9a1
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/_unocss.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/packages/components/src/basic/icon/_examples/index.ts b/packages/components/src/basic/icon/_examples/index.ts
new file mode 100644
index 00000000..7148d0a6
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/index.ts
@@ -0,0 +1,38 @@
+import Iconify from './_iconify.vue'
+import IconifyRaw from './_iconify.vue?raw'
+import Image from './_image.vue'
+import ImageRaw from './_image.vue?raw'
+import Svg from './_svg.vue'
+import SvgRaw from './_svg.vue?raw'
+import Transition from './_transition.vue'
+import TransitionRaw from './_transition.vue?raw'
+import Unocss from './_unocss.vue'
+import UnocssRaw from './_unocss.vue?raw'
+
+export default [
+ {
+ title: 'SVG文件',
+ component: Svg,
+ componentRaw: SvgRaw,
+ },
+ {
+ title: 'Iconify',
+ component: Iconify,
+ componentRaw: IconifyRaw,
+ },
+ {
+ title: 'UnoCSS',
+ component: Unocss,
+ componentRaw: UnocssRaw,
+ },
+ {
+ title: 'Image',
+ component: Image,
+ componentRaw: ImageRaw,
+ },
+ {
+ title: '过渡动画',
+ component: Transition,
+ componentRaw: TransitionRaw,
+ },
+]
diff --git a/packages/components/src/basic/icon/_examples/logo.svg b/packages/components/src/basic/icon/_examples/logo.svg
new file mode 100644
index 00000000..488039c9
--- /dev/null
+++ b/packages/components/src/basic/icon/_examples/logo.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/packages/components/src/basic/image-preview/README.md b/packages/components/src/basic/image-preview/README.md
index 57b237a3..18dbb1ac 100644
--- a/packages/components/src/basic/image-preview/README.md
+++ b/packages/components/src/basic/image-preview/README.md
@@ -32,162 +32,6 @@
| `load` | - | 图片加载成功时触发 |
| `error` | - | 图片加载失败时触发 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-```
-
-### 基础图片预览
-
-```vue
-
-
-```
-
-### 自定义尺寸
-
-```vue
-
-
-```
-
-### 图片列表
-
-```vue
-
-
-
-
-
-
-```
-
-### 自定义加载状态
-
-```vue
-
-
-
-
- 加载中...
-
-
-
-
-```
-
-### 自定义错误状态
-
-```vue
-
-
-
-
- 加载失败
-
-
-
-
-```
-
-### 监听加载事件
-
-```vue
-
-
-
-
-```
-
-### 头像式预览
-
-```vue
-
-
-```
-
-### 商品图片预览
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 带描述的画廊
-
-```vue
-
-
-
-
-
-```
-
## 注意事项
1. **点击放大**：点击图片会自动打开全屏预览
diff --git a/packages/components/src/basic/image-preview/_examples/_basic.vue b/packages/components/src/basic/image-preview/_examples/_basic.vue
new file mode 100644
index 00000000..aff2dbb7
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_basic.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/packages/components/src/basic/image-preview/_examples/_error.vue b/packages/components/src/basic/image-preview/_examples/_error.vue
new file mode 100644
index 00000000..55480caa
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_error.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/apps/example/src/views/component_example/image_preview/_demo2.vue b/packages/components/src/basic/image-preview/_examples/_functional.vue
old mode 100755
new mode 100644
similarity index 66%
rename from apps/example/src/views/component_example/image_preview/_demo2.vue
rename to packages/components/src/basic/image-preview/_examples/_functional.vue
index 56c1d08a..c870071c
--- a/apps/example/src/views/component_example/image_preview/_demo2.vue
+++ b/packages/components/src/basic/image-preview/_examples/_functional.vue
@@ -1,5 +1,9 @@
-
+
预览单张
预览多张
-
+
预览多张（初始预览第2张）
diff --git a/packages/components/src/basic/image-preview/_examples/_size.vue b/packages/components/src/basic/image-preview/_examples/_size.vue
new file mode 100644
index 00000000..61a264bb
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/_size.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/image-preview/_examples/index.ts b/packages/components/src/basic/image-preview/_examples/index.ts
new file mode 100644
index 00000000..60ace222
--- /dev/null
+++ b/packages/components/src/basic/image-preview/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Error from './_error.vue'
+import ErrorRaw from './_error.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '尺寸',
+ component: Size,
+ componentRaw: SizeRaw,
+ },
+ {
+ title: '错误',
+ component: Error,
+ componentRaw: ErrorRaw,
+ },
+ {
+ title: '函数式调用',
+ component: Functional,
+ componentRaw: FunctionalRaw,
+ },
+]
diff --git a/packages/components/src/basic/image-upload/README.md b/packages/components/src/basic/image-upload/README.md
index 4ac180d9..ccadf9c2 100644
--- a/packages/components/src/basic/image-upload/README.md
+++ b/packages/components/src/basic/image-upload/README.md
@@ -64,166 +64,6 @@ interface UploadRequestOptions {
将鼠标移入当前组件，或通过 `Tab` 聚焦当前组件后，可直接按 `Ctrl+V` / `Cmd+V` 粘贴剪贴板中的图片。启用 `directory` 后，粘贴上传不可用。
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 多图上传
-
-```vue
-
-
-
-
-```
-
-### 上传前校验
-
-组件不再内置图片格式、大小或尺寸校验。如需校验，请通过 `beforeUpload` 实现。
-
-```vue
-
-
-
-
-```
-
-### 自定义上传请求
-
-```vue
-
-
-
-
-```
-
-### 文件夹上传
-
-启用 `directory` 后，文件选择器只能选择文件夹。选择文件夹后，文件夹内的文件会作为扁平文件列表逐个上传。
-
-```vue
-
-
-
-
-```
-
-### 自定义上传按钮
-
-```vue
-
-
-
-
-
- 添加图片
-
-
-
-```
-
## 注意事项
1. **图片预览**：上传成功后可点击预览大图。
diff --git a/packages/components/src/basic/image-upload/_examples/_basic.vue b/packages/components/src/basic/image-upload/_examples/_basic.vue
new file mode 100644
index 00000000..fe7ba66d
--- /dev/null
+++ b/packages/components/src/basic/image-upload/_examples/_basic.vue
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/apps/example/src/views/component_example/image_upload/_demo4.vue b/packages/components/src/basic/image-upload/_examples/_custom-request.vue
similarity index 64%
rename from apps/example/src/views/component_example/image_upload/_demo4.vue
rename to packages/components/src/basic/image-upload/_examples/_custom-request.vue
index 512e3251..2eda1861 100644
--- a/apps/example/src/views/component_example/image_upload/_demo4.vue
+++ b/packages/components/src/basic/image-upload/_examples/_custom-request.vue
@@ -1,6 +1,11 @@
diff --git a/apps/example/src/views/component_example/image_upload/_demo5.vue b/packages/components/src/basic/image-upload/_examples/_directory.vue
similarity index 66%
rename from apps/example/src/views/component_example/image_upload/_demo5.vue
rename to packages/components/src/basic/image-upload/_examples/_directory.vue
index de081bea..0ce00638 100644
--- a/apps/example/src/views/component_example/image_upload/_demo5.vue
+++ b/packages/components/src/basic/image-upload/_examples/_directory.vue
@@ -1,14 +1,16 @@
+
+
+
diff --git a/apps/example/src/views/component_example/image_upload/_demo3.vue b/packages/components/src/basic/image-upload/_examples/_validation.vue
similarity index 55%
rename from apps/example/src/views/component_example/image_upload/_demo3.vue
rename to packages/components/src/basic/image-upload/_examples/_validation.vue
index e30c7ad7..3d058f67 100644
--- a/apps/example/src/views/component_example/image_upload/_demo3.vue
+++ b/packages/components/src/basic/image-upload/_examples/_validation.vue
@@ -1,20 +1,27 @@
@@ -22,7 +29,7 @@ function handleSuccess() {
-const code = ref('')
-
-
-
-
-```
-
-### 基础验证码输入
-
-```vue
-
-
-
-
-```
-
-### 4 位验证码
-
-```vue
-
-
-
-
-```
-
-### 监听输入完成
-
-```vue
-
-
-
-
-```
-
-### 验证码表单
-
-```vue
-
-
-
-
-
-
- {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
-
-
-
-
-```
-
-### 邮箱验证
-
-```vue
-
-
-
-
-
-
-
请输入发送到 {{ email }} 的验证码
-
-
-
-```
-
-### 密码保护验证
-
-```vue
-
-
-
-
- 为了您的账号安全，请输入验证码继续操作
-
-
-```
-
## 注意事项
1. **自动聚焦**：组件会自动聚焦到第一个输入框
diff --git a/packages/components/src/basic/input-otp/_examples/_basic.vue b/packages/components/src/basic/input-otp/_examples/_basic.vue
new file mode 100644
index 00000000..b7cd3355
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/_callback.vue b/packages/components/src/basic/input-otp/_examples/_callback.vue
new file mode 100644
index 00000000..32721561
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_callback.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
{{ inputText }}
+
{{ completeText }}
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/_disabled.vue b/packages/components/src/basic/input-otp/_examples/_disabled.vue
new file mode 100644
index 00000000..d700f4fb
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/_length.vue b/packages/components/src/basic/input-otp/_examples/_length.vue
new file mode 100644
index 00000000..8fe35392
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_length.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/_pattern.vue b/packages/components/src/basic/input-otp/_examples/_pattern.vue
new file mode 100644
index 00000000..8046a7e1
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_pattern.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+ 自定义：仅允许 A-F 和 0-9
+
+
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/_separator.vue b/packages/components/src/basic/input-otp/_examples/_separator.vue
new file mode 100644
index 00000000..6fd23a31
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/_separator.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/input-otp/_examples/index.ts b/packages/components/src/basic/input-otp/_examples/index.ts
new file mode 100644
index 00000000..4660c4bf
--- /dev/null
+++ b/packages/components/src/basic/input-otp/_examples/index.ts
@@ -0,0 +1,45 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Callback from './_callback.vue'
+import CallbackRaw from './_callback.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Length from './_length.vue'
+import LengthRaw from './_length.vue?raw'
+import Pattern from './_pattern.vue'
+import PatternRaw from './_pattern.vue?raw'
+import Separator from './_separator.vue'
+import SeparatorRaw from './_separator.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '长度',
+ component: Length,
+ componentRaw: LengthRaw,
+ },
+ {
+ title: '模式',
+ component: Pattern,
+ componentRaw: PatternRaw,
+ },
+ {
+ title: '分隔符',
+ component: Separator,
+ componentRaw: SeparatorRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '回调',
+ component: Callback,
+ componentRaw: CallbackRaw,
+ },
+]
diff --git a/packages/components/src/basic/input-otp/index.vue b/packages/components/src/basic/input-otp/index.vue
index 0110a967..0a6a732b 100644
--- a/packages/components/src/basic/input-otp/index.vue
+++ b/packages/components/src/basic/input-otp/index.vue
@@ -1,33 +1,90 @@
-
-
-
+
+
+
+
+
diff --git a/packages/components/src/basic/input/README.md b/packages/components/src/basic/input/README.md
index fe02653d..8dd5bd3a 100644
--- a/packages/components/src/basic/input/README.md
+++ b/packages/components/src/basic/input/README.md
@@ -42,155 +42,6 @@
|--------|------|
| `ref` | 获取原生 input 元素引用 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础输入框
-
-```vue
-
-
-
-
-```
-
-### 密码输入框
-
-```vue
-
-
-
-
-```
-
-### 带清空按钮
-
-```vue
-
-
-
-
-```
-
-### 带前缀图标
-
-```vue
-
-
-
-
-
-
-```
-
-### 带后缀按钮
-
-```vue
-
-
-
- 获取
-
-
-
-```
-
-### 前后缀同时使用
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-```
-
-### 搜索框
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 密码强度指示
-
-```vue
-
-
-
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/apps/example/src/views/component_example/input/_demo1.vue b/packages/components/src/basic/input/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 52%
rename from apps/example/src/views/component_example/input/_demo1.vue
rename to packages/components/src/basic/input/_examples/_basic.vue
index d27bb660..3e2d079e
--- a/apps/example/src/views/component_example/input/_demo1.vue
+++ b/packages/components/src/basic/input/_examples/_basic.vue
@@ -1,4 +1,8 @@
diff --git a/packages/components/src/basic/input/_examples/_clearable.vue b/packages/components/src/basic/input/_examples/_clearable.vue
new file mode 100644
index 00000000..ea5dc648
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/_clearable.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/input/_examples/_disabled.vue b/packages/components/src/basic/input/_examples/_disabled.vue
new file mode 100644
index 00000000..61e12f4a
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/apps/example/src/views/component_example/input/_demo2.vue b/packages/components/src/basic/input/_examples/_password.vue
old mode 100755
new mode 100644
similarity index 54%
rename from apps/example/src/views/component_example/input/_demo2.vue
rename to packages/components/src/basic/input/_examples/_password.vue
index 019f4669..95091c4e
--- a/apps/example/src/views/component_example/input/_demo2.vue
+++ b/packages/components/src/basic/input/_examples/_password.vue
@@ -1,4 +1,8 @@
diff --git a/apps/example/src/views/component_example/input/_demo3.vue b/packages/components/src/basic/input/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 76%
rename from apps/example/src/views/component_example/input/_demo3.vue
rename to packages/components/src/basic/input/_examples/_slot.vue
index 2afebf96..719f50cb
--- a/apps/example/src/views/component_example/input/_demo3.vue
+++ b/packages/components/src/basic/input/_examples/_slot.vue
@@ -1,4 +1,11 @@
diff --git a/packages/components/src/basic/input/_examples/index.ts b/packages/components/src/basic/input/_examples/index.ts
new file mode 100644
index 00000000..df8ce2c3
--- /dev/null
+++ b/packages/components/src/basic/input/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Clearable from './_clearable.vue'
+import ClearableRaw from './_clearable.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Password from './_password.vue'
+import PasswordRaw from './_password.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '可清空',
+ component: Clearable,
+ componentRaw: ClearableRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '密码',
+ component: Password,
+ componentRaw: PasswordRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+]
diff --git a/packages/components/src/basic/kbd-group/README.md b/packages/components/src/basic/kbd-group/README.md
index 379b5f24..611d1cf9 100644
--- a/packages/components/src/basic/kbd-group/README.md
+++ b/packages/components/src/basic/kbd-group/README.md
@@ -21,71 +21,6 @@
|------|------|
| `default` | 包含的 `FaKbd` 组件 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
- ⌘
- K
-
-
-```
-
-### 双键组合
-
-```vue
-
-
- ⌘
- K
-
-
-```
-
-### 三键组合
-
-```vue
-
-
- Ctrl
- Shift
- P
-
-
-```
-
-### 带加号分隔符
-
-```vue
-
-
- ⌘
- +
- K
-
-
-```
-
-### 在表格中展示快捷键
-
-```vue
-
-
-
- 搜索
- ⌘ K
-
- 新建
- ⌘ N
-
-
-```
-
## 注意事项
1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
diff --git a/packages/components/src/basic/kbd-group/_examples/_basic.vue b/packages/components/src/basic/kbd-group/_examples/_basic.vue
new file mode 100644
index 00000000..50e738f9
--- /dev/null
+++ b/packages/components/src/basic/kbd-group/_examples/_basic.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+ ⌘
+ ⇧
+ K
+
+
+ Ctrl
+ Alt
+ Delete
+
+
+
diff --git a/packages/components/src/basic/kbd-group/_examples/index.ts b/packages/components/src/basic/kbd-group/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/kbd-group/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+]
diff --git a/packages/components/src/basic/kbd/README.md b/packages/components/src/basic/kbd/README.md
index 69f37754..362ff273 100644
--- a/packages/components/src/basic/kbd/README.md
+++ b/packages/components/src/basic/kbd/README.md
@@ -21,65 +21,6 @@
|------|------|
| `default` | 按键内容（字符、图标等） |
-## 示例
-
-### 基础用法
-
-```vue
-
- ⌘
- K
-
-```
-
-### 单个按键
-
-```vue
-
- ⌘
- K
- Enter
-
-```
-
-### 组合按键（与 FaKbdGroup 配合使用）
-
-```vue
-
-
- ⌘
- K
-
-
-
- Ctrl
- Shift
- P
-
-
-```
-
-### 带图标的快捷键
-
-```vue
-
-
- ⌘
-
-
-```
-
-### 在提示文字中使用
-
-```vue
-
-
- 按 ⌘ K
-
-```
-
## 注意事项
### 样式特点
diff --git a/apps/example/src/views/component_example/kbd/_demo1.vue b/packages/components/src/basic/kbd/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 50%
rename from apps/example/src/views/component_example/kbd/_demo1.vue
rename to packages/components/src/basic/kbd/_examples/_basic.vue
index b3abb6a1..331b94f1
--- a/apps/example/src/views/component_example/kbd/_demo1.vue
+++ b/packages/components/src/basic/kbd/_examples/_basic.vue
@@ -1,3 +1,8 @@
+
+
Ctrl
diff --git a/packages/components/src/basic/kbd/_examples/index.ts b/packages/components/src/basic/kbd/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/kbd/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+]
diff --git a/packages/components/src/basic/label/README.md b/packages/components/src/basic/label/README.md
index a18faebc..3832ede1 100644
--- a/packages/components/src/basic/label/README.md
+++ b/packages/components/src/basic/label/README.md
@@ -23,83 +23,6 @@
|------|------|
| `default` | 表单项内容（输入框、选择器等） |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础标签
-
-```vue
-
-
-
-
-
-
-```
-
-### 固定标签宽度（对齐多表单字段）
-
-```vue
-
-
-
-
-
-
-
-
-
-
-```
-
-### 使用字符串宽度
-
-```vue
-
-
-
-
-```
-
-### 标签后内容
-
-```vue
-
-
-
- 生成
-
-
-
-```
-
-### 无标签文本（仅布局）
-
-```vue
-
-
-
-
-```
-
## 注意事项
1. **labelWidth 类型**：
diff --git a/packages/components/src/basic/label/_examples/_basic.vue b/packages/components/src/basic/label/_examples/_basic.vue
new file mode 100644
index 00000000..d11b1041
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_basic.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/label/_examples/_custom.vue b/packages/components/src/basic/label/_examples/_custom.vue
new file mode 100644
index 00000000..821a4235
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_custom.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ 关键词
+
+
+
+ 记住当前筛选条件
+
+
diff --git a/packages/components/src/basic/label/_examples/_form.vue b/packages/components/src/basic/label/_examples/_form.vue
new file mode 100644
index 00000000..f5ba2845
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_form.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 保存
+
+ 重置
+
+
+
+
diff --git a/packages/components/src/basic/label/_examples/_width.vue b/packages/components/src/basic/label/_examples/_width.vue
new file mode 100644
index 00000000..42a31d8f
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/_width.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/label/_examples/index.ts b/packages/components/src/basic/label/_examples/index.ts
new file mode 100644
index 00000000..23fd276c
--- /dev/null
+++ b/packages/components/src/basic/label/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Custom from './_custom.vue'
+import CustomRaw from './_custom.vue?raw'
+import Form from './_form.vue'
+import FormRaw from './_form.vue?raw'
+import Width from './_width.vue'
+import WidthRaw from './_width.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '固定宽度',
+ component: Width,
+ componentRaw: WidthRaw,
+ },
+ {
+ title: '表单布局',
+ component: Form,
+ componentRaw: FormRaw,
+ },
+ {
+ title: '自定义内容',
+ component: Custom,
+ componentRaw: CustomRaw,
+ },
+]
diff --git a/packages/components/src/basic/modal/README.md b/packages/components/src/basic/modal/README.md
index f11b33f3..3b3e70b1 100644
--- a/packages/components/src/basic/modal/README.md
+++ b/packages/components/src/basic/modal/README.md
@@ -130,223 +130,6 @@ function showWarning() {
```
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
- 打开对话框
-
- 对话框内容
-
-
-```
-
-### 基础对话框
-
-```vue
-
-
-
- 打开对话框
-
- 这是对话框内容
-
-
-```
-
-### 带取消按钮
-
-```vue
-
-
-
-
- 请确认是否继续？
-
-
-```
-
-### 图标对话框
-
-```vue
-
-
-
-
- 成功提示
- 错误提示
-
-
-
- 您的操作已成功完成
-
-
-
- 操作失败，请稍后重试
-
-
-```
-
-### 可拖拽对话框
-
-```vue
-
-
- 可以拖动标题栏来移动对话框
-
-
-```
-
-### 可最大化对话框
-
-```vue
-
-
- 点击右上角按钮可最大化/还原对话框
-
-
-```
-
-### 垂直居中对话框
-
-```vue
-
-
- 对话框在屏幕垂直居中显示
-
-
-```
-
-### 内容居中对话框
-
-```vue
-
-
-
-
标题和内容都居中显示
-
按钮也会居中对齐
-
-
-```
-
-### 关闭前确认
-
-```vue
-
-
-
-
-
-
-
-```
-
-### 加载状态
-
-```vue
-
-
-
-
-
-
-
-```
-
-### 自定义头部和底部
-
-```vue
-
-
-
-
- 自定义标题
-
-
- 对话框内容
-
-
- 取消
- 保存
-
-
-
-
-```
-
-### 调整对话框宽度
-
-```vue
-
-
- 这是一个较宽的对话框
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 控制对话框打开状态
diff --git a/packages/components/src/basic/modal/_examples/_actions.vue b/packages/components/src/basic/modal/_examples/_actions.vue
new file mode 100644
index 00000000..3b7dbe89
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_actions.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+ 隐藏关闭按钮
+
+
+ 最大化
+
+
+ 拖拽
+
+
+
+
+
+ 右上角关闭按钮已隐藏，可以通过底部按钮关闭。
+
+
+
+
+ 点击右上角最大化按钮可以切换弹窗尺寸。
+
+
+
+
+ 按住标题栏可以拖动弹窗位置。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_basic.vue b/packages/components/src/basic/modal/_examples/_basic.vue
new file mode 100644
index 00000000..41541553
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_basic.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ 打开弹窗
+
+
+
+ 这里是弹窗内容区域。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_center-border-loading.vue b/packages/components/src/basic/modal/_examples/_center-border-loading.vue
new file mode 100644
index 00000000..2f94775a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_center-border-loading.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+ 居中
+
+
+ 无边框
+
+
+ 载入
+
+
+
+
+
+ 标题、描述和底部按钮会居中显示，弹窗也会垂直居中。
+
+
+
+
+ 头部和底部不显示分割线。
+
+
+
+
+ 弹窗主体区域会显示载入遮罩。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_custom-style.vue b/packages/components/src/basic/modal/_examples/_custom-style.vue
new file mode 100644
index 00000000..9bfa639a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_custom-style.vue
@@ -0,0 +1,28 @@
+
+
+
+
+ 打开弹窗
+
+
+
+ 可以通过 class、header-class、content-class 和 footer-class 调整弹窗样式。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_dialog.vue b/packages/components/src/basic/modal/_examples/_dialog.vue
new file mode 100644
index 00000000..c4e6ce50
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_dialog.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+ Info
+
+
+ Success
+
+
+ Warning
+
+
+ Error
+
+
+ Confirm
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_event.vue b/packages/components/src/basic/modal/_examples/_event.vue
new file mode 100644
index 00000000..e04ab6ad
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_event.vue
@@ -0,0 +1,38 @@
+
+
+
+
+ 打开弹窗
+
+
+
+ 打开、关闭、确认、取消和动画完成等事件都会触发 toast。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_functional.vue b/packages/components/src/basic/modal/_examples/_functional.vue
new file mode 100644
index 00000000..08d88c80
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_functional.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ 打开弹窗
+
+
diff --git a/packages/components/src/basic/modal/_examples/_header-footer.vue b/packages/components/src/basic/modal/_examples/_header-footer.vue
new file mode 100644
index 00000000..a1f67125
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_header-footer.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ 隐藏头部
+
+
+ 隐藏底部
+
+
+
+
+
+ 当前弹窗隐藏了头部区域。
+
+
+
+
+ 当前弹窗隐藏了底部操作区域。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_overlay-blur.vue b/packages/components/src/basic/modal/_examples/_overlay-blur.vue
new file mode 100644
index 00000000..49e14a6a
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_overlay-blur.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ 无遮罩
+
+
+ 模糊遮罩
+
+
+
+
+
+ 设置 overlay 为 false 后，不显示背景遮罩。
+
+
+
+
+ 设置 overlay-blur 后，背景遮罩会带有模糊效果。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_slot.vue b/packages/components/src/basic/modal/_examples/_slot.vue
new file mode 100644
index 00000000..5424d2c8
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_slot.vue
@@ -0,0 +1,46 @@
+
+
+
+
+ 打开弹窗
+
+
+
+
+
+
+
+ 自定义头部
+
+
+ 使用 header 插槽替换默认标题。
+
+
+
+
+
+ 这里是默认插槽内容。
+
+
+
+
+
+ 取消
+
+
+ 保存
+
+
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/_title-description.vue b/packages/components/src/basic/modal/_examples/_title-description.vue
new file mode 100644
index 00000000..8a64e8b3
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/_title-description.vue
@@ -0,0 +1,20 @@
+
+
+
+
+ 打开弹窗
+
+
+
+ 描述会显示在标题下方，用于补充说明弹窗目的。
+
+
+
diff --git a/packages/components/src/basic/modal/_examples/index.ts b/packages/components/src/basic/modal/_examples/index.ts
new file mode 100644
index 00000000..4477a9ee
--- /dev/null
+++ b/packages/components/src/basic/modal/_examples/index.ts
@@ -0,0 +1,80 @@
+import Actions from './_actions.vue'
+import ActionsRaw from './_actions.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CenterBorderLoading from './_center-border-loading.vue'
+import CenterBorderLoadingRaw from './_center-border-loading.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Dialog from './_dialog.vue'
+import DialogRaw from './_dialog.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Functional from './_functional.vue'
+import FunctionalRaw from './_functional.vue?raw'
+import HeaderFooter from './_header-footer.vue'
+import HeaderFooterRaw from './_header-footer.vue?raw'
+import OverlayBlur from './_overlay-blur.vue'
+import OverlayBlurRaw from './_overlay-blur.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import TitleDescription from './_title-description.vue'
+import TitleDescriptionRaw from './_title-description.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '标题描述',
+ component: TitleDescription,
+ componentRaw: TitleDescriptionRaw,
+ },
+ {
+ title: '关闭/最大化/拖拽',
+ component: Actions,
+ componentRaw: ActionsRaw,
+ },
+ {
+ title: '居中/边框/载入',
+ component: CenterBorderLoading,
+ componentRaw: CenterBorderLoadingRaw,
+ },
+ {
+ title: '遮罩/模糊',
+ component: OverlayBlur,
+ componentRaw: OverlayBlurRaw,
+ },
+ {
+ title: '显示/隐藏头部底部',
+ component: HeaderFooter,
+ componentRaw: HeaderFooterRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+ {
+ title: '触发事件',
+ component: Event,
+ componentRaw: EventRaw,
+ },
+ {
+ title: '对话框',
+ component: Dialog,
+ componentRaw: DialogRaw,
+ },
+ {
+ title: '函数式调用',
+ component: Functional,
+ componentRaw: FunctionalRaw,
+ },
+]
diff --git a/packages/components/src/basic/modal/index.vue b/packages/components/src/basic/modal/index.vue
index c43951b9..312ff23a 100644
--- a/packages/components/src/basic/modal/index.vue
+++ b/packages/components/src/basic/modal/index.vue
@@ -85,8 +85,6 @@ watch(isOpen, (val) => {
if (val && !hasOpened.value) {
hasOpened.value = true
}
-}, {
- immediate: true,
})
const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
diff --git a/packages/components/src/basic/number-field/README.md b/packages/components/src/basic/number-field/README.md
index 64112a0c..afe8c13d 100644
--- a/packages/components/src/basic/number-field/README.md
+++ b/packages/components/src/basic/number-field/README.md
@@ -30,56 +30,6 @@
|--------|------|----------|
| update:modelValue | 值更新时触发 | `(value: number)` |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 最小值 / 最大值 / 步长
-
-```vue
-
-
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-
-
-```
-
-### 带自定义宽度
-
-```vue
-
-
-
-
-```
-
## 注意事项
- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/number-field/_examples/_basic.vue b/packages/components/src/basic/number-field/_examples/_basic.vue
new file mode 100644
index 00000000..bf0eb1fe
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/number-field/_examples/_disabled.vue b/packages/components/src/basic/number-field/_examples/_disabled.vue
new file mode 100644
index 00000000..cb10efbe
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/number-field/_examples/_min-max.vue b/packages/components/src/basic/number-field/_examples/_min-max.vue
new file mode 100644
index 00000000..cc4a2c74
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_min-max.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/number-field/_examples/_step.vue b/packages/components/src/basic/number-field/_examples/_step.vue
new file mode 100644
index 00000000..f063b007
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/_step.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/number-field/_examples/index.ts b/packages/components/src/basic/number-field/_examples/index.ts
new file mode 100644
index 00000000..a9026646
--- /dev/null
+++ b/packages/components/src/basic/number-field/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import MinMax from './_min-max.vue'
+import MinMaxRaw from './_min-max.vue?raw'
+import Step from './_step.vue'
+import StepRaw from './_step.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '最大值/最小值',
+ component: MinMax,
+ componentRaw: MinMaxRaw,
+ },
+ {
+ title: '步长',
+ component: Step,
+ componentRaw: StepRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+]
diff --git a/packages/components/src/basic/page-header/README.md b/packages/components/src/basic/page-header/README.md
index ca59c8f8..56c75d41 100644
--- a/packages/components/src/basic/page-header/README.md
+++ b/packages/components/src/basic/page-header/README.md
@@ -28,98 +28,6 @@
| `description` | 自定义描述内容 |
| `default` | 右侧操作区内容（按钮等） |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-```
-
-### 基础标题
-
-```vue
-
-
-```
-
-### 标题加描述
-
-```vue
-
-
-```
-
-### 自定义标题
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 带操作按钮
-
-```vue
-
-
-
-
-
-
-```
-
-### 多个操作按钮
-
-```vue
-
-
-
-
-
-
-
-
-
-
-```
-
-### 自定义样式
-
-```vue
-
-
-
- 自定义描述的样式
-
-
-
-```
-
## 注意事项
1. **响应式布局**：标题区在左侧，操作区在右侧，小屏幕时会自动换行
diff --git a/packages/components/src/basic/page-header/_examples/_basic.vue b/packages/components/src/basic/page-header/_examples/_basic.vue
new file mode 100644
index 00000000..6f4a325b
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_basic.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/packages/components/src/basic/page-header/_examples/_custom-style.vue b/packages/components/src/basic/page-header/_examples/_custom-style.vue
new file mode 100644
index 00000000..c19772d6
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_custom-style.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+ 取消
+
+
+ 保存
+
+
+
diff --git a/packages/components/src/basic/page-header/_examples/_description.vue b/packages/components/src/basic/page-header/_examples/_description.vue
new file mode 100644
index 00000000..ac5ecd33
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_description.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/packages/components/src/basic/page-header/_examples/_slot.vue b/packages/components/src/basic/page-header/_examples/_slot.vue
new file mode 100644
index 00000000..a3d3b12e
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/_slot.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+ 提供 title、description 和右侧操作区域插槽。
+
+
+
+
+
diff --git a/packages/components/src/basic/page-header/_examples/index.ts b/packages/components/src/basic/page-header/_examples/index.ts
new file mode 100644
index 00000000..329f051c
--- /dev/null
+++ b/packages/components/src/basic/page-header/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Description from './_description.vue'
+import DescriptionRaw from './_description.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '描述',
+ component: Description,
+ componentRaw: DescriptionRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+]
diff --git a/packages/components/src/basic/page-main/README.md b/packages/components/src/basic/page-main/README.md
index e0083459..4a975ef1 100644
--- a/packages/components/src/basic/page-main/README.md
+++ b/packages/components/src/basic/page-main/README.md
@@ -28,107 +28,6 @@
| `title` | 自定义标题内容 |
| `default` | 主内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
- 页面主内容
-
-
-```
-
-### 基础内容区
-
-```vue
-
-
- 这是页面的主要内容区域。
-
-
-```
-
-### 带标题
-
-```vue
-
-
- 用户的基本信息内容。
-
-
-```
-
-### 可折叠内容区
-
-```vue
-
-
-
-
详细内容 1...
-
详细内容 2...
-
详细内容 3...
-
-
-```
-
-### 自定义折叠高度
-
-```vue
-
-
-
-
-
-```
-
-### 自定义标题
-
-```vue
-
-
-
-
-
-
- 系统信息内容...
-
-
-```
-
-### 与 FaPageHeader 配合使用
-
-```vue
-
-
-
-
-
-```
-
-### 多个内容区
-
-```vue
-
-
- 基本信息内容...
-
-
- 扩展信息内容...
-
-
- 备注信息内容...
-
-
-```
-
## 注意事项
1. **折叠功能**：设置 `collaspe` 为 `true` 后，内容区可以折叠，折叠后会显示渐变遮罩
diff --git a/packages/components/src/basic/page-main/_examples/_basic.vue b/packages/components/src/basic/page-main/_examples/_basic.vue
new file mode 100644
index 00000000..1c323903
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_basic.vue
@@ -0,0 +1,10 @@
+
+
+
+
+ PageMain 是最常用的页面内容容器，几乎所有页面都会使用到。
+
+
diff --git a/packages/components/src/basic/page-main/_examples/_collapse.vue b/packages/components/src/basic/page-main/_examples/_collapse.vue
new file mode 100644
index 00000000..f71fb759
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_collapse.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Fantastic-admin
+
+
+ 设置 collaspe 后，内容区域会在指定高度折叠。
+
+
鼠标移入内容底部，可以看到展开和收起按钮。
+
这是一段用于撑开内容高度的文本。
+
继续补充一些内容，让折叠效果更明显。
+
+
diff --git a/apps/example/src/views/component_example/page_main/_demo3.vue b/packages/components/src/basic/page-main/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 56%
rename from apps/example/src/views/component_example/page_main/_demo3.vue
rename to packages/components/src/basic/page-main/_examples/_slot.vue
index afd3a5ac..31d8b7d7
--- a/apps/example/src/views/component_example/page_main/_demo3.vue
+++ b/packages/components/src/basic/page-main/_examples/_slot.vue
@@ -1,3 +1,9 @@
+
+
@@ -8,6 +14,6 @@
- 这里放页面内容
+ 这里放页面内容。
diff --git a/packages/components/src/basic/page-main/_examples/_title.vue b/packages/components/src/basic/page-main/_examples/_title.vue
new file mode 100644
index 00000000..d8ba9d3d
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/_title.vue
@@ -0,0 +1,10 @@
+
+
+
+
+ 这里放页面内容。
+
+
diff --git a/packages/components/src/basic/page-main/_examples/index.ts b/packages/components/src/basic/page-main/_examples/index.ts
new file mode 100644
index 00000000..9f782f5e
--- /dev/null
+++ b/packages/components/src/basic/page-main/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Collapse from './_collapse.vue'
+import CollapseRaw from './_collapse.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+import Title from './_title.vue'
+import TitleRaw from './_title.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '标题',
+ component: Title,
+ componentRaw: TitleRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+ {
+ title: '折叠',
+ component: Collapse,
+ componentRaw: CollapseRaw,
+ },
+]
diff --git a/packages/components/src/basic/pagination/README.md b/packages/components/src/basic/pagination/README.md
index 39253d5b..04405794 100644
--- a/packages/components/src/basic/pagination/README.md
+++ b/packages/components/src/basic/pagination/README.md
@@ -27,181 +27,6 @@
| `pageChange` | `page: number` | 页码变化时触发 |
| `sizeChange` | `size: number` | 每页条数变化时触发 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础分页
-
-```vue
-
-
-
-
-```
-
-### 带每页条数选择
-
-```vue
-
-
-
-
-```
-
-### 自定义每页条数选项
-
-```vue
-
-
-
-
-```
-
-### 自定义布局（仅页码）
-
-```vue
-
-
-
-
-```
-
-### 自定义布局（总条数 + 页码）
-
-```vue
-
-
-```
-
-### 完整布局
-
-```vue
-
-
-
-
-```
-
-### 监听分页变化
-
-```vue
-
-
-
-
-```
-
-### 在表格中使用
-
-```vue
-
-
-
-
-
-
-
- 姓名
- 邮箱
-
-
-
-
- {{ item.name }}
- {{ item.email }}
-
-
-
-
-
-```
-
## 注意事项
### 布局配置说明
diff --git a/packages/components/src/basic/pagination/_examples/_basic.vue b/packages/components/src/basic/pagination/_examples/_basic.vue
new file mode 100644
index 00000000..b0dd31aa
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_basic.vue
@@ -0,0 +1,13 @@
+
+
+
+
diff --git a/packages/components/src/basic/pagination/_examples/_event.vue b/packages/components/src/basic/pagination/_examples/_event.vue
new file mode 100644
index 00000000..a2235926
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_event.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
diff --git a/packages/components/src/basic/pagination/_examples/_layout.vue b/packages/components/src/basic/pagination/_examples/_layout.vue
new file mode 100644
index 00000000..736f0d0e
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/_layout.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/pagination/_examples/index.ts b/packages/components/src/basic/pagination/_examples/index.ts
new file mode 100644
index 00000000..dd6245ec
--- /dev/null
+++ b/packages/components/src/basic/pagination/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Event from './_event.vue'
+import EventRaw from './_event.vue?raw'
+import Layout from './_layout.vue'
+import LayoutRaw from './_layout.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '布局',
+ component: Layout,
+ componentRaw: LayoutRaw,
+ },
+ {
+ title: '事件',
+ component: Event,
+ componentRaw: EventRaw,
+ },
+]
diff --git a/packages/components/src/basic/password-strength/README.md b/packages/components/src/basic/password-strength/README.md
index 85ecd82e..cc3d4e42 100644
--- a/packages/components/src/basic/password-strength/README.md
+++ b/packages/components/src/basic/password-strength/README.md
@@ -43,54 +43,6 @@ const defaultColorThresholds = [
`colorThresholds` 会按照 `min` 从高到低匹配，例如当前命中 4 条规则时，会使用 `min: 3` 对应的颜色。
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-
-
-```
-
-### 自定义规则和强度颜色
-
-```vue
-
-
-
-
-
-
-```
-
## 注意事项
1. **实时反馈**：密码强度会随输入实时更新。
diff --git a/apps/example/src/views/component_example/password_strength/_demo1.vue b/packages/components/src/basic/password-strength/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 58%
rename from apps/example/src/views/component_example/password_strength/_demo1.vue
rename to packages/components/src/basic/password-strength/_examples/_basic.vue
index 46656b0a..d7d08123
--- a/apps/example/src/views/component_example/password_strength/_demo1.vue
+++ b/packages/components/src/basic/password-strength/_examples/_basic.vue
@@ -1,4 +1,9 @@
diff --git a/packages/components/src/basic/password-strength/_examples/_custom-rule.vue b/packages/components/src/basic/password-strength/_examples/_custom-rule.vue
new file mode 100644
index 00000000..61597c2e
--- /dev/null
+++ b/packages/components/src/basic/password-strength/_examples/_custom-rule.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/password-strength/_examples/index.ts b/packages/components/src/basic/password-strength/_examples/index.ts
new file mode 100644
index 00000000..a1ef5d76
--- /dev/null
+++ b/packages/components/src/basic/password-strength/_examples/index.ts
@@ -0,0 +1,17 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomRule from './_custom-rule.vue'
+import CustomRuleRaw from './_custom-rule.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '自定义规则',
+ component: CustomRule,
+ componentRaw: CustomRuleRaw,
+ },
+]
diff --git a/packages/components/src/basic/popover/README.md b/packages/components/src/basic/popover/README.md
index 89257bc9..dd57e14c 100644
--- a/packages/components/src/basic/popover/README.md
+++ b/packages/components/src/basic/popover/README.md
@@ -30,182 +30,6 @@
| `default` | 触发元素 |
| `panel` | 弹出面板内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
- 打开弹出框
-
-
-
-
-
-```
-
-### 基础弹出框
-
-```vue
-
-
-
-
- 点击打开
-
-
-
-
-
-```
-
-### 不同弹出方向
-
-```vue
-
-
-
- 向上弹出
- 上方内容
-
-
- 向下弹出
- 下方内容
-
-
- 向左弹出
- 左侧内容
-
-
- 向右弹出
- 右侧内容
-
-
-
-```
-
-### 选择器面板
-
-```vue
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### 日期选择器
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-### 用户信息卡片
-
-```vue
-
-
-
-
-
-
-
-
-
邮箱： zhangsan@example.com
-
电话： 13800138000
-
-
查看主页
-
-
-
-```
-
-### 表单弹窗
-
-```vue
-
-
-
-
- 新增用户
-
-
-
-
-
-```
-
## 注意事项
1. **panel 插槽**：弹出内容必须放在 `#panel` 插槽中
diff --git a/packages/components/src/basic/popover/_examples/_align.vue b/packages/components/src/basic/popover/_examples/_align.vue
new file mode 100644
index 00000000..1cd3ce35
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_align.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Start
+
+
+
+ 起始位置对齐
+
+
+
+
+
+ Center
+
+
+
+ 居中对齐
+
+
+
+
+
+ End
+
+
+
+ 结束位置对齐
+
+
+
+
diff --git a/apps/example/src/views/component_example/popover/_demo2.vue b/packages/components/src/basic/popover/_examples/_basic.vue
old mode 100755
new mode 100644
similarity index 55%
rename from apps/example/src/views/component_example/popover/_demo2.vue
rename to packages/components/src/basic/popover/_examples/_basic.vue
index 7c362507..6afc61c7
--- a/apps/example/src/views/component_example/popover/_demo2.vue
+++ b/packages/components/src/basic/popover/_examples/_basic.vue
@@ -1,18 +1,19 @@
-
+
浮动面板
-
- 关闭
-
+ 面板内容
diff --git a/packages/components/src/basic/popover/_examples/_offset.vue b/packages/components/src/basic/popover/_examples/_offset.vue
new file mode 100644
index 00000000..2609f59b
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_offset.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Side offset
+
+
+
+ 与触发元素保持更大距离
+
+
+
+
+
+ Align offset
+
+
+
+ 沿对齐方向偏移
+
+
+
+
+
+ Both
+
+
+
+ 同时设置两种偏移
+
+
+
+
diff --git a/packages/components/src/basic/popover/_examples/_side.vue b/packages/components/src/basic/popover/_examples/_side.vue
new file mode 100644
index 00000000..9cba3103
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/_side.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Top
+
+
+
+ 从上方弹出
+
+
+
+
+
+ Right
+
+
+
+ 从右侧弹出
+
+
+
+
+
+ Bottom
+
+
+
+ 从下方弹出
+
+
+
+
+
+ Left
+
+
+
+ 从左侧弹出
+
+
+
+
diff --git a/packages/components/src/basic/popover/_examples/index.ts b/packages/components/src/basic/popover/_examples/index.ts
new file mode 100644
index 00000000..f8954126
--- /dev/null
+++ b/packages/components/src/basic/popover/_examples/index.ts
@@ -0,0 +1,31 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Offset from './_offset.vue'
+import OffsetRaw from './_offset.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '弹出方向',
+ component: Side,
+ componentRaw: SideRaw,
+ },
+ {
+ title: '对齐方式',
+ component: Align,
+ componentRaw: AlignRaw,
+ },
+ {
+ title: '偏移',
+ component: Offset,
+ componentRaw: OffsetRaw,
+ },
+]
diff --git a/packages/components/src/basic/progress/README.md b/packages/components/src/basic/progress/README.md
index b40ce2cc..417563e4 100644
--- a/packages/components/src/basic/progress/README.md
+++ b/packages/components/src/basic/progress/README.md
@@ -23,185 +23,6 @@
|------|------|--------|------|
| `modelValue` | `number` | `0` | 进度值（0-100） |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础进度条
-
-```vue
-
-
-
- 当前进度：{{ progress }}%
-
-```
-
-### 不同进度值
-
-```vue
-
-
-
-
-```
-
-### 动态进度
-
-```vue
-
-
-
-
-
-```
-
-### 自定义尺寸
-
-```vue
-
-
-
-
-```
-
-### 自定义颜色
-
-```vue
-
-
-
-
-```
-
-### 带百分比显示
-
-```vue
-
-
-
-
-
- 上传进度
- {{ progress }}%
-
-
-
-```
-
-### 多任务进度
-
-```vue
-
-
-
-
-
-
- {{ task.name }}
- {{ task.progress }}%
-
-
-
-
-```
-
-### 文件上传进度
-
-```vue
-
-
-
-
-
-
- uploading_file.zip
- {{ uploadProgress }}%
-
-
-
- 上传完成
-
- 选择文件上传
-
-
-```
-
## 注意事项
1. **进度范围**：进度值范围为 0-100
diff --git a/packages/components/src/basic/progress/_examples/_basic.vue b/packages/components/src/basic/progress/_examples/_basic.vue
new file mode 100644
index 00000000..5117cfaf
--- /dev/null
+++ b/packages/components/src/basic/progress/_examples/_basic.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/packages/components/src/basic/progress/_examples/index.ts b/packages/components/src/basic/progress/_examples/index.ts
new file mode 100644
index 00000000..1065244f
--- /dev/null
+++ b/packages/components/src/basic/progress/_examples/index.ts
@@ -0,0 +1,10 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+]
diff --git a/packages/components/src/basic/radio-group/README.md b/packages/components/src/basic/radio-group/README.md
index a47302ad..a958c0ac 100644
--- a/packages/components/src/basic/radio-group/README.md
+++ b/packages/components/src/basic/radio-group/README.md
@@ -47,179 +47,6 @@ export interface RadioGroupOption {
通过 `v-model` 实现双向绑定。
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 带描述文案
-
-```vue
-
-
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-
-
-```
-
-### 多列排列
-
-```vue
-
-
-
-
-```
-
-### 自定义选项内容
-
-```vue
-
-
-
-
-
-
-
-
- {{ option.label }}
-
- {{ option.badge }}
-
-
-
- {{ option.description }}
-
-
-
- {{ checked ? '已选中' : '可选择' }}
-
-
-
-
-```
-
-### 监听变化事件
-
-```vue
-
-
-
-
-```
-
## 注意事项
1. **初始化值**：组件当前通过 `v-model` 管理选中值，不再提供 `defaultValue`。
diff --git a/apps/example/src/views/component_example/radio_group/_demo1.vue b/packages/components/src/basic/radio-group/_examples/_basic.vue
similarity index 78%
rename from apps/example/src/views/component_example/radio_group/_demo1.vue
rename to packages/components/src/basic/radio-group/_examples/_basic.vue
index 70581127..99630ba2 100644
--- a/apps/example/src/views/component_example/radio_group/_demo1.vue
+++ b/packages/components/src/basic/radio-group/_examples/_basic.vue
@@ -1,4 +1,8 @@
-
-
-
- 滚动内容...
-
-
-```
-
-### 编程式滚动
-
-```vue
-
-
-
-
-
-
-
-
- 回到顶部
- 滚动到底部
-
-
-```
-
## 注意事项
1. **必须设置尺寸**：需要设置 `height` 或 `max-height` 等限制高度的样式才能触发滚动
diff --git a/packages/components/src/basic/scroll-area/_examples/_basic.vue b/packages/components/src/basic/scroll-area/_examples/_basic.vue
new file mode 100644
index 00000000..10e401a7
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_basic.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+ {{ item }}
+
+
+
diff --git a/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue b/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue
new file mode 100644
index 00000000..604f2156
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_hidden-scrollbar.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+ {{ item }}
+
+
+
diff --git a/packages/components/src/basic/scroll-area/_examples/_horizontal.vue b/packages/components/src/basic/scroll-area/_examples/_horizontal.vue
new file mode 100644
index 00000000..dec9deec
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_horizontal.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/packages/components/src/basic/scroll-area/_examples/_mask.vue b/packages/components/src/basic/scroll-area/_examples/_mask.vue
new file mode 100644
index 00000000..ef3440e5
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/_mask.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+ {{ item }}
+
+
+
diff --git a/packages/components/src/basic/scroll-area/_examples/index.ts b/packages/components/src/basic/scroll-area/_examples/index.ts
new file mode 100644
index 00000000..3776a12a
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import HiddenScrollbar from './_hidden-scrollbar.vue'
+import HiddenScrollbarRaw from './_hidden-scrollbar.vue?raw'
+import Horizontal from './_horizontal.vue'
+import HorizontalRaw from './_horizontal.vue?raw'
+import Mask from './_mask.vue'
+import MaskRaw from './_mask.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '水平滚动',
+ component: Horizontal,
+ componentRaw: HorizontalRaw,
+ },
+ {
+ title: '隐藏滚动条',
+ component: HiddenScrollbar,
+ componentRaw: HiddenScrollbarRaw,
+ },
+ {
+ title: '遮罩',
+ component: Mask,
+ componentRaw: MaskRaw,
+ },
+]
diff --git a/packages/components/src/basic/search-bar/README.md b/packages/components/src/basic/search-bar/README.md
index fc67cdb6..a0c00497 100644
--- a/packages/components/src/basic/search-bar/README.md
+++ b/packages/components/src/basic/search-bar/README.md
@@ -30,220 +30,6 @@
|--------|------|------|
| `toggle` | `value: boolean` | 折叠状态变化时触发 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-
-
- 搜索
-
-
-
-
-```
-
-### 基础搜索栏
-
-```vue
-
-
-
-
-
-
-
-
-
-```
-
-### 多行筛选表单
-
-```vue
-
-
-
-
-
-
-
-
- 搜索
- 重置
-
-
-
-
-```
-
-### 隐藏折叠按钮
-
-```vue
-
-
-
-
- 搜索
-
-
-
-
-```
-
-### 带背景色
-
-```vue
-
-
-
-
- 搜索
-
-
-
-
-```
-
-### 监听折叠状态
-
-```vue
-
-
-
-
-
-
- 搜索
-
-
-
-
-```
-
-### 列表页面搜索栏
-
-```vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### 高级筛选
-
-```vue
-
-
-
-
-
-
-
-
- 搜索
-
-
-
-
-
-
-
-
-```
-
## 注意事项
1. **折叠内容**：当 `fold` 为 `true` 时，内容区域会被折叠（通过 slot 控制显示逻辑）
diff --git a/packages/components/src/basic/search-bar/_examples/_background.vue b/packages/components/src/basic/search-bar/_examples/_background.vue
new file mode 100644
index 00000000..0b50cb4a
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_background.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+ 重置
+
+
+
+
+
diff --git a/packages/components/src/basic/search-bar/_examples/_basic.vue b/packages/components/src/basic/search-bar/_examples/_basic.vue
new file mode 100644
index 00000000..e32515a0
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_basic.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+ 重置
+
+
+
+
+
diff --git a/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue b/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue
new file mode 100644
index 00000000..910e0969
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_custom-trigger.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+ 重置
+
+
+ {{ fold ? '展开' : '收起' }}
+
+
+
+
+
diff --git a/packages/components/src/basic/search-bar/_examples/_expanded.vue b/packages/components/src/basic/search-bar/_examples/_expanded.vue
new file mode 100644
index 00000000..019d4504
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/_expanded.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 查询
+
+ 重置
+
+
+
+
+
diff --git a/packages/components/src/basic/search-bar/_examples/index.ts b/packages/components/src/basic/search-bar/_examples/index.ts
new file mode 100644
index 00000000..71798979
--- /dev/null
+++ b/packages/components/src/basic/search-bar/_examples/index.ts
@@ -0,0 +1,31 @@
+import Background from './_background.vue'
+import BackgroundRaw from './_background.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomTrigger from './_custom-trigger.vue'
+import CustomTriggerRaw from './_custom-trigger.vue?raw'
+import Expanded from './_expanded.vue'
+import ExpandedRaw from './_expanded.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '默认展开',
+ component: Expanded,
+ componentRaw: ExpandedRaw,
+ },
+ {
+ title: '背景',
+ component: Background,
+ componentRaw: BackgroundRaw,
+ },
+ {
+ title: '自定义触发按钮',
+ component: CustomTrigger,
+ componentRaw: CustomTriggerRaw,
+ },
+]
diff --git a/packages/components/src/basic/select/README.md b/packages/components/src/basic/select/README.md
index ae78b080..44325dbe 100644
--- a/packages/components/src/basic/select/README.md
+++ b/packages/components/src/basic/select/README.md
@@ -46,172 +46,6 @@ interface GroupOption {
|--------|------|----------|
| `change` | 选项变化时触发 | `value: AcceptableValue \| undefined` |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础单选
-
-```vue
-
-
-
-
-```
-
-### 禁用选项
-
-```vue
-
-
-
-
-```
-
-### 分组选项
-
-```vue
-
-
-
-
-```
-
-### 变化事件
-
-```vue
-
-
-
-
-```
-
-### 定位模式
-
-```vue
-
-
-
-
-
-
-```
-
-### 禁用选择器
-
-```vue
-
-
-```
-
-### 表单中使用
-
-```vue
-
-
-
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/packages/components/src/basic/select/_examples/_basic.vue b/packages/components/src/basic/select/_examples/_basic.vue
new file mode 100644
index 00000000..04be5446
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_basic.vue
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/packages/components/src/basic/select/_examples/_disabled.vue b/packages/components/src/basic/select/_examples/_disabled.vue
new file mode 100644
index 00000000..31da9754
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_disabled.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/select/_examples/_group.vue b/packages/components/src/basic/select/_examples/_group.vue
new file mode 100644
index 00000000..b5c96d36
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_group.vue
@@ -0,0 +1,28 @@
+
+
+
+
diff --git a/packages/components/src/basic/select/_examples/_multiple.vue b/packages/components/src/basic/select/_examples/_multiple.vue
new file mode 100644
index 00000000..53af0d9e
--- /dev/null
+++ b/packages/components/src/basic/select/_examples/_multiple.vue
@@ -0,0 +1,21 @@
+
+
+
+
diff --git a/apps/example/src/views/component_example/select/_demo4.vue b/packages/components/src/basic/select/_examples/_position.vue
similarity index 79%
rename from apps/example/src/views/component_example/select/_demo4.vue
rename to packages/components/src/basic/select/_examples/_position.vue
index 5ef2981b..059f2926 100644
--- a/apps/example/src/views/component_example/select/_demo4.vue
+++ b/packages/components/src/basic/select/_examples/_position.vue
@@ -1,4 +1,8 @@
-
-
-
-```
-
-### 垂直滑块
-
-```vue
-
-
-
-
-```
-
-### 范围选择
-
-```vue
-
-
-
-
-```
-
-### 自定义步长
-
-```vue
-
-
-
-
-```
-
## 注意事项
- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/slider/_examples/_alignment.vue b/packages/components/src/basic/slider/_examples/_alignment.vue
new file mode 100644
index 00000000..92ec7d3a
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_alignment.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_basic.vue b/packages/components/src/basic/slider/_examples/_basic.vue
new file mode 100644
index 00000000..58ed7a99
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_inverted.vue b/packages/components/src/basic/slider/_examples/_inverted.vue
new file mode 100644
index 00000000..b175cd7f
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_inverted.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_range.vue b/packages/components/src/basic/slider/_examples/_range.vue
new file mode 100644
index 00000000..1c8917fd
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_range.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_step.vue b/packages/components/src/basic/slider/_examples/_step.vue
new file mode 100644
index 00000000..0c770ce9
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_step.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_tooltip.vue b/packages/components/src/basic/slider/_examples/_tooltip.vue
new file mode 100644
index 00000000..28fdbcf9
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_tooltip.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/_vertical.vue b/packages/components/src/basic/slider/_examples/_vertical.vue
new file mode 100644
index 00000000..de37fdb0
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/_vertical.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/slider/_examples/index.ts b/packages/components/src/basic/slider/_examples/index.ts
new file mode 100644
index 00000000..f4e4242a
--- /dev/null
+++ b/packages/components/src/basic/slider/_examples/index.ts
@@ -0,0 +1,52 @@
+import Alignment from './_alignment.vue'
+import AlignmentRaw from './_alignment.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Inverted from './_inverted.vue'
+import InvertedRaw from './_inverted.vue?raw'
+import Range from './_range.vue'
+import RangeRaw from './_range.vue?raw'
+import Step from './_step.vue'
+import StepRaw from './_step.vue?raw'
+import Tooltip from './_tooltip.vue'
+import TooltipRaw from './_tooltip.vue?raw'
+import Vertical from './_vertical.vue'
+import VerticalRaw from './_vertical.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '垂直',
+ component: Vertical,
+ componentRaw: VerticalRaw,
+ },
+ {
+ title: '反转',
+ component: Inverted,
+ componentRaw: InvertedRaw,
+ },
+ {
+ title: '最大值/最小值',
+ component: Range,
+ componentRaw: RangeRaw,
+ },
+ {
+ title: '步长',
+ component: Step,
+ componentRaw: StepRaw,
+ },
+ {
+ title: '对齐方式',
+ component: Alignment,
+ componentRaw: AlignmentRaw,
+ },
+ {
+ title: '提示',
+ component: Tooltip,
+ componentRaw: TooltipRaw,
+ },
+]
diff --git a/packages/components/src/basic/switch/README.md b/packages/components/src/basic/switch/README.md
index a12c7945..03754f4a 100644
--- a/packages/components/src/basic/switch/README.md
+++ b/packages/components/src/basic/switch/README.md
@@ -23,133 +23,6 @@
通过 `v-model` 双向绑定，无需单独事件
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础开关
-
-```vue
-
-
-
-
-```
-
-### 带图标的开关
-
-```vue
-
-
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-```
-
-### 状态变化确认
-
-```vue
-
-
-
-
-```
-
-### 深色模式切换
-
-```vue
-
-
-
-
-```
-
-### 通知开关设置
-
-```vue
-
-
-
-
-
- 邮件通知
-
-
- 短信通知
-
-
- 推送通知
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定，值为 boolean 类型
diff --git a/packages/components/src/basic/switch/_examples/_basic.vue b/packages/components/src/basic/switch/_examples/_basic.vue
new file mode 100644
index 00000000..9f8f5ba5
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/switch/_examples/_callback.vue b/packages/components/src/basic/switch/_examples/_callback.vue
new file mode 100644
index 00000000..fa1a8cda
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_callback.vue
@@ -0,0 +1,28 @@
+
+
+
+
diff --git a/packages/components/src/basic/switch/_examples/_disabled.vue b/packages/components/src/basic/switch/_examples/_disabled.vue
new file mode 100644
index 00000000..c99bed4d
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_disabled.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/switch/_examples/_icon.vue b/packages/components/src/basic/switch/_examples/_icon.vue
new file mode 100644
index 00000000..6c6694a7
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/_icon.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/switch/_examples/index.ts b/packages/components/src/basic/switch/_examples/index.ts
new file mode 100644
index 00000000..b0193580
--- /dev/null
+++ b/packages/components/src/basic/switch/_examples/index.ts
@@ -0,0 +1,31 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Callback from './_callback.vue'
+import CallbackRaw from './_callback.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '图标',
+ component: Icon,
+ componentRaw: IconRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '回调',
+ component: Callback,
+ componentRaw: CallbackRaw,
+ },
+]
diff --git a/packages/components/src/basic/tabs/README.md b/packages/components/src/basic/tabs/README.md
index a5bd7788..4e7157aa 100644
--- a/packages/components/src/basic/tabs/README.md
+++ b/packages/components/src/basic/tabs/README.md
@@ -32,183 +32,6 @@
|--------|------|------|
| `update:modelValue` | `value: string \| number` | 标签切换时触发 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
- 内容一
- 内容二
- 内容三
-
-
-```
-
-### 基础标签页
-
-```vue
-
-
-
-
-
- 基本信息内容...
-
-
- 详细信息内容...
-
-
- 其他信息内容...
-
-
-
-```
-
-### 带图标的标签
-
-```vue
-
-
-
-
- 用户内容...
- 设置内容...
- 通知内容...
-
-
-```
-
-### 数字标签值
-
-```vue
-
-
-
-
- 星期一的内容
- 星期二的内容
- 星期三的内容
-
-
-```
-
-### 自定义样式
-
-```vue
-
-
-
-
- 内容一
- 内容二
-
-
-```
-
-### 监听标签变化
-
-```vue
-
-
-
-
- 列表内容...
- 图表内容...
-
-
-```
-
-### 表单中的标签切换
-
-```vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
## 注意事项
1. **动态插槽**：内容插槽名对应标签的 `value` 值
diff --git a/packages/components/src/basic/tabs/_examples/_basic.vue b/packages/components/src/basic/tabs/_examples/_basic.vue
new file mode 100644
index 00000000..01c30ad6
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_basic.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ 这里展示用户基础资料。
+
+
+
+
+ 这里展示账号安全设置。
+
+
+
+
+ 这里展示消息通知偏好。
+
+
+
+
diff --git a/packages/components/src/basic/tabs/_examples/_custom-style.vue b/packages/components/src/basic/tabs/_examples/_custom-style.vue
new file mode 100644
index 00000000..bb215ae1
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_custom-style.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ 当前数据总览。
+
+
+ 趋势分析内容。
+
+
+ 明细数据内容。
+
+
+
diff --git a/packages/components/src/basic/tabs/_examples/_icon.vue b/packages/components/src/basic/tabs/_examples/_icon.vue
new file mode 100644
index 00000000..e3625200
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/_icon.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ 用户信息内容。
+
+
+
+
+ 系统设置内容。
+
+
+
+
+ 通知消息内容。
+
+
+
+
diff --git a/packages/components/src/basic/tabs/_examples/index.ts b/packages/components/src/basic/tabs/_examples/index.ts
new file mode 100644
index 00000000..10091636
--- /dev/null
+++ b/packages/components/src/basic/tabs/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import CustomStyle from './_custom-style.vue'
+import CustomStyleRaw from './_custom-style.vue?raw'
+import Icon from './_icon.vue'
+import IconRaw from './_icon.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '图标',
+ component: Icon,
+ componentRaw: IconRaw,
+ },
+ {
+ title: '自定义样式',
+ component: CustomStyle,
+ componentRaw: CustomStyleRaw,
+ },
+]
diff --git a/packages/components/src/basic/textarea/README.md b/packages/components/src/basic/textarea/README.md
index 4314eea7..d6efbe4e 100644
--- a/packages/components/src/basic/textarea/README.md
+++ b/packages/components/src/basic/textarea/README.md
@@ -15,6 +15,7 @@
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `align` | `'inline' \| 'block'` | `'inline'` | 前后缀对齐方式 |
+| `disabled` | `boolean` | `false` | 是否禁用文本域 |
| `class` | `HTMLAttributes['class']` | - | 组件外层 CSS 类 |
| `inputClass` | `HTMLAttributes['class']` | - | 文本域 CSS 类 |
| `startClass` | `HTMLAttributes['class']` | - | 前缀区域 CSS 类 |
@@ -27,133 +28,6 @@
| `start` | 文本域前缀内容 |
| `end` | 文本域后缀内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
-
-```
-
-### 基础文本域
-
-```vue
-
-
-
-
-```
-
-### 带前缀
-
-```vue
-
-
-
-
-
-
-```
-
-### 带后缀
-
-```vue
-
-
-
-
-
- {{ charCount }}/200
-
-
-
-```
-
-### 自定义高度
-
-```vue
-
-
-```
-
-### 表单中的使用
-
-```vue
-
-
-
-
-
-```
-
-### 字数限制
-
-```vue
-
-
-
-
-
-
-
- {{ charCount }}/{{ maxLength }}
-
-
-
-
- 已超出字数限制
-
-
-```
-
-### 禁用状态
-
-```vue
-
-
-```
-
## 注意事项
1. **v-model 绑定**：使用 `v-model` 实现双向数据绑定
diff --git a/packages/components/src/basic/textarea/_examples/_basic.vue b/packages/components/src/basic/textarea/_examples/_basic.vue
new file mode 100644
index 00000000..a9b8ac46
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/components/src/basic/textarea/_examples/_disabled.vue b/packages/components/src/basic/textarea/_examples/_disabled.vue
new file mode 100644
index 00000000..b298688e
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/_disabled.vue
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/apps/example/src/views/component_example/textarea/_demo2.vue b/packages/components/src/basic/textarea/_examples/_slot.vue
old mode 100755
new mode 100644
similarity index 50%
rename from apps/example/src/views/component_example/textarea/_demo2.vue
rename to packages/components/src/basic/textarea/_examples/_slot.vue
index b4405c96..593a4e80
--- a/apps/example/src/views/component_example/textarea/_demo2.vue
+++ b/packages/components/src/basic/textarea/_examples/_slot.vue
@@ -1,9 +1,22 @@
-
+
script.ts
diff --git a/packages/components/src/basic/textarea/_examples/index.ts b/packages/components/src/basic/textarea/_examples/index.ts
new file mode 100644
index 00000000..21c59688
--- /dev/null
+++ b/packages/components/src/basic/textarea/_examples/index.ts
@@ -0,0 +1,24 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+ {
+ title: '插槽',
+ component: Slot,
+ componentRaw: SlotRaw,
+ },
+]
diff --git a/packages/components/src/basic/textarea/index.vue b/packages/components/src/basic/textarea/index.vue
index 96f27d6a..45033570 100644
--- a/packages/components/src/basic/textarea/index.vue
+++ b/packages/components/src/basic/textarea/index.vue
@@ -11,6 +11,7 @@ defineOptions({
const props = withDefaults(defineProps<{
align?: 'inline' | 'block'
+ disabled?: boolean
class?: HTMLAttributes['class']
inputClass?: HTMLAttributes['class']
startClass?: HTMLAttributes['class']
diff --git a/packages/components/src/basic/toast/README.md b/packages/components/src/basic/toast/README.md
index 0fe636a7..ceb92cb9 100644
--- a/packages/components/src/basic/toast/README.md
+++ b/packages/components/src/basic/toast/README.md
@@ -29,180 +29,6 @@
| `useFaToast().loading(message)` | 加载提示 |
| `useFaToast().promise(promise, options)` | Promise 提示 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-
- 显示成功提示
-
-
-```
-
-### 成功提示
-
-```vue
-
-
-
- 保存
-
-```
-
-### 错误提示
-
-```vue
-
-
-
- 触发错误
-
-```
-
-### 警告提示
-
-```vue
-
-
-
- 警告提示
-
-```
-
-### 信息提示
-
-```vue
-
-
-
- 信息提示
-
-```
-
-### 加载提示
-
-```vue
-
-
-
- 加载提示
-
-```
-
-### Promise 提示
-
-```vue
-
-
-
- Promise 提示
-
-```
-
-### 带描述的提示
-
-```vue
-
-
-
- 带描述的提示
-
-```
-
-### 带操作的提示
-
-```vue
-
-
-
- 带操作的提示
-
-```
-
-### 多个提示
-
-```vue
-
-
-
- 显示多个提示
-
-```
-
## 注意事项
1. **全局组件**：`
+
+ 显示操作按钮
+
+
diff --git a/packages/components/src/basic/toast/_examples/_basic.vue b/packages/components/src/basic/toast/_examples/_basic.vue
new file mode 100644
index 00000000..98707fab
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/_basic.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+ 默认
+
+
+ 成功
+
+
+ 错误
+
+
+ 信息
+
+
+ 警告
+
+
+
diff --git a/packages/components/src/basic/toast/_examples/_loading.vue b/packages/components/src/basic/toast/_examples/_loading.vue
new file mode 100644
index 00000000..669feab0
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/_loading.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+ 加载状态
+
+
+ Promise 状态
+
+
+
diff --git a/packages/components/src/basic/toast/_examples/index.ts b/packages/components/src/basic/toast/_examples/index.ts
new file mode 100644
index 00000000..7ce673d5
--- /dev/null
+++ b/packages/components/src/basic/toast/_examples/index.ts
@@ -0,0 +1,24 @@
+import Action from './_action.vue'
+import ActionRaw from './_action.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Loading from './_loading.vue'
+import LoadingRaw from './_loading.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '操作按钮',
+ component: Action,
+ componentRaw: ActionRaw,
+ },
+ {
+ title: '加载状态',
+ component: Loading,
+ componentRaw: LoadingRaw,
+ },
+]
diff --git a/packages/components/src/basic/tooltip/README.md b/packages/components/src/basic/tooltip/README.md
index 8961423d..75348774 100644
--- a/packages/components/src/basic/tooltip/README.md
+++ b/packages/components/src/basic/tooltip/README.md
@@ -28,117 +28,6 @@
| `default` | 触发元素（必填） |
| `content` | 自定义提示内容 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
- 悬停显示提示
-
-
-```
-
-### 基础提示
-
-```vue
-
-
- 悬停我
-
-
-```
-
-### 不同弹出方向
-
-```vue
-
-
-
- 上方
-
-
- 下方
-
-
- 左侧
-
-
- 右侧
-
-
-
-```
-
-### 自定义延迟
-
-```vue
-
-
- 快速提示
-
-
- 慢速提示
-
-
-```
-
-### 自定义内容
-
-```vue
-
-
-
-
-
提示标题
-
这是自定义的提示内容，可以包含多行文字。
-
-
-
-```
-
-### 禁用提示
-
-```vue
-
-
-
-
- 条件提示
-
-
-```
-
-### 图标提示
-
-```vue
-
-
-
-
-```
-
-### 表单字段提示
-
-```vue
-
-
-
-
-
-
-
-
-```
-
## 注意事项
1. **必需插槽**：必须提供 `default` slot 作为触发元素
diff --git a/packages/components/src/basic/tooltip/_examples/_align.vue b/packages/components/src/basic/tooltip/_examples/_align.vue
new file mode 100644
index 00000000..d499f7b0
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_align.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Start
+
+
+
+
+ Center
+
+
+
+
+ End
+
+
+
+
diff --git a/packages/components/src/basic/tooltip/_examples/_basic.vue b/packages/components/src/basic/tooltip/_examples/_basic.vue
new file mode 100644
index 00000000..fe9aa329
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/packages/components/src/basic/tooltip/_examples/_delay.vue b/packages/components/src/basic/tooltip/_examples/_delay.vue
new file mode 100644
index 00000000..4a486412
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_delay.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ 快速显示
+
+
+
+
+ 延迟显示
+
+
+
+
diff --git a/packages/components/src/basic/tooltip/_examples/_disabled.vue b/packages/components/src/basic/tooltip/_examples/_disabled.vue
new file mode 100644
index 00000000..8d0d12b9
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_disabled.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ 启用
+
+
+
+
+ 禁用
+
+
+
+
diff --git a/packages/components/src/basic/tooltip/_examples/_side.vue b/packages/components/src/basic/tooltip/_examples/_side.vue
new file mode 100644
index 00000000..ae3632a1
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/_side.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ 上方
+
+
+
+
+ 右侧
+
+
+
+
+ 下方
+
+
+
+
+ 左侧
+
+
+
+
diff --git a/packages/components/src/basic/tooltip/_examples/index.ts b/packages/components/src/basic/tooltip/_examples/index.ts
new file mode 100644
index 00000000..30bdae21
--- /dev/null
+++ b/packages/components/src/basic/tooltip/_examples/index.ts
@@ -0,0 +1,38 @@
+import Align from './_align.vue'
+import AlignRaw from './_align.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Delay from './_delay.vue'
+import DelayRaw from './_delay.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Side from './_side.vue'
+import SideRaw from './_side.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '延迟显示',
+ component: Delay,
+ componentRaw: DelayRaw,
+ },
+ {
+ title: '弹出方向',
+ component: Side,
+ componentRaw: SideRaw,
+ },
+ {
+ title: '对齐方式',
+ component: Align,
+ componentRaw: AlignRaw,
+ },
+ {
+ title: '禁用',
+ component: Disabled,
+ componentRaw: DisabledRaw,
+ },
+]
diff --git a/packages/components/src/basic/trend/README.md b/packages/components/src/basic/trend/README.md
index 64465e31..30bb16ad 100644
--- a/packages/components/src/basic/trend/README.md
+++ b/packages/components/src/basic/trend/README.md
@@ -23,168 +23,6 @@
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
| `variant` | `'default' \| 'filled' \| 'soft' \| 'outline'` | `'default'` | 视觉风格 |
-## 示例
-
-### 基础用法
-
-```vue
-
-
-```
-
-### 不同风格
-
-```vue
-
-
-
-```
-
-### 尺寸对比
-
-```vue
-
-
-```
-
-### 带前后缀
-
-```vue
-
-
-```
-
-### 反转颜色含义
-
-```vue
-
-
-
-
-```
-
-### 数据卡片
-
-```vue
-
-
-
- 销售额
- ¥123,456
-
-
- 访问量
- 45,678
-
-
- 转化率
- 3.2%
-
-
-```
-
-### 表格趋势列
-
-```vue
-
-
-
-
-
-
- 股票
- 价格
- 涨跌幅
-
-
-
-
- {{ stock.name }}
- {{ stock.price }}
-
-
-
-
-
-
-```
-
-### 成本下降（好事）
-
-```vue
-
-
-
-
-
本月成本
-
¥{{ costData.current.toLocaleString() }}
-
-
-
-```
-
-### 组合使用
-
-```vue
-
-
-
-```
-
## 注意事项
### 颜色规则
diff --git a/packages/components/src/basic/trend/_examples/_basic.vue b/packages/components/src/basic/trend/_examples/_basic.vue
new file mode 100644
index 00000000..e5095e61
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/_basic.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/apps/example/src/views/component_example/trend/_demo3.vue b/packages/components/src/basic/trend/_examples/_prefix-suffix.vue
old mode 100755
new mode 100644
similarity index 86%
rename from apps/example/src/views/component_example/trend/_demo3.vue
rename to packages/components/src/basic/trend/_examples/_prefix-suffix.vue
index 8dcec6c4..45073e58
--- a/apps/example/src/views/component_example/trend/_demo3.vue
+++ b/packages/components/src/basic/trend/_examples/_prefix-suffix.vue
@@ -1,3 +1,8 @@
+
+
diff --git a/apps/example/src/views/component_example/trend/_demo2.vue b/packages/components/src/basic/trend/_examples/_reverse.vue
old mode 100755
new mode 100644
similarity index 86%
rename from apps/example/src/views/component_example/trend/_demo2.vue
rename to packages/components/src/basic/trend/_examples/_reverse.vue
index ebd939cb..2ff805b7
--- a/apps/example/src/views/component_example/trend/_demo2.vue
+++ b/packages/components/src/basic/trend/_examples/_reverse.vue
@@ -1,3 +1,8 @@
+
+
diff --git a/packages/components/src/basic/trend/_examples/_size.vue b/packages/components/src/basic/trend/_examples/_size.vue
new file mode 100644
index 00000000..4c3acaee
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/_size.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/apps/example/src/views/component_example/trend/_demo1.vue b/packages/components/src/basic/trend/_examples/_variant.vue
old mode 100755
new mode 100644
similarity index 78%
rename from apps/example/src/views/component_example/trend/_demo1.vue
rename to packages/components/src/basic/trend/_examples/_variant.vue
index 96452328..e39ce65e
--- a/apps/example/src/views/component_example/trend/_demo1.vue
+++ b/packages/components/src/basic/trend/_examples/_variant.vue
@@ -1,3 +1,8 @@
+
+
-
diff --git a/packages/components/src/basic/trend/_examples/index.ts b/packages/components/src/basic/trend/_examples/index.ts
new file mode 100644
index 00000000..91121a2c
--- /dev/null
+++ b/packages/components/src/basic/trend/_examples/index.ts
@@ -0,0 +1,38 @@
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import PrefixSuffix from './_prefix-suffix.vue'
+import PrefixSuffixRaw from './_prefix-suffix.vue?raw'
+import Reverse from './_reverse.vue'
+import ReverseRaw from './_reverse.vue?raw'
+import Size from './_size.vue'
+import SizeRaw from './_size.vue?raw'
+import Variant from './_variant.vue'
+import VariantRaw from './_variant.vue?raw'
+
+export default [
+ {
+ title: '基础',
+ component: Basic,
+ componentRaw: BasicRaw,
+ },
+ {
+ title: '风格',
+ component: Variant,
+ componentRaw: VariantRaw,
+ },
+ {
+ title: '尺寸',
+ component: Size,
+ componentRaw: SizeRaw,
+ },
+ {
+ title: '颜色反转',
+ component: Reverse,
+ componentRaw: ReverseRaw,
+ },
+ {
+ title: '前缀/后缀',
+ component: PrefixSuffix,
+ componentRaw: PrefixSuffixRaw,
+ },
+]
diff --git a/packages/components/src/examples.ts b/packages/components/src/examples.ts
new file mode 100644
index 00000000..949ef941
--- /dev/null
+++ b/packages/components/src/examples.ts
@@ -0,0 +1,42 @@
+export { default as alert } from './basic/alert/_examples'
+export { default as avatar } from './basic/avatar/_examples'
+export { default as buttonGroup } from './basic/button-group/_examples'
+export { default as button } from './basic/button/_examples'
+export { default as card } from './basic/card/_examples'
+export { default as checkboxGroup } from './basic/checkbox-group/_examples'
+export { default as checkbox } from './basic/checkbox/_examples'
+export { default as collapsible } from './basic/collapsible/_examples'
+export { default as contextMenu } from './basic/context-menu/_examples'
+export { default as divider } from './basic/divider/_examples'
+export { default as drawer } from './basic/drawer/_examples'
+export { default as dropdown } from './basic/dropdown/_examples'
+export { default as fileUpload } from './basic/file-upload/_examples'
+export { default as fixedBar } from './basic/fixed-bar/_examples'
+export { default as hoverCard } from './basic/hover-card/_examples'
+export { default as icon } from './basic/icon/_examples'
+export { default as imagePreview } from './basic/image-preview/_examples'
+export { default as imageUpload } from './basic/image-upload/_examples'
+export { default as inputOtp } from './basic/input-otp/_examples'
+export { default as input } from './basic/input/_examples'
+export { default as kbdGroup } from './basic/kbd-group/_examples'
+export { default as kbd } from './basic/kbd/_examples'
+export { default as label } from './basic/label/_examples'
+export { default as modal } from './basic/modal/_examples'
+export { default as numberField } from './basic/number-field/_examples'
+export { default as pageHeader } from './basic/page-header/_examples'
+export { default as pageMain } from './basic/page-main/_examples'
+export { default as pagination } from './basic/pagination/_examples'
+export { default as passwordStrength } from './basic/password-strength/_examples'
+export { default as popover } from './basic/popover/_examples'
+export { default as progress } from './basic/progress/_examples'
+export { default as radioGroup } from './basic/radio-group/_examples'
+export { default as scrollArea } from './basic/scroll-area/_examples'
+export { default as searchBar } from './basic/search-bar/_examples'
+export { default as select } from './basic/select/_examples'
+export { default as slider } from './basic/slider/_examples'
+export { default as switch } from './basic/switch/_examples'
+export { default as tabs } from './basic/tabs/_examples'
+export { default as textarea } from './basic/textarea/_examples'
+export { default as toast } from './basic/toast/_examples'
+export { default as tooltip } from './basic/tooltip/_examples'
+export { default as trend } from './basic/trend/_examples'
- 
-
- 图片操作
-
- 
-
- 
-
-