fix: небольшие фиксы фронта

This commit is contained in:
2026-05-18 02:46:49 +03:00
parent 811b6ef51a
commit b984d29c50
7 changed files with 14 additions and 103 deletions
@@ -2,7 +2,6 @@
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'
@@ -11,13 +10,6 @@ const auth = useAuthStore()
const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))
const rewards = [
{ id: 'r1', title: 'Стикерпак UniVerse', price: 80, available: true },
{ id: 'r2', title: 'Термокружка ЮФУ', price: 150, available: true },
{ 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)
})
@@ -25,7 +17,7 @@ onMounted(() => {
<template>
<div class="achievements page-content">
<h1 class="page-title">Достижения и магазин наград</h1>
<h1 class="page-title">Достижения</h1>
<section>
<h2 class="section-title">Полученные достижения</h2>
@@ -66,27 +58,10 @@ onMounted(() => {
/>
</div>
</section>
<section>
<h2 class="section-title">Магазин наград</h2>
<div class="rewards">
<GlassCard v-for="r in rewards" :key="r.id" class="reward-card">
<div class="reward-title">{{ r.title }}</div>
<div class="reward-price">{{ r.price }} монет</div>
<button class="btn-primary" :disabled="!r.available">
{{ r.available ? 'Купить' : 'Недоступно' }}
</button>
</GlassCard>
</div>
</section>
</div>
</template>
<style scoped>
.achievements { display: flex; flex-direction: column; gap: 20px; }
.list { display: flex; flex-direction: column; gap: 12px; }
.rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.reward-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.reward-title { font-weight: 700; }
.reward-price { color: var(--color-text-secondary); font-size: 13px; }
</style>
@@ -70,6 +70,7 @@ const typeIcon: Record<string, string> = {
min-height: calc(100vh - var(--topbar-height) - 28px - 80px);
}
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.header .page-title { margin-bottom: 0; }
.notification-groups { display: flex; flex-direction: column; gap: 14px; }
.group-title { font-weight: 700; margin-bottom: 10px; }
.items { display: flex; flex-direction: column; gap: 10px; }
+1 -27
View File
@@ -3,10 +3,8 @@ import { computed, onMounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import GlassCard from '@/components/ui/GlassCard.vue'
import CoinChip from '@/components/ui/CoinChip.vue'
import ProgressBar from '@/components/ui/ProgressBar.vue'
import AchievementBadge from '@/components/ui/AchievementBadge.vue'
import DataTable from '@/components/ui/DataTable.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
const auth = useAuthStore()
@@ -54,12 +52,6 @@ const interestTags = ref([
const notificationSettings = ref({ email: true })
const historyColumns = [
{ key: 'date', label: 'Дата' },
{ key: 'description', label: 'Описание' },
{ key: 'amount', label: 'Монеты', align: 'right' },
]
onMounted(() => {
void userStore.fetchStudentData(user.value.id)
})
@@ -69,7 +61,6 @@ onMounted(() => {
<div class="profile page-content">
<div class="header">
<h1 class="page-title">Профиль пользователя</h1>
<CoinChip :amount="user.coins" />
</div>
<div class="profile-grid">
@@ -118,7 +109,7 @@ onMounted(() => {
<EmptyState
v-if="!userStore.achievements.length"
title="Достижений пока нет"
subtitle="Они появятся после посещений, отзывов и начислений."
subtitle="Они появятся после посещений и отзывов."
/>
<div v-else class="achievements">
<AchievementBadge
@@ -129,25 +120,10 @@ onMounted(() => {
:description="a.description"
:unlocked="a.unlocked"
:unlockedAt="a.unlockedAt"
:coins="a.coins"
/>
</div>
</GlassCard>
</div>
<GlassCard>
<div class="section-title">История начисления монет</div>
<EmptyState
v-if="!userStore.coinHistory.length"
title="История монет пуста"
subtitle="Начисления появятся после активностей на платформе."
/>
<DataTable :columns="historyColumns" :rows="userStore.coinHistory">
<template #amount="{ value }">
<span :class="value > 0 ? 'positive' : 'negative'">{{ value > 0 ? `+${value}` : value }}</span>
</template>
</DataTable>
</GlassCard>
</div>
</template>
@@ -165,6 +141,4 @@ onMounted(() => {
.settings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.setting { font-size: 13px; color: var(--color-text-secondary); display: flex; gap: 8px; align-items: center; }
.achievements { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.positive { color: #166534; font-weight: 600; }
.negative { color: #991B1B; font-weight: 600; }
</style>