feat/info-comment-jump

components/CommentItem/CommentItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <view class="comment-item">
+  <view
+    class="comment-item"
+    :id="`comment-${localComment.id}`"
+    :class="{ 'comment-item--anchored': localComment.id === props.activeAnchorId }"
+  >
     <image class="c-avatar" :src="localComment.avatar" mode="aspectFill" />
     <view class="c-content-wrap">
       <view class="c-header">
@@ -45,6 +49,8 @@
           v-for="reply in localComment.replies"
           :key="reply.id"
           class="reply-item"
+          :id="`reply-${reply.id}`"
+          :class="{ 'reply-item--anchored': reply.id === props.activeAnchorId }"
         >
           <image class="reply-avatar" :src="reply.avatar" mode="aspectFill" />
           <view class="reply-main">
@@ -104,6 +110,10 @@ const props = defineProps({
   pageName: {
     type: String,
     default: 'rating_detail'
+  },
+  activeAnchorId: {
+    type: String,
+    default: ''
   }
 });
 
@@ -256,13 +266,21 @@ const handleLike = async (target = null) => {
   display: flex;
   padding: 32rpx 0;
   position: relative;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, transform 0.2s;
 }
 
 .comment-item:active {
   background-color: #fafbfe;
 }
 
+.comment-item--anchored {
+  margin: 0 -16rpx;
+  padding: 32rpx 16rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, rgba(92, 67, 245, 0.1), rgba(92, 67, 245, 0.04));
+  transform: translateY(-2rpx);
+}
+
 .comment-item::after {
   content: '';
   position: absolute;
@@ -427,6 +445,13 @@ const handleLike = async (target = null) => {
   display: flex;
   gap: 16rpx;
   padding-bottom: 18rpx;
+  border-radius: 20rpx;
+  transition: background-color 0.2s, padding 0.2s;
+}
+
+.reply-item--anchored {
+  padding: 16rpx 14rpx 18rpx;
+  background: rgba(92, 67, 245, 0.08);
 }
 
 .reply-avatar {