feat: добавил отображение пустого состояния уведомлений
🚀 Create and publish a Docker image / Detect changes in backend and frontend (push) Successful in 10s
🚀 Create and publish a Docker image / Build & publish backend image (push) Successful in 13s
🚀 Create and publish a Docker image / Build & publish frontend image (push) Successful in 19s
🚀 Create and publish a Docker image / Update stack on Portainer (push) Successful in 8s

Реализовал компонент для отображения пустого состояния при отсутствии уведомлений.
This commit is contained in:
2026-05-12 14:14:32 +03:00
parent 17093784e2
commit fcd30f9bf7
@@ -3,6 +3,7 @@ import { computed } from 'vue'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import GlassCard from '@/components/ui/GlassCard.vue' import GlassCard from '@/components/ui/GlassCard.vue'
import AppIcon from '@/components/ui/AppIcon.vue' import AppIcon from '@/components/ui/AppIcon.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
const userStore = useUserStore() const userStore = useUserStore()
@@ -32,7 +33,15 @@ const typeIcon: Record<string, string> = {
<button class="btn-secondary" @click="userStore.markAllRead">Отметить все как прочитанные</button> <button class="btn-secondary" @click="userStore.markAllRead">Отметить все как прочитанные</button>
</div> </div>
<div class="notification-groups"> <div v-if="userStore.notifications.length === 0" class="empty-wrap">
<EmptyState
icon="bell"
title="Нет уведомлений"
subtitle="Здесь будут появляться важные события и обновления"
/>
</div>
<div v-else class="notification-groups">
<GlassCard v-for="([day, items]) in grouped" :key="day" class="group"> <GlassCard v-for="([day, items]) in grouped" :key="day" class="group">
<div class="group-title">{{ day }}</div> <div class="group-title">{{ day }}</div>
<div class="items"> <div class="items">
@@ -50,7 +59,12 @@ const typeIcon: Record<string, string> = {
</template> </template>
<style scoped> <style scoped>
.notifications { display: flex; flex-direction: column; gap: 18px; } .notifications {
display: flex;
flex-direction: column;
gap: 18px;
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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notification-groups { display: flex; flex-direction: column; gap: 14px; } .notification-groups { display: flex; flex-direction: column; gap: 14px; }
.group-title { font-weight: 700; margin-bottom: 10px; } .group-title { font-weight: 700; margin-bottom: 10px; }
@@ -60,4 +74,15 @@ const typeIcon: Record<string, string> = {
.icon { color: var(--color-text); flex-shrink: 0; } .icon { color: var(--color-text); flex-shrink: 0; }
.item-title { font-weight: 600; } .item-title { font-weight: 600; }
.item-body { font-size: 13px; color: var(--color-text-secondary); } .item-body { font-size: 13px; color: var(--color-text-secondary); }
.empty-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.notifications { min-height: calc(100vh - var(--topbar-height) - 16px - 80px); }
}
</style> </style>