修复画廊分页bug
This commit is contained in:
@@ -138,12 +138,17 @@ export const useRepositoryStore = defineStore('repository', () => {
|
||||
}
|
||||
|
||||
// 获取作者作品
|
||||
const getArtworksByArtist = async (artistName: string, offset = 0, limit = 20) => {
|
||||
const getArtworksByArtist = async (artistName: string, offset = 0, limit = 50) => {
|
||||
return await apiCall(`/artists/${encodeURIComponent(artistName)}/artworks?offset=${offset}&limit=${limit}`)
|
||||
}
|
||||
|
||||
// 获取所有作品
|
||||
const getAllArtworks = async (offset = 0, limit = 50) => {
|
||||
return await apiCall(`/artworks?offset=${offset}&limit=${limit}`)
|
||||
}
|
||||
|
||||
// 搜索作品
|
||||
const searchArtworks = async (query: string, offset = 0, limit = 20) => {
|
||||
const searchArtworks = async (query: string, offset = 0, limit = 50) => {
|
||||
return await apiCall(`/search?q=${encodeURIComponent(query)}&offset=${offset}&limit=${limit}`)
|
||||
}
|
||||
|
||||
@@ -206,6 +211,7 @@ export const useRepositoryStore = defineStore('repository', () => {
|
||||
getStats,
|
||||
getArtists,
|
||||
getArtworksByArtist,
|
||||
getAllArtworks,
|
||||
searchArtworks,
|
||||
getArtwork,
|
||||
deleteArtwork,
|
||||
|
||||
@@ -50,6 +50,8 @@
|
||||
:artworks="artworks"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total-items="totalItems"
|
||||
:view-mode="viewMode"
|
||||
@update:search-query="handleSearchQuery"
|
||||
@update:view-mode="handleViewMode"
|
||||
@select-artist="selectArtist"
|
||||
@@ -93,10 +95,13 @@ const config = ref<RepositoryConfig>({
|
||||
|
||||
// 浏览相关
|
||||
const searchQuery = ref('')
|
||||
const viewMode = ref('artworks') // 默认显示作品模式
|
||||
const artists = ref<Artist[]>([])
|
||||
const artworks = ref<Artwork[]>([])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = 20
|
||||
const pageSize = 50 // 增加每页显示数量
|
||||
const totalItems = ref(0) // 添加总数状态
|
||||
const currentArtist = ref<string>('') // 添加当前查看的作者状态
|
||||
|
||||
// 迁移相关
|
||||
const migrateSourceDir = ref('')
|
||||
@@ -113,7 +118,7 @@ onMounted(async () => {
|
||||
await loadStats()
|
||||
await loadConfig()
|
||||
await loadArtists()
|
||||
await loadAllArtworks() // 添加加载所有作品
|
||||
await loadAllArtworks(1) // 加载第一页
|
||||
})
|
||||
|
||||
// 加载统计信息
|
||||
@@ -228,11 +233,14 @@ const loadArtists = async () => {
|
||||
}
|
||||
|
||||
// 加载所有作品
|
||||
const loadAllArtworks = async () => {
|
||||
const loadAllArtworks = async (page = 1, limit = pageSize) => {
|
||||
try {
|
||||
// 使用搜索空字符串来获取所有作品
|
||||
const result = await repositoryStore.searchArtworks('', 0, 1000)
|
||||
currentArtist.value = '' // 加载所有作品时清除当前作者
|
||||
const offset = (page - 1) * limit
|
||||
const result = await repositoryStore.getAllArtworks(offset, limit)
|
||||
artworks.value = result.artworks
|
||||
totalItems.value = result.total // 更新总数
|
||||
currentPage.value = page
|
||||
} catch (error: any) {
|
||||
console.error('加载所有作品失败:', error)
|
||||
}
|
||||
@@ -241,10 +249,19 @@ const loadAllArtworks = async () => {
|
||||
// 选择作者
|
||||
const selectArtist = async (artistName: string) => {
|
||||
try {
|
||||
const result = await repositoryStore.getArtworksByArtist(artistName)
|
||||
// 重置搜索和分页
|
||||
searchQuery.value = ''
|
||||
currentPage.value = 1
|
||||
currentArtist.value = artistName // 设置当前查看的作者
|
||||
|
||||
// 获取作者作品
|
||||
const result = await repositoryStore.getArtworksByArtist(artistName, 0, pageSize)
|
||||
artworks.value = result.artworks
|
||||
totalItems.value = result.total || result.artworks.length
|
||||
|
||||
// 切换到作品视图
|
||||
viewMode.value = 'artworks'
|
||||
activeTab.value = 'browse'
|
||||
currentPage.value = 1 // 重置到第一页
|
||||
} catch (error: any) {
|
||||
console.error('加载作者作品失败:', error)
|
||||
}
|
||||
@@ -253,32 +270,45 @@ const selectArtist = async (artistName: string) => {
|
||||
// 处理搜索查询
|
||||
const handleSearchQuery = async (query: string) => {
|
||||
searchQuery.value = query
|
||||
currentArtist.value = '' // 搜索时清除当前作者
|
||||
|
||||
// 重置分页
|
||||
currentPage.value = 1
|
||||
|
||||
if (query.trim()) {
|
||||
try {
|
||||
const result = await repositoryStore.searchArtworks(query)
|
||||
// 搜索作品
|
||||
const result = await repositoryStore.searchArtworks(query, 0, pageSize)
|
||||
artworks.value = result.artworks
|
||||
totalItems.value = result.total
|
||||
|
||||
// 切换到作品视图
|
||||
viewMode.value = 'artworks'
|
||||
activeTab.value = 'browse'
|
||||
currentPage.value = 1 // 重置到第一页
|
||||
} catch (error: any) {
|
||||
console.error('搜索失败:', error)
|
||||
}
|
||||
} else {
|
||||
await loadAllArtworks() // 清空搜索时加载所有作品
|
||||
// 清空搜索，加载所有作品
|
||||
await loadAllArtworks(1)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理视图模式
|
||||
const handleViewMode = (mode: string) => {
|
||||
viewMode.value = mode
|
||||
|
||||
// 根据视图模式加载相应数据
|
||||
if (mode === 'artists') {
|
||||
// 作者模式，确保作者数据已加载
|
||||
currentArtist.value = '' // 切换到作者模式时清除当前作者
|
||||
if (artists.value.length === 0) {
|
||||
loadArtists()
|
||||
}
|
||||
} else if (mode === 'artworks' || mode === 'gallery') {
|
||||
// 作品模式，确保作品数据已加载
|
||||
if (artworks.value.length === 0) {
|
||||
loadAllArtworks()
|
||||
loadAllArtworks(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -305,16 +335,46 @@ const deleteArtwork = async (artworkId: string) => {
|
||||
closeArtworkModal()
|
||||
await loadStats()
|
||||
await loadArtists()
|
||||
await loadAllArtworks() // 重新加载作品列表
|
||||
await loadAllArtworks(currentPage.value) // 重新加载当前页
|
||||
} catch (error: any) {
|
||||
console.error('删除作品失败:', error)
|
||||
alert('删除作品失败: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
const changePage = (page: number) => {
|
||||
// 分页处理
|
||||
const changePage = async (page: number, options?: { artist?: string }) => {
|
||||
currentPage.value = page
|
||||
|
||||
// 如果传入了作者信息，使用作者特定的分页
|
||||
if (options?.artist) {
|
||||
currentArtist.value = options.artist
|
||||
}
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
// 如果有搜索查询，重新搜索
|
||||
try {
|
||||
const offset = (page - 1) * pageSize
|
||||
const result = await repositoryStore.searchArtworks(searchQuery.value, offset, pageSize)
|
||||
artworks.value = result.artworks
|
||||
totalItems.value = result.total
|
||||
} catch (error: any) {
|
||||
console.error('搜索失败:', error)
|
||||
}
|
||||
} else if (currentArtist.value) {
|
||||
// 如果当前在查看特定作者的作品
|
||||
try {
|
||||
const offset = (page - 1) * pageSize
|
||||
const result = await repositoryStore.getArtworksByArtist(currentArtist.value, offset, pageSize)
|
||||
artworks.value = result.artworks
|
||||
totalItems.value = result.total || result.artworks.length
|
||||
} catch (error: any) {
|
||||
console.error('加载作者作品失败:', error)
|
||||
}
|
||||
} else {
|
||||
// 否则加载指定页面的所有作品
|
||||
await loadAllArtworks(page)
|
||||
}
|
||||
}
|
||||
|
||||
// 选择下载目录
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="artists-view">
|
||||
<div class="artists-grid">
|
||||
<div
|
||||
v-for="artist in artists"
|
||||
:key="artist.name"
|
||||
class="artist-card"
|
||||
@click="$emit('select-artist', artist.name)"
|
||||
>
|
||||
<div class="artist-avatar">
|
||||
<span class="avatar-text">{{ artist.name.charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="artist-info">
|
||||
<h4>{{ artist.name }}</h4>
|
||||
<p>{{ artist.artworkCount }} 个作品</p>
|
||||
<p>{{ formatFileSize(artist.totalSize) }}</p>
|
||||
</div>
|
||||
<div class="artist-actions">
|
||||
<button @click.stop="$emit('view-artist-works', artist.name)" class="action-btn">
|
||||
查看作品
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Artist } from '@/stores/repository.ts'
|
||||
import { formatFileSize } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artists: Artist[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'select-artist', artistName: string): void
|
||||
(e: 'view-artist-works', artistName: string): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #3b82f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.artist-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist-info p {
|
||||
margin: 0.25rem 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.artist-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artists-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="artworks-view">
|
||||
<div class="artworks-grid">
|
||||
<div
|
||||
v-for="artwork in artworks"
|
||||
:key="artwork.id"
|
||||
class="artwork-card"
|
||||
@click="$emit('view-artwork', artwork)"
|
||||
>
|
||||
<div class="artwork-preview" v-if="artwork.files.length > 0">
|
||||
<img
|
||||
:src="getPreviewUrl(artwork.files[0].path)"
|
||||
:alt="artwork.title"
|
||||
class="preview-image"
|
||||
@click.stop="$emit('open-image-viewer', artwork, 0)"
|
||||
/>
|
||||
<div class="artwork-overlay">
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="view-btn-overlay">
|
||||
👁️ 查看大图
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artwork-info">
|
||||
<h4>{{ artwork.title }}</h4>
|
||||
<p class="artist-name" @click.stop="$emit('select-artist', artwork.artist)">
|
||||
👤 {{ artwork.artist }}
|
||||
</p>
|
||||
<p>{{ formatFileSize(artwork.size) }}</p>
|
||||
<p class="file-count">{{ artwork.files.length }} 个文件</p>
|
||||
</div>
|
||||
<div class="artwork-actions">
|
||||
<button @click.stop="$emit('view-artwork', artwork)" class="action-btn">
|
||||
详情
|
||||
</button>
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="action-btn">
|
||||
预览
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artworks: Artwork[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'view-artwork', artwork: Artwork): void
|
||||
(e: 'select-artist', artistName: string): void
|
||||
(e: 'open-image-viewer', artwork: Artwork, index: number): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.artworks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.artwork-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.artwork-preview {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover .preview-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.artwork-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.artwork-card:hover .artwork-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.view-btn-overlay {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.artwork-info {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.artwork-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
color: #3b82f6 !important;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.artist-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.artwork-info p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.file-count {
|
||||
font-weight: 500;
|
||||
color: #6b5563 !important;
|
||||
}
|
||||
|
||||
.artwork-actions {
|
||||
padding: 0 1rem 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.artworks-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="gallery-view">
|
||||
<div class="gallery-controls">
|
||||
<div class="zoom-controls">
|
||||
<button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
|
||||
🔍-
|
||||
</button>
|
||||
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
||||
<button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
|
||||
🔍+
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-controls">
|
||||
<button @click="setGridSize('small')" :class="['size-btn', { active: gridSize === 'small' }]">
|
||||
小
|
||||
</button>
|
||||
<button @click="setGridSize('medium')" :class="['size-btn', { active: gridSize === 'medium' }]">
|
||||
中
|
||||
</button>
|
||||
<button @click="setGridSize('large')" :class="['size-btn', { active: gridSize === 'large' }]">
|
||||
大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-grid" :class="`grid-${gridSize}`">
|
||||
<div
|
||||
v-for="artwork in artworks"
|
||||
:key="artwork.id"
|
||||
class="gallery-item"
|
||||
@click="$emit('open-image-viewer', artwork, 0)"
|
||||
>
|
||||
<div class="gallery-image-container">
|
||||
<img
|
||||
:src="getPreviewUrl(artwork.files[0].path)"
|
||||
:alt="artwork.title"
|
||||
class="gallery-image"
|
||||
@load="onImageLoad"
|
||||
@error="onImageError"
|
||||
/>
|
||||
<div class="gallery-overlay">
|
||||
<div class="overlay-content">
|
||||
<h4>{{ artwork.title }}</h4>
|
||||
<p>{{ artwork.artist }}</p>
|
||||
<div class="overlay-actions">
|
||||
<button @click.stop="$emit('open-image-viewer', artwork, 0)" class="overlay-btn">
|
||||
👁️ 查看大图
|
||||
</button>
|
||||
<button @click.stop="$emit('view-artwork', artwork)" class="overlay-btn">
|
||||
📋 详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
artworks: Artwork[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'view-artwork', artwork: Artwork): void
|
||||
(e: 'open-image-viewer', artwork: Artwork, index: number): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
|
||||
// 画廊模式相关
|
||||
const zoomLevel = ref(1)
|
||||
const gridSize = ref('medium')
|
||||
|
||||
// 画廊模式图片缩放
|
||||
const zoomIn = () => {
|
||||
zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
|
||||
}
|
||||
|
||||
// 画廊模式网格大小
|
||||
const setGridSize = (size: 'small' | 'medium' | 'large') => {
|
||||
gridSize.value = size
|
||||
}
|
||||
|
||||
// 画廊模式图片加载和错误处理
|
||||
const onImageLoad = () => {
|
||||
// 图片加载成功后可以进行一些操作，例如调整布局
|
||||
}
|
||||
|
||||
const onImageError = (event: Event) => {
|
||||
console.error('图片加载失败:', (event.target as HTMLImageElement).src)
|
||||
// 可以显示一个错误提示或替换图片
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gallery-view {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.gallery-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zoom-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.zoom-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.size-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.size-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.size-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.grid-small .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.grid-medium .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.grid-large .gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gallery-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f9fafb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
transform: scale(v-bind(zoomLevel));
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-image {
|
||||
transform: scale(v-bind(zoomLevel) * 1.05);
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.overlay-content h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.overlay-content p {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.overlay-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.overlay-btn {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.overlay-btn:hover {
|
||||
background: #f3f4f6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery-controls {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.zoom-controls,
|
||||
.view-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div v-if="show" class="image-viewer-overlay" @click="close">
|
||||
<div class="image-viewer-content" @click.stop>
|
||||
<div class="viewer-header">
|
||||
<h3>{{ artwork?.title }}</h3>
|
||||
<div class="viewer-controls">
|
||||
<div class="viewer-zoom-controls">
|
||||
<button @click="zoomOut" class="zoom-btn" :disabled="zoomLevel <= 0.5">
|
||||
🔍-
|
||||
</button>
|
||||
<span class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
||||
<button @click="zoomIn" class="zoom-btn" :disabled="zoomLevel >= 3">
|
||||
🔍+
|
||||
</button>
|
||||
<button @click="resetZoom" class="reset-btn">重置</button>
|
||||
</div>
|
||||
<button @click="close" class="close-btn">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-main">
|
||||
<button @click="previousImage" class="nav-btn prev-btn" :disabled="currentIndex <= 0">
|
||||
‹
|
||||
</button>
|
||||
|
||||
<div class="image-container">
|
||||
<img
|
||||
:src="getPreviewUrl(currentImagePath)"
|
||||
:alt="currentImageName"
|
||||
class="viewer-image"
|
||||
:style="{ transform: `scale(${zoomLevel})` }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button @click="nextImage" class="nav-btn next-btn" :disabled="currentIndex >= (artwork?.files?.length || 0) - 1">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="viewer-footer">
|
||||
<div class="image-info">
|
||||
<p>{{ currentImageName }}</p>
|
||||
<p>{{ formatFileSize(currentImageSize) }}</p>
|
||||
</div>
|
||||
<div class="image-counter">
|
||||
{{ currentIndex + 1 }} / {{ artwork?.files?.length || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="thumbnail-strip">
|
||||
<div
|
||||
v-for="(file, index) in (artwork?.files || [])"
|
||||
:key="index"
|
||||
:class="['thumbnail', { active: index === currentIndex }]"
|
||||
@click="goToImage(index)"
|
||||
>
|
||||
<img
|
||||
:src="getPreviewUrl(file.path)"
|
||||
:alt="file.name"
|
||||
class="thumbnail-img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import type { Artwork } from '@/stores/repository.ts'
|
||||
import { formatFileSize, getPreviewUrl } from '@/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
artwork: Artwork | null
|
||||
currentIndex: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'update:currentIndex', index: number): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 缩放相关
|
||||
const zoomLevel = ref(1)
|
||||
|
||||
const currentImagePath = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return ''
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].path
|
||||
})
|
||||
|
||||
const currentImageName = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return ''
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].name
|
||||
})
|
||||
|
||||
const currentImageSize = computed(() => {
|
||||
if (!props.artwork || !props.artwork.files[props.currentIndex]) {
|
||||
return 0
|
||||
}
|
||||
return props.artwork.files[props.currentIndex].size
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const previousImage = () => {
|
||||
if (props.currentIndex > 0) {
|
||||
emit('update:currentIndex', props.currentIndex - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
if (props.artwork && props.currentIndex < props.artwork.files.length - 1) {
|
||||
emit('update:currentIndex', props.currentIndex + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const goToImage = (index: number) => {
|
||||
emit('update:currentIndex', index)
|
||||
}
|
||||
|
||||
// 缩放控制
|
||||
const zoomIn = () => {
|
||||
zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3)
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5)
|
||||
}
|
||||
|
||||
const resetZoom = () => {
|
||||
zoomLevel.value = 1
|
||||
}
|
||||
|
||||
// 键盘快捷键支持
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (props.show) {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
close()
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
previousImage()
|
||||
break
|
||||
case 'ArrowRight':
|
||||
nextImage()
|
||||
break
|
||||
case '=':
|
||||
case '+':
|
||||
event.preventDefault()
|
||||
zoomIn()
|
||||
break
|
||||
case '-':
|
||||
event.preventDefault()
|
||||
zoomOut()
|
||||
break
|
||||
case '0':
|
||||
event.preventDefault()
|
||||
resetZoom()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听键盘事件
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-viewer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.image-viewer-content {
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.viewer-header h3 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.viewer-zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zoom-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.zoom-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.viewer-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.viewer-image {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
object-fit: contain;
|
||||
transition: transform 0.2s ease;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.viewer-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.image-info p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.image-counter {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.thumbnail-strip {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thumbnail.active {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.thumbnail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.image-viewer-content {
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.viewer-zoom-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.viewer-main {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.thumbnail-strip {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button
|
||||
@click="$emit('change-page', 1)"
|
||||
:disabled="currentPage <= 1"
|
||||
class="page-btn"
|
||||
>
|
||||
首页
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('change-page', currentPage - 1)"
|
||||
:disabled="currentPage <= 1"
|
||||
class="page-btn"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<div class="page-numbers">
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
@click="$emit('change-page', page)"
|
||||
:class="['page-btn', { active: page === currentPage }]"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="$emit('change-page', currentPage + 1)"
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="page-btn"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('change-page', totalPages)"
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="page-btn"
|
||||
>
|
||||
末页
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'change-page', page: number): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = []
|
||||
const maxVisible = 5
|
||||
let start = Math.max(1, props.currentPage - Math.floor(maxVisible / 2))
|
||||
let end = Math.min(props.totalPages, start + maxVisible - 1)
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1)
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="search-panel">
|
||||
<div class="search-filters">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜索作品标题、作者名称..."
|
||||
class="search-input"
|
||||
@input="debounceSearch"
|
||||
/>
|
||||
<button @click="clearSearch" class="clear-btn" v-if="searchQuery">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-controls">
|
||||
<select v-model="sortBy" @change="handleSortChange" class="filter-select">
|
||||
<option value="date">按日期排序</option>
|
||||
<option value="name">按名称排序</option>
|
||||
<option value="size">按大小排序</option>
|
||||
</select>
|
||||
|
||||
<select v-model="filterBy" @change="handleFilterChange" class="filter-select">
|
||||
<option value="all">全部</option>
|
||||
<option value="images">仅图片</option>
|
||||
<option value="videos">仅视频</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
initialQuery?: string
|
||||
initialSort?: string
|
||||
initialFilter?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'search', query: string): void
|
||||
(e: 'sort', sortBy: string): void
|
||||
(e: 'filter', filterBy: string): void
|
||||
(e: 'clear'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
initialQuery: '',
|
||||
initialSort: 'date',
|
||||
initialFilter: 'all'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 响应式数据
|
||||
const searchQuery = ref(props.initialQuery)
|
||||
const sortBy = ref(props.initialSort)
|
||||
const filterBy = ref(props.initialFilter)
|
||||
|
||||
// 防抖搜索
|
||||
let searchTimeout: number
|
||||
const debounceSearch = () => {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
emit('search', searchQuery.value)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
searchQuery.value = ''
|
||||
emit('clear')
|
||||
}
|
||||
|
||||
const handleSortChange = () => {
|
||||
emit('sort', sortBy.value)
|
||||
}
|
||||
|
||||
const handleFilterChange = () => {
|
||||
emit('filter', filterBy.value)
|
||||
}
|
||||
|
||||
// 监听外部查询变化
|
||||
watch(() => props.initialQuery, (newQuery) => {
|
||||
searchQuery.value = newQuery
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-panel {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-filters {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'artists' }"
|
||||
@click="$emit('update:modelValue', 'artists')"
|
||||
>
|
||||
<span class="btn-icon">👥</span>
|
||||
按作者浏览
|
||||
</button>
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'artworks' }"
|
||||
@click="$emit('update:modelValue', 'artworks')"
|
||||
>
|
||||
<span class="btn-icon">🖼️</span>
|
||||
所有作品
|
||||
</button>
|
||||
<button
|
||||
class="view-btn"
|
||||
:class="{ active: modelValue === 'gallery' }"
|
||||
@click="$emit('update:modelValue', 'gallery')"
|
||||
>
|
||||
<span class="btn-icon">🎨</span>
|
||||
画廊模式
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits<Emits>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user