docs: 更新文档

README.md

@@ -1,32 +1,100 @@
-在vue3 版本中 k-form-design 将改名 k-designer
+## 简介
+k-designer的前身是[k-form-design](https://gitee.com/kcz66/k-form-design)
 
-我认为这个版本的设计器不仅仅局限于设计表单，它或许把做一些页面组件进行封装，例如H5页面设计器，所以我认为单纯的设计器这个称呼可能会更符合
+k-form-design是基于vue2开发一个表单设计器，
+在升级vue3时，参考了很多用户反馈的意见，在设计时，不仅仅只是设计表单，还可以用来设计页面等等
 
-设计器  k-designer
+k-designer将不仅仅局限于设计表单，它或许把做一些页面组件进行封装，例如H5页面设计器
+
+所以在vue3版本中 k-form-design 改名 k-designer
+
+
+
+#### 功能
+
+- [x] 拖拽设计
+- [x] 自定义actionBar
+- [x] 布局组件扩展
+- [x] 自定义组件扩展
+- [x] 事件扩展
+- [x] 组件懒加载
+- [ ] 完善布局
+- [x] 组件属性自定义
+- [ ] 支持不同UI
+- [ ] 插件扩展
 
-生成器 k-builder
 
 
 
-安装依赖
 
+## 如何使用
+### 安装k-designer
+
+```bash
+npm i k-designer
 ```
-pnpm i
+
+
+
+k-designer目标是支持多UI兼容
+
+目前支持element-plus/ant-design-vue,以下可以选择安装
+
+### 使用element-plus需要自行安装element-plus UI
+
+```bash
+npm i element-plus
 ```
+main.ts 或者 main.js引入注册组件
+```javascript
+// 引入Element plus样式
+import 'element-plus/dist/index.css'
+import { pluginManager, useElementPlus } from "k-designer";
 
-启动
+// 使用Elemnt UI
+useElementPlus(pluginManager);
+```
 
+### 使用ant-design-vue需要自行安装ant-design-vue
+
+```bash
+npm i ant-design-vue
 ```
-pnpm run dev
+main.ts 或者 main.js引入注册组件
+```javascript
+// 引入antd UI样式
+import "ant-design-vue/dist/antd.css";
+import { pluginManager, useAntd } from "k-designer";
+
+// 使用Antd UI
+useAntd(pluginManager);
 ```
 
-功能
 
-- [x] 拖拽设计
-- [x] 自定义actionBar
-- [x] 布局组件扩展
-- [x] 自定义组件扩展
-- [ ] 事件扩展
-- [x] 组件懒加载
-- [ ] 完善布局
-- [x] 组件属性自定义
+
+### 在页面使用k-designer
+
+```vue
+<template>
+  <div class="h-full">
+    <KDesigner />
+  </div>
+</template>
+<script setup lang="ts">
+import { KDesigner } from 'k-designer';
+</script>
+<style>
+.h-full {
+  height: 100vh;
+}
+</style>
+```
+
+
+
+
+
+设计器  k-designer
+
+生成器 k-builder
+