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 37s
Details
Web CI / lint-test-build (push) Failing after 21s
Details

Browse Source
This commit is contained in:
lzw-723
2026-04-09 21:34:33 +08:00
parent b05e77aae1
commit 710a0b6f8e
10 changed files with 275 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/README.md
View File

@@ -23,18 +23,18 @@ Loongyan 相册系统的前端应用，基于 [SvelteKit](https://kit.svelte.dev
## 🛠️ 技术栈
| 技术 | 说明 |
|------|------|
| [Svelte 5](https://svelte.dev/) | 前端框架（Runes 模式） |
| [SvelteKit 2](https://kit.svelte.dev/) | 全栈框架 |
| [Vite 7](https://vitejs.dev/) | 构建工具 |
| [Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) | 国际化 |
| [Better Auth](https://www.better-auth.com/) | 用户认证 |
| [Drizzle ORM](https://orm.drizzle.team/) | 数据库 ORM |
| [SQLite](https://www.sqlite.org/) | 嵌入式数据库 |
| [Vitest](https://vitest.dev/) | 单元测试 |
| [Playwright](https://playwright.dev/) | 浏览器测试 |
| [mdsvex](https://mdsvex.pngwn.io/) | Markdown 组件 |
| 技术 | 说明 |
| ------------------------------------------------------------------------ | ---------------------- |
| [Svelte 5](https://svelte.dev/) | 前端框架（Runes 模式） |
| [SvelteKit 2](https://kit.svelte.dev/) | 全栈框架 |
| [Vite 7](https://vitejs.dev/) | 构建工具 |
| [Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) | 国际化 |
| [Better Auth](https://www.better-auth.com/) | 用户认证 |
| [Drizzle ORM](https://orm.drizzle.team/) | 数据库 ORM |
| [SQLite](https://www.sqlite.org/) | 嵌入式数据库 |
| [Vitest](https://vitest.dev/) | 单元测试 |
| [Playwright](https://playwright.dev/) | 浏览器测试 |
| [mdsvex](https://mdsvex.pngwn.io/) | Markdown 组件 |
---
@@ -139,14 +139,14 @@ const API_BASE = '/api/v1';
### 可用 API 方法
| 方法 | 说明 |
|------|------|
| `getAlbums()` | 获取所有相册 |
| `getAlbum(id)` | 获取相册详情 |
| 方法 | 说明 |
| ------------------------- | -------------- |
| `getAlbums()` | 获取所有相册 |
| `getAlbum(id)` | 获取相册详情 |
| `getAlbumPhotos(albumId)` | 获取相册内照片 |
| `getPhoto(id)` | 获取照片详情 |
| `getPhotoFileUrl(id)` | 获取原图 URL |
| `getPhotoPreviewUrl(id)` | 获取预览图 URL |
| `getPhoto(id)` | 获取照片详情 |
| `getPhotoFileUrl(id)` | 获取原图 URL |
| `getPhotoPreviewUrl(id)` | 获取预览图 URL |
---
@@ -179,24 +179,24 @@ pnpm check:watch
### 基础 UI 组件
| 组件 | 说明 |
|------|------|
| `Button` | 按钮组件 |
| `Card` | 卡片容器 |
| `Container` | 页面容器 |
| `Grid` | 网格布局 |
| `Loading` | 加载状态 |
| `Empty` | 空状态提示 |
| 组件 | 说明 |
| ----------- | ---------- |
| `Button` | 按钮组件 |
| `Card` | 卡片容器 |
| `Container` | 页面容器 |
| `Grid` | 网格布局 |
| `Loading` | 加载状态 |
| `Empty` | 空状态提示 |
### 业务组件
| 组件 | 说明 |
|------|------|
| `AlbumCard` | 相册卡片 |
| `AlbumList` | 相册列表 |
| `PhotoCard` | 照片卡片 |
| `PhotoGrid` | 照片网格 |
| `BackLink` | 返回链接 |
| 组件 | 说明 |
| ------------ | -------- |
| `AlbumCard` | 相册卡片 |
| `AlbumList` | 相册列表 |
| `PhotoCard` | 照片卡片 |
| `PhotoGrid` | 照片网格 |
| `BackLink` | 返回链接 |
| `PageHeader` | 页面标题 |
---
@@ -228,7 +228,7 @@ pnpm check:watch
```svelte
<script>
import * as m from '$lib/paraglide/messages';
import * as m from '$lib/paraglide/messages';
</script>
<h1>{m.welcome()}</h1>
@@ -262,16 +262,16 @@ pnpm drizzle-kit migrate
## 📜 脚本命令
| 命令 | 说明 |
|------|------|
| `pnpm dev` | 启动开发服务器 |
| `pnpm build` | 构建生产版本 |
| `pnpm preview` | 预览生产构建 |
| `pnpm test` | 运行测试 |
| `pnpm test:unit` | 运行单元测试 |
| `pnpm check` | 类型检查 |
| `pnpm lint` | 代码检查 |
| `pnpm format` | 格式化代码 |
| 命令 | 说明 |
| ------------------ | --------------- |
| `pnpm dev` | 启动开发服务器 |
| `pnpm build` | 构建生产版本 |
| `pnpm preview` | 预览生产构建 |
| `pnpm test` | 运行测试 |
| `pnpm test:unit` | 运行单元测试 |
| `pnpm check` | 类型检查 |
| `pnpm lint` | 代码检查 |
| `pnpm format` | 格式化代码 |
| `pnpm auth:schema` | 生成认证 Schema |
---
@@ -304,9 +304,9 @@ pnpm add -D @sveltejs/adapter-static
import adapter from '@sveltejs/adapter-node';
const config = {
kit: {
adapter: adapter()
}
kit: {
adapter: adapter()
}
};
```
@@ -322,4 +322,4 @@ const config = {
<div align="center">
<sub>Made with ❤️ using SvelteKit</sub>
</div>
</div>

7
web/src/hooks.server.js
View File

@@ -49,7 +49,10 @@ const handleApiProxy = async ({ event, resolve }) => {
const backendResponse = await fetch(targetUrl, {
method: request.method,
headers: request.headers,
body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.arrayBuffer() : undefined
body:
request.method !== 'GET' && request.method !== 'HEAD'
? await request.arrayBuffer()
: undefined
});
// 返回后端响应
@@ -96,4 +99,4 @@ const handleCache = async ({ event, resolve }) => {
return newResponse;
};
export const handle = sequence(handleApiProxy, handleParaglide, handleBetterAuth, handleCache);
export const handle = sequence(handleApiProxy, handleParaglide, handleBetterAuth, handleCache);

6
web/src/lib/api/client.js
View File

@@ -50,11 +50,9 @@ export async function getAlbumPhotos(albumId, options = {}) {
if (options.size) params.set('size', String(options.size));
if (options.sort) params.set('sort', String(options.sort));
if (options.order) params.set('order', String(options.order));
const query = params.toString();
const endpoint = query
? `/album/${albumId}/photo?${query}`
: `/album/${albumId}/photo`;
const endpoint = query ? `/album/${albumId}/photo?${query}` : `/album/${albumId}/photo`;
return fetchApi(endpoint);
}

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

@@ -13,7 +13,15 @@
*/
/** @type {PhotoCardProps} */
let { photo, onUpgradeQuality, borderLess = false, waterfall = false, index = 0, sortMode = 'fileName', sortOrder = 'asc' } = $props();
let {
photo,
onUpgradeQuality,
borderLess = false,
waterfall = false,
index = 0,
sortMode = 'fileName',
sortOrder = 'asc'
} = $props();
// 使用 $derived 确保响应式更新
let previewSrc = $derived(`/api/v1/photo/${photo.id}/preview`);
@@ -23,9 +31,7 @@
// 根据原始宽高比计算瀑布流显示比例，防止图片加载前容器塌陷
let aspectRatioStyle = $derived(
waterfall && photo.width && photo.height
? `${photo.width} / ${photo.height}`
: ''
waterfall && photo.width && photo.height ? `${photo.width} / ${photo.height}` : ''
);
// 砖块模式：交错延迟（按网格行顺序）；瀑布模式：同时入场（避免列填充顺序与延迟不匹配）
@@ -44,7 +50,13 @@
}
</script>
<a href={photoLink} class="photo-card" class:photo-card-waterfall={waterfall} class:photo-card-compact-waterfall={borderLess && waterfall} style={`--wf-aspect: ${aspectRatioStyle}; --wf-delay: ${animationDelay};`}>
<a
href={photoLink}
class="photo-card"
class:photo-card-waterfall={waterfall}
class:photo-card-compact-waterfall={borderLess && waterfall}
style={`--wf-aspect: ${aspectRatioStyle}; --wf-delay: ${animationDelay};`}
>
<div class="photo-wrapper" class:photo-borderless={borderLess} class:photo-waterfall={waterfall}>
{#if photo.mimeType?.startsWith('video/')}
<div class="video-indicator">🎬</div>
@@ -70,13 +82,13 @@
</a>
<style>
.photo-card {
display: block;
text-decoration: none;
color: inherit;
.photo-card {
display: block;
text-decoration: none;
color: inherit;
animation: card-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
animation-delay: var(--wf-delay, 0ms);
}
}
@keyframes card-enter {
from {
@@ -100,16 +112,18 @@
margin-bottom: 0;
}
.photo-wrapper {
position: relative;
aspect-ratio: 1;
background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-sm);
box-shadow: var(--shadow-sm);
transition: border-radius 0.25s ease-out, margin-bottom 0.25s ease-out;
}
.photo-wrapper {
position: relative;
aspect-ratio: 1;
background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-sm);
box-shadow: var(--shadow-sm);
transition:
border-radius 0.25s ease-out,
margin-bottom 0.25s ease-out;
}
.photo-borderless {
border-radius: 0;
@@ -123,13 +137,13 @@
height: auto;
}
.photo-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
background: var(--color-border);
}
.photo-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
background: var(--color-border);
}
/* 瀑布流模式下图片高度自适应 */
.photo-waterfall img {
@@ -138,51 +152,51 @@
height: auto;
}
.photo-card:hover .photo-wrapper img {
transform: scale(1.08);
}
.photo-card:hover .photo-wrapper img {
transform: scale(1.08);
}
.photo-placeholder {
width: 100%;
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;
}
.photo-placeholder {
width: 100%;
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;
}
/* 瀑布流模式下 placeholder 默认 4:3 */
.photo-waterfall .photo-placeholder {
aspect-ratio: 4/3;
}
.video-indicator {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
background: var(--color-overlay-dark);
color: var(--color-text-inverse);
padding: 0.35rem var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
z-index: 1;
backdrop-filter: blur(4px);
}
.video-indicator {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
background: var(--color-overlay-dark);
color: var(--color-text-inverse);
padding: 0.35rem var(--space-sm);
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);
.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;
}

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

@@ -104,7 +104,14 @@
{#each splitToColumns(getVisiblePhotos(), columnCount) as col}
<div class="waterfall-column">
{#each col as photo (photo.id)}
<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} {sortMode} {sortOrder} />
<PhotoCard
{photo}
{onUpgradeQuality}
{borderLess}
{waterfall}
{sortMode}
{sortOrder}
/>
{/each}
</div>
{/each}
@@ -112,7 +119,15 @@
{:else}
<div class="photo-grid" class:photo-grid-borderless={borderLess}>
{#each getVisiblePhotos() as photo, i (photo.id)}
<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} index={i} {sortMode} {sortOrder} />
<PhotoCard
{photo}
{onUpgradeQuality}
{borderLess}
{waterfall}
index={i}
{sortMode}
{sortOrder}
/>
{/each}
</div>
{/if}
@@ -135,98 +150,98 @@
{/if}
<style>
.photo-scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
min-height: 400px;
}
.photo-scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
min-height: 400px;
}
.photo-scroll-container::-webkit-scrollbar {
width: 8px;
}
.photo-scroll-container::-webkit-scrollbar {
width: 8px;
}
.photo-scroll-container::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
.photo-scroll-container::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
.photo-scroll-container::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-sm);
}
.photo-scroll-container::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-sm);
}
.photo-scroll-container::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
.photo-scroll-container::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md);
padding-bottom: var(--space-xl);
transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md);
padding-bottom: var(--space-xl);
transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-grid-borderless {
gap: 0;
}
.photo-grid-borderless {
gap: 0;
}
/* 瀑布流布局：Flex 列分栏 */
.photo-grid-waterfall {
display: flex;
gap: var(--space-md);
padding-bottom: var(--space-xl);
}
/* 瀑布流布局：Flex 列分栏 */
.photo-grid-waterfall {
display: flex;
gap: var(--space-md);
padding-bottom: var(--space-xl);
}
.photo-grid-waterfall.photo-grid-borderless {
gap: 0;
}
.photo-grid-waterfall.photo-grid-borderless {
gap: 0;
}
.waterfall-column {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.waterfall-column {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.photo-grid-waterfall .waterfall-column > :global(.photo-card) {
break-inside: avoid;
margin-bottom: var(--space-md);
}
.photo-grid-waterfall .waterfall-column > :global(.photo-card) {
break-inside: avoid;
margin-bottom: var(--space-md);
}
.photo-grid-waterfall .waterfall-column > :global(.photo-card):last-child {
margin-bottom: 0;
}
.photo-grid-waterfall .waterfall-column > :global(.photo-card):last-child {
margin-bottom: 0;
}
.photo-grid-waterfall.photo-grid-borderless .waterfall-column > :global(.photo-card) {
margin-bottom: 0;
}
.photo-grid-waterfall.photo-grid-borderless .waterfall-column > :global(.photo-card) {
margin-bottom: 0;
}
@media (min-width: 768px) {
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (min-width: 768px) {
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
.load-more-trigger,
.loading-trigger {
text-align: center;
padding: var(--space-xl);
}
.load-more-trigger,
.loading-trigger {
text-align: center;
padding: var(--space-xl);
}
.loading-more {
display: inline-block;
color: var(--color-text-secondary);
font-size: var(--font-size-base);
}
.loading-more {
display: inline-block;
color: var(--color-text-secondary);
font-size: var(--font-size-base);
}
.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);
}
.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>

3
web/src/lib/styles/theme.css
View File

@@ -55,7 +55,8 @@
--radius-full: 9999px;
/* ========== Typography ========== */
--font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family:
'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */

2
web/src/routes/album/[id]/+page.server.js
View File

@@ -33,7 +33,7 @@ export async function load({ params, fetch, url }) {
// 检测后端是否返回了分页信息
const hasMore = photos?.items
? (photos.page * photos.size) < photos.total
? photos.page * photos.size < photos.total
: photos?.length === pageSize;
const totalPhotos = photos?.total ?? photos?.length ?? 0;

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

@@ -2,15 +2,31 @@
import { page } from '$app/state';
import { browser } from '$app/environment';
import { m } from '$lib/paraglide/messages';
import { albums, back, photo_count, loading,
style_card, style_compact,
layout_grid, layout_waterfall,
sort_name, sort_time, sort_size,
sort_asc, sort_desc
import {
albums,
back,
photo_count,
loading,
style_card,
style_compact,
layout_grid,
layout_waterfall,
sort_name,
sort_time,
sort_size,
sort_asc,
sort_desc
} from '$lib/paraglide/messages';
import { resolve } from '$app/paths';
import { SvelteSet } from 'svelte/reactivity';
import { Container, PageHeader, BackLink, PhotoGrid, Empty, SegmentedControl } from '$lib/components';
import {
Container,
PageHeader,
BackLink,
PhotoGrid,
Empty,
SegmentedControl
} from '$lib/components';
import { goto } from '$app/navigation';
let { data } = $props();
@@ -49,9 +65,11 @@
let layoutMode = $state('grid');
// 排序模式
let sortMode = $state(page.data.album ? (page.url.searchParams.get('sort') || 'fileName') : 'fileName');
let sortMode = $state(
page.data.album ? page.url.searchParams.get('sort') || 'fileName' : 'fileName'
);
// 排序方向
let sortOrder = $state(page.data.album ? (page.url.searchParams.get('order') || 'asc') : 'asc');
let sortOrder = $state(page.data.album ? page.url.searchParams.get('order') || 'asc' : 'asc');
const styleOptions = $derived([
{ value: 'card', label: style_card(), icon: '🖼️' },
@@ -133,7 +151,7 @@
allPhotos = [...allPhotos, ...newPhotos];
// 根据后端返回的 total 判断是否还有更多
const total = newData.totalPhotos ?? 0;
hasMore = (currentPage * PAGE_SIZE) < total;
hasMore = currentPage * PAGE_SIZE < total;
displayedCount += BATCH_SIZE;
}
} catch (error) {
@@ -187,38 +205,43 @@
</svelte:head>
<Container size="wide">
<PageHeader
title={album?.name || loading()}
>
<PageHeader title={album?.name || loading()}>
<BackLink href={resolve('/')} text={back()} />
</PageHeader>
{#if album && allPhotos.length > 0}
<div class="subtitle-bar">
<span class="photo-count">{photo_count({ count: data.totalPhotos || allPhotos.length })}</span>
<span class="photo-count">{photo_count({ count: data.totalPhotos || allPhotos.length })}</span
>
<div class="controls">
<SegmentedControl
value={styleMode}
onchange={(v) => styleMode = v}
onchange={(v) => (styleMode = v)}
options={styleOptions}
size="small"
/>
<SegmentedControl
value={layoutMode}
onchange={(v) => layoutMode = v}
onchange={(v) => (layoutMode = v)}
options={layoutOptions}
size="small"
/>
<SegmentedControl
value={sortMode}
onchange={(v) => { sortMode = v; applySort(); }}
onchange={(v) => {
sortMode = v;
applySort();
}}
options={sortOptions}
size="small"
/>
<button
class="sort-order-toggle"
type="button"
onclick={() => { sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; applySort(); }}
onclick={() => {
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
applySort();
}}
aria-label={sortOrder === 'asc' ? sort_desc() : sort_asc()}
>
<span class="sort-icon">{sortOrder === 'asc' ? '↑' : '↓'}</span>
@@ -241,8 +264,8 @@
bind:loadMoreTrigger
borderLess={styleMode === 'borderless'}
waterfall={layoutMode === 'waterfall'}
sortMode={sortMode}
sortOrder={sortOrder}
{sortMode}
{sortOrder}
/>
{/if}
</Container>

2
web/src/routes/photo/[id]/+page.server.js
View File

@@ -37,7 +37,7 @@ export async function load({ params, fetch, url }) {
`/album/${photo.albumId}/photo?sort=${sort}&order=${order}`,
fetch
);
const photos = Array.isArray(albumPhotos) ? albumPhotos : albumPhotos?.items ?? [];
const photos = Array.isArray(albumPhotos) ? albumPhotos : (albumPhotos?.items ?? []);
if (photos.length > 0) {
const index = photos.findIndex((p) => String(p.id) === String(photoId));

2
web/svelte.config.js
View File

@@ -16,4 +16,4 @@ const config = {
extensions: ['.svelte', '.svx']
};
export default config;
export default config;