From 19c6d0b6ae457fa470562bd09c714a2f32bc2dca Mon Sep 17 00:00:00 2001 From: MoNaiZi <358665514@qq.com> Date: Sat, 20 Aug 2022 10:32:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=BB=91=E5=A4=9C=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/assets/main.scss | 40 +++- src/components/mindMap/attribute/get.ts | 1 + src/components/mindMap/attribute/set.ts | 6 +- src/components/mindMap/data/ImData.ts | 3 +- src/components/mindMap/data/index.ts | 4 +- src/components/mindMap/draw/index.ts | 9 +- src/components/mindMap/listener/listener.ts | 6 +- src/components/mindMap/mind_map.vue | 7 +- src/components/note_header.vue | 193 ++++++++------------ src/main.ts | 1 + src/on.ts | 5 - yarn.lock | 5 + 13 files changed, 148 insertions(+), 133 deletions(-) diff --git a/package.json b/package.json index 5702755..4700977 100644 --- a/package.json +++ b/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", diff --git a/src/assets/main.scss b/src/assets/main.scss index 043cc54..b5916e1 100644 --- a/src/assets/main.scss +++ b/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 { diff --git a/src/components/mindMap/attribute/get.ts b/src/components/mindMap/attribute/get.ts index 6371cc5..4c3a277 100644 --- a/src/components/mindMap/attribute/get.ts +++ b/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']) diff --git a/src/components/mindMap/attribute/set.ts b/src/components/mindMap/attribute/set.ts index b1841d8..699da40 100644 --- a/src/components/mindMap/attribute/set.ts +++ b/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) diff --git a/src/components/mindMap/data/ImData.ts b/src/components/mindMap/data/ImData.ts index f16c5e1..be031f6 100644 --- a/src/components/mindMap/data/ImData.ts +++ b/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() diff --git a/src/components/mindMap/data/index.ts b/src/components/mindMap/data/index.ts index 4866414..3e1dfab 100644 --- a/src/components/mindMap/data/index.ts +++ b/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() } \ No newline at end of file diff --git a/src/components/mindMap/draw/index.ts b/src/components/mindMap/draw/index.ts index 9df08c2..1dab729 100644 --- a/src/components/mindMap/draw/index.ts +++ b/src/components/mindMap/draw/index.ts @@ -86,7 +86,14 @@ const appendNode = (enter: d3.Selection { + 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) diff --git a/src/components/mindMap/listener/listener.ts b/src/components/mindMap/listener/listener.ts index a405a3a..db895aa 100644 --- a/src/components/mindMap/listener/listener.ts +++ b/src/components/mindMap/listener/listener.ts @@ -270,10 +270,13 @@ export function onDragEnd(this: SVGGElement, e: d3.D3DragEvent 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 @@ -281,9 +284,10 @@ export function onDragEnd(this: SVGGElement, e: d3.D3DragEvent state.user, + }), + }, components: { Contextmenu, }, diff --git a/src/components/note_header.vue b/src/components/note_header.vue index e68bbac..c598424 100644 --- a/src/components/note_header.vue +++ b/src/components/note_header.vue @@ -10,15 +10,24 @@ ]" >
- - - - - - - - - + - - + - - - - - - - - - - - - - + theme="outline" + size="23" + fill="#979797" + /> + - + > + + + + > + + - + + +
@@ -232,10 +168,28 @@ const { ipcRenderer } = require("electron"); import drag from "@/components/drag.vue"; import { defineComponent } from "vue"; import contextMenu from "@/components/context_menu.vue"; +import { + Minus, + Remind, + MindmapMap, + MindmapList, + Close, + FullScreenOne, + FullScreenTwo, + SettingTwo, +} from "@icon-park/vue-next"; export default defineComponent({ components: { drag, contextMenu, + Minus, + Remind, + MindmapMap, + MindmapList, + Close, + FullScreenOne, + FullScreenTwo, + SettingTwo, }, computed: { ...mapState("note", { @@ -411,6 +365,10 @@ export default defineComponent({ text-align: center; } } + .icon-thepin-active, + .icon-thepin { + margin-right: 5px !important; + } .right { width: 25%; } @@ -421,7 +379,11 @@ export default defineComponent({ .left { width: 25%; line-height: 10px; - cursor: pointer; + i { + cursor: pointer; + color: #979797; + margin-left: 8px; + } .el-icon { margin-right: 10px; cursor: pointer; @@ -430,7 +392,7 @@ export default defineComponent({ } .home { .iconfont { - @include iconfont(25px); + @include iconfont(28px); } } @@ -446,7 +408,6 @@ export default defineComponent({ } .left { text-align: left; - margin-left: 5px; } .title { // @extend .drag; @@ -460,6 +421,7 @@ export default defineComponent({ display: flex; align-items: center; justify-content: end; + // padding-right: 6px; img { width: 19px; cursor: pointer; @@ -467,7 +429,8 @@ export default defineComponent({ } i { cursor: pointer; - margin-left: 10px; + color: #979797; + margin-right: 8px; } } } diff --git a/src/main.ts b/src/main.ts index c4424bb..955ca84 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import router from './router/index' import ElementPlus from 'element-plus' import zhCn from "element-plus/lib/locale/lang/zh-cn"; import 'element-plus/dist/index.css' +import '@icon-park/vue-next/styles/index.css'; import * as ElementPlusIconsVue from '@element-plus/icons-vue' import { createNumberString } from '@/utils/index' // import Datastore from 'lowdb' diff --git a/src/on.ts b/src/on.ts index 643c39d..664e63c 100644 --- a/src/on.ts +++ b/src/on.ts @@ -164,7 +164,6 @@ ipcMain.on('windowMoving', (event, { mouseX, mouseY, width, height }) => { }); - const suspensionWin = function (itemList?: any) { const mainWindows = mainProcess.mainWindows() const { width, height } = screen.getPrimaryDisplay().workAreaSize; @@ -197,10 +196,6 @@ const suspensionWin = function (itemList?: any) { return win } -// ipcMain.on('newMenu', (event, WHObj) => { - -// }) - ipcMain.handle('theme', (event, temp) => { // nativeTheme.themeSource = 'dark' diff --git a/yarn.lock b/yarn.lock index 7e38e36..5241cbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1143,6 +1143,11 @@ resolved "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@icon-park/vue-next@^1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz#818c048100401620e8112beb2636f10171b195cc" + integrity sha512-+QklF255wkfBOabY+xw6FAI0Bwln/RhdwCunNy/9sKdKuChtaU67QZqU67KGAvZUTeeBgsL+yaHHxqfQeGZXEQ== + "@javascript-obfuscator/escodegen@2.3.0": version "2.3.0" resolved "https://registry.yarnpkg.com/@javascript-obfuscator/escodegen/-/escodegen-2.3.0.tgz#ff7eb7f8a7c004532e93b14ae8b2196dcf9a1a9e"