Merge branch 'light_v3'

src/other_pages/comment_reply/index.scss

@@ -12,44 +12,43 @@
   .navbar {
     height: 100px;
     background: #FFFFFF;
-    position: sticky;
+    flex-shrink: 0;
-    top: 0;
     z-index: 100;
 
     .navbar-content {
       height: 56px;
       display: flex;
       align-items: center;
-      justify-content: center;
       padding: 0 15px;
       margin-top: 44px;
-      position: relative;
+      gap: 12px;
 
       .back-button {
-        position: absolute;
+        width: 24px;
-        left: 10px;
+        height: 24px;
-        width: 32px;
-        height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        flex-shrink: 0;
+        margin-top: 2px;
 
         .back-icon {
-          width: 8px;
+          width: 10px;
-          height: 16px;
+          height: 10px;
           position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
           &::before {
             content: '';
             position: absolute;
-            top: 0;
+            width: 10px;
-            left: 0;
+            height: 10px;
-            width: 8px;
+            border-left: 2px solid #000000;
-            height: 8px;
+            border-bottom: 2px solid #000000;
-            border-left: 2.67px solid #000000;
+            transform: rotate(45deg) translateY(-1px);
-            border-bottom: 2.67px solid #000000;
-            transform: rotate(45deg);
           }
         }
       }
@@ -61,6 +60,7 @@
         line-height: 1.4;
         letter-spacing: 0.019em;
         color: #000000;
+        flex: 1;
       }
     }
   }
@@ -68,8 +68,10 @@
   // 评论列表滚动区域
   .comment-scroll {
     flex: 1;
-    height: 100%;
+    height: 0;
     padding: 0 15px;
+    box-sizing: border-box;
+    overflow-y: auto;
   }
 
   // 评论列表
@@ -84,6 +86,7 @@
     gap: 12px;
     padding: 16px 0;
     border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
 
     .comment-left {
       display: flex;
@@ -96,6 +99,11 @@
         height: 48px;
         border-radius: 999px;
         flex-shrink: 0;
+        cursor: pointer;
+
+        &:active {
+          opacity: 0.8;
+        }
       }
 
       .comment-content {
@@ -111,6 +119,12 @@
           font-size: 14px;
           line-height: 1.43;
           color: #000000;
+          cursor: pointer;
+          width: fit-content;
+
+          &:active {
+            opacity: 0.6;
+          }
         }
 
         .action-row {
@@ -225,4 +239,73 @@
       color: rgba(0, 0, 0, 0.35);
     }
   }
+
+  // 回复输入框
+  .reply-input-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #F8F8F8;
+    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+    padding: 8px 12px;
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+    z-index: 200;
+
+    .reply-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      background: #FFFFFF;
+      border-radius: 20px;
+
+      .input-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+
+        height: 36px;
+        padding-left: 16px;
+        margin: 12px 0px;
+
+
+        .reply-input {
+          flex: 1;
+          border: none;
+          font-family: 'PingFang SC';
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 1.4;
+          color: #000000;
+
+          &::placeholder {
+            color: rgba(60, 60, 67, 0.3);
+            font-size: 15px;
+          }
+        }
+
+        .input-actions {
+          display: flex;
+          align-items: center;
+
+          .send-btn {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            flex-shrink: 0;
+
+            .send-icon {
+              width: 100%;
+              height: 100%;
+            }
+
+          }
+        }
+      }
+    }
+  }
 }

src/other_pages/comment_reply/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { View, Text, ScrollView, Image } from "@tarojs/components";
+import { View, Text, ScrollView, Image, Input } from "@tarojs/components";
 import { Avatar } from "@nutui/nutui-react-taro";
 import { withAuth, EmptyState } from "@/components";
 import commentService, { CommentActivity } from "@/services/commentService";
@@ -9,6 +9,7 @@ import "./index.scss";
 // 评论/回复类型定义
 interface CommentReplyItem {
   id: number;
+  user_id: number;
   user_avatar: string;
   user_nickname: string;
   action_type: "comment" | "reply"; // 评论了你的球局 / 回复了你的评论
@@ -18,12 +19,18 @@ interface CommentReplyItem {
   activity_image: string;
   activity_id: number;
   activity_title: string;
+  parent_id: number | null; // 父评论ID，用于回复
+  game_id: number; // 球局ID
 }
 
 const CommentReply = () => {
   const [commentList, setCommentList] = useState<CommentReplyItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [showReplyInput, setShowReplyInput] = useState(false);
+  const [replyTarget, setReplyTarget] = useState<CommentReplyItem | null>(null);
+  const [replyContent, setReplyContent] = useState("");
+  const [inputFocus, setInputFocus] = useState(false);
 
   useEffect(() => {
     getCommentReplyList();
@@ -44,15 +51,18 @@ const CommentReply = () => {
         // 映射数据
         const mappedList = res.data.rows.map((item: CommentActivity) => ({
           id: item.id,
+          user_id: item.user?.id || 0,
           user_avatar: item.user?.avatar_url || "",
           user_nickname: item.user?.nickname || "匿名用户",
           action_type: item.type === "reply" ? "reply" as const : "comment" as const,
           time: item.create_time,
           content: item.content || "",
           original_comment: item.parent_comment?.content || "",
-          activity_image: item.game?.image_list?.[0] || "",
+          activity_image: item.game?.image || "",
           activity_id: item.game_id,
           activity_title: item.game?.title || "",
+          parent_id: item.parent_id,
+          game_id: item.game_id,
         }));
 
         setCommentList(mappedList);
@@ -95,18 +105,95 @@ const CommentReply = () => {
   };
 
   // 处理回复
-  const handleReply = (item: CommentReplyItem) => {
+  const handleReply = (e: any, item: CommentReplyItem) => {
-    console.log("回复:", item);
+    e.stopPropagation(); // 阻止事件冒泡
-    // TODO: 跳转到回复页面或弹出回复框
+    setReplyTarget(item);
+    setShowReplyInput(true);
+    setInputFocus(true);
+    setReplyContent("");
   };
 
-  // 处理点击球局
+  // 处理点击评论项（跳转到球局详情）
-  const handleGameClick = (gameId: number) => {
+  const handleCommentClick = (item: CommentReplyItem) => {
     Taro.navigateTo({
-      url: `/game_pages/detail/index?id=${gameId}`,
+      url: `/game_pages/detail/index?id=${item.activity_id}&message_id=${item.id}`,
     });
   };
 
+  // 处理点击用户（跳转到个人页）
+  const handleUserClick = (e: any, userId: number) => {
+    e.stopPropagation(); // 阻止事件冒泡
+    Taro.navigateTo({
+      url: `/user_pages/other/index?user_id=${userId}`,
+    });
+  };
+
+  // 发送回复
+  const handleSendReply = async () => {
+    if (!replyContent.trim() || !replyTarget) {
+      Taro.showToast({
+        title: "请输入回复内容",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+
+    try {
+      // 调用回复接口
+      // 如果是回复评论，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,
+        replyContent.trim()
+      );
+
+      if (res.code === 0) {
+        Taro.showToast({
+          title: "回复成功",
+          icon: "success",
+          duration: 2000,
+        });
+
+        // 关闭输入框
+        setShowReplyInput(false);
+        setReplyTarget(null);
+        setReplyContent("");
+        setInputFocus(false);
+
+        // 刷新列表
+        getCommentReplyList();
+      } else {
+        throw new Error(res.message || "回复失败");
+      }
+    } catch (e: any) {
+      Taro.showToast({
+        title: e.message || "回复失败",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  };
+
+  // 取消回复
+  const handleCancelReply = () => {
+    setShowReplyInput(false);
+    setReplyTarget(null);
+    setReplyContent("");
+    setInputFocus(false);
+  };
+
+  // 输入框失去焦点
+  const handleInputBlur = () => {
+    // 延迟执行，避免点击发送按钮时输入框先失焦导致发送失败
+    setTimeout(() => {
+      handleCancelReply();
+    }, 200);
+  };
+
   // 处理返回
   const handleBack = () => {
     Taro.navigateBack();
@@ -124,15 +211,18 @@ const CommentReply = () => {
       if (res.code === 0 && res.data) {
         const mappedList = res.data.rows.map((item: CommentActivity) => ({
           id: item.id,
+          user_id: item.user?.id || 0,
           user_avatar: item.user?.avatar_url || "",
           user_nickname: item.user?.nickname || "匿名用户",
           action_type: item.type === "reply" ? "reply" as const : "comment" as const,
           time: item.create_time,
           content: item.content || "",
           original_comment: item.parent_comment?.content || "",
-          activity_image: item.game?.image_list?.[0] || "",
+          activity_image: item.game?.image || "",
           activity_id: item.game_id,
           activity_title: item.game?.title || "",
+          parent_id: item.parent_id,
+          game_id: item.game_id,
         }));
 
         setCommentList(mappedList);
@@ -153,16 +243,26 @@ const CommentReply = () => {
     const actionText = item.action_type === "comment" ? "评论了你的球局" : "回复了你的评论";
 
     return (
-      <View className="comment-item" key={item.id}>
+      <View
+        className="comment-item"
+        key={item.id}
+        onClick={() => handleCommentClick(item)}
+      >
         <View className="comment-left">
           <Avatar
             className="user-avatar"
             src={item.user_avatar || "https://img.yzcdn.cn/vant/cat.jpeg"}
             size="48px"
+            onClick={(e) => handleUserClick(e, item.user_id)}
           />
 
           <View className="comment-content">
-            <Text className="user-nickname">{item.user_nickname}</Text>
+            <Text
+              className="user-nickname"
+              onClick={(e) => handleUserClick(e, item.user_id)}
+            >
+              {item.user_nickname}
+            </Text>
 
             <View className="action-row">
               <Text className="action-text">{actionText}</Text>
@@ -180,7 +280,7 @@ const CommentReply = () => {
             )}
 
             {/* 回复按钮 */}
-            <View className="reply-button" onClick={() => handleReply(item)}>
+            <View className="reply-button" onClick={(e) => handleReply(e, item)}>
               <Image
                 className="reply-icon"
                 src={require('@/static/message/reply-icon.svg')}
@@ -195,7 +295,12 @@ const CommentReply = () => {
           className="activity-image"
           src={item.activity_image}
           mode="aspectFill"
-          onClick={() => handleGameClick(item.activity_id)}
+          onClick={(e) => {
+            e.stopPropagation();
+            Taro.navigateTo({
+              url: `/game_pages/detail/index?id=${item.game_id}`,
+            });
+          }}
         />
       </View>
     );
@@ -237,6 +342,46 @@ const CommentReply = () => {
           <EmptyState text="暂无评论和回复" />
         )}
       </ScrollView>
+
+      {/* 回复输入框 */}
+      {showReplyInput && replyTarget && (
+        <>
+          {/* 遮罩层 */}
+          <View className="reply-mask" onClick={handleCancelReply}></View>
+
+          <View className="reply-input-container">
+            <View className="reply-input-wrapper">
+              <View className="input-row">
+                <Input
+                  className="reply-input"
+                  type="text"
+                  placeholder={`回复 ${replyTarget.user_nickname}`}
+                  value={replyContent}
+                  focus={inputFocus}
+                  adjustPosition={true}
+                  cursorSpacing={30}
+                  holdKeyboard={false}
+                  onInput={(e) => setReplyContent(e.detail.value)}
+                  onBlur={handleInputBlur}
+                  confirmType="send"
+                  onConfirm={handleSendReply}
+                />
+                <View className="input-actions">
+                  <View
+                    className={`send-btn ${replyContent.trim() ? 'active' : ''}`}
+                    onClick={handleSendReply}
+                  >
+                    <Image
+                      className="send-icon"
+                      src={require('@/static/message/send-icon.svg')}
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </>
+      )}
     </View>
   );
 };

src/other_pages/message/index.tsx

@@ -19,6 +19,7 @@ interface MessageItem {
   related_user_avatar?: string;
   related_user_nickname?: string;
   activity_image?: string;
+  jump_url?: string;
 }
 
 // 消息分类类型
@@ -81,9 +82,22 @@ const Message = () => {
   };
 
   // 处理查看详情
-  const handleViewDetail = (messageId: string) => {
+  const handleViewDetail = (message: MessageItem) => {
-    console.log("查看详情:", messageId);
+
-    // TODO: 根据消息类型跳转到对应详情页
+    if (!message.jump_url) {
+      console.log("暂无跳转链接");
+      return;
+    }
+
+    Taro.navigateTo({
+      url: message.jump_url,
+    }).catch(() => {
+      Taro.showToast({
+        title: "页面不存在",
+        icon: "none",
+        duration: 2000,
+      });
+    });
   };
 
   // 处理滚动到底部
@@ -212,7 +226,7 @@ const Message = () => {
                 </View>
                 <View className="card-footer">
                   <View className="footer-divider"></View>
-                  <View className="footer-action" onClick={() => handleViewDetail(message.id)}>
+                  <View className="footer-action" onClick={() => handleViewDetail(message)}>
                     <Text className="action-text">查看详情</Text>
                     <View className="action-arrow">
 

src/other_pages/new_follow/index.scss

@@ -12,44 +12,43 @@
   .navbar {
     height: 100px;
     background: #FFFFFF;
-    position: sticky;
+    flex-shrink: 0;
-    top: 0;
     z-index: 100;
 
     .navbar-content {
       height: 56px;
       display: flex;
       align-items: center;
-      justify-content: center;
       padding: 0 15px;
       margin-top: 44px;
-      position: relative;
+      gap: 12px;
 
       .back-button {
-        position: absolute;
+        width: 24px;
-        left: 10px;
+        height: 24px;
-        width: 32px;
-        height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        flex-shrink: 0;
+        margin-top: 2px;
 
         .back-icon {
-          width: 8px;
+          width: 10px;
-          height: 16px;
+          height: 10px;
           position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
           &::before {
             content: '';
             position: absolute;
-            top: 0;
+            width: 10px;
-            left: 0;
+            height: 10px;
-            width: 8px;
+            border-left: 2px solid #000000;
-            height: 8px;
+            border-bottom: 2px solid #000000;
-            border-left: 2.67px solid #000000;
+            transform: rotate(45deg) translateY(-1px);
-            border-bottom: 2.67px solid #000000;
-            transform: rotate(45deg);
           }
         }
       }
@@ -61,6 +60,7 @@
         line-height: 1.4;
         letter-spacing: 0.019em;
         color: #000000;
+        flex: 1;
       }
     }
   }
@@ -68,7 +68,8 @@
   // 关注列表滚动区域
   .follow-scroll {
     flex: 1;
-    height: 100%;
+    height: 0;
+    overflow-y: auto;
   }
 
   // 关注列表

src/services/commentService.ts

@@ -23,6 +23,7 @@ export interface CommentActivity {
     title: string;
     start_time: string;
     location_name: string;
+    image?: string;
     image_list?: string[];
   };
   reply_to_user: {

src/static/message/send-icon.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="black"/>
+<rect x="0.25" y="0.25" width="35.5" height="35.5" rx="17.75" stroke="black" stroke-opacity="0.06" stroke-width="0.5"/>
+<path d="M18.0042 12.0503V24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18L18 12L24 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>