From f3462496855bf9fc8454c1d4fbe8e652d4d445e5 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Mon, 4 Sep 2023 20:02:23 +0800
Subject: [PATCH] feat: advance toolbar

---
 src/components/wang-editor/EditorFooter.vue   |  82 ++--------
 .../wang-editor/EditorSettingsMenu.vue        | 146 ++++++++++++++++++
 src/components/wang-editor/SwitchButton.vue   |  12 +-
 src/components/wang-editor/Title.vue          |   2 -
 src/components/wang-editor/WangEditor.vue     |  33 ++--
 src/components/wang-editor/key.js             |  62 --------
 src/components/wang-editor/keysToExclude.ts   |  34 ++++
 src/styles/editor/editor.scss                 |  17 +-
 .../topic/content/components/Content.vue      |   3 +-
 9 files changed, 229 insertions(+), 162 deletions(-)
 create mode 100644 src/components/wang-editor/EditorSettingsMenu.vue
 delete mode 100644 src/components/wang-editor/key.js
 create mode 100644 src/components/wang-editor/keysToExclude.ts

diff --git a/src/components/wang-editor/EditorFooter.vue b/src/components/wang-editor/EditorFooter.vue
index 10ffea17..aae23f29 100644
--- a/src/components/wang-editor/EditorFooter.vue
+++ b/src/components/wang-editor/EditorFooter.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 // 引入图标字体
 import { Icon } from '@iconify/vue'
-// 导入模式切换按钮
-import SwitchButton from './SwitchButton.vue'
+
+// 异步引入编辑器设置面板
+const EditorSettingsMenu = defineAsyncComponent(
+  () => import('./EditorSettingsMenu.vue')
+)
 
 // 引入 css 动画
 import 'animate.css'
 
-// 导入编辑帖子的 store
-import { useKUNGalgameEditStore } from '@/store/modules/edit'
-import { storeToRefs } from 'pinia'
-
-const { editorHeight } = storeToRefs(useKUNGalgameEditStore())
-
+// 接受传入的编辑器计数
 defineProps<{
   textCount: number
 }>()
 
 // 是否显示编辑器设置面板
-const isShowSettingsMenu = ref(true)
+const isShowSettingsMenu = ref(false)
 
 // 点击设置按钮
 const handelClickSettings = () => {
@@ -43,37 +41,8 @@ const handelClickSettings = () => {
     <!-- 文字计数 -->
     <span class="count">{{ textCount + ` ${$tm('edit.word')}` }}</span>
 
-    <Transition
-      enter-active-class="animate__animated animate__jackInTheBox animate__faster"
-      leave-active-class="animate__animated animate__rollOut animate__faster"
-    >
-      <!-- 设置菜单 -->
-      <div v-if="isShowSettingsMenu" class="settings-menu">
-        <!-- 编辑器高度设置 -->
-        <div class="editor-height-title">
-          <span> 编辑器高度 </span>
-          <span>{{ editorHeight }} px</span>
-        </div>
-        <div class="editor-height">
-          <span>300 px</span>
-          <input
-            type="range"
-            min="300"
-            max="500"
-            step="1"
-            v-model="editorHeight"
-          />
-          <span>500 px</span>
-        </div>
-
-        <!-- 是否显示编辑器高级选项 -->
-        <div class="editor-advance-title">
-          <span> 高级选项 </span>
-          <!-- 切换按钮 -->
-          <SwitchButton />
-        </div>
-      </div>
-    </Transition>
+    <!-- 设置面板 -->
+    <EditorSettingsMenu :isShowSettingsMenu="isShowSettingsMenu" />
   </div>
 </template>
 
@@ -101,37 +70,6 @@ const handelClickSettings = () => {
   }
 }
 
-.settings-menu {
-  padding: 10px;
-  z-index: 1009;
-  position: absolute;
-  bottom: 50px;
-  background-color: var(--kungalgame-white);
-  border: 1px solid var(--kungalgame-blue-1);
-  box-shadow: var(--shadow);
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-
-  .editor-height-title {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-size: 17px;
-  }
-
-  .editor-advance-title {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-size: 17px;
-  }
-
-  .editor-height {
-    margin-bottom: 20px;
-  }
-}
-
 .count {
   color: var(--kungalgame-font-color-0);
   background-color: var(--kungalgame-trans-white-9);
diff --git a/src/components/wang-editor/EditorSettingsMenu.vue b/src/components/wang-editor/EditorSettingsMenu.vue
new file mode 100644
index 00000000..73d1857b
--- /dev/null
+++ b/src/components/wang-editor/EditorSettingsMenu.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+// 引入图标字体
+import { Icon } from '@iconify/vue'
+// 导入模式切换按钮
+import SwitchButton from './SwitchButton.vue'
+
+// 引入 css 动画
+import 'animate.css'
+
+// 导入编辑帖子的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+import { storeToRefs } from 'pinia'
+
+// 使用编辑界面的 store
+const settingsStore = useKUNGalgameEditStore()
+const { isShowAdvance } = storeToRefs(settingsStore)
+
+const { editorHeight } = storeToRefs(useKUNGalgameEditStore())
+
+defineProps<{
+  isShowSettingsMenu: boolean
+}>()
+
+// 是否显示刷新页面
+const isRefreshPage = ref(false)
+
+// 点击高级选项时提醒用户刷新页面
+watch(isShowAdvance, () => {
+  isRefreshPage.value = !isRefreshPage.value
+})
+
+const handleRefreshPage = () => location.reload()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="animate__animated animate__jackInTheBox animate__faster"
+    leave-active-class="animate__animated animate__rollOut animate__faster"
+  >
+    <!-- 设置菜单 -->
+    <div v-if="isShowSettingsMenu" class="settings-menu">
+      <!-- 编辑器高度设置 -->
+      <div class="editor-height-title">
+        <span> 编辑器高度 </span>
+        <span>{{ editorHeight }} px</span>
+      </div>
+      <div class="editor-height">
+        <span>300 px</span>
+        <input
+          type="range"
+          min="300"
+          max="500"
+          step="1"
+          v-model="editorHeight"
+        />
+        <span>500 px</span>
+      </div>
+
+      <!-- 是否显示编辑器高级选项 -->
+      <div class="editor-advance-title">
+        <div class="editor-advance">
+          <Transition mode="out-in" name="slide-up">
+            <span v-if="!isRefreshPage"> 高级编辑模式 </span>
+            <span
+              @click="handleRefreshPage"
+              class="refresh"
+              v-else-if="isRefreshPage"
+            >
+              <span>刷新页面生效</span>
+              <Icon icon="line-md:rotate-270" />
+            </span>
+          </Transition>
+        </div>
+        <!-- 切换按钮 -->
+        <SwitchButton />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss" scoped>
+.settings-menu {
+  padding: 10px;
+  z-index: 1009;
+  position: absolute;
+  bottom: 50px;
+  background-color: var(--kungalgame-white);
+  border: 1px solid var(--kungalgame-blue-1);
+  box-shadow: var(--shadow);
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+
+  .editor-height-title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 17px;
+  }
+
+  .editor-advance-title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-size: 17px;
+  }
+}
+
+.editor-height {
+  margin-bottom: 20px;
+}
+
+.editor-advance {
+  display: flex;
+  flex-direction: column;
+  .refresh {
+    display: flex;
+    align-items: center;
+    font-size: 23px;
+    cursor: pointer;
+    &:hover {
+      color: var(--kungalgame-blue-4);
+    }
+    span {
+      margin-right: 10px;
+      font-size: 17px;
+    }
+  }
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>
diff --git a/src/components/wang-editor/SwitchButton.vue b/src/components/wang-editor/SwitchButton.vue
index 8f63dc67..02208419 100644
--- a/src/components/wang-editor/SwitchButton.vue
+++ b/src/components/wang-editor/SwitchButton.vue
@@ -1,6 +1,7 @@
 <!-- KUNGalgame 通用切换按钮 -->
 
 <script setup lang="ts">
+import { watch } from 'vue'
 // 导入编辑界面 store
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'
@@ -9,15 +10,14 @@ import { storeToRefs } from 'pinia'
 const settingsStore = useKUNGalgameEditStore()
 const { isShowAdvance } = storeToRefs(settingsStore)
 
-// 用户点击切换编辑器 toolbar 工具
-const toggleEditorMode = () => {
-  isShowAdvance.value = !isShowAdvance.value
-}
+// 监听 store 中的状态变化，保持按钮状态与 store 同步
+watch(isShowAdvance, (newValue) => {
+  isShowAdvance.value = newValue
+})
 </script>
 
 <template>
-  <input type="checkbox" id="switch" /><label
-    @click="toggleEditorMode"
+  <input type="checkbox" id="switch" v-model="isShowAdvance" /><label
     for="switch"
     >Toggle</label
   >
diff --git a/src/components/wang-editor/Title.vue b/src/components/wang-editor/Title.vue
index 31047106..00985510 100644
--- a/src/components/wang-editor/Title.vue
+++ b/src/components/wang-editor/Title.vue
@@ -78,7 +78,5 @@ const handelInput = () => {
   /* 标题输入字体大小 */
   font-size: 40px;
   border: none;
-  /* 光标样式 */
-  caret-shape: block;
 }
 </style>
diff --git a/src/components/wang-editor/WangEditor.vue b/src/components/wang-editor/WangEditor.vue
index 18333e3d..14a725d0 100644
--- a/src/components/wang-editor/WangEditor.vue
+++ b/src/components/wang-editor/WangEditor.vue
@@ -20,6 +20,7 @@ import { Editor } from '@wangeditor/editor-for-vue'
 // 编辑器菜单配置
 import { IToolbarConfig } from '@wangeditor/editor'
 import { Toolbar } from '@wangeditor/editor-for-vue'
+import { keysToExclude } from './keysToExclude'
 
 // 导入标题
 const Title = defineAsyncComponent(
@@ -38,7 +39,9 @@ import DOMPurify from 'dompurify'
 // 导入防抖函数
 import { debounce } from '@/utils/debounce'
 
-const topicData = storeToRefs(useKUNGalgameEditStore())
+const { editorHeight, isShowAdvance, isSave, content } = storeToRefs(
+  useKUNGalgameEditStore()
+)
 
 // 定义父组件传参
 const props = defineProps<{
@@ -54,7 +57,7 @@ const props = defineProps<{
 const editorRef = shallowRef<IDomEditor | undefined>(undefined)
 
 // 编辑器的高度
-const editorHeight = computed(() => `height: ${topicData.editorHeight.value}px`)
+const editorHeightStyle = computed(() => `height: ${editorHeight.value}px`)
 // 编辑器内的内容
 const valueHtml = ref('')
 // 编辑器文字计数
@@ -82,23 +85,23 @@ const editorConfig: Partial<IEditorConfig> = {
   },
 }
 
-const keys: string[] = []
-
 // 工具栏相关配置
 const toolbarConfig: Partial<IToolbarConfig> = {
-  excludeKeys: ['uploadVideo'].concat(keys),
+  // 是否显示高级模式，显示则不排除 keys
+  excludeKeys: isShowAdvance.value ? ['uploadVideo'] : keysToExclude,
 }
 
 const handleCreated = (editor: IDomEditor) => {
-  console.log(editor.getAllMenuKeys())
-
   editorRef.value = editor // 记录 editor 实例，重要！
+  editor.on('modalOrPanelShow', (modalOrPanel) => {
+    console.log(modalOrPanel)
+  })
 }
 
 // 挂载之前载入数据，如果不保存，则不载入
 onBeforeMount(() => {
-  if (topicData.isSave.value) {
-    valueHtml.value = topicData.content.value
+  if (isSave.value) {
+    valueHtml.value = content.value
   }
 })
 
@@ -115,7 +118,7 @@ const handleChange = (editor: IDomEditor) => {
   // 创建一个防抖处理函数
   const debouncedUpdateContent = debounce(() => {
     // 过滤 xss
-    topicData.content.value = DOMPurify.sanitize(editor.getHtml())
+    content.value = DOMPurify.sanitize(editor.getHtml())
   }, 1007)
 
   // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
@@ -149,7 +152,7 @@ const handleChange = (editor: IDomEditor) => {
     <!-- 编辑器本体 -->
     <Editor
       class="wang-editor"
-      :style="editorHeight"
+      :style="editorHeightStyle"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       @onCreated="handleCreated"
@@ -162,10 +165,7 @@ const handleChange = (editor: IDomEditor) => {
     </div>
 
     <!-- 编辑器 footer -->
-    <EditorFooter
-      :textCount="textCount"
-      :editorHeight="topicData.editorHeight.value"
-    />
+    <EditorFooter :textCount="textCount" :editorHeight="editorHeight" />
   </div>
 </template>
 
@@ -177,8 +177,7 @@ const handleChange = (editor: IDomEditor) => {
   width: 100%;
   margin: 0 auto;
   z-index: 1008;
-  background-color: var(--kungalgame-trans-white-5);
-  backdrop-filter: blur(5px);
+  background-color: var(--kungalgame-trans-white-2);
 }
 
 .toolbar {
diff --git a/src/components/wang-editor/key.js b/src/components/wang-editor/key.js
deleted file mode 100644
index 4eda1c17..00000000
--- a/src/components/wang-editor/key.js
+++ /dev/null
@@ -1,62 +0,0 @@
-;[
-  'bold',
-  'underline',
-  'italic',
-  'through',
-  'code',
-  'sub',
-  'sup',
-  'clearStyle',
-  'color',
-  'bgColor',
-  'fontSize',
-  'fontFamily',
-  'indent',
-  'delIndent',
-  'justifyLeft',
-  'justifyRight',
-  'justifyCenter',
-  'justifyJustify',
-  'lineHeight',
-  'insertImage',
-  'deleteImage',
-  'editImage',
-  'viewImageLink',
-  'imageWidth30',
-  'imageWidth50',
-  'imageWidth100',
-  'divider',
-  'emotion',
-  'insertLink',
-  'editLink',
-  'unLink',
-  'viewLink',
-  'codeBlock',
-  'blockquote',
-  'headerSelect',
-  'header1',
-  'header2',
-  'header3',
-  'header4',
-  'header5',
-  'todo',
-  'redo',
-  'undo',
-  'fullScreen',
-  'enter',
-  'bulletedList',
-  'numberedList',
-  'insertTable',
-  'deleteTable',
-  'insertTableRow',
-  'deleteTableRow',
-  'insertTableCol',
-  'deleteTableCol',
-  'tableHeader',
-  'tableFullWidth',
-  'insertVideo',
-  'uploadVideo',
-  'editVideoSize',
-  'uploadImage',
-  'codeSelectLang',
-]
diff --git a/src/components/wang-editor/keysToExclude.ts b/src/components/wang-editor/keysToExclude.ts
new file mode 100644
index 00000000..f71e6a58
--- /dev/null
+++ b/src/components/wang-editor/keysToExclude.ts
@@ -0,0 +1,34 @@
+// 编辑器 toolbar 要排除的项目
+export const keysToExclude: string[] = [
+  // 角标
+  'sub',
+  'sup',
+  // 文字精确大小，字体，行高
+  'fontSize',
+  'fontFamily',
+  'lineHeight',
+  // 文字背景色
+  'bgColor',
+  // todo, undo, redo
+  'todo',
+  'redo',
+  'undo',
+  // 缩进的组
+  'group-indent',
+  // 插入视频的组
+  'group-video',
+  // 表格
+  'insertTable',
+  'deleteTable',
+  'deleteTableRow',
+  'insertTableCol',
+  'deleteTableCol',
+  'tableHeader',
+  'tableFullWidth',
+  // 右键菜单已有的功能
+  'headerSelect',
+  'bold',
+  'bulletedList',
+  'insertLink',
+  'group-more-style',
+]
diff --git a/src/styles/editor/editor.scss b/src/styles/editor/editor.scss
index cda72167..7b7973e4 100644
--- a/src/styles/editor/editor.scss
+++ b/src/styles/editor/editor.scss
@@ -27,14 +27,27 @@ u {
   text-shadow: none;
 }
 
+/* 不显示分割线 */
+.w-e-bar-divider {
+  display: none;
+}
+
+a {
+  color: var(--kungalgame-blue-5);
+  border-bottom: 1.5px solid var(--kungalgame-trans-white-9);
+  &:hover {
+    border-bottom: 1.5px solid var(--kungalgame-blue-5);
+  }
+}
+
 :root {
   /* textarea - css vars */
   --w-e-textarea-bg-color: var(--kungalgame-white-9);
   --w-e-textarea-color: var(--kungalgame-font-color-3);
-  --w-e-textarea-border-color: var(--kungalgame-blue-1);
+  --w-e-textarea-border-color: var(--kungalgame-blue-4);
   --w-e-textarea-slight-border-color: var(--kungalgame-blue-4);
   --w-e-textarea-slight-color: var(--kungalgame-font-color-0);
-  --w-e-textarea-slight-bg-color: var(--kungalgame-white-9);
+  --w-e-textarea-slight-bg-color: var(--kungalgame-trans-blue-0);
   --w-e-textarea-selected-border-color: var(--kungalgame-blue-1);
   /* 选中的元素，如选中了分割线 */
   --w-e-textarea-handler-bg-color: var(--kungalgame-blue-4);
diff --git a/src/views/topic/content/components/Content.vue b/src/views/topic/content/components/Content.vue
index 33a11512..f7d17085 100644
--- a/src/views/topic/content/components/Content.vue
+++ b/src/views/topic/content/components/Content.vue
@@ -28,7 +28,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 /* 内容区右侧的话题展示区 */
 .w-e-text-container {
-  width: 82%;
+  /** 100 + 20 + 20 + 1 = 141px */
+  width: calc(100% - 141px);
   font-size: 15px;
   padding: 17px;
   border-left: 1px solid var(--kungalgame-blue-1);