feat: первое подключение фронтенда

frontend/src/views/student/AchievementsView.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import GlassCard from '@/components/ui/GlassCard.vue'
 import AchievementBadge from '@/components/ui/AchievementBadge.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const userStore = useUserStore()
+const auth = useAuthStore()
 const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
 const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))
 
@@ -14,6 +17,10 @@ const rewards = [
   { id: 'r3', title: 'Доп. консультация преподавателя', price: 220, available: false },
   { id: 'r4', title: 'Цифровой бейдж «Research Explorer»', price: 60, available: true },
 ]
+
+onMounted(() => {
+  if (auth.user) void userStore.fetchStudentData(auth.user.id)
+})
 </script>
 
 <template>
@@ -22,7 +29,12 @@ const rewards = [
 
     <section>
       <h2 class="section-title">Полученные достижения</h2>
-      <div class="list">
+      <EmptyState
+        v-if="!unlocked.length"
+        title="Полученных достижений пока нет"
+        subtitle="Они появятся после участия в лекциях и отзывах."
+      />
+      <div v-else class="list">
         <AchievementBadge
           v-for="a in unlocked"
           :key="a.id"
@@ -38,7 +50,12 @@ const rewards = [
 
     <section>
       <h2 class="section-title">Заблокированные</h2>
-      <div class="list">
+      <EmptyState
+        v-if="!locked.length"
+        title="Нет заблокированных достижений"
+        subtitle="Backend пока не вернул список будущих достижений."
+      />
+      <div v-else class="list">
         <AchievementBadge
           v-for="a in locked"
           :key="a.id"