Merge pull request #2 from TingShine/feat/use-td

docs: 新增文档说明

README.md

@@ -1,52 +1,50 @@
 # vue-draggable-tree-next
 
-This template should help get you started developing with Vue 3 in Vite.
+本组件是基于vue3 + [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)构建的可拖拽、可视化的JSON树，支持节点新建、复制粘贴、编辑、拖拽和删除等功能
 
-## Recommended IDE Setup
+## 特性
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- 初始化数据支持对象`Object`，同时支持自定义视图
+- 节点类型覆盖数值、布尔值、字符串、键值对、对象、数组和自定义
+- 节点支持新增、编辑、复制粘贴和删除
+- 节点可进行拖拽剪贴至其他节点下
+## 演示
+![display](./preview.gif)
+## 安装
 
-## Type Support for `.vue` Imports in TS
+需要提前安装`tdesign-vue-next`，主要用于icon的使用和消息提示
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
+```bash
+npm install vue-draggable-tree-next tdesign-vue-next
 ```
 
-### Compile and Hot-Reload for Development
+## 示例
 
-```sh
-npm run dev
-```
+```vue
+<template>
+    <draggable-tree :init-data="initObject" @change="handleChange" />
+</template>
 
-### Type-Check, Compile and Minify for Production
+<script lang="ts" setup>
+import DraggableTree from "../packages/components/draggable-nested-tree/index.vue";
+import { ref } from "vue";
 
-```sh
-npm run build
-```
+const initObject = {
+  Shrek: {},
+  Fiona: {
+    "Prince Charming": {
+      LordFarquad: "测试1",
+      LordLogo: "测试2",
+    },
+  },
+  Donkey: [],
+  Yes: [],
+};
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-```sh
-npm run test:unit
-```
+const handleChange = (data: any) => {
+  console.log(data);
+};
+</script>
 
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
+```

examples/assets/main.css

@@ -5,9 +5,7 @@
 
 #app {
   max-width: 1800px;
-  margin: 0 auto;
   padding: 2rem;
-
   font-weight: normal;
 }
 
@@ -29,10 +27,4 @@ a,
     display: flex;
     place-items: center;
   }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

examples/init-data-example.vue

@@ -1,9 +1,12 @@
 <template>
-  <draggable-tree :init-data="initObject" @change="handleChange" />
-  <json-displayer
-    title="初始化数据为对象"
-    :value="displayData"
-  ></json-displayer>
+  <div class="flex flex-wrap">
+    <draggable-tree :init-data="initObject" @change="handleChange" />
+    <json-displayer
+    class="w-full"
+      title="初始化数据为对象"
+      :value="displayData"
+    ></json-displayer>
+  </div>
 </template>
 
 <script lang="ts" setup>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-draggable-tree-next",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "The json tree built based on vue3 supports node dragging, adding, editing and deleting, etc.",
   "author": {
     "name": "TingShine",