feat: reply panel editor settings

src/components/wang-editor/EditorFooter.vue

@@ -12,8 +12,13 @@ const EditorSettingsMenu = defineAsyncComponent(
 import 'animate.css'
 
 // 接受传入的编辑器计数
+/**
+ * @param {number} - 编辑器文字计数
+ * @param {boolean} - 是否显示编辑器设置
+ */
 defineProps<{
   textCount: number
+  isShowSettings: boolean
 }>()
 
 // 是否显示编辑器设置面板
@@ -29,7 +34,11 @@ const handelClickSettings = () => {
   <div class="footer">
     <!-- 显示设置按钮 -->
     <div class="settings">
-      <span @click="handelClickSettings" class="settings-icon">
+      <span
+        @click="handelClickSettings"
+        class="settings-icon"
+        v-if="isShowSettings"
+      >
         <Icon icon="uiw:setting-o" />
       </span>
 

src/components/wang-editor/WangEditor.vue

@@ -44,11 +44,19 @@ const { editorHeight, isShowAdvance, isSave, content } = storeToRefs(
 )
 
 // 定义父组件传参
+/**
+ * @param {number} height - 编辑器的高度
+ * @param {boolean} isShowToolbar - 是否显示工具栏
+ * @param {boolean} isShowAdvance - 是否显示高级编辑模式
+ * @param {boolean} isShowTitle - 是否显示标题
+ * @param {boolean} isShowSettings - 是否显示编辑器设置
+ */
 const props = defineProps<{
   height: number
   isShowToolbar: boolean
   isShowAdvance: boolean
   isShowTitle: boolean
+  isShowSettings: boolean
 }>()
 
 // 自定义编辑区域高度
@@ -68,6 +76,7 @@ const editorConfig: Partial<IEditorConfig> = {
   placeholder: 'Moe Moe Moe!',
   readOnly: false,
   MENU_CONF: {
+    // 上传图片
     uploadImage: {
       server: 'http://127.0.0.1:10008/upload/img',
 
@@ -129,7 +138,7 @@ const handleChange = (editor: IDomEditor) => {
   <!-- 编辑器 -->
   <div class="editor—wrapper">
     <!-- 话题 title -->
-    <Title />
+    <Title v-if="isShowTitle" />
 
     <!-- 编辑器工具栏 -->
     <!-- 这里不能用 v-if，否则加载不出来 toolBar -->
@@ -141,7 +150,7 @@ const handleChange = (editor: IDomEditor) => {
       v-show="props.isShowToolbar"
     />
 
-    <div class="hint hint1">
+    <div class="hint hint1" v-if="isShowSettings">
       <span class="box1"></span>
       <span class="filling"></span>
       <span class="box2"></span>
@@ -155,14 +164,18 @@ const handleChange = (editor: IDomEditor) => {
       @onCreated="handleCreated"
       @onChange="handleChange"
     />
-    <div class="hint">
+    <div class="hint" v-if="isShowSettings">
       <span class="box3"></span>
       <span class="filling"></span>
       <span class="box4"></span>
     </div>
 
     <!-- 编辑器 footer -->
-    <EditorFooter :textCount="textCount" :editorHeight="editorHeight" />
+    <EditorFooter
+      :textCount="textCount"
+      :editorHeight="editorHeight"
+      :isShowSettings="isShowSettings"
+    />
   </div>
 </template>
 

src/views/edit/Edit.vue

@@ -16,6 +16,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         :isShowToolbar="true"
         :isShowAdvance="true"
         :isShowTitle="true"
+        :isShowSettings="true"
       />
 
       <!-- 内容区的底部 -->

src/views/topic/content/components/Content.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import prismjs from 'prismjs'
 import 'prismjs/themes/prism.css'
 
-const html = ref<HTMLInputElement | null>(null)
-
 defineProps<{
   content: string
 }>()
@@ -19,7 +17,7 @@ onMounted(() => {
   <!-- 内容区右侧的话题展示区，这里富文本必须用 v-html，已经确定文本经过三次处理 -->
   <!-- 这里用的 v-html，样式是页面刷新后才会有的，所以必须动态绑定样式 -->
   <div class="kungalgame-topic-content">
-    <div v-html="content" ref="html"></div>
+    <div v-html="content"></div>
   </div>
 </template>
 

src/views/topic/content/components/ReplyPanel.vue

@@ -56,9 +56,10 @@ const handelClosePanel = () => {
           <div class="content">
             <WangEditor
               :height="300"
-              :isShowToolbar="isShowAdvance"
+              :is-show-toolbar="isShowAdvance"
               :is-show-advance="false"
               :is-show-title="false"
+              :is-show-settings="false"
             />
           </div>
           <!-- 回复的页脚 -->

src/views/topic/content/components/TopicFooter.vue

@@ -1,5 +1,6 @@
 <!-- 话题的底部区域，推话题，回复，点赞等 -->
 <script setup lang="ts">
+import { nextTick } from 'vue'
 import { Icon } from '@iconify/vue'
 // 引入流光环绕的特效
 import '@/styles/effect/effect.scss'
@@ -25,7 +26,8 @@ defineProps<{
   }
 }>()
 
-const handelReply = () => {
+const handelReply = async () => {
+  await nextTick()
   isEdit.value = true
 }
 </script>