lzw-723/loongyan
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 2 Releases Wiki Activity

前端实现列表紧凑显示
Some checks failed
Dart CI / build (push) Successful in 29s
Details
Docker Build / docker (push) Failing after 12m57s
Details

Browse Source
This commit is contained in:
lzw-723
2026-04-04 20:31:15 +08:00
parent 01cbb287ab
commit eca7e91c9e
5 changed files with 264 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
web/src/lib/components/photo/PhotoCard.svelte
View File

@@ -5,10 +5,11 @@
* @typedef {Object} PhotoCardProps * @typedef {Object} PhotoCardProps
* @property {import('$lib/api/types').Photo} photo * @property {import('$lib/api/types').Photo} photo
* @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality] * @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality]
* @property {boolean} borderLess
*/ */
/** @type {PhotoCardProps} */ /** @type {PhotoCardProps} */
let { photo, onUpgradeQuality } = $props(); let { photo, onUpgradeQuality, borderLess } = $props();
// 使用 $derived 确保响应式更新 // 使用 $derived 确保响应式更新
let previewSrc = $derived(`/api/v1/photo/${photo.id}/preview`); let previewSrc = $derived(`/api/v1/photo/${photo.id}/preview`);
@@ -27,7 +28,7 @@
</script> </script>
<a href={resolve(`/photo/${photo.id}`)} class="photo-card"> <a href={resolve(`/photo/${photo.id}`)} class="photo-card">
<div class="photo-wrapper"> <div class="photo-wrapper" class:photo-borderless={borderLess}>
{#if photo.mimeType?.startsWith('video/')} {#if photo.mimeType?.startsWith('video/')}
<div class="video-indicator">🎬</div> <div class="video-indicator">🎬</div>
<div class="photo-placeholder"> <div class="photo-placeholder">
@@ -48,71 +49,82 @@
/> />
{/if} {/if}
</div> </div>
<p class="photo-name">{photo.fileName}</p> <p class="photo-name" class:photo-name-hide={borderLess}>{photo.fileName}</p>
</a> </a>
<style> <style>
.photo-card { .photo-card {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
.photo-wrapper { .photo-wrapper {
position: relative; position: relative;
aspect-ratio: 1; aspect-ratio: 1;
background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%); background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%);
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} transition: border-radius 0.25s ease-out, margin-bottom 0.25s ease-out;
}
.photo-wrapper img { .photo-borderless {
width: 100%; border-radius: 0;
height: 100%; margin-bottom: 0;
object-fit: cover; box-shadow: none;
transition: transform var(--transition-slow); }
background: var(--color-border);
}
.photo-card:hover .photo-wrapper img { .photo-wrapper img {
transform: scale(1.08); width: 100%;
} height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
background: var(--color-border);
}
.photo-placeholder { .photo-card:hover .photo-wrapper img {
width: 100%; transform: scale(1.08);
height: 100%; }
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
padding: var(--space-md);
text-align: center;
word-break: break-word;
}
.video-indicator { .photo-placeholder {
position: absolute; width: 100%;
top: var(--space-sm); height: 100%;
right: var(--space-sm); display: flex;
background: var(--color-overlay-dark); align-items: center;
color: var(--color-text-inverse); justify-content: center;
padding: 0.35rem var(--space-sm); color: var(--color-text-secondary);
border-radius: var(--radius-md); font-size: var(--font-size-sm);
font-size: var(--font-size-sm); padding: var(--space-md);
z-index: 1; text-align: center;
backdrop-filter: blur(4px); word-break: break-word;
} }
.photo-name { .video-indicator {
font-size: var(--font-size-sm); position: absolute;
color: var(--color-text); top: var(--space-sm);
margin: 0; right: var(--space-sm);
overflow: hidden; background: var(--color-overlay-dark);
text-overflow: ellipsis; color: var(--color-text-inverse);
white-space: nowrap; padding: 0.35rem var(--space-sm);
padding: 0 var(--space-xs); border-radius: var(--radius-md);
} font-size: var(--font-size-sm);
z-index: 1;
backdrop-filter: blur(4px);
}
.photo-name {
font-size: var(--font-size-sm);
color: var(--color-text);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 var(--space-xs);
transition: visibility var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-name-hide {
display: none;
}
</style> </style>

111
web/src/lib/components/photo/PhotoGrid.svelte
View File

@@ -13,6 +13,7 @@
* @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality] * @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality]
* @property {HTMLDivElement | null} [scrollContainer] * @property {HTMLDivElement | null} [scrollContainer]
* @property {HTMLDivElement | null} [loadMoreTrigger] * @property {HTMLDivElement | null} [loadMoreTrigger]
* @property {boolean} borderLess
*/ */
/** @type {PhotoGridProps} */ /** @type {PhotoGridProps} */
@@ -24,7 +25,8 @@
totalPhotos = 0, totalPhotos = 0,
onUpgradeQuality, onUpgradeQuality,
scrollContainer = $bindable(null), scrollContainer = $bindable(null),
loadMoreTrigger = $bindable(null) loadMoreTrigger = $bindable(null),
borderLess
} = $props(); } = $props();
function getVisiblePhotos() { function getVisiblePhotos() {
@@ -36,9 +38,9 @@
<Empty message={m.no_photos()} icon="📷" /> <Empty message={m.no_photos()} icon="📷" />
{:else} {:else}
<div class="photo-scroll-container" bind:this={scrollContainer}> <div class="photo-scroll-container" bind:this={scrollContainer}>
<div class="photo-grid"> <div class="photo-grid" class:photo-grid-borderless={borderLess}>
{#each getVisiblePhotos() as photo (photo.id)} {#each getVisiblePhotos() as photo (photo.id)}
<PhotoCard {photo} {onUpgradeQuality} /> <PhotoCard {photo} {onUpgradeQuality} {borderLess} />
{/each} {/each}
</div> </div>
@@ -59,62 +61,67 @@
{/if} {/if}
<style> <style>
.photo-scroll-container { .photo-scroll-container {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
min-height: 400px; min-height: 400px;
} }
.photo-scroll-container::-webkit-scrollbar { .photo-scroll-container::-webkit-scrollbar {
width: 8px; width: 8px;
} }
.photo-scroll-container::-webkit-scrollbar-track { .photo-scroll-container::-webkit-scrollbar-track {
background: var(--color-bg-tertiary); background: var(--color-bg-tertiary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.photo-scroll-container::-webkit-scrollbar-thumb { .photo-scroll-container::-webkit-scrollbar-thumb {
background: var(--color-border); background: var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.photo-scroll-container::-webkit-scrollbar-thumb:hover { .photo-scroll-container::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary); background: var(--color-text-tertiary);
} }
.photo-grid { .photo-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md); gap: var(--space-md);
padding-bottom: var(--space-xl); padding-bottom: var(--space-xl);
} transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) { .photo-grid-borderless {
.photo-grid { gap: 0;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
}
.load-more-trigger, @media (min-width: 768px) {
.loading-trigger { .photo-grid {
text-align: center; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
padding: var(--space-xl); }
} }
.loading-more { .load-more-trigger,
display: inline-block; .loading-trigger {
color: var(--color-text-secondary); text-align: center;
font-size: var(--font-size-base); padding: var(--space-xl);
} }
.load-complete { .loading-more {
text-align: center; display: inline-block;
padding: var(--space-xl); color: var(--color-text-secondary);
color: var(--color-success); font-size: var(--font-size-base);
font-size: var(--font-size-sm); }
font-weight: var(--font-weight-medium);
} .load-complete {
text-align: center;
padding: var(--space-xl);
color: var(--color-success);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
</style> </style>

95
web/src/lib/components/ui/SegmentedControl.svelte Normal file
View File

@@ -0,0 +1,95 @@
<script>
/**
* @typedef {Object} ToggleOptionItem
* @property {string} value - 选项值
* @property {string} label - 显示文字
* @property {string} [icon] - 图标（emoji 或文字图标）
*/
/**
* @typedef {Object} SegmentedControlProps
* @property {string} value - 当前选中的值
* @property {(value: string) => void} onchange
* @property {ToggleOptionItem[]} options - 选项列表
* @property {'small' | 'medium' | 'large'} [size]
*/
/** @type {SegmentedControlProps} */
let { value, onchange, options, size = 'medium' } = $props();
</script>
<div class="segmented-control size-{size}" role="group">
{#each options as option (option.value)}
<button
type="button"
class="option"
class:active={value === option.value}
onclick={() => onchange(option.value)}
aria-pressed={value === option.value}
>
{#if option.icon}
<span class="icon">{option.icon}</span>
{/if}
<span class="label">{option.label}</span>
</button>
{/each}
</div>
<style>
.segmented-control {
display: inline-flex;
background: var(--color-bg-tertiary);
border-radius: var(--radius-md);
padding: 2px;
gap: 2px;
position: relative;
}
.option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 0.375rem 0.75rem;
border: none;
border-radius: calc(var(--radius-md) - 2px);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-normal);
white-space: nowrap;
}
.option:hover:not(:disabled) {
color: var(--color-text);
}
.option.active {
background: var(--color-bg);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.icon {
font-size: 1em;
line-height: 1;
}
/* Sizes */
.size-small .option {
padding: 0.25rem 0.5rem;
font-size: var(--font-size-xs);
}
.size-medium .option {
padding: 0.375rem 0.75rem;
font-size: var(--font-size-sm);
}
.size-large .option {
padding: 0.5rem 1rem;
font-size: var(--font-size-base);
}
</style>

1
web/src/lib/components/ui/index.js
View File

@@ -4,3 +4,4 @@ export { default as Container } from './Container.svelte';
export { default as Grid } from './Grid.svelte'; export { default as Grid } from './Grid.svelte';
export { default as Empty } from './Empty.svelte'; export { default as Empty } from './Empty.svelte';
export { default as Loading } from './Loading.svelte'; export { default as Loading } from './Loading.svelte';
export { default as SegmentedControl } from './SegmentedControl.svelte';

40
web/src/routes/album/[id]/+page.svelte
View File

@@ -5,7 +5,7 @@
import { albums, back, photo_count, loading } from '$lib/paraglide/messages'; import { albums, back, photo_count, loading } from '$lib/paraglide/messages';
import { resolve } from '$app/paths'; import { resolve } from '$app/paths';
import { SvelteSet } from 'svelte/reactivity'; import { SvelteSet } from 'svelte/reactivity';
import { Container, PageHeader, BackLink, PhotoGrid, Empty } from '$lib/components'; import { Container, PageHeader, BackLink, PhotoGrid, Empty, SegmentedControl } from '$lib/components';
let { data } = $props(); let { data } = $props();
@@ -16,6 +16,7 @@
let hasMore = $derived(data.hasMore ?? false); let hasMore = $derived(data.hasMore ?? false);
// 所有已加载的照片（支持分页追加） // 所有已加载的照片（支持分页追加）
/** @type {import('$lib/api/types').Photo[]} */
let allPhotos = $state([]); let allPhotos = $state([]);
// 分批加载配置 - 前端虚拟滚动 // 分批加载配置 - 前端虚拟滚动
@@ -36,6 +37,13 @@
// 已升级质量的图片 ID 集合，避免重复升级 // 已升级质量的图片 ID 集合，避免重复升级
let upgradedPhotoIds = new SvelteSet(); let upgradedPhotoIds = new SvelteSet();
let viewMode = $state('card');
const viewOptions = [
{ value: 'card', label: '卡片', icon: '🖼️' },
{ value: 'borderless', label: '紧凑', icon: '📐' }
];
// 监听数据变化，重置状态 // 监听数据变化，重置状态
$effect(() => { $effect(() => {
if (data.photos) { if (data.photos) {
@@ -143,11 +151,22 @@
<Container size="wide"> <Container size="wide">
<PageHeader <PageHeader
title={album?.name || loading()} title={album?.name || loading()}
subtitle={album ? photo_count({ count: data.totalPhotos || allPhotos.length }) : undefined}
> >
<BackLink href={resolve('/')} text={back()} /> <BackLink href={resolve('/')} text={back()} />
</PageHeader> </PageHeader>
{#if album && allPhotos.length > 0}
<div class="subtitle-bar">
<span class="photo-count">{photo_count({ count: data.totalPhotos || allPhotos.length })}</span>
<SegmentedControl
value={viewMode}
onchange={(v) => viewMode = v}
options={viewOptions}
size="small"
/>
</div>
{/if}
{#if !album || (allPhotos.length === 0 && !hasMore)} {#if !album || (allPhotos.length === 0 && !hasMore)}
<Empty message={m.no_photos()} icon="📷" /> <Empty message={m.no_photos()} icon="📷" />
{:else} {:else}
@@ -160,6 +179,21 @@
onUpgradeQuality={upgradePhotoQuality} onUpgradeQuality={upgradePhotoQuality}
bind:scrollContainer bind:scrollContainer
bind:loadMoreTrigger bind:loadMoreTrigger
borderLess={viewMode === 'borderless'}
/> />
{/if} {/if}
</Container> </Container>
<style>
.subtitle-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-md);
}
.photo-count {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
}
</style>