pref: wangeditor

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"

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>

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>