From 0b77abf35aa17e157268675e1693506698956865 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 3 Aug 2023 13:09:21 +0800
Subject: [PATCH] feat: topic reply

---
 src/components/WangEditor.vue                 | 29 ++-------
 .../setting-panel/KUNGalgameSettingPanel.vue  |  1 -
 src/layout/KUNGalgameAPP.vue                  | 17 ++++++
 src/store/modules/topic.ts                    | 29 +++++++++
 src/views/edit/Edit.vue                       |  2 +-
 src/views/edit/components/Button.vue          | 51 ++--------------
 src/views/edit/components/Partition.vue       | 61 +++++++++++++++++++
 .../topic/content/components/ReplyPanel.vue   | 47 ++++++++++++++
 .../topic/content/components/TopicFooter.vue  | 16 ++++-
 9 files changed, 178 insertions(+), 75 deletions(-)
 create mode 100644 src/store/modules/topic.ts
 create mode 100644 src/views/edit/components/Partition.vue
 create mode 100644 src/views/topic/content/components/ReplyPanel.vue

diff --git a/src/components/WangEditor.vue b/src/components/WangEditor.vue
index b42a870f..28c6d97f 100644
--- a/src/components/WangEditor.vue
+++ b/src/components/WangEditor.vue
@@ -8,6 +8,9 @@ import { IDomEditor } from '@wangeditor/editor'
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
+const props = defineProps(['height'])
+const editorHeight = `height: ${props.height}px`
+
 const editorRef = shallowRef<IDomEditor | undefined>(undefined)
 
 const valueHtml = ref('<p>hello</p>')
@@ -19,9 +22,6 @@ const editorConfig = {
   MENU_CONF: {
     uploadImage: {
       server: 'http://127.0.0.1:10007/upload/img',
-      // server: '/api/upload-img-10s', // test timeout
-      // server: '/api/upload-img-failed', // test failed
-      // server: '/api/xxx', // test 404
 
       timeout: 5 * 1000, // 5s
 
@@ -33,27 +33,6 @@ const editorConfig = {
       maxFileSize: 10 * 1024 * 1024, // 10M
 
       base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
-
-      // onBeforeUpload(file) {
-      //   console.log('onBeforeUpload', file)
-
-      //   return file // will upload this file
-      //   // return false // prevent upload
-      // },
-      // onProgress(progress) {
-      //   console.log('onProgress', progress)
-      // },
-      // onSuccess(file, res) {
-      //   console.log('onSuccess', file, res)
-      // },
-      // onFailed(file, res) {
-      //   alert(res.message)
-      //   console.log('onFailed', file, res)
-      // },
-      // onError(file, err, res) {
-      //   alert(err.message)
-      //   console.error('onError', file, err, res)
-      // },
     },
   },
 }
@@ -82,7 +61,7 @@ onBeforeUnmount(() => {
   <div class="editor—wrapper">
     <Toolbar class="toolbar-container" :editor="editorRef" />
     <Editor
-      style="height: 400px"
+      :style="editorHeight"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       @onCreated="handleCreated"
diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index 7167ba26..0cad4277 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -97,7 +97,6 @@ const handelCloseSettingsPanel = () => {
   display: flex;
   color: var(--kungalgame-font-color-3);
   border: 1px solid var(--kungalgame-blue-1);
-  overflow: hidden;
 }
 .container {
   position: relative;
diff --git a/src/layout/KUNGalgameAPP.vue b/src/layout/KUNGalgameAPP.vue
index 7a17fb5c..6e8d125a 100644
--- a/src/layout/KUNGalgameAPP.vue
+++ b/src/layout/KUNGalgameAPP.vue
@@ -3,12 +3,29 @@
 // 导入动画
 import 'animate.css'
 
+import { defineAsyncComponent } from 'vue'
+
 import { currBackground } from '@/hooks/useBackgroundPicture'
 
 import KUNGalgameTopBar from '@/components/TopBar/KUNGalgameTopBar.vue'
+
+// 导入帖子页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+// 异步导入帖子页回复面板，提升首页加载速度
+const ReplyPanel = defineAsyncComponent(
+  () => import('@/views/topic/content/components/ReplyPanel.vue')
+)
+
+// 使用帖子页面的 store
+const settingsStore = useKUNGalgameTopicStore()
+const { isEdit } = storeToRefs(settingsStore)
 </script>
 
 <template>
+  <!-- 回复面板组件 -->
+  <ReplyPanel :isReply="!isEdit" v-if="isEdit" />
   <!-- #default 是 v-slot 的简写，route 就是路由，Component 是一个 v-node -->
   <div class="app" :style="{ backgroundImage: currBackground }">
     <div class="top-bar">
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
new file mode 100644
index 00000000..723470c2
--- /dev/null
+++ b/src/store/modules/topic.ts
@@ -0,0 +1,29 @@
+/* 帖子详情的 store */
+import { defineStore } from 'pinia'
+
+interface Tag {
+  index: number
+  name: string
+}
+
+interface Topic {
+  // 是否正在被编辑
+  isEdit: boolean
+  // 帖子标题
+  title: string
+  // 帖子内容
+  article: string
+  // 帖子标签
+  tags: Tag[]
+}
+
+export const useKUNGalgameTopicStore = defineStore({
+  id: 'topic',
+  persist: true,
+  state: (): Topic => ({
+    isEdit: false,
+    title: '',
+    article: '',
+    tags: [],
+  }),
+})
diff --git a/src/views/edit/Edit.vue b/src/views/edit/Edit.vue
index 2cb1c517..4b43010b 100644
--- a/src/views/edit/Edit.vue
+++ b/src/views/edit/Edit.vue
@@ -39,7 +39,7 @@ const submit = () => {
           </div>
         </div>
         <!-- 编辑器 -->
-        <WangEditor class="editor" />
+        <WangEditor class="editor" :height="400" />
       </div>
 
       <!-- 内容区的底部 -->
diff --git a/src/views/edit/components/Button.vue b/src/views/edit/components/Button.vue
index 7d802e7c..3157e807 100644
--- a/src/views/edit/components/Button.vue
+++ b/src/views/edit/components/Button.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
+// 导入帖子分区选择
+import Partition from './Partition.vue'
+
 const info = useKUNGalgameMessageStore()
 
 import { button } from './button'
@@ -29,21 +32,7 @@ const handleSave = () => {
 
 <template>
   <!-- 话题分类的容器 -->
-  <div class="topic-group">
-    <div>点击选择帖子的分区（可多选）:</div>
-    <!-- 分类容器的按钮集合 -->
-    <div class="group-btn" :class="buttonStatus ? 'selected-btn' : ''">
-      <span
-        class="btn"
-        v-for="kun in button"
-        :key="kun.index"
-        @click="kun.isActive.value = !kun.isActive.value"
-        :class="{ active: kun.isActive.value }"
-      >
-        {{ kun.name }}
-      </span>
-    </div>
-  </div>
+  <Partition />
   <!-- 按钮的容器 -->
   <div class="btn-container">
     <!-- 确认按钮 -->
@@ -56,31 +45,6 @@ const handleSave = () => {
 </template>
 
 <style lang="scss" scoped>
-/* 话题分类的容器 */
-.topic-group {
-  width: 100%;
-  margin: 10px 0;
-}
-/* 分类容器的按钮集合 */
-.group-btn {
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  margin: 20px 0;
-}
-/* 单个按钮的样式 */
-.btn {
-  height: 30px;
-  width: 20%;
-  font-size: 17px;
-  cursor: pointer;
-  border: 1px solid var(--kungalgame-blue-1);
-  background-color: var(--kungalgame-trans-blue-0);
-  color: var(--kungalgame-blue-4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 /* 按钮的容器 */
 .btn-container {
   width: 100%;
@@ -127,11 +91,4 @@ const handleSave = () => {
   background-color: var(--kungalgame-pink-3);
   transform: scale(0.8);
 }
-
-/* 被选中按钮的样式 */
-.active {
-  transition: 0.2s;
-  background-color: var(--kungalgame-blue-4);
-  color: var(--kungalgame-white);
-}
 </style>
diff --git a/src/views/edit/components/Partition.vue b/src/views/edit/components/Partition.vue
new file mode 100644
index 00000000..017e5ab2
--- /dev/null
+++ b/src/views/edit/components/Partition.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { button } from './button'
+
+import { ref } from 'vue'
+
+const buttonStatus = ref(false)
+</script>
+
+<template>
+  <!-- 话题分类的容器 -->
+  <div class="topic-group">
+    <div>点击选择帖子的分区（可多选）:</div>
+    <!-- 分类容器的按钮集合 -->
+    <div class="group-btn" :class="buttonStatus ? 'selected-btn' : ''">
+      <span
+        class="btn"
+        v-for="kun in button"
+        :key="kun.index"
+        @click="kun.isActive.value = !kun.isActive.value"
+        :class="{ active: kun.isActive.value }"
+      >
+        {{ kun.name }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 话题分类的容器 */
+.topic-group {
+  width: 100%;
+  margin: 10px 0;
+}
+/* 分类容器的按钮集合 */
+.group-btn {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+}
+/* 单个按钮的样式 */
+.btn {
+  height: 30px;
+  width: 20%;
+  font-size: 17px;
+  cursor: pointer;
+  border: 1px solid var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-trans-blue-0);
+  color: var(--kungalgame-blue-4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 被选中按钮的样式 */
+.active {
+  transition: 0.2s;
+  background-color: var(--kungalgame-blue-4);
+  color: var(--kungalgame-white);
+}
+</style>
diff --git a/src/views/topic/content/components/ReplyPanel.vue b/src/views/topic/content/components/ReplyPanel.vue
new file mode 100644
index 00000000..8d7636ec
--- /dev/null
+++ b/src/views/topic/content/components/ReplyPanel.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Tags from '@/views/edit/components/Tags.vue'
+import Button from '@/views/edit/components/Button.vue'
+import WangEditor from '@/components/WangEditor.vue'
+
+const props = defineProps(['isReply'])
+</script>
+
+<template>
+  <Teleport to="body" :disabled="props.isReply">
+    <div class="root">
+      <div class="container">
+        <!-- 回复面板回复给谁 -->
+        <div class="title">回复给@啊这可海星（楼主）</div>
+        <!-- 回复的编辑器 -->
+        <div class="content">
+          <WangEditor :height="200" />
+        </div>
+        <!-- 回复的页脚 -->
+        <div class="footer">
+          <Tags style="margin-top: 10px" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.root {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  opacity: 0.92;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container {
+  width: 77%;
+  color: var(--kungalgame-font-color-3);
+  background-color: var(--kungalgame-white);
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid var(--kungalgame-blue-4);
+  box-shadow: var(--shadow);
+}
+</style>
diff --git a/src/views/topic/content/components/TopicFooter.vue b/src/views/topic/content/components/TopicFooter.vue
index 73187ca3..beca3bb2 100644
--- a/src/views/topic/content/components/TopicFooter.vue
+++ b/src/views/topic/content/components/TopicFooter.vue
@@ -3,10 +3,24 @@
 import { Icon } from '@iconify/vue'
 // 引入流光环绕的特效
 import '@/styles/effect/effect.scss'
+
+// 导入帖子页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+
+// 使用帖子页面的 store
+const settingsStore = useKUNGalgameTopicStore()
+const { isEdit } = storeToRefs(settingsStore)
+
 // 接受父组件的传值
 const props = defineProps(['isOthersTopic'])
 
 const isOthersTopic = props.isOthersTopic
+
+const handelReply = () => {
+  isEdit.value = !isEdit.value
+}
 </script>
 
 <template>
@@ -37,7 +51,7 @@ const isOthersTopic = props.isOthersTopic
       <ul>
         <li>
           <!-- 对所有此类元素应用样式 -->
-          <div class="kungalgame-comet-surround">
+          <div class="kungalgame-comet-surround" @click="handelReply">
             <span></span>
             <span></span>
             <span></span>