update

zhangfisher · Apr 5, 2024 · 8af4f11 · 8af4f11
1 parent b510a95
commit 8af4f11
Show file tree

Hide file tree

Showing 18 changed files with 685 additions and 184 deletions.
diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
@@ -1,31 +1,31 @@
 {
-  "hash": "0e61e614",
+  "hash": "33f254c1",
   "configHash": "564dca8c",
-  "lockfileHash": "51ae180a",
-  "browserHash": "f15ec4b3",
+  "lockfileHash": "5f6003f5",
+  "browserHash": "12e4ba13",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.4.21_typescript@5.4.2/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "254efe12",
+      "fileHash": "3e52be9b",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/.pnpm/@vue+devtools-api@7.0.18_vue@3.4.21/node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "2e699cbc",
+      "fileHash": "9c9c3544",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/.pnpm/@vueuse+core@10.9.0_vue@3.4.21/node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "8779363c",
+      "fileHash": "731bd4f1",
       "needsInterop": false
     },
     "vue-slide-up-down": {
       "src": "../../../../node_modules/.pnpm/vue-slide-up-down@3.0.0_vue@3.4.21/node_modules/vue-slide-up-down/src/vue-slide-up-down.js",
       "file": "vue-slide-up-down.js",
-      "fileHash": "d78e0403",
+      "fileHash": "9524906b",
       "needsInterop": false
     }
   },

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,11 +1,13 @@
 import { defineConfig } from 'vitepress'
 import { resolve } from "path"
+import vue from '@vitejs/plugin-vue';
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "LiteTree",
   description: "A simple vue tree component for vitepress",
   base: '/lite-tree/',
   themeConfig: {
+    outline:[2,5],
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: '首页', link: '/' }, 
@@ -15,7 +17,13 @@ export default defineConfig({
     sidebar: [ 
       { text: '关于', link: '/about' },
       { text: '安装', link: '/install' },
-      { text: '指南', link: '/guide' },
+      { 
+        text: '指南', link: '/guide',
+        items:[
+          { text: 'Vue', link: '/vue' },
+          { text: 'React', link: '/react' },
+        ]    
+      },
 
     ],
 
@@ -29,5 +37,12 @@ export default defineConfig({
         "@common": resolve(__dirname,'../../packages/common')
       }
     }
+  },
+  vue:{
+    template: {
+      compilerOptions: {
+        whitespace: 'preserve'
+      }
+    }
   }
 })
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -14,6 +14,6 @@ export default {
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-    app.component('Tree',LiteTree ) 
+    app.component('LiteTree',LiteTree ) 
   }
 } satisfies Theme
diff --git a/docs/about.md b/docs/about.md
@@ -1 +1,13 @@
-# 关于
+# 关于
+
+ `LiteTree`是一款非常简单的`React/Vue`树组件，它的设计初衷是为了在`vitepress/dumi`等编辑`Markdown`文档时可以比较方便地显示树。
+
+**功能特点：**
+
+- 体积小，不依赖任何第三方库
+- 样式简单，功能小巧
+- 包含React/Vue两个版本
+- 支持非标`JSON`数据，具备良好的容错性
+- 通过默认`slot`传递树数据，非常方便
+- 支持自定义节点样式、标签、备注、图标等
+
diff --git a/docs/guide.md b/docs/guide.md
@@ -1,159 +1,4 @@
-# 关于
-
-`LiteTree`是一款非常简单的`vue`树组件，它的设计初衷是为了在`vitepress`上使用时可以比较方便地显示树形结构。
+# 指南
 
-我们知道，`Vue`树组件非常多，一般情况下，但是在`vitepress`上使用这些组件时，会有一些问题，比如样式冲突、体积过大、功能太多等问题，这与`VitePress`这种以展示为主的场景显示格格不入。
-特别是传递树数据时，一般是通过`props`传入的，这样在`vitepress`上使用时，就会显得非常麻烦。
+`LiteTree`包含`@lite-tree/react`和`@lite-tree/vue`两个版本，分别在`React`和`Vue`中使用。它的设计初衷是为了在`vitepress/dumi`等编辑`Markdown`文档时可以比较方便地显示树。
 
-所以，我开发了这款非常简单的`vue`树组件，它的特点是：
-
-- 体积小，不依赖任何第三方库
-- 样式简单，功能小巧
-- 通过默认`slot`传递树数据，非常方便
-- 树数据具备良好的容错性
-- 支持自定义节点样式、标签、备注等
-
-
-## 安装
-
-```bash
-npm install lite-tree
-// or
-yarn add lite-tree
-// or
-pnpm add lite-tree
-```
-
-## 使用方法
-
-在`vitepress`中使用
-
-```md
-<script setup>
-import Tree from 'lite-tree'
-</script>
-
-<Tree>
-    {
-        title: "A公司",
-        open: true,
-        children:[          
-        {
-            title: "行政中心",
-            children:[
-                {title: "{color:red;font-weight:bold;}总裁办"},
-                {title: "人力资源部",tags:['{color:red;}重点','{success}紧急']},
-                {title: "财务部",mark:"success"},
-                {title: "行政部"},
-                {title: "法务部",mark:"warning"},
-                {title: "审计部",style:"font-size:16px;font-style:italic"},
-                {title: "信息中心1",comment:"备用",diff:"add"},
-                {title: "安全保卫部",comment:"{color:red}+"}
-            ]
-        },
-        { 
-            title: "市场中心",
-            children:[
-                {title: "市场部",mark:"info",tags:['{error}出错','{warning}警告']},
-                {title: "销售部"},
-                {title: "客服部"},
-                {title: "品牌部",mark:'error'},
-                {title: "市场策划部"},
-                {title: "市场营销部",comment:"好",tags:["{info}ddddd"]}
-            ]
-        },
-        {
-            title: "研发中心",
-            children:[
-                {title: "移动研发部",mark:"warning"},
-                {title: "平台研发部",tags:["{success}Java","{error}Go"]},
-                {title: "测试部"},
-                {title: "运维部"},
-                {title: "产品部",mark:"success"},
-                {title: "设计部"},
-                {title: "项目管理部",comment:"{color:red;}+"}
-            ]
-        }
-        ]
-    }
-</Tree>
-
-```
-
-最终的渲染效果如下：
-
-
-<Tree format="json">
-  {
-        title: "A公司",
-        open: true,
-        children:[          
-          {
-            title: "行政中心",
-            children:[
-              {title: "{color:red;font-weight:bold;}总裁办"},
-              {title: "人力资源部",tags:['{color:red;}重点','{success}紧急']},
-              {title: "财务部",mark:"success"},
-              {title: "行政部"},
-              {title: "法务部",mark:"warning"},
-              {title: "审计部",style:"font-size:16px;font-style:italic"},
-              {title: "信息中心",comment:"备用",diff:"+"},
-              {title: "安全保卫部",comment:"{color:red}+"}
-            ]
-          },
-          { 
-            title: "市场中心",
-            children:[
-              {title: "市场部",mark:"info",tags:['{error}出错','{warning}警告']},
-              {title: "销售部"},
-              {title: "客服部"},
-              {title: "品牌部",mark:'error'},
-              {title: "市场策划部"},
-              {title: "市场营销部",comment:"好",tags:["{info}ddddd"]}
-            ]
-          },
-          {
-            title: "研发中心",
-            children:[
-              {title: "移动研发部",mark:"warning"},
-              {title: "平台研发部",tags:["{success}Java","{error}Go"]},
-              {title: "测试部"},
-              {title: "运维部"},
-              {title: "产品部",mark:"success"},
-              {title: "设计部"},
-              {title: "项目管理部",comment:"{color:red;}+"}
-            ]
-          }
-        ]
-      }      
-</Tree>  
-
-
-
-## 说明
-
-- 树数据的格式可以是`JSON`，并且具备一定的容错性:
-    - 节点`Key`可以使用`"..."`或`'...'`包裹，也可以省略。
-    - 字符串`Value`可以使用`"..."`或`'...'`包裹
-    - 如果不小心漏掉了,号，也是可以补全的。
-
-- 节点数据声明如下：
-
-```json
-{
-    "title": "A公司",       // 节点标题，显示用
-    "open": true,           // 是否展开
-    "style": "color:red",   // 节点CSS
-    "mark": "success",      // 节点标记，取值为`success`、`info`、`warning`、`error`
-    "tags": ["",""],        // 节点标签
-    "comment":"",           // 节点注释
-    "children":[
-        // 子节点
-    ]
-}
-```
-
-- 节点`title`,`mark`或`tags`字符串前置`{...}`包裹来声明`css`样式，如`tags:["{color:red;font-weight:bold;}OK","{color:blue}+"]`代表`OK`为红色加粗，`+`为蓝色。
-- 每个节点可以通过`mark`来预置标记，取值为`success`、`info`、`warning`、`error`，分别代表`成功`、`信息`、`警告`、`错误`。分别用不同的颜色渲染。
-- 节点可以通过`style`来声明`css`样式。
-- 支持事件？ 暂不支持，因为本组件主要是用在`vitepress`静态页面中进行静态显示，所以目前不支持事件。
diff --git a/docs/index.md b/docs/index.md
@@ -4,8 +4,8 @@ layout: home
 
 hero:
   name: "LiteTree"
-  text: "Simple vue tree component "
-  tagline: 适合vitepress场景中使用
+  text: "Tree component "
+  tagline: 适合Markdown文档编辑场景
   actions:
     - theme: brand
       text: Github
@@ -40,4 +40,4 @@ features:
 - [前端link调试辅助工具 - yald](https://github.com/zhangfisher/yald)
 - [异步信号 - asyncsignal](https://github.com/zhangfisher/asyncsignal)
 - [捆绑Vue组件CSS到JS的插件 - vite-plugin-vue-style-bundler ](https://github.com/zhangfisher/vite-plugin-vue-style-bundler)
-- [Vue树组件 - LiteTree](https://github.com/zhangfisher/lite-tree)
+- [React/Vue树组件 - LiteTree](https://github.com/zhangfisher/lite-tree)
diff --git a/docs/install.md b/docs/install.md
@@ -1 +1,22 @@
-# 安装
+# 安装
+
+## React
+
+```ts
+npm install @lite-tree/react
+// or
+yarn add @lite-tree/react
+// or
+pnpm add @lite-tree/react
+```
+
+
+## Vue
+
+```ts
+npm install @lite-tree/vue
+// or
+yarn add @lite-tree/vue
+// or
+pnpm add @lite-tree/vue
+```
diff --git a/docs/litetree.png b/docs/litetree.png