完善黑夜模式

package.json

@@ -13,6 +13,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "@icon-park/vue-next": "^1.4.2",
     "@types/lowdb": "1.0.9",
     "@wangeditor/editor": "^5.1.1",
     "@wangeditor/editor-for-vue": "^5.1.12",

src/assets/main.scss

@@ -120,22 +120,25 @@ body {
 
 .dark {
     // background: #393939;
+    $darkBg: #393939;
     height: 100vh;
     width: 100vw;
     --w-e-toolbar-color: #fff; //文字svg颜色
     --w-e-toolbar-active-color: #fff !important; //提示框颜色
     // --el-bg-color: #393939;
-    --w-e-toolbar-bg-color: #393939; //menu背景颜色
+    --w-e-toolbar-bg-color: $darkBg; //menu背景颜色
     --w-e-toolbar-active-bg-color: rgb(150, 150, 150); //hover 的背景颜色
     --w-e-toolbar-active-color: #333;
     --w-e-textarea-slight-bg-color: #333; //表格头部栏
-
+    --el-fill-color-blank: $darkBg; //树组件背景颜色
+    --el-text-color-regular: #fff; //树组件文字颜色
+    --el-fill-color-light: #5b5b5b; //树组件行鼠标停留
     // --w-e-toolbar-disabled-color: red;
     // --w-e-toolbar-border-color: red; //分割线，还有边框颜色
     // --w-e-modal-button-bg-color: red;
 
     @mixin drak {
-        background: #393939 !important;
+        background: $darkBg  !important;
         color: #fff !important;
     }
 
@@ -162,11 +165,11 @@ body {
         @include drak;
 
         .w-e-bar-item .active {
-            background-color: #393939 !important;
+            background-color: $darkBg  !important;
         }
 
         .w-e-bar-item:hover {
-            background-color: #393939 !important;
+            background-color: $darkBg  !important;
         }
     }
 
@@ -176,6 +179,33 @@ body {
     .loadMore {
         color: #fff;
     }
+
+    .mind_map {
+        svg {
+            background-color: $darkBg;
+
+            .root_rect>rect {
+                fill: $darkBg  !important;
+            }
+
+            text {
+                fill: #fff;
+            }
+        }
+    }
+
+    .el-tree-node {
+        .row {
+            .no-left {
+                color: #f2f2f2;
+            }
+
+            .no-left:hover {
+                color: #fff;
+                box-shadow: 0 0 4px #cbcbcb;
+            }
+        }
+    }
 }
 
 .isLeft {

src/components/mindMap/attribute/get.ts

@@ -13,6 +13,7 @@ export const getSiblingGClass = (d?: Mdata): string[] => {
 export const getGClass = (d?: Mdata): string[] => {
     const arr = getSiblingGClass(d)
     if (d) {
+
         if (d.depth === 0) { arr.push(style.root) }
         if (!d.isExpand) {
             arr.push(style['isExpand'])

src/components/mindMap/attribute/set.ts

@@ -41,7 +41,11 @@ export const attrA = (
 
 export const attrG = (g: SelectionG, tran?: Transition): void => {
 
-    const g1: any = g.attr('class', (d) => getGClass(d).join(' ')).attr('data-id', getDataId)
+    const g1: any = g.attr('class', (d) => {
+        const result = getGClass(d).join(' ')
+        console.log('result', result)
+        return result
+    }).attr('data-id', getDataId)
     // g1.transition = d3Transition
     const g2 = tran ? g1.transition(tran) : g1
     g2.attr('transform', getGTransform)

src/components/mindMap/data/ImData.ts

@@ -448,10 +448,9 @@ class ImData {
         return null
     }
 
-    changeLeft(id: string): IsMdata {
+    changeLeft(id: string, left: boolean): IsMdata {
         const d = this.find(id)
         if (d) {
-            const left = !d.left
             d.left = left
             d.rawData.left = left
             this.renew()

src/components/mindMap/data/index.ts

@@ -65,7 +65,7 @@ export const addParent = (id: string, name: string): IsMdata => {
     afterOperation()
     return d
 }
-export const changeLeft = (id: string): void => {
-    mmdata.changeLeft(id)
+export const changeLeft = (id: string, left: boolean): void => {
+    mmdata.changeLeft(id, left)
     afterOperation()
 }

src/components/mindMap/draw/index.ts

@@ -86,7 +86,14 @@ const appendNode = (enter: d3.Selection<d3.EnterElement, Mdata, SVGGElement, IsM
     const gContent = enterG.append('g').attr('class', style.content)
     const gTrigger = gContent.append('rect')
     // 绘制文本
-    const gText = gContent.append('g').attr('class', style.text)
+    const gText = gContent.append('g').attr('class', (d) => {
+        console.log('d', d)
+        let result = style.text
+        if (d.depth === 0) {
+            result += ' ' + 'root_rect'
+        }
+        return result
+    })
     const gTextRect = gText.append('rect')
     const text = gText.append('text')
     attrText(text)

src/components/mindMap/listener/listener.ts

@@ -270,20 +270,24 @@ export function onDragEnd(this: SVGGElement, e: d3.D3DragEvent<SVGGElement, Mdat
         if ((lr || b.y > d.y) && b.y < endY && b.y > upD.y) { upD = b } // 找新哥哥节点
         if ((lr || b.y < d.y) && b.y > endY && b.y < downD.y) { downD = b } // 找新弟弟节点
     })
+    // debugger
+    let left = false
     if (downD.id !== d.id) {
         d.px = 0
         d.py = 0
         moveSibling(d.id, downD.id)
+
     } else if (upD.id !== d.id) {
         d.px = 0
         d.py = 0
         moveSibling(d.id, upD.id, 1)
     } else if (lr) {
         d.px = 0
         d.py = 0
-        changeLeft(d.id)
+        left = true
     } else {
         // 复原
         moveNode(gNode, d, [0, 0], 500)
     }
+    changeLeft(d.id, left)
 }

src/components/mindMap/mind_map.vue

@@ -143,9 +143,14 @@ import {
 } from "./listener";
 import Contextmenu from "./Contextmenu.vue";
 import { afterOperation, mmdata, ImData } from "./data/index";
-
+import { mapState } from "vuex";
 export default defineComponent({
   name: "Mindmap",
+  computed: {
+    ...mapState("user", {
+      user: (state: any) => state.user,
+    }),
+  },
   components: {
     Contextmenu,
   },