up

src/components/ScenarioPage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useMessage } from 'naive-ui'
-import { NTag } from 'naive-ui'
+import { NRate, NTag, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -23,6 +22,8 @@ const scenario = ref<Scenario>({
   updatedAt: undefined,
   createdAt: undefined,
   publishedAt: undefined,
+  averageRating: undefined,
+  reviewsCount: undefined,
 })
 
 async function getScenario(id: number) {
@@ -49,6 +50,11 @@ getScenario(Number(scenarioId))
         </div>
         <div class="scenario-details">
           <p class="scenario-description">{{ scenario.description }}</p>
+          <div class="scenario-rating">
+            <n-rate :value="scenario.averageRating" readonly allow-half size="small" />
+            <span v-if="scenario.reviewsCount">{{ scenario.averageRating?.toFixed(1) }} · {{ scenario.reviewsCount }} отзывов</span>
+            <span v-else>Пока нет оценок</span>
+          </div>
           <div class="scenario-author">
             <n-tag :bordered="false" type="success" class="status-block">
               Автор: {{ scenario.author?.username }}
@@ -124,6 +130,14 @@ getScenario(Number(scenarioId))
   margin-top: 12px;
 }
 
+.scenario-rating {
+  align-items: center;
+  color: #aaa;
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
 .status-block {
   height: auto;
   line-height: 1.5;