update

docs/.vitepress/config.mts

@@ -25,7 +25,8 @@ export default defineConfig({
         text: '指南', link: '/guide',
         items:[
           { text: '节点', link: '/guide/node' },
-          { text: '节点标识', link: '/guide/node-flags' },
+          { text: '展开折叠', link: '/guide/node-open-close' },
+          { text: '标识', link: '/guide/node-flags' },
         ]    
       },
 

docs/get-starts.md

@@ -1,6 +1,6 @@
 # 快速使用
 
-下面以`VitePress`为例进行说明。
+`LiteTree`包含`@lite-tree/react`和`@lite-tree/vue`两个版本，分别在`React`和`Vue`中使用,两者的使用方式基本相同。下面以`VitePress`为例进行说明。
 
 ## 第1步：安装
 
@@ -52,8 +52,8 @@ export default defineConfig({
 })
 ```
 
-::: tip
-`whitespace: 'preserve'`是为了保留`Markdown`中的空格，以便`LiteTree`可以正确解析`lite`格式的树数据。
+:::warning 重点
+设置`whitespace: 'preserve'`是为了保留`Markdown`中的空格，以便`LiteTree`可以正确解析`lite`格式的树数据。
 :::
 
 

docs/guide/data-format.md

@@ -0,0 +1 @@
+# 数据格式

docs/guide/node-flags.md

@@ -1,7 +1,13 @@
 # 节点标识
 
+`LiteTree`支持为节点指定标识，用来表示节点的特殊状态。
 
-`LiteTree`可以使用`//`为节点添加标识，显示在节点的最前面，宽度为`1.2em`用于标识节点的各种状态。
+- 节点的标识符显示在节点头部区域，默认为`1.2em`宽度。所以一般只是用来显示一些简单字符或图标。
+- 节点的标识符可以指定样式
+- 包含一些内置节点标识，如`+`、`-`、`*`等
+- 支持自定义节点标识
+
+## **基本用法**
 
 节点标识的格式如下：
 
@@ -67,18 +73,24 @@
 </LiteTree>
 
 
-#### 内置标识
 
-`LiteTree`内置支持以下标识：
 
-- `+`: 代表新增
-- `-`: 代表删除
-- `*`: 代表修改
-- `!`: 代表强调
-- `x`: 代表错误
-- `v`: 代表成功
+## **内置标识**
+
+`LiteTree`内置支持以下内置标识：
+
+```ts
+<LiteTree>
+新增       //+     代表新增
+删除       //-     代表删除
+修改       //*      代表修改
+强调       //!      代表强调
+错误       //x      代表错误
+成功       //v      代表成功
+</LiteTree>
+```
 
-**效果如下：**
+**渲染效果如下：**
 
 <LiteTree>
 新增       //+     代表新增
@@ -90,7 +102,7 @@
 </LiteTree>
 
 
-#### 自定义标识
+## 自定义标识
 
 除了内置标识外，`LiteTree`也支持自定义标识,格式如下：
 
@@ -106,18 +118,28 @@
 
 ```md
 .warning=color:#ff742e;background-color:#ffd0b3;
+github=data:image/svg+xml;base64,<...此处省略自定义图标数据...>
 ---
 成功       //s     代表成功
 警告       //w.warning      代表警告
 错误       //e{color:red}      代表错误
+VoerkaI18n       //[github]{color:green}      使用图标标识
 ```
 
 **渲染效果如下：**
 
 <LiteTree>
 .warning=color:#ff742e;background-color:#ffd0b3;
+github=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuOTk5IDFDNS45MjYgMSAxIDUuOTI1IDEgMTJjMCA0Ljg2IDMuMTUyIDguOTgzIDcuNTIzIDEwLjQzN2MuNTUuMTAyLjc1LS4yMzguNzUtLjUzYzAtLjI2LS4wMDktLjk1Mi0uMDE0LTEuODdjLTMuMDYuNjY0LTMuNzA2LTEuNDc1LTMuNzA2LTEuNDc1Yy0uNS0xLjI3LTEuMjIxLTEuNjEtMS4yMjEtMS42MWMtLjk5OS0uNjgxLjA3NS0uNjY4LjA3NS0uNjY4YzEuMTA1LjA3OCAxLjY4NSAxLjEzNCAxLjY4NSAxLjEzNGMuOTgxIDEuNjggMi41NzUgMS4xOTUgMy4yMDIuOTE0Yy4xLS43MS4zODQtMS4xOTUuNjk4LTEuNDdjLTIuNDQyLS4yNzgtNS4wMS0xLjIyMi01LjAxLTUuNDM3YzAtMS4yLjQyOC0yLjE4MyAxLjEzMi0yLjk1MmMtLjExNC0uMjc4LS40OTEtMS4zOTcuMTA4LTIuOTFjMCAwIC45MjMtLjI5NyAzLjAyNSAxLjEyN0ExMC41MzYgMTAuNTM2IDAgMCAxIDEyIDYuMzJhMTAuNDkgMTAuNDkgMCAwIDEgMi43NTQuMzdjMi4xLTEuNDI0IDMuMDIyLTEuMTI4IDMuMDIyLTEuMTI4Yy42IDEuNTE0LjIyMyAyLjYzMy4xMSAyLjkxMWMuNzA1Ljc2OSAxLjEzIDEuNzUxIDEuMTMgMi45NTJjMCA0LjIyNi0yLjU3MiA1LjE1Ni01LjAyMiA1LjQyOGMuMzk1LjM0Ljc0NyAxLjAxLjc0NyAyLjAzN2MwIDEuNDctLjAxNCAyLjY1Ny0uMDE0IDMuMDE3YzAgLjI5NS4xOTkuNjM3Ljc1Ni41M0MxOS44NTEgMjAuOTc5IDIzIDE2Ljg1OSAyMyAxMmMwLTYuMDc1LTQuOTI2LTExLTExLjAwMS0xMSIvPjwvc3ZnPg==
 ---
 成功       //s{color:green}     代表成功
 警告       //w.warning          代表警告
 错误       //e{color:red}       代表错误
-</LiteTree>
+VoerkaI18n       //[github]{color:green}      使用图标标识
+</LiteTree>
+
+
+
+:::warning 注意
+标识区域宽度默认为`1.2em`，如果标识内容过长，可能会导致显示混乱。因此，一般建议标识内容尽量简短或使用图标。
+:::

docs/guide/node-open-close.md

@@ -0,0 +1,27 @@
+# 展开/折叠
+
+`LiteTree`组件支持通过`+`和`-`前置符号来控制节点的默认展开/折叠状态。
+
+```ts
+<LiteTree>
+根节点
+    + 节点1                     // 默认展开状态
+        - 节点1.1
+        - 节点1.2
+    - 节点2                     // 默认折叠状态
+        - 节点2.1   
+        - 节点2.2
+</LiteTree>
+```
+
+**渲染效果如下：**
+
+<LiteTree>
+根节点
+    + 节点1                     // 默认展开状态
+        节点1.1
+        节点1.2
+    - 节点2                     // 默认折叠状态
+        节点2.1
+        节点2.2
+</LiteTree>