update

zhangfisher · Apr 3, 2024 · aa1ffa9 · aa1ffa9
1 parent dc59bff
commit aa1ffa9
Show file tree

Hide file tree

Showing 35 changed files with 652 additions and 322 deletions.
diff --git a/docs/guide.md b/docs/guide.md
@@ -36,7 +36,7 @@ import Tree from 'lite-tree'
 <Tree>
     {
         title: "A公司",
-        expend: true,
+        open: true,
         children:[          
         {
             title: "行政中心",

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -3,28 +3,33 @@ import './App.css'
 import { LiteTree } from '@lite-tree/react'
 
 function App() {
+  const [darkMode, setDarkMode] = useState(true)
+
   return (
-    <>
-      <div className="card">
-      <h1>LiteTree</h1>      
-        <LiteTree data={` 
+    <div className={'app' + (darkMode ? ' dark' : '')}>
+      <div className='card'>
+      <h1>LiteTree</h1>     
+      <div>
+          <button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</button>          
+      </div> 
+        <LiteTree dark={darkMode} style={{height:'200px'}} data={` 
 #error=color:red;border: 1px solid red;background:#ffd2d2;padding:2px;
 #blue=color:red;border: 1px solid blue;background:#e6e6ff;padding:2px;
 airplane=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjM1LjU4IDEyOC44NEwxNjAgOTEuMDZWNDhhMzIgMzIgMCAwIDAtNjQgMHY0My4wNmwtNzUuNTggMzcuNzhBOCA4IDAgMCAwIDE2IDEzNnYzMmE4IDggMCAwIDAgOS41NyA3Ljg0TDk2IDE2MS43NnYxOC45M2wtMTMuNjYgMTMuNjVBOCA4IDAgMCAwIDgwIDIwMHYzMmE4IDggMCAwIDAgMTEgNy40M2wzNy0xNC44MWwzNyAxNC44MWE4IDggMCAwIDAgMTEtNy40M3YtMzJhOCA4IDAgMCAwLTIuMzQtNS42NkwxNjAgMTgwLjY5di0xOC45M2w3MC40MyAxNC4wOEE4IDggMCAwIDAgMjQwIDE2OHYtMzJhOCA4IDAgMCAwLTQuNDItNy4xNk0yMjQgMTU4LjI0bC03MC40My0xNC4wOEE4IDggMCAwIDAgMTQ0IDE1MnYzMmE4IDggMCAwIDAgMi4zNCA1LjY2TDE2MCAyMDMuMzF2MTYuODdsLTI5LTExLjYxYTggOCAwIDAgMC01Ljk0IDBMOTYgMjIwLjE4di0xNi44N2wxMy42Ni0xMy42NUE4IDggMCAwIDAgMTEyIDE4NHYtMzJhOCA4IDAgMCAwLTkuNTctNy44NEwzMiAxNTguMjR2LTE3LjNsNzUuNTgtMzcuNzhBOCA4IDAgMCAwIDExMiA5NlY0OGExNiAxNiAwIDAgMSAzMiAwdjQ4YTggOCAwIDAgMCA0LjQyIDcuMTZMMjI0IDE0MC45NFoiLz48L3N2Zz4=
 ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTUgMTUiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBkPSJNMTIuNSA4di0uMTY3YzAtLjczNi0uNTk3LTEuMzMzLTEuMzMzLTEuMzMzSDEwYTEuNSAxLjUgMCAxIDAgMCAzaDFhMS41IDEuNSAwIDAgMSAwIDNoLTFBMS41IDEuNSAwIDAgMSA4LjUgMTFNOCA2LjVIM20yLjUgMFYxM00uNS41aDE0djE0SC41eiIvPjwvc3ZnPg==
 ---
-- [airplane]A公司({color:red;}重点,{#blue}紧急)          //   企业名称
+- [airplane]A公司({color:red;}重点,{#blue}紧急)          //v   企业名称
   行政中心
       {color:red;font-weight:bold;background:#ffeaea}总裁办
       [checked]人力资源部
-      [unchecked]{.blue}财务部
+      [unchecked]{.blue}财务部   //[yes]{color:red;}
       行政部        //+  负责行政管理
       法务部        //+  打官司等
       [airplane]审计部        //+  审计财务[保存:tag](sss) [连接](sss)
-      信息中心      // 重点[保存](www.baidu.com)[tag][连接:tag](www.baidu.com)
-      [star]安全保卫部    //   保密工作
+      信息中心      // 重点[保存](www.baidu.com)[连接:tag](www.baidu.com)
+      [star]安全保卫部    //x   保密工作
   + 市场中心    
-      市场部({#error}出错,"{#warning}警告")
+      市场部({#error}出错,"{#warning}警告")  
       销售部            //-
       客服部            //-
       {#blue}品牌部            //   this is cool
@@ -33,14 +38,14 @@ ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc
   研发中心
       移动研发部      //!
       平台研发部({success}Java,{error}Go)
-      {.success}测试部
+      {.success}测试部  //x
       运维部
       产品部            //*
       设计部            //*
       项目管理部        //*
 `}/>
        </div>
-    </>
+    </div>
   )
 }
 

diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -22,9 +22,23 @@ a:hover {
   color: #535bf2;
 }
 
+.app{
+  position: fixed;
+  top:0px;
+  left:0px;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+.app.dark{
+  background-color: #1a1a1a;
+}
 .card{
   width: 800px;
+
+
 }
+
 body {
   margin: 0;
   display: flex;

diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts
@@ -1,15 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import fs from "node:fs"
 import { fileURLToPath } from 'node:url'
 import { resolve } from 'node:path'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  define:{
-    "LITE_TREE_ROOT_STYLE":`\`${fs.readFileSync("../../packages/common/styles/root.css")}\``,
-    "LITE_TREE_NODES_STYLE":`\`${fs.readFileSync("../../packages/common/styles/nodes.css")}\``
-  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),

diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -1,10 +1,11 @@
 
 <template> 
-  <main> 
-    <LiteTree format="json">
+<div class="app" :class="isDark ? 'dark' : ''">
+  <main > 
+    <LiteTree format="json" :dark="isDark">
       {
         title: "A公司([官网](https://github.com/zhangfisher 点击访问))",   
-        expend: true,
+        open: true,
         comment:"[主页](https://github.com/zhangfisher)",
         children:[          
           {
@@ -50,7 +51,8 @@
     </LiteTree> 
 
     <button @click="toggleTree">显示/隐藏树</button>
-    <LiteTree v-if="isShowTree">
+    <button @click="toggleDark">切换暗色模式</button>
+    <LiteTree v-if="isShowTree"  :dark="isDark">
 #error=color:red;border: 1px solid red;background:#ffd2d2;padding:2px;
 #blue=color:red;border: 1px solid blue;background:#e6e6ff;padding:2px;
 airplane=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjM1LjU4IDEyOC44NEwxNjAgOTEuMDZWNDhhMzIgMzIgMCAwIDAtNjQgMHY0My4wNmwtNzUuNTggMzcuNzhBOCA4IDAgMCAwIDE2IDEzNnYzMmE4IDggMCAwIDAgOS41NyA3Ljg0TDk2IDE2MS43NnYxOC45M2wtMTMuNjYgMTMuNjVBOCA4IDAgMCAwIDgwIDIwMHYzMmE4IDggMCAwIDAgMTEgNy40M2wzNy0xNC44MWwzNyAxNC44MWE4IDggMCAwIDAgMTEtNy40M3YtMzJhOCA4IDAgMCAwLTIuMzQtNS42NkwxNjAgMTgwLjY5di0xOC45M2w3MC40MyAxNC4wOEE4IDggMCAwIDAgMjQwIDE2OHYtMzJhOCA4IDAgMCAwLTQuNDItNy4xNk0yMjQgMTU4LjI0bC03MC40My0xNC4wOEE4IDggMCAwIDAgMTQ0IDE1MnYzMmE4IDggMCAwIDAgMi4zNCA1LjY2TDE2MCAyMDMuMzF2MTYuODdsLTI5LTExLjYxYTggOCAwIDAgMC01Ljk0IDBMOTYgMjIwLjE4di0xNi44N2wxMy42Ni0xMy42NUE4IDggMCAwIDAgMTEyIDE4NHYtMzJhOCA4IDAgMCAwLTkuNTctNy44NEwzMiAxNTguMjR2LTE3LjNsNzUuNTgtMzcuNzhBOCA4IDAgMCAwIDExMiA5NlY0OGExNiAxNiAwIDAgMSAzMiAwdjQ4YTggOCAwIDAgMCA0LjQyIDcuMTZMMjI0IDE0MC45NFoiLz48L3N2Zz4=
@@ -83,13 +85,16 @@ ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc
         项目管理部        //*
     </LiteTree>     
   </main>
+</div>
 </template>
 <script setup lang="ts">  
 import LiteTree from '@lite-tree/vue' 
 import { ref } from "vue";
 
 const isShowTree = ref<boolean>(true)
+const isDark = ref<boolean>(false)
 const toggleTree = ()=>isShowTree.value=!isShowTree.value
+const toggleDark = ()=>isDark.value=!isDark.value
 
 
 </script>
@@ -100,4 +105,15 @@ main{
   text-align: center;
   margin: 0 auto;
 }
+.app{
+  position: fixed;
+  top:0px;
+  left:0px;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+.app.dark{
+  background-color: #1a1a1a;
+}
 </style>
diff --git a/packages/common/consts.ts b/packages/common/consts.ts
@@ -1,9 +1,11 @@
 export const LiteTreeContextId = Symbol("LiteTreeContext")
-export const flagAlias:Record<string,string> = { 
+export const flagAlias:Record<string,string | string[]> = { 
     "+": "diff-add", 
     "-": "diff-delete", 
     "*": "diff-modify", 
-    "!": "highlight" 
+    "!": ["important","[important]"],
+    "x": ["error","{color:red;background-color:#ffeaea}[no]"],
+    "v": ["correct","{color:green;background-color: #f3ffec}[yes]"]
 }
 
 export const LiteTreeScopeId="data-lite-tree"
diff --git a/packages/common/parsers/index.ts b/packages/common/parsers/index.ts
@@ -2,6 +2,7 @@ import jsonParser from "./json";
 import parseLiteTree, { type LiteTreeParseOptions } from "./lite";
 import type { LiteTreeNode,LiteTreeParseResults } from "../types";
 import { flagAlias } from "../consts";
+import { setObjectDefaultValue } from "../utils/setObjectDefaultValue";
 
 
 const SplitterRegex = /^---\s*$/gm;
@@ -83,7 +84,7 @@ export function parseTreeObject(strTree:string,vars:LiteTreeVars, options:ParseT
         }
     }catch(e:any){
         console.error(e)
-        treeData = [{title:`解析错误:${e.message}`,icon:"error",expand:true,level:0,flag:'',classs:[''],comment:e.message,style:"",tags:[]}]
+        treeData = [{id:"",title:`解析错误:${e.message}`,icon:"error",open:true,level:0,flag:'',classs:[''],comment:e.message,style:"",tags:[]}]
     }
     return treeData
 }
@@ -95,7 +96,7 @@ export interface ParseTreeOptions{
     forEach?: (node:LiteTreeNode)=>void
 } 
 
-
+let NodeIndex = 0
 
 export function parseTree(context:string,options?:ParseTreeOptions):LiteTreeParseResults{
     const opts = Object.assign({},options)
@@ -110,9 +111,27 @@ export function parseTree(context:string,options?:ParseTreeOptions):LiteTreePars
                 if (flag && flag.length>0) {
                     hasFlag = true     // 通过遍历确认是否显示diff列
                     if(flag in flagAlias){
-                        node.classs.push(flagAlias[flag])
+                        const f = flagAlias[flag]
+                        if(typeof(f)==='string'){
+                            node.classs.push(f)
+                        }else if(Array.isArray(f)){
+                            node.classs.push(f[0])
+                            node.flag = f[1]
+                        }
                     }
-                }                   
+                }                
+                setObjectDefaultValue(node,{
+                    id:String(++NodeIndex),
+                    title: 'Node',
+                    icon: '',
+                    open: true,
+                    level: 0,
+                    flag: '',
+                    comment: '',
+                    style: '',
+                    classs: [],
+                    tags: [],
+                })
                 if(typeof(opts.forEach)==='function'){
                     opts.forEach(node)
                 }

diff --git a/packages/common/parsers/json.ts b/packages/common/parsers/json.ts
@@ -59,7 +59,7 @@ export function safeParseJson(str: string, callback?: (key: string, value: any)
 export default function parseJson(content:string,forEach:(key:string,value:any)=>void){
     let nodes =  safeParseJson(content.trim(),(key,value)=>{        
         if(typeof(value)=='object' && !Array.isArray(value)){
-            value.expend = value.expend==undefined ? true : value.expend;
+            value.open = value.open==undefined ? true : value.open;
             if(value.diff) {
                 value.flag = value.diff=='add' ? "+" : value.diff=='delete' ? "-" : value.diff=='modify' ? "*" : value.diff
                 delete value.diff

diff --git a/packages/common/parsers/lite.ts b/packages/common/parsers/lite.ts
@@ -74,17 +74,17 @@ export default function parseLiteTree(treeData:string,vars:LiteTreeVars,options:
         return tags
     }
     function parseNode(line:string):LiteTreeNode{
-        let node:LiteTreeNode = {expand:false,title:'',tags:[],comment:'',style:'',icon:'',level:0,flag:'',classs:[]}
+        let node:LiteTreeNode = {id:undefined,open:false,title:'',tags:[],comment:'',style:'',icon:'',level:0,flag:'',classs:[]}
         nodeRegex.lastIndex = 0
         const match =nodeRegex.exec(line.trim())
         if(match){
-            node.expand    = match[1]=='+'  ?  false : true
+            node.open    = match[1]=='+'  ?  false : true
             node.icon    = match[3] || ''
             node.title   = match[4] || ''
             node.tags    = parseTags(match[6])              
             node.comment = match[9] || ''
             // 紧随//符合的内容样式==  //flag.class.class{.class;style}
-            const flagMatch= /([\w\!\+\*\&\-\=\$\%\@\~\.]+)?(\{[\s\S]*?\})?/g.exec(match[8] || '')            
+            const flagMatch= /([\[\]\w\!\+\*\&\-\=\$\%\@\~\.]+)?(\{[\s\S]*?\})?/g.exec(match[8] || '')            
             if(flagMatch){
                 const f = (flagMatch[1] || '').split(".")
                 node.flag  = f[0]            

diff --git a/packages/common/styles/icons.css b/packages/common/styles/icons.css