Merge branch 'main' of github.com:huyikai/tree-conver into main

README.md

@@ -1,3 +1,5 @@
+# Tree-Conver
+
 <p align="center">
   <a href="https://huyikai.github.io/tree-conver/" target="_blank" rel="noopener noreferrer">
     <img width="180" src="https://huyikai.github.io/tree-conver/static/logo.svg" alt="tree-conver logo">
@@ -6,8 +8,6 @@
 
 ![npm-version](https://flat.badgen.net/npm/v/tree-conver) ![node-version](https://flat.badgen.net/npm/node/tree-conver) ![npm-downloads](https://flat.badgen.net/npm/dw/tree-conver) ![license](https://flat.badgen.net/npm/license/tree-conver)
 
-# Tree-Conver
-
 Tree data conversion tool
 
 English | [简体中文](./README-zhCN.md)

docs/.vitepress/config.ts

@@ -1,4 +1,7 @@
-import vitepressHelper from '@huyikai/vitepress-helper';
+import vitepressHelper, { config } from '@huyikai/vitepress-helper';
+
+import { defineConfigWithTheme } from 'vitepress';
+
 const vitepressHelperConfig = {
   directory: 'docs',
   collapsible: true
@@ -15,9 +18,11 @@ const vitepressConfig = {
     logo: '/static/logo.svg', //导航栏左侧头像
     lastUpdated: true, //最后更新时间
     outlineTitle: 'Catalog', //右侧 侧边栏标题
+
     search: {
       provider: 'local' // 离线搜索
     },
+
     // 社交链接
     socialLinks: [
       { icon: 'github', link: 'https://github.com/huyikai/tree-conver.git' }
@@ -32,12 +37,26 @@ const vitepressConfig = {
       prev: 'Pervious',
       next: 'Next'
     }
+  },
+  locales: {
+    root: {
+      label: '简体中文',
+      lang: 'zh'
+    },
+
+    en: {
+      label: 'English',
+      lang: 'en'
+    }
   }
 };
 export default async () => {
-  const instance: any = await vitepressHelper({
+  const vitepressHelperInstance: any = await vitepressHelper({
     ...vitepressHelperConfig,
     ...vitepressConfig
   });
-  return instance;
+  return defineConfigWithTheme({
+    extends: config,
+    ...vitepressHelperInstance
+  });
 };

docs/.vitepress/theme/components/CustomExample.ts

@@ -0,0 +1,50 @@
+import { treeToArray } from 'tree-conver';
+export const treeArray = [
+  {
+    id: '1',
+    name: 'Node 1',
+    list: [
+      {
+        id: '2',
+        name: 'Node 2',
+        list: [
+          {
+            id: '3',
+            name: 'Node 3'
+          }
+        ]
+      },
+      {
+        id: '4',
+        name: 'Node 4'
+      }
+    ]
+  }
+];
+const calculateDepth = (node) => {
+  let depth = 0;
+  let parent = node;
+  while (parent) {
+    depth++;
+    parent =
+      parent['parentId'] && treeArray.find((n) => n.id === parent['parentId']);
+  }
+  return depth;
+};
+export const options = {
+  childrenKey: 'list',
+  ignoreFields: [],
+  addFields: [
+    {
+      fieldName: 'hasChildren', // Add a new 'field' property with a boolean value
+      callback: (node) => Boolean(node['children'])
+    },
+    {
+      fieldName: 'depth', // Add a new 'depth' property with the depth of each node
+      callback: calculateDepth
+    }
+  ],
+  needParentId: true
+};
+
+export const flatArray = treeToArray(treeArray, options);

docs/.vitepress/theme/components/CustomInput.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { arrayToTree, treeToArray } from 'tree-conver';
+import '@/.vitepress/theme/styles/playground.css';
+
+const props = withDefaults(
+  defineProps<{
+    data: Array<any>;
+    type?: 'tree' | 'array';
+    options?: any;
+  }>(),
+  { type: 'array' }
+);
+const converMap = {
+  tree: treeToArray,
+  array: arrayToTree
+};
+
+const inputData = computed(() => {
+  return JSON.stringify(props.data);
+});
+const inputOptions: any = ref(JSON.stringify(props.options));
+const result = computed(() => {
+  console.log(props.type)
+  const tempOptions = inputOptions.value || JSON.stringify({});
+  try {
+    const data = JSON.parse(inputData.value);
+    const options = JSON.parse(tempOptions);
+    if (Array.isArray(data)) {
+      return converMap[props.type](data, options);
+    }
+  } catch {
+    return;
+  }
+  return;
+});
+</script>
+<template>
+  <div class="playground-title">数据：</div>
+  <textarea
+    class="playground-input"
+    v-model="inputData"
+  />
+  <div class="playground-title">参数：</div>
+  <textarea
+    class="playground-input"
+    v-model="inputOptions"
+  />
+  <div class="playground-title">输出：</div>
+  <pre
+    class="playground-output"
+  ><code>{{ JSON.stringify(result, null, 2) }}</code></pre>
+</template>

docs/.vitepress/theme/home.vue

@@ -7,7 +7,7 @@ import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vu
     <img
       class="logo"
       src="/static/logo.svg"
-      alt="vitepress-custom"
+      alt="tree-conver"
     />
     <div class="name">Tree-Conver</div>
     <div class="text">Tree data conversion tool</div>
@@ -18,15 +18,15 @@ import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vu
         size="medium"
         theme="brand"
         text="Docs"
-        href="/Docs/1.Introduction.html"
+        href="/Introducton/1.What%20is%20TreeConver.html"
       >
       </VPButton>
       <VPButton
         tag="a"
         size="medium"
         theme="sponsor"
-        text="Example"
-        href="/Example/arrayToTree.html"
+        text="Playground"
+        href="/Playground/ArrayToTree.html"
       >
       </VPButton>
       <VPButton

docs/.vitepress/theme/styles/playground.css

@@ -0,0 +1,23 @@
+.playground-input {
+  padding: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  height: 100px;
+  font-size: 14px;
+  border: 1px solid #3d3d3d;
+  border-radius: 5px;
+  outline: none;
+}
+
+.playground-title {
+  font-weight: bold;
+  margin: 10px 0 5px;
+}
+
+.playground-output {
+  padding: 10px;
+  font-size: 14px;
+  background: #f5f5f5;
+  line-height: 16px;
+  box-sizing: border-box;
+}