Demo:完善右键菜单和富文本工具条的暗黑模式

web/src/pages/Edit/components/Contextmenu.vue

@@ -3,6 +3,7 @@
     class="contextmenuContainer listBox"
     v-if="isShow"
     :style="{ left: left + 'px', top: top + 'px' }"
+    :class="{ isDark: isDark }"
   >
     <template v-if="type === 'node'">
       <div
@@ -13,7 +14,11 @@
         {{ $t('contextmenu.insertSiblingNode') }}
         <span class="desc">Enter</span>
       </div>
-      <div class="item" @click="exec('INSERT_CHILD_NODE')" :class="{ disabled: isGeneralization }">
+      <div
+        class="item"
+        @click="exec('INSERT_CHILD_NODE')"
+        :class="{ disabled: isGeneralization }"
+      >
         {{ $t('contextmenu.insertChildNode') }}
         <span class="desc">Tab</span>
       </div>
@@ -45,18 +50,23 @@
         {{ $t('contextmenu.deleteNode') }}
         <span class="desc">Delete</span>
       </div>
-      <div class="item" @click="exec('COPY_NODE')" :class="{ disabled: isGeneralization }">
+      <div
+        class="item"
+        @click="exec('COPY_NODE')"
+        :class="{ disabled: isGeneralization }"
+      >
         {{ $t('contextmenu.copyNode') }}
         <span class="desc">Ctrl + C</span>
       </div>
-      <div class="item" @click="exec('CUT_NODE')" :class="{ disabled: isGeneralization }">
+      <div
+        class="item"
+        @click="exec('CUT_NODE')"
+        :class="{ disabled: isGeneralization }"
+      >
         {{ $t('contextmenu.cutNode') }}
         <span class="desc">Ctrl + X</span>
       </div>
-      <div
+      <div class="item" @click="exec('PASTE_NODE')">
-        class="item"
-        @click="exec('PASTE_NODE')"
-      >
         {{ $t('contextmenu.pasteNode') }}
         <span class="desc">Ctrl + V</span>
       </div>
@@ -74,7 +84,7 @@
       </div>
       <div class="item">
         {{ $t('contextmenu.expandTo') }}
-        <div class="subItems listBox">
+        <div class="subItems listBox" :class="{ isDark: isDark }">
           <div
             class="item"
             v-for="(item, index) in expandList"
@@ -130,7 +140,8 @@ export default {
   },
   computed: {
     ...mapState({
-      isZenMode: state => state.localConfig.isZenMode
+      isZenMode: state => state.localConfig.isZenMode,
+      isDark: state => state.isDark
     }),
     expandList() {
       return [
@@ -309,6 +320,10 @@ export default {
   border-radius: 4px;
   padding-top: 16px;
   padding-bottom: 16px;
+
+  &.isDark {
+    background: #363b3f;
+  }
 }
 .contextmenuContainer {
   position: fixed;
@@ -317,6 +332,16 @@ export default {
   font-weight: 400;
   color: #1a1a1a;
 
+  &.isDark {
+    color: #fff;
+
+    .item {
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .item {
     position: relative;
     height: 28px;

web/src/pages/Edit/components/RichTextToolbar.vue

@@ -3,6 +3,7 @@
     class="richTextToolbar"
     ref="richTextToolbar"
     :style="style"
+    :class="{ isDark: isDark }"
     @click.stop.passive
     v-show="showRichTextToolbar"
   >
@@ -44,7 +45,7 @@
 
     <el-tooltip content="字体" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <div class="fontOptionsList">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
           <div
             class="fontOptionItem"
             v-for="item in fontFamilyList"
@@ -64,7 +65,7 @@
 
     <el-tooltip content="字号" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <div class="fontOptionsList">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
           <div
             class="fontOptionItem"
             v-for="item in fontSizeList"
@@ -93,7 +94,10 @@
 
     <el-tooltip content="背景颜色" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <Color :color="fontBackgroundColor" @change="changeFontBackgroundColor"></Color>
+        <Color
+          :color="fontBackgroundColor"
+          @change="changeFontBackgroundColor"
+        ></Color>
         <div class="btn" slot="reference">
           <span class="icon iconfont iconbeijingyanse"></span>
         </div>
@@ -101,9 +105,7 @@
     </el-tooltip>
 
     <el-tooltip content="清除样式" placement="top">
-      <div
+      <div class="btn" @click="removeFormat">
-        class="btn" @click="removeFormat"
-      >
         <span class="icon iconfont iconqingchu"></span>
       </div>
     </el-tooltip>
@@ -113,6 +115,7 @@
 <script>
 import { fontFamilyList, fontSizeList } from '@/config'
 import Color from './Color'
+import { mapState } from 'vuex'
 
 export default {
   name: 'RichTextToolbar',
@@ -138,6 +141,8 @@ export default {
     }
   },
   computed: {
+    ...mapState(['isDark']),
+
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
     }
@@ -211,7 +216,7 @@ export default {
     },
 
     changeFontBackgroundColor(background) {
-      this.formatInfo.background  = background
+      this.formatInfo.background = background
       this.mindMap.richText.formatText({
         background
       })
@@ -237,6 +242,18 @@ export default {
   align-items: center;
   transform: translateX(-50%);
 
+  &.isDark {
+    background: #363b3f;
+
+    .btn {
+      color: #fff;
+
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .btn {
     width: 55px;
     height: 55px;
@@ -266,6 +283,16 @@ export default {
 .fontOptionsList {
   width: 150px;
 
+  &.isDark {
+    .fontOptionItem {
+      color: #fff;
+
+      &:hover {
+        background-color: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .fontOptionItem {
     height: 30px;
     width: 100%;