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

@@ -344,18 +344,20 @@ const CommentReply = () => {
       </ScrollView>
 
       {/* 回复输入框 */}
-      {showReplyInput && replyTarget && (
       <>
         {/* 遮罩层 */}
-          <View className="reply-mask" onClick={handleCancelReply}></View>
+        <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="input-row">
               <Input
                 className="reply-input"
                 type="text"
-                  placeholder={`回复 ${replyTarget.user_nickname}`}
+                placeholder={`回复 ${replyTarget?.user_nickname || ''}`}
                 value={replyContent}
                 focus={inputFocus}
                 adjustPosition={true}
@@ -381,7 +383,6 @@ const CommentReply = () => {
           </View>
         </View>
       </>
-      )}
     </View>
   );
 };