Merge branch 'feature/22303-亚亚文化岛帖子及评论页面优化' into 'master'

Feature/22303 亚亚文化岛帖子及评论页面优化

See merge request !33

src/components/common/CommentBox/index.vue

@@ -55,7 +55,7 @@ interface CommentBoxProps {
 }
 
 const {
-  textAreaHeight = 55,
+  textAreaHeight = 100,
   placeholder = '请输入内容',
   showMention = true,
 } = defineProps<CommentBoxProps>()

src/components/common/RichTextarea/index.vue

@@ -103,7 +103,7 @@ defineExpose({
         <div
           ref="highlightRef"
           aria-hidden="true"
-          class="pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words text-sm leading-5"
+          class="gutter-stable pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words text-sm leading-5"
           :style="{ height: height + 'px' }"
           :class="{ invisible: isComposing }"
         >
@@ -114,7 +114,7 @@ defineExpose({
             ref="textareaRef"
             v-model="inputStr"
             :placeholder="placeholder"
-            class="w-full resize-none border-none bg-transparent outline-none text-sm leading-5 placeholder:text-gray-400 caret-gray-800"
+            class="gutter-stable w-full resize-none border-none bg-transparent p-0 outline-none text-sm leading-5 whitespace-pre-wrap break-words placeholder:text-gray-400 caret-gray-800"
             :class="isComposing ? 'text-gray-800' : 'text-transparent'"
             :style="{ height: height + 'px' }"
             :maxlength="maxlength"
@@ -182,4 +182,15 @@ defineExpose({
   background: rgba(37, 99, 235, 0.1);
   border-radius: 2px;
 }
+
+/**
+ * textarea 文字是透明的，真正可见的文字由下层镜像高亮层渲染，两层必须逐字对齐。
+ * 默认情况下 textarea 出现滚动条会占用其可用宽度，使它比无滚动条的高亮层更早换行，
+ * 两层错位后底部文字落到透明的 textarea 上，看起来就“变透明/看不见”。
+ * 给两层都加 scrollbar-gutter: stable，无论是否出现滚动条都预留同样的滚动条宽度，
+ * 保证两层文字可用宽度始终一致、换行同步；同时滚动条照常显示。
+ */
+.gutter-stable {
+  scrollbar-gutter: stable;
+}
 </style>

src/components/common/WangEditor/index.vue

 <template>
-  <div style="border: 1px solid #ccc" class="h-full">
+  <div style="border: 1px solid #ccc"  class="w-100%" >
     <Toolbar
       style="border-bottom: 1px solid #ccc"
       :editor="editorRef"
@@ -7,7 +7,7 @@
       :mode="mode"
     />
     <Editor
-      style="height: 500px; overflow-y: hidden"
+      style="height: 70vh; overflow-y: hidden"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       :mode="mode"

src/views/publishLongArticle/index.vue

@@ -37,7 +37,7 @@
             </template>
             <template v-else>
               <!-- 回显回来可能会有bug 所以需要key 重新渲染一下-->
-              <WangEditor :key v-model="form.content" class="min-h[90vh]" />
+              <WangEditor :key v-model="form.content"/>
             </template>
           </el-form-item>
         </div>
@@ -46,7 +46,7 @@
 
     <!-- 底部固定按钮栏 -->
     <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg">
-      <div class="max-w-[1200px] mx-auto px-4 py-4">
+      <div class="max-w-[1200px] mx-auto px-4 py-3">
         <div class="flex justify-center gap-4">
           <el-button @click="handleClosed" class="rounded-lg min-w[120px]"> 取消 </el-button>
           <el-button