From 38a39b76239541f310f454c2394006bb710ee511 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 7 Sep 2023 17:37:18 +0800
Subject: [PATCH] feat: switch edit hot tags visible

---
 .../quill-editor/EditorSettingsMenu.vue       | 30 ++++++--
 src/components/quill-editor/SwitchButton.vue  | 72 +++++++++++++++++++
 src/components/top-bar/KUNGalgameTopBar.vue   |  5 --
 src/store/modules/edit.ts                     |  7 +-
 src/views/edit/components/Tags.vue            | 32 +++++----
 5 files changed, 121 insertions(+), 25 deletions(-)
 create mode 100644 src/components/quill-editor/SwitchButton.vue

diff --git a/src/components/quill-editor/EditorSettingsMenu.vue b/src/components/quill-editor/EditorSettingsMenu.vue
index c81d947e..31a598a6 100644
--- a/src/components/quill-editor/EditorSettingsMenu.vue
+++ b/src/components/quill-editor/EditorSettingsMenu.vue
@@ -10,6 +10,9 @@ import 'animate.css'
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'
 
+// 导入关键词显示切换按钮
+import SwitchButton from './SwitchButton.vue'
+
 // 使用编辑界面的 store
 const settingsStore = useKUNGalgameEditStore()
 const { mode } = storeToRefs(settingsStore)
@@ -56,8 +59,8 @@ const handleRefreshPage = () => location.reload()
       </div>
 
       <!-- 是否显示编辑器高级选项 -->
-      <div class="editor-advance-title">
-        <div class="editor-advance">
+      <div class="editor-advance">
+        <div class="editor-advance-title">
           <Transition mode="out-in" name="slide-up">
             <span v-if="!isRefreshPage"> 编辑器模式 </span>
             <span
@@ -79,6 +82,12 @@ const handleRefreshPage = () => location.reload()
           <option value="full">最高配置</option>
         </select>
       </div>
+
+      <!-- 是否显示热门关键词 -->
+      <div class="keywords">
+        <div class="keywords-title">热门关键词显示</div>
+        <SwitchButton />
+      </div>
     </div>
   </Transition>
 </template>
@@ -100,14 +109,16 @@ const handleRefreshPage = () => location.reload()
   .editor-height-title {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 10px;
     font-size: 17px;
   }
 
-  .editor-advance-title {
+  .editor-advance {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 10px;
+    align-items: center;
+    margin-bottom: 20px;
     font-size: 17px;
   }
 }
@@ -116,9 +127,10 @@ const handleRefreshPage = () => location.reload()
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
-.editor-advance {
+.editor-advance-title {
   display: flex;
   flex-direction: column;
   .refresh {
@@ -149,6 +161,14 @@ const handleRefreshPage = () => location.reload()
   }
 }
 
+// 是否显示热门关键词
+.keywords {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 17px;
+}
+
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition: all 0.25s ease-out;
diff --git a/src/components/quill-editor/SwitchButton.vue b/src/components/quill-editor/SwitchButton.vue
new file mode 100644
index 00000000..431c5d6b
--- /dev/null
+++ b/src/components/quill-editor/SwitchButton.vue
@@ -0,0 +1,72 @@
+<!-- KUNGalgame 通用切换按钮 -->
+
+<script setup lang="ts">
+import { watch } from 'vue'
+// 导入编辑界面 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+import { storeToRefs } from 'pinia'
+
+// 使用编辑界面的 store
+const settingsStore = useKUNGalgameEditStore()
+const { isShowHotKeywords } = storeToRefs(settingsStore)
+
+// 监听 store 中的状态变化，保持按钮状态与 store 同步
+watch(isShowHotKeywords, (newValue) => {
+  isShowHotKeywords.value = newValue
+})
+</script>
+
+<template>
+  <input type="checkbox" id="switch" v-model="isShowHotKeywords" /><label
+    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/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index b8c0ee67..e367da52 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -185,11 +185,6 @@ $navNumber: v-bind(navItemNum);
       font-weight: bold;
       line-height: 58px;
       width: 100%;
-      &:hover {
-        background-color: var(--kungalgame-blue-0);
-        border-radius: 2px;
-        transition: 0.5s;
-      }
       &:nth-child(1):hover ~ .box {
         background-color: var(--kungalgame-red-3);
         left: calc(100% / $navNumber * 0);
diff --git a/src/store/modules/edit.ts b/src/store/modules/edit.ts
index efd29957..92fda9f8 100644
--- a/src/store/modules/edit.ts
+++ b/src/store/modules/edit.ts
@@ -33,6 +33,8 @@ interface Topic {
   tags: Array<string>
   // 话题分区
   category: Array<string>
+  // 是否显示热门关键词
+  isShowHotKeywords: boolean
   // 是否保存
   isSave: boolean
 }
@@ -41,15 +43,16 @@ export const useKUNGalgameEditStore = defineStore({
   id: 'edit',
   persist: true,
   state: (): Topic => ({
-    isSave: false,
+    editorHeight: 300,
     mode: '',
     theme: 'snow',
 
-    editorHeight: 300,
     title: '',
     content: '',
     tags: [],
     category: [],
+    isSave: false,
+    isShowHotKeywords: true,
   }),
   getters: {},
   actions: {
diff --git a/src/views/edit/components/Tags.vue b/src/views/edit/components/Tags.vue
index d14f7618..70ef8ad8 100644
--- a/src/views/edit/components/Tags.vue
+++ b/src/views/edit/components/Tags.vue
@@ -4,10 +4,12 @@ import { ref, computed, watch, onBeforeMount } from 'vue'
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'
 
-const topicData = storeToRefs(useKUNGalgameEditStore())
+const { tags, isSave, isShowHotKeywords } = storeToRefs(
+  useKUNGalgameEditStore()
+)
 
 // 临时数据，将会从后端返回 7 个热门 tag
-const tags = [
+const hotTags = [
   '啊这可海星',
   '啊这可海星',
   '啊这',
@@ -22,8 +24,8 @@ const selectedTags = ref<string[]>([])
 // 组件挂载之前载入 store 里的数据
 onBeforeMount(() => {
   // 如果用户保存了草稿则载入
-  if (topicData.isSave.value) {
-    selectedTags.value = topicData.tags.value
+  if (isSave.value) {
+    selectedTags.value = tags.value
   }
 })
 
@@ -42,7 +44,7 @@ const handleTagClose = (tag: string) => {
 
 // 被选中后还留下的 tag
 const remainingTags = computed<string[]>(() => {
-  return tags.filter((tag) => !selectedTags.value.includes(tag))
+  return hotTags.filter((tag) => !selectedTags.value.includes(tag))
 })
 
 // 输入框事件，按下 enter 创建 tag，创建 tag 时长度不超过 17，个数不超过 7
@@ -85,7 +87,7 @@ const validateTagName = (tagName: string) => {
 
 // 监测 selectedTags 的变化，保存用户选中的 tag
 watch(selectedTags.value, () => {
-  topicData.tags.value = selectedTags.value
+  tags.value = selectedTags.value
 })
 </script>
 
@@ -113,13 +115,17 @@ watch(selectedTags.value, () => {
       提示：（单个关键词 14 个字符以内，至少选择一个、最多 7 个）,
       您可以输入文字按下 ' Enter ' 创建关键词
     </div>
-    <!-- 标签的提示词 -->
-    <div class="tags-info">热门关键词（点击选择）:</div>
-    <!-- 标签容器 -->
-    <div class="tags">
-      <span v-for="tag in remainingTags" @click="() => handleTagClick(tag)">
-        {{ tag }}
-      </span>
+
+    <!-- 热门 tags -->
+    <div class="hot-tags" v-if="isShowHotKeywords">
+      <!-- 标签的提示词 -->
+      <div class="tags-info">热门关键词（点击选择）:</div>
+      <!-- 标签容器 -->
+      <div class="tags">
+        <span v-for="tag in remainingTags" @click="() => handleTagClick(tag)">
+          {{ tag }}
+        </span>
+      </div>
     </div>
   </div>
 </template>