chore: add readme for document

CONTRIBUTING.md

@@ -66,3 +66,5 @@ After cloning VChart, run `rush update` to fetch its dependencies. Then, you can
 4. `rush test` runs the complete test suite.
 5. `rush run -p <project_name> -s <script>` run the specified script for the specified project, eg. `rush run -p @visactor/vchart -s start`
 6. `rush prettier --dir <project_relative_path> --ext <file_type>` prettier the specified script for the specified project, eg. `rush prettier --dir packages/vchart --ext ts`
+
+If you want to update documents, you can run `rush docs` to preview VChart document contents locally.

CONTRIBUTING.zh-CN.md

@@ -69,3 +69,5 @@ VisActor 团队会关注所有的 pull request，我们会 review 以及合并
 4. `rush test` 运行所有项目的 test 脚本
 5. `rush run -p <project_name> -s <script>` 运行指定项目的指定脚本，eg. `rush run -p @visactor/vchart -s start`
 6. `rush prettier --dir <project_relative_path> --ext <file_type>` 格式化指定项目的源代码，eg. `rush prettier --dir packages/vchart --ext ts`
+
+如果你需要更新文档内容，你可以执行 `rush docs` 在本地运行 VChart 的文档内容预览。

README.md

@@ -131,6 +131,15 @@ $ rush start
 $ rush react
 ```
 
+## 📖 Documents
+
+After installation & clone & update, run docs to preview documents locally.
+
+```bash
+# start vchart document server
+$ rush docs
+```
+
 ## 🔗 Related Links
 
 - [Homepage](https://www.visactor.io/vchart)

README.zh-CN.md

@@ -131,6 +131,15 @@ $ rush start
 $ rush react
 ```
 
+## 📖 Documents
+
+安装并且更新依赖后，可以执行 docs 命令，开启 vchart 的本地文档预览
+
+```bash
+# start vchart document server
+$ rush docs
+```
+
 ## 🔗 相关链接
 
 - [主页](https://www.visactor.io/vchart)

docs/src/option.tsx

@@ -6,6 +6,7 @@ import { LanguageContext } from './i18n';
 import { OptionDocument } from './option/index';
 import { parseOutline } from './option/outline';
 import { parseDescription } from './option/description';
+import menu from '../menu.json';
 
 export function Option() {
   const { language, setLanguage } = useContext(LanguageContext);
@@ -14,11 +15,13 @@ export function Option() {
   const { pathname: pathName } = location;
   const assetDirectory = pathName.split('/')[1];
 
+  const menuConfig = menu.find(menuItem => menuItem.menu === assetDirectory);
+
   const getOutline = async () => {
     try {
       const response = await fetch(`/documents/${assetDirectory}/${language}/outline.json`);
       const json = await response.json();
-      return parseOutline(json);
+      return parseOutline(json, menuConfig?.sectionMap ?? {});
     } catch (e) {
       console.log(e);
     }

docs/src/option/description.tsx

@@ -1,8 +1,9 @@
 import { IconMinus, IconPlus } from '@arco-design/web-react/icon';
-import { IOptionOutlineNode } from './outline';
 import { Button } from '@arco-design/web-react';
+import { array } from '@visactor/vutils';
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { IOptionOutlineNode } from './outline';
 
 export interface IOptionDescriptionNode {
   desc: string;
@@ -84,20 +85,24 @@ function DescriptionLeaf(props: IDescriptionNodeProps) {
         {leafText}
         <span style={{ color: 'rgb(134, 144, 156)' }}>{outline.default ? ` = ${outline.default}` : ''}</span>
       </h2>
-      {outline.type && outline.type !== '' && (
-        <div
-          style={{
-            background: 'rgb(232, 243, 255)',
-            width: 'fit-content',
-            padding: '0px 10px',
-            marginBottom: 10,
-            color: 'rgb(22, 93, 255)',
-            borderRadius: 2
-          }}
-        >
-          {outline.type}
-        </div>
-      )}
+      {outline.type && outline.type !== ''
+        ? array(outline.type).map(type => (
+            <div
+              style={{
+                background: 'rgb(232, 243, 255)',
+                width: 'fit-content',
+                padding: '0px 10px',
+                marginBottom: 10,
+                marginRight: 6,
+                color: 'rgb(22, 93, 255)',
+                borderRadius: 2,
+                display: 'inline-block'
+              }}
+            >
+              {type}
+            </div>
+          ))
+        : null}
       <div dangerouslySetInnerHTML={{ __html: description.desc }}></div>
     </div>
   );
@@ -189,20 +194,24 @@ function DescriptionNode(props: IDescriptionNodeProps) {
         {leafText}
         <span style={{ color: 'rgb(134, 144, 156)' }}>{outline.default ? ` = ${outline.default}` : ''}</span>
       </h2>
-      {outline.type && outline.type !== '' && (
-        <div
-          style={{
-            background: 'rgb(232, 243, 255)',
-            width: 'fit-content',
-            padding: '0px 10px',
-            marginBottom: 10,
-            color: 'rgb(22, 93, 255)',
-            borderRadius: 2
-          }}
-        >
-          {outline.type}
-        </div>
-      )}
+      {outline.type && outline.type !== ''
+        ? array(outline.type).map(type => (
+            <div
+              style={{
+                background: 'rgb(232, 243, 255)',
+                width: 'fit-content',
+                padding: '0px 10px',
+                marginBottom: 10,
+                marginRight: 6,
+                color: 'rgb(22, 93, 255)',
+                borderRadius: 2,
+                display: 'inline-block'
+              }}
+            >
+              {type}
+            </div>
+          ))
+        : null}
       <div dangerouslySetInnerHTML={{ __html: description.desc }}></div>
       <div style={{ marginLeft: 12 }}>
         {showChildren