feat: release

pages/rating/index.vue

@@ -75,37 +75,14 @@
 
       <!-- 评分项列表 -->
         <view class="rating-list">
-          <view 
-            class="rating-card" 
+          <RatingCard
             v-for="(item, index) in ratingItems" 
             :key="item.id"
-            @tap="goToDetail(item.id)"
-          >
-            <view class="card-header">
-              <image class="item-avatar" :src="FILE_BASE_URL + item.avatarUrl" mode="aspectFill" />
-              <text class="item-name">{{ item.name }}</text>
-              <view class="rank-tag" v-if="item.rank <= 3">NO.{{ item.rank }}</view>
-              <view class="flex-spacer"></view>
-              <text class="item-score">{{ item.score }}</text>
-            </view>
-            <view class="quote-box">
-              <text class="quote-text">“{{ item.quote }}”</text>
-            </view>
-            <view class="action-group">
-              <view 
-                class="action-item" 
-                v-for="(action, aIndex) in actions" 
-                :key="aIndex" 
-                :class="{ active: item.userAction === action.value }"
-                @tap.stop="handleAction(item, action.value)"
-              >
-                <view class="action-icon-wrap" :class="'icon-' + action.value">
-                  <text class="emoji">{{ action.emoji }}</text>
-                </view>
-                <text class="action-name">{{ action.label }}</text>
-              </view>
-            </view>
-          </view>
+            :item="item"
+            :actions="actions"
+            @item-click="goToDetail"
+            @action-click="handleAction"
+          />
         </view>
 
       <!-- 热门锐评 -->
@@ -181,6 +158,7 @@ import { getStatusBarHeight } from "@/utils/system";
 import { onPullDownRefresh, onReachBottom, onLoad } from "@dcloudio/uni-app";
 import { fetchTopicDetail, fetchTopicRatingItems } from "@/api/topic";
 import { FILE_BASE_URL } from "@/utils/constants";
+import RatingCard from "@/components/RatingCard/RatingCard.vue";
 
 // 状态栏高度处理
 const statusBarHeight = ref(getStatusBarHeight() || 44);
@@ -612,114 +590,6 @@ onReachBottom(() => {
   margin-bottom: 40rpx;
 }
 
-.rating-card {
-  background-color: #fff;
-  border-radius: 32rpx;
-  padding: 32rpx;
-  margin-bottom: 32rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.02);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 24rpx;
-}
-
-.item-avatar {
-  width: 90rpx;
-  height: 90rpx;
-  border-radius: 20rpx;
-  margin-right: 24rpx;
-  background-color: #eee;
-}
-
-.item-name {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #111;
-  margin-right: 16rpx;
-}
-
-.rank-tag {
-  background-color: #eef1ff;
-  color: #2953ff;
-  font-size: 22rpx;
-  font-weight: bold;
-  padding: 4rpx 16rpx;
-  border-radius: 10rpx;
-}
-
-.flex-spacer {
-  flex: 1;
-}
-
-.item-score {
-  font-size: 48rpx;
-  font-weight: 900;
-  color: #2953ff;
-  font-family: 'DIN Alternate', sans-serif;
-}
-
-.quote-box {
-  background-color: #f9fafe;
-  border-radius: 0 20rpx 20rpx 20rpx;
-  padding: 24rpx 28rpx;
-  margin-bottom: 36rpx;
-  border-left: 6rpx solid #c9d4ff;
-}
-
-.quote-text {
-  font-size: 30rpx;
-  color: #555;
-  font-style: italic;
-  line-height: 1.5;
-}
-
-.action-group {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10rpx;
-}
-
-.action-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.action-icon-wrap {
-  width: 88rpx;
-  height: 88rpx;
-  border-radius: 50%;
-  background-color: #f5f6fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 12rpx;
-  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.emoji {
-  font-size: 44rpx;
-}
-
-.action-name {
-  font-size: 24rpx;
-  color: #999;
-}
-
-.action-item.active .action-icon-wrap {
-  background-color: #eef1ff;
-  transform: scale(1.15);
-  box-shadow: 0 8rpx 16rpx rgba(41, 83, 255, 0.15);
-}
-
-.action-item.active .action-name {
-  color: #2953ff;
-  font-weight: bold;
-}
-
 /* 热门锐评 */
 .comments-section {
   margin-bottom: 40rpx;