init
This commit is contained in:
Oscar
251
src/views/feed/FeedView.vue
Normal file
251
src/views/feed/FeedView.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useFeedStore } from '@/stores/feed.store';
|
||||
import { useAuthStore } from '@/stores/auth.store';
|
||||
import FeedCardStack from '@/components/feed/FeedCardStack.vue';
|
||||
import FeedFilters from '@/components/feed/FeedFilters.vue';
|
||||
import AppButton from '@/components/common/AppButton.vue';
|
||||
|
||||
const feedStore = useFeedStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const filtersOpen = ref(false);
|
||||
const viewMode = ref<'stack' | 'scroll'>('stack');
|
||||
|
||||
onMounted(() => {
|
||||
const profileId = authStore.activeProfile?.id;
|
||||
if (profileId && feedStore.cards.length === 0) {
|
||||
feedStore.fetchNextPage(profileId);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="feed-view">
|
||||
<!-- Header bar -->
|
||||
<header class="feed-header">
|
||||
<h1 class="feed-header__title">Лента</h1>
|
||||
<div class="feed-header__actions">
|
||||
<!-- View mode toggle -->
|
||||
<div class="feed-header__toggle" role="group" aria-label="Режим просмотра">
|
||||
<button
|
||||
class="feed-header__toggle-btn"
|
||||
:class="{ 'feed-header__toggle-btn--active': viewMode === 'stack' }"
|
||||
@click="viewMode = 'stack'"
|
||||
aria-label="Карточки"
|
||||
>
|
||||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
|
||||
<rect x="2" y="2" width="16" height="16" rx="2"/>
|
||||
<rect x="5" y="5" width="10" height="10" rx="1" stroke-dasharray="2 1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="feed-header__toggle-btn"
|
||||
:class="{ 'feed-header__toggle-btn--active': viewMode === 'scroll' }"
|
||||
@click="viewMode = 'scroll'"
|
||||
aria-label="Лента"
|
||||
>
|
||||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
|
||||
<path d="M2 5h16M2 10h16M2 15h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AppButton variant="secondary" size="sm" @click="filtersOpen = true">
|
||||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
|
||||
<path d="M3 5h14M6 10h8M9 15h2"/>
|
||||
</svg>
|
||||
Фильтры
|
||||
</AppButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Search paused banner -->
|
||||
<div v-if="feedStore.searchPaused" class="feed-paused" role="alert">
|
||||
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
|
||||
<path d="M10 9v4m0 4h.01M8.29 3.86L1.82 17a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
</svg>
|
||||
Поиск приостановлен: достигнут лимит совпадений
|
||||
</div>
|
||||
|
||||
<!-- Card stack mode -->
|
||||
<div v-if="viewMode === 'stack'" class="feed-view__stack">
|
||||
<FeedCardStack />
|
||||
</div>
|
||||
|
||||
<!-- Scroll mode — grid of cards -->
|
||||
<div v-else class="feed-view__scroll">
|
||||
<div class="feed-grid">
|
||||
<article
|
||||
v-for="profile in feedStore.cards"
|
||||
:key="profile.id"
|
||||
class="feed-grid__item"
|
||||
>
|
||||
<RouterLink :to="`/profile/${profile.id}`" class="feed-grid__link">
|
||||
<img
|
||||
v-if="profile.avatarUrl"
|
||||
:src="profile.avatarUrl"
|
||||
:alt="profile.name"
|
||||
class="feed-grid__img"
|
||||
/>
|
||||
<div v-else class="feed-grid__no-img" />
|
||||
<div class="feed-grid__overlay">
|
||||
<span class="feed-grid__name">{{ profile.name }}</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-if="feedStore.loading" class="feed-view__load-more">
|
||||
<span class="meta">Загрузка...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FeedFilters :open="filtersOpen" @close="filtersOpen = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.feed-view {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__stack {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__load-more {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.feed-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-cream);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
display: flex;
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
|
||||
&-btn {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&--active {
|
||||
background: var(--color-surface-3);
|
||||
color: var(--color-cream);
|
||||
}
|
||||
|
||||
&:hover:not(.feed-header__toggle-btn--active) {
|
||||
color: var(--color-cream);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feed-paused {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background: var(--color-signal-bg);
|
||||
border-bottom: 1px solid rgba(196, 92, 58, 0.3);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-signal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feed-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
|
||||
&__item {
|
||||
aspect-ratio: 3/4;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .feed-grid__overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__no-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-surface-3);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(0deg, rgba(13,13,13,0.8) 0%, transparent 50%);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
color: var(--color-cream);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user