From 22ef50ec10d64cfb2291de1e832880a477411dd7 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 3 Aug 2023 16:44:26 +0800
Subject: [PATCH] pref: wangeditor

---
 src/components/WangEditor.vue                 |  3 ++-
 .../topic/content/components/ReplyPanel.vue   | 24 +++++++++++++++----
 .../content/components/ReplyPanelBtn.vue      | 12 +++++++++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/WangEditor.vue b/src/components/WangEditor.vue
index 5319305f..a122a837 100644
--- a/src/components/WangEditor.vue
+++ b/src/components/WangEditor.vue
@@ -60,11 +60,12 @@ onBeforeUnmount(() => {
 <template>
   <!-- 编辑器 -->
   <div class="editor—wrapper">
+    <!-- 这里不能用 v-if，否则加载不出来 toolBar -->
     <Toolbar
       class="toolbar-container"
       :editor="editorRef"
       :mode="$props.isShowAdvance ? 'default' : 'simple'"
-      v-if="props.isShowToolbar"
+      v-show="props.isShowToolbar"
     />
     <Editor
       :style="editorHeight"
diff --git a/src/views/topic/content/components/ReplyPanel.vue b/src/views/topic/content/components/ReplyPanel.vue
index c5134043..06bab601 100644
--- a/src/views/topic/content/components/ReplyPanel.vue
+++ b/src/views/topic/content/components/ReplyPanel.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
+// 导入 Vue 异步函数
+import { defineAsyncComponent } from 'vue'
+
 // 导入编辑器
 import WangEditor from '@/components/WangEditor.vue'
 
-// 导入帖子标签
-import Tags from '@/views/edit/components/Tags.vue'
+// 异步导入帖子标签
+const Tags = defineAsyncComponent(
+  () => import('@/views/edit/components/Tags.vue')
+)
 
 // 导入回复按钮
 import ReplyPanelBtn from './ReplyPanelBtn.vue'
 
+// 导入帖子页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+// 使用帖子页面的 store
+const settingsStore = useKUNGalgameTopicStore()
+const { isShowAdvance } = storeToRefs(settingsStore)
+
 const props = defineProps(['isReply'])
 </script>
 
@@ -19,11 +32,14 @@ const props = defineProps(['isReply'])
         <div class="title"><h3>回复给 @ 啊这可海星（楼主）</h3></div>
         <!-- 回复的编辑器 -->
         <div class="content">
-          <WangEditor :height="300" />
+          <WangEditor :height="300" :isShowToolbar="isShowAdvance" />
         </div>
         <!-- 回复的页脚 -->
         <div class="footer">
-          <Tags style="margin-top: 10px; margin-bottom: 10px" />
+          <Tags
+            style="margin-top: 10px; margin-bottom: 10px"
+            v-if="isShowAdvance"
+          />
           <ReplyPanelBtn />
         </div>
       </div>
diff --git a/src/views/topic/content/components/ReplyPanelBtn.vue b/src/views/topic/content/components/ReplyPanelBtn.vue
index 46262b09..1a2804ab 100644
--- a/src/views/topic/content/components/ReplyPanelBtn.vue
+++ b/src/views/topic/content/components/ReplyPanelBtn.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
+// 导入帖子页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+import { storeToRefs } from 'pinia'
+
+// 使用帖子页面的 store
+const settingsStore = useKUNGalgameTopicStore()
+const { isShowAdvance } = storeToRefs(settingsStore)
+
 const info = useKUNGalgameMessageStore()
 
 // 点击发布帖子
@@ -22,7 +30,9 @@ const handleSave = () => {
   info.info('AlertInfo.edit.draft')
 }
 
-const handleShowAdvance = () => {}
+const handleShowAdvance = () => {
+  isShowAdvance.value = !isShowAdvance.value
+}
 </script>
 
 <template>