update

docs/.vitepress/config.mts

@@ -7,7 +7,10 @@ export default defineConfig({
   description: "A simple vue tree component for vitepress",
   base: '/lite-tree/',
   themeConfig: {
-    outline:[2,5],
+    outline:{
+      label:"目录",  
+      level:[2,5]
+    },
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: '首页', link: '/' }, 
@@ -17,11 +20,12 @@ export default defineConfig({
     sidebar: [ 
       { text: '关于', link: '/about' },
       { text: '安装', link: '/install' },
+      { text: '快速入门', link: '/get-starts' },
       { 
         text: '指南', link: '/guide',
         items:[
-          { text: 'Vue', link: '/vue' },
-          { text: 'React', link: '/react' },
+          { text: '节点', link: '/guide/node' },
+          { text: '节点标识', link: '/guide/node-flags' },
         ]    
       },
 

docs/get-starts.md

@@ -0,0 +1,136 @@
+# 快速使用
+
+下面以`VitePress`为例进行说明。
+
+## 第1步：安装
+
+```ts
+npm install @lite-tree/vue
+// or
+yarn add @lite-tree/vue
+// or
+pnpm add @lite-tree/vue
+```
+
+## 第2步：注册组件
+
+`@lite-tree/vue`在`VitePress`中使用有两种方式：
+
+- **按需引入**
+- **全局引入**
+
+一般建议将`LiteTree`注册为全局组件，以便在任何地方都可以使用。
+
+```ts
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import { LiteTree } from '@lite-tree/vue'
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // 注册自定义全局组件
+    app.component('LiteTree'，LiteTree)
+  }
+}
+``` 
+
+接下需要在`.vitepress/config.mts`中配置`Vue`参数，如下：
+
+```ts {5-9}
+// .vitepress/config.mts
+export default defineConfig({
+ // ...
+  vue:{
+    template: {                      
+      compilerOptions: {
+        whitespace: 'preserve'      // [!code ++]
+      }
+    }
+  }
+})
+```
+
+::: tip
+`whitespace: 'preserve'`是为了保留`Markdown`中的空格，以便`LiteTree`可以正确解析`lite`格式的树数据。
+:::
+
+
+## 第3步：使用 
+
+由于上面将`LiteTree`注册为全局组件，因此接下来在任何`markdown`文件都可以直接使用`<LiteTree>`组件。
+
+`lite-tree`支持使用`json`和`lite`两种格式来声明树数据。
+
+:::warning 注意
+`lite`是一种使用缩进来代表层级的简化格式，每`4个空格`代表一个树层级，适合在`Markdown`文档中使用。
+:::
+
+下面是一个简单的例子(`使用4个空格代码树的一个层缩进`)：
+
+```md
+<LiteTree>
+- A公司
+    行政中心
+        总裁办
+        人力资源部
+        财务部
+        行政部
+        法务部
+        审计部
+        信息中心
+    + 市场中心
+        市场部
+        销售部
+        客服部
+        品牌部
+        市场策划部
+        市场营销部
+    研发中心
+        移动研发部
+        平台研发部
+        测试部
+        运维部
+        产品部
+        设计部
+</LiteTree>
+
+```
+
+可以看到`lite`格式比起`json`或`ul/li`格式更加简洁，适合在`Markdown`文档中使用。
+
+**渲染效果如下：**
+
+<LiteTree>
+A公司
+    行政中心
+        总裁办
+        人力资源部
+        财务部
+        行政部
+        法务部
+        审计部
+        信息中心
+    + 市场中心
+        市场部
+        销售部
+        客服部
+        品牌部
+        市场策划部
+        市场营销部
+    研发中心
+        移动研发部
+        平台研发部
+        测试部
+        运维部
+        产品部
+        设计部
+</LiteTree>
+
+**说明：**
+
+- 可以看到`lite`格式非常简洁，只需要通过`缩进`或`TAB`来代表缩进即可，默认情况下,每`4`个空格代表一个树层级,一个`TAB`等于`4`个空格。
+- 默认情况下，前置`-`号来表示节点展开状态，`+`号表示节点关闭状态。
+
+

docs/guide/node-flags.md

@@ -0,0 +1,123 @@
+# 节点标识
+
+
+`LiteTree`可以使用`//`为节点添加标识，显示在节点的最前面，宽度为`1.2em`用于标识节点的各种状态。
+
+节点标识的格式如下：
+
+:::warning 格式说明
+在节点后面添加`//`并尾随`+` `-` `*` `!`等标识字符
+:::
+
+
+下面是一个例子：
+
+```md {5-7,9-10,13-15,17,20-22}
+<LiteTree>
+- A公司
+    行政中心
+        总裁办
+        人力资源部      //+        
+        财务部          //+         
+        行政部          //+         
+        法务部
+        审计部          //x        
+        信息中心        //v
+    市场中心
+        市场部
+        销售部          //-         
+        客服部          //-         
+        品牌部          //-         
+        市场策划部
+        市场营销部      //!        
+    研发中心
+        移动研发部
+        平台研发部      //*        
+        测试部          //*        
+        运维部          //*        
+        产品部
+        设计部
+</LiteTree>
+```
+
+**渲染效果如下：**
+<LiteTree>
+- A公司
+    行政中心
+        总裁办
+        人力资源部   //+
+        财务部      //+
+        行政部      //+
+        法务部            
+        审计部      //x        
+        信息中心    //v
+    市场中心
+        市场部
+        销售部      //-
+        客服部      //-
+        品牌部      //-
+        市场策划部        
+        市场营销部  //!
+    研发中心
+        移动研发部
+        平台研发部  //*
+        测试部      //*
+        运维部      //*
+        产品部
+</LiteTree>
+
+
+#### 内置标识
+
+`LiteTree`内置支持以下标识：
+
+- `+`: 代表新增
+- `-`: 代表删除
+- `*`: 代表修改
+- `!`: 代表强调
+- `x`: 代表错误
+- `v`: 代表成功
+
+**效果如下：**
+
+<LiteTree>
+新增       //+     代表新增
+删除       //-     代表删除
+修改       //*      代表修改
+强调       //!      代表强调
+错误       //x      代表错误
+成功       //v      代表成功
+</LiteTree>
+
+
+#### 自定义标识
+
+除了内置标识外，`LiteTree`也支持自定义标识,格式如下：
+
+:::warning 格式说明
+节点标题   **//**<`节点标识符`><`.节点样式类`><`{节点样式}`>
+:::
+
+- 标识标识字符必须尾随在`//`后，并且不能包含空格字符
+- 可以为节点标识指定样式`CSS`类,如`//w.warning`代表节点应用`warning`样式类。
+- 可以为节点标识指定`样式`，如`//e{color:red}`代表节点应用`color:red`样式。
+
+**下面是一个例子：**
+
+```md
+.warning=color:#ff742e;background-color:#ffd0b3;
+---
+成功       //s     代表成功
+警告       //w.warning      代表警告
+错误       //e{color:red}      代表错误
+```
+
+**渲染效果如下：**
+
+<LiteTree>
+.warning=color:#ff742e;background-color:#ffd0b3;
+---
+成功       //s{color:green}     代表成功
+警告       //w.warning          代表警告
+错误       //e{color:red}       代表错误
+</LiteTree>