1

src/other_pages/comment_reply/index.scss

@@ -3,10 +3,15 @@
 .comment-reply-container {
   width: 100%;
   height: 100vh;
+  max-height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   background: #FFFFFF;
+  overflow: hidden;
 
   // 顶部导航栏
   .navbar {
@@ -67,11 +72,17 @@
 
   // 评论列表滚动区域
   .comment-scroll {
-    flex: 1;
+    height: calc(100vh - 100px);
-    height: 0;
     padding: 0 15px;
     box-sizing: border-box;
-    overflow-y: auto;
+
+    // 隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      background: transparent;
+    }
   }
 
   // 评论列表
@@ -240,6 +251,27 @@
     }
   }
 
+  // 回复遮罩层
+  .reply-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 199;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
   // 回复输入框
   .reply-input-container {
     position: fixed;
@@ -251,6 +283,16 @@
     padding: 8px 12px;
     padding-bottom: calc(20px + env(safe-area-inset-bottom));
     z-index: 200;
+    transform: translateY(100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
+
+    &.show {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
 
     .reply-input-wrapper {
       display: flex;

src/other_pages/comment_reply/index.tsx

@@ -144,7 +144,7 @@ const CommentReply = () => {
       // 如果是回复评论，parent_id 使用评论的 parent_id 或 id
       // 如果是顶级评论，parent_id 为 null，则使用评论的 id 作为 parent_id
       const parentId = replyTarget.parent_id || replyTarget.id;
-      
+
       const res = await commentService.replyComment(
         parentId,
         replyTarget.user_id,
@@ -344,44 +344,45 @@ const CommentReply = () => {
       </ScrollView>
 
       {/* 回复输入框 */}
-      {showReplyInput && replyTarget && (
+      <>
-        <>
+        {/* 遮罩层 */}
-          {/* 遮罩层 */}
+        <View 
-          <View className="reply-mask" onClick={handleCancelReply}></View>
+          className={`reply-mask ${showReplyInput ? 'show' : ''}`}
+          onClick={handleCancelReply}
+        ></View>
 
-          <View className="reply-input-container">
+        <View className={`reply-input-container ${showReplyInput ? 'show' : ''}`}>
-            <View className="reply-input-wrapper">
+          <View className="reply-input-wrapper">
-              <View className="input-row">
+            <View className="input-row">
-                <Input
+              <Input
-                  className="reply-input"
+                className="reply-input"
-                  type="text"
+                type="text"
-                  placeholder={`回复 ${replyTarget.user_nickname}`}
+                placeholder={`回复 ${replyTarget?.user_nickname || ''}`}
-                  value={replyContent}
+                value={replyContent}
-                  focus={inputFocus}
+                focus={inputFocus}
-                  adjustPosition={true}
+                adjustPosition={true}
-                  cursorSpacing={30}
+                cursorSpacing={30}
-                  holdKeyboard={false}
+                holdKeyboard={false}
-                  onInput={(e) => setReplyContent(e.detail.value)}
+                onInput={(e) => setReplyContent(e.detail.value)}
-                  onBlur={handleInputBlur}
+                onBlur={handleInputBlur}
-                  confirmType="send"
+                confirmType="send"
-                  onConfirm={handleSendReply}
+                onConfirm={handleSendReply}
-                />
+              />
-                <View className="input-actions">
+              <View className="input-actions">
-                  <View
+                <View
-                    className={`send-btn ${replyContent.trim() ? 'active' : ''}`}
+                  className={`send-btn ${replyContent.trim() ? 'active' : ''}`}
-                    onClick={handleSendReply}
+                  onClick={handleSendReply}
-                  >
+                >
-                    <Image
+                  <Image
-                      className="send-icon"
+                    className="send-icon"
-                      src={require('@/static/message/send-icon.svg')}
+                    src={require('@/static/message/send-icon.svg')}
-                    />
+                  />
-                  </View>
                 </View>
               </View>
             </View>
           </View>
-        </>
+        </View>
-      )}
+      </>
     </View>
   );
 };