From 4a42f94b32ededdd1b8a449bfe336b99b29c7a25 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Mon, 4 Sep 2023 02:52:49 +0800
Subject: [PATCH] feat: toggle editor mode button

---
 src/components/wang-editor/EditorFooter.vue   | 28 +++++++-
 src/components/wang-editor/SwitchButton.vue   | 72 +++++++++++++++++++
 src/store/modules/edit.ts                     |  6 +-
 .../article/components/ArticleContent.vue     |  5 +-
 .../article/components/SingleTopic.vue        |  5 +-
 5 files changed, 108 insertions(+), 8 deletions(-)
 create mode 100644 src/components/wang-editor/SwitchButton.vue

diff --git a/src/components/wang-editor/EditorFooter.vue b/src/components/wang-editor/EditorFooter.vue
index c3cfa8cd..10ffea17 100644
--- a/src/components/wang-editor/EditorFooter.vue
+++ b/src/components/wang-editor/EditorFooter.vue
@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 // 引入图标字体
 import { Icon } from '@iconify/vue'
+// 导入模式切换按钮
+import SwitchButton from './SwitchButton.vue'
 
 // 引入 css 动画
 import 'animate.css'
@@ -63,6 +65,13 @@ const handelClickSettings = () => {
           />
           <span>500 px</span>
         </div>
+
+        <!-- 是否显示编辑器高级选项 -->
+        <div class="editor-advance-title">
+          <span> 高级选项 </span>
+          <!-- 切换按钮 -->
+          <SwitchButton />
+        </div>
       </div>
     </Transition>
   </div>
@@ -93,7 +102,6 @@ const handelClickSettings = () => {
 }
 
 .settings-menu {
-  height: 100px;
   padding: 10px;
   z-index: 1009;
   position: absolute;
@@ -104,6 +112,24 @@ const handelClickSettings = () => {
   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 {
diff --git a/src/components/wang-editor/SwitchButton.vue b/src/components/wang-editor/SwitchButton.vue
new file mode 100644
index 00000000..8f63dc67
--- /dev/null
+++ b/src/components/wang-editor/SwitchButton.vue
@@ -0,0 +1,72 @@
+<!-- KUNGalgame 通用切换按钮 -->
+
+<script setup lang="ts">
+// 导入编辑界面 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+import { storeToRefs } from 'pinia'
+
+// 使用编辑界面的 store
+const settingsStore = useKUNGalgameEditStore()
+const { isShowAdvance } = storeToRefs(settingsStore)
+
+// 用户点击切换编辑器 toolbar 工具
+const toggleEditorMode = () => {
+  isShowAdvance.value = !isShowAdvance.value
+}
+</script>
+
+<template>
+  <input type="checkbox" id="switch" /><label
+    @click="toggleEditorMode"
+    for="switch"
+    >Toggle</label
+  >
+</template>
+
+<style lang="scss" scoped>
+input {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+label {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 47px;
+  height: 24px;
+  background: var(--kungalgame-trans-blue-2);
+  display: block;
+  border-radius: 100px;
+  position: relative;
+}
+
+label:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--kungalgame-white);
+  border-radius: 15px;
+  transition: 0.3s;
+}
+
+input:checked + label {
+  background: var(--kungalgame-blue-4);
+}
+
+input:checked + label:after {
+  left: calc(100% - 2px);
+  transform: translateX(-100%);
+}
+
+// centering
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+</style>
diff --git a/src/store/modules/edit.ts b/src/store/modules/edit.ts
index 2e475f96..6f6db419 100644
--- a/src/store/modules/edit.ts
+++ b/src/store/modules/edit.ts
@@ -10,8 +10,10 @@ interface Topic {
   /**
    * 编辑器相关
    * @param {number} editorHeight - 编辑器高度
+   * @param {boolean} isShowAdvance - 是否显示编辑器高级选项
    */
   editorHeight: number
+  isShowAdvance: boolean
 
   /**
    * 话题相关
@@ -37,12 +39,14 @@ export const useKUNGalgameEditStore = defineStore({
   id: 'edit',
   persist: true,
   state: (): Topic => ({
+    isSave: false,
+    isShowAdvance: false,
+
     editorHeight: 300,
     title: '',
     content: '',
     tags: [],
     category: [],
-    isSave: false,
   }),
   getters: {},
   actions: {
diff --git a/src/views/Home/content/article/components/ArticleContent.vue b/src/views/Home/content/article/components/ArticleContent.vue
index 700517cd..d24da6db 100644
--- a/src/views/Home/content/article/components/ArticleContent.vue
+++ b/src/views/Home/content/article/components/ArticleContent.vue
@@ -91,9 +91,8 @@ watch(
 /* 确保将离开的元素从布局流中删除
   以便能够正确地计算移动的动画。 */
 .list-leave-active {
-  /**
-   * 宽度为单个话题总宽度减去用户部分的宽度，这里为 2 + 5 + 60 + 5 + 2 = 74px
-   */
+  /** 宽度为单个话题总宽度减去用户部分的宽度
+      这里为 2 + 5 + 60 + 5 + 2 = 74px */
   width: calc(100% - 74px);
   position: absolute;
 }
diff --git a/src/views/Home/content/article/components/SingleTopic.vue b/src/views/Home/content/article/components/SingleTopic.vue
index 9b6c4eb2..7f81bc88 100644
--- a/src/views/Home/content/article/components/SingleTopic.vue
+++ b/src/views/Home/content/article/components/SingleTopic.vue
@@ -33,9 +33,8 @@ const props = defineProps(['data'])
   &:last-child {
     margin-bottom: 0;
   }
-  /**
-   * 宽度为单个话题总宽度减去用户部分的宽度，这里为 2 + 5 + 60 + 5 + 2 = 74px
-   */
+  /** 宽度为单个话题总宽度减去用户部分的宽度
+      这里为 2 + 5 + 60 + 5 + 2 = 74px */
   a {
     width: calc(100% - 74px);
   }