styles: 增加评论框的默认高度

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>