feat(artist-view): ArtistGalleryTab — MasonryGrid wired to the artist store's existing loadMoreImages; modal-open preserves ?tab=. No global gallery-store coupling (avoids cross-pollution into /gallery)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fc-artist-gallery">
|
||||||
|
<MasonryGrid
|
||||||
|
:items="store.images"
|
||||||
|
:loading="store.imagesLoading"
|
||||||
|
:has-more="store.hasMoreImages"
|
||||||
|
@load-more="store.loadMoreImages(props.slug)"
|
||||||
|
@open="openImage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, watch } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import { useArtistStore } from '../../stores/artist.js'
|
||||||
|
import { useModalStore } from '../../stores/modal.js'
|
||||||
|
import MasonryGrid from '../discovery/MasonryGrid.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
slug: { type: String, required: true },
|
||||||
|
})
|
||||||
|
|
||||||
|
const store = useArtistStore()
|
||||||
|
const modal = useModalStore()
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const initial = parseInt(route.query.image, 10)
|
||||||
|
if (!isNaN(initial)) modal.open(initial)
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => route.query.image, (q) => {
|
||||||
|
const id = parseInt(q, 10)
|
||||||
|
if (!isNaN(id) && id !== modal.currentImageId) modal.open(id)
|
||||||
|
else if (isNaN(id) && modal.currentImageId !== null) modal.close()
|
||||||
|
})
|
||||||
|
|
||||||
|
function openImage (id) {
|
||||||
|
router.push({ query: { ...route.query, image: id } })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fc-artist-gallery { min-width: 0; }
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user