diff --git a/api/topicItem.js b/api/topicItem.js
new file mode 100644
index 0000000..cc804c7
--- /dev/null
+++ b/api/topicItem.js
@@ -0,0 +1,10 @@
+import { request } from "@/utils/request.js";
+
+// 打分
+export const topicItemScore = async (data) => {
+  return request({
+    url: "/api/rating/topic/item/score",
+    method: "POST",
+    data,
+  });
+};
\ No newline at end of file
diff --git a/components/RatingCard/RatingCard.vue b/components/RatingCard/RatingCard.vue
new file mode 100644
index 0000000..86a83c5
--- /dev/null
+++ b/components/RatingCard/RatingCard.vue
@@ -0,0 +1,174 @@
+<template>
+  <view class="rating-card" @tap="handleCardTap">
+    <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" v-if="item.quote">
+      <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(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>
+</template>
+
+<script setup>
+import { FILE_BASE_URL } from "@/utils/constants";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  actions: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['item-click', 'action-click']);
+
+const handleCardTap = () => {
+  emit('item-click', props.item.id);
+};
+
+const handleAction = (actionValue) => {
+  emit('action-click', props.item, actionValue);
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.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;
+  filter: grayscale(100%);
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+
+.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 .emoji {
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
+.action-item.active .action-name {
+  color: #2953ff;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 2cf1a51..4b1f212 100644
--- a/pages/rating/index.vue
+++ b/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;