From 991fd8e8a104b3f1d9cf1e15b43861357420d007 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Mon, 21 Aug 2023 19:38:23 +0800
Subject: [PATCH] feat: edit page category store

---
 .vscode/settings.json                         |  1 +
 src/components/WangEditor.vue                 |  6 ++-
 src/views/edit/components/Button.vue          |  3 +-
 src/views/edit/components/Footer.vue          | 45 ++++++++++++++++---
 .../components/{button.ts => category.ts}     |  4 +-
 5 files changed, 48 insertions(+), 11 deletions(-)
 rename src/views/edit/components/{button.ts => category.ts} (82%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b5ecfb1a..0e315556 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,6 +10,7 @@
     "fontawesome",
     "galgame",
     "Galgame",
+    "gsap",
     "iconify",
     "INTLIFY",
     "kungal",
diff --git a/src/components/WangEditor.vue b/src/components/WangEditor.vue
index d58bb30f..9076121c 100644
--- a/src/components/WangEditor.vue
+++ b/src/components/WangEditor.vue
@@ -5,12 +5,13 @@
 import '@wangeditor/editor/dist/css/style.css'
 import '@/styles/editor/editor.scss'
 import { IDomEditor } from '@wangeditor/editor'
-import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { onBeforeUnmount, ref, shallowRef } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 // 导入编辑帖子的 store
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 // 导入过滤 xss 的工具
 import DOMPurify from 'dompurify'
+
 // 导入编辑界面的 store
 import { storeToRefs } from 'pinia'
 const topicData = storeToRefs(useKUNGalgameEditStore())
@@ -107,9 +108,10 @@ const handleChange = (editor: IDomEditor) => {
 }
 
 .count {
-  right: 50px;
+  padding: 3px 7px;
   width: 100%;
   display: flex;
+  align-items: center;
   justify-content: end;
   color: var(--kungalgame-font-color-0);
   background-color: var(--kungalgame-white);
diff --git a/src/views/edit/components/Button.vue b/src/views/edit/components/Button.vue
index e82e7f9f..448f6452 100644
--- a/src/views/edit/components/Button.vue
+++ b/src/views/edit/components/Button.vue
@@ -3,8 +3,6 @@ import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
 const info = useKUNGalgameMessageStore()
 
-import { button } from './button'
-
 const handlePublish = async () => {
   const res = await info.alert('AlertInfo.edit.publish', true)
   // TODO:
@@ -83,3 +81,4 @@ const handleSave = () => {
   transform: scale(0.8);
 }
 </style>
+./Category
diff --git a/src/views/edit/components/Footer.vue b/src/views/edit/components/Footer.vue
index c0adb1ed..bb8091d9 100644
--- a/src/views/edit/components/Footer.vue
+++ b/src/views/edit/components/Footer.vue
@@ -1,12 +1,47 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 // 导入按钮
 import Button from './Button.vue'
+// 导入编辑帖子的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+// 导入帖子的分类
+import { Category, category } from './category'
+// 导入编辑界面的 store
+import { storeToRefs } from 'pinia'
 
-import { button } from './button'
-
-import { ref } from 'vue'
+const topicData = storeToRefs(useKUNGalgameEditStore())
 
+// 定义分类是否被选中
 const buttonStatus = ref(false)
+
+// 定义被选中的分类的数组
+const selectedCategories = ref<string[]>([])
+
+// 当用户点击分类时的逻辑
+const handleClickCategory = (kun: Category) => {
+  // 如果选择了 1，同时已选择了 3，则不允许选中 1
+  if (kun.index === 1 && selectedCategories.value.includes('其它')) {
+    return
+  }
+  // 如果选择了 3，同时已选择了 1，则不允许选中 3
+  if (kun.index === 3 && selectedCategories.value.includes('galgame')) {
+    return
+  }
+  // 样式改变
+  kun.isActive.value = !kun.isActive.value
+  // 改变选中数组的逻辑
+  if (kun.isActive.value) {
+    selectedCategories.value.push(kun.name)
+  } else {
+    const index = selectedCategories.value.indexOf(kun.name)
+    if (index !== -1) {
+      selectedCategories.value.splice(index, 1)
+    }
+  }
+
+  // 将选中的 category 给 pinia 的 store
+  topicData.category.value = selectedCategories.value
+}
 </script>
 
 <template>
@@ -17,9 +52,9 @@ const buttonStatus = ref(false)
     <div class="group-btn" :class="buttonStatus ? 'selected-btn' : ''">
       <span
         class="btn"
-        v-for="kun in button"
+        v-for="kun in category"
         :key="kun.index"
-        @click="kun.isActive.value = !kun.isActive.value"
+        @click="handleClickCategory(kun)"
         :class="{ active: kun.isActive.value }"
       >
         {{ kun.name }}
diff --git a/src/views/edit/components/button.ts b/src/views/edit/components/category.ts
similarity index 82%
rename from src/views/edit/components/button.ts
rename to src/views/edit/components/category.ts
index 3da77639..1e4c5822 100644
--- a/src/views/edit/components/button.ts
+++ b/src/views/edit/components/category.ts
@@ -1,12 +1,12 @@
 import { type Ref, ref } from 'vue'
 
-interface Button {
+export interface Category {
   index: number
   name: string
   isActive: Ref<boolean>
 }
 
-export const button: Button[] = [
+export const category: Category[] = [
   {
     index: 1,
     name: 'galgame',