From 962512969197b98f46c79fe6639ca00386ac3e63 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Thu, 10 Aug 2023 08:47:16 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E5=AE=8C=E5=96=84=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E5=AF=8C=E6=96=87=E6=9C=AC=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=9D=A1=E7=9A=84=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/Contextmenu.vue | 43 +++++++++++++++----
 .../pages/Edit/components/RichTextToolbar.vue | 43 +++++++++++++++----
 2 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index c2d1d829..b3e9d461 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/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
-        class="item"
-        @click="exec('PASTE_NODE')"
-      >
+      <div 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;
diff --git a/web/src/pages/Edit/components/RichTextToolbar.vue b/web/src/pages/Edit/components/RichTextToolbar.vue
index 4949152f..5c68679b 100644
--- a/web/src/pages/Edit/components/RichTextToolbar.vue
+++ b/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,17 +94,18 @@
 
     <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>
       </el-popover>
     </el-tooltip>
-    
+
     <el-tooltip content="清除样式" placement="top">
-      <div
-        class="btn" @click="removeFormat"
-      >
+      <div 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%;