seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化 UI 组件样式与布局并规范化 Hugo 头部解析

Browse Source
This commit is contained in:
seahi committed 2026-08-07 12:53:43 +08:00
1 parent 879e8e0692
commit e54ef0202d
7 files changed
+1036 -769
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app.css
+892 -717
View File
File diff suppressed because it is too large. Load diff
src/app.d.ts
Vendored
+3 -6
View File
@@ -3,20 +3,17 @@
declare global {
namespace App {
interface Platform {
env: {
DB: D1Database;
R2: R2Bucket;
} & Env;
env: Env;
context: ExecutionContext;
caches: CacheStorage & { default: Cache };
cf?: IncomingRequestCfProperties
cf?: IncomingRequestCfProperties;
}
// interface Error {}
interface Locals {
user?: {
email: string;
}
};
}
// interface PageData {}
// interface PageState {}
src/app.html
+10 -3
View File
@@ -4,9 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet">
<link id="stylesheet_noto" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
rel="stylesheet"
/>
<link
id="stylesheet_noto"
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
src/lib/components/Toast.svelte
+43 -4
View File
@@ -12,17 +12,47 @@
out:fade={{ duration: 200 }}
>
{#if msg.type === 'success'}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
<svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
{:else if msg.type === 'error'}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
<svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
{:else}
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
<svg
viewBox="0 0 24 24"
width="18"
height="18"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="toast-icon"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -31,7 +61,16 @@
<span>{msg.text}</span>
<button class="toast-close" onclick={() => toastState.remove(msg.id)} aria-label="Close">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<svg
viewBox="0 0 24 24"
width="14"
height="14"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
src/lib/components/admin/FeaturedImagePicker.svelte
+61 -21
View File
@@ -1,7 +1,8 @@
<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { resolve } from '$app/paths';
import { addToast } from '$lib/stores/toast.svelte';
import { Fancybox } from '@fancyapps/ui/dist/index.js';
import '@fancyapps/ui/dist/fancybox/fancybox.css';
import { onMount } from 'svelte';
import Tabs from './Tabs.svelte';
@@ -22,10 +23,12 @@
}>();
let pickerElement = $state<HTMLDivElement>();
let previewHeightRatio = $derived((() => {
const [width, height] = aspectRatio.split('/').map(Number);
return width > 0 && height > 0 ? height / width : 9 / 16;
})());
let previewHeightRatio = $derived(
(() => {
const [width, height] = aspectRatio.split('/').map(Number);
return width > 0 && height > 0 ? height / width : 9 / 16;
})()
);
let activeTab = $state('url');
let isUploading = $state(false);
@@ -40,9 +43,19 @@
const selector = '[data-fancybox="featured-image-preview"]';
const container = pickerElement;
Fancybox.bind(container, selector, {});
let FancyboxInstance: unknown = null;
return () => Fancybox.unbind(container, selector);
import('@fancyapps/ui/dist/index.js').then(async ({ Fancybox }) => {
await import('@fancyapps/ui/dist/fancybox/fancybox.css');
FancyboxInstance = Fancybox;
Fancybox.bind(container, selector, {});
});
return () => {
if (FancyboxInstance) {
(FancyboxInstance as any).unbind(container, selector);
}
};
});
async function loadLibrary(reset = false) {
@@ -56,7 +69,8 @@
isLoadingLibrary = true;
try {
const res = await fetch(`/admin/api/images?page=${page}&limit=12`);
const data = await res.json() as any;
const data = (await res.json()) as any;
if (data.success) {
images = [...images, ...data.images];
if (page >= data.pagination.totalPages) {
@@ -65,7 +79,7 @@
page++;
}
}
} catch (err) {
} catch (err: any) {
console.error(err);
addToast('加载图库失败', 'error');
} finally {
@@ -94,7 +108,8 @@
method: 'POST',
body: formData
});
const data = await res.json() as any;
const data = (await res.json()) as any;
if (data.success) {
cover = data.url;
addToast('特色图上传成功', 'success');
@@ -102,7 +117,7 @@
} else {
addToast(data.error || '上传失败', 'error');
}
} catch (err) {
} catch (err: any) {
console.error(err);
addToast('网络错误，上传失败', 'error');
} finally {
@@ -126,7 +141,7 @@
{#if previewable}
<a
class="cover-preview-link"
href={cover}
href={resolve(cover)}
data-fancybox="featured-image-preview"
data-caption={title || '特色图'}
aria-label="查看特色图大图"
@@ -137,7 +152,7 @@
{:else}
<img src={cover} alt="图片预览" />
{/if}
<button type="button" class="btn-clear" onclick={() => cover = ''}>移除</button>
<button type="button" class="btn-clear" onclick={() => (cover = '')}>移除</button>
</div>
{/if}
@@ -155,26 +170,49 @@
<div class="tab-content">
{#if activeTab === 'url'}
<input type="url" placeholder="输入或粘贴图片链接" bind:value={cover} class="full-width-input" />
<input
type="url"
placeholder="输入或粘贴图片链接"
bind:value={cover}
class="full-width-input"
/>
{:else if activeTab === 'upload'}
<div class="upload-area" class:disabled={isUploading}>
<label>
<span>{isUploading ? '正在上传...' : '点击选择图片上传'}</span>
<input type="file" accept="image/*" onchange={handleUpload} disabled={isUploading} style="display: none" />
<input
type="file"
accept="image/*"
onchange={handleUpload}
disabled={isUploading}
style="display: none"
/>
</label>
</div>
{:else if activeTab === 'library'}
<div class="library-grid">
{#each images as img}
{#each images as img (img.id || img)}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="library-item" onclick={() => { cover = img.url; activeTab = 'url'; }} title={img.filename}>
<div
class="library-item"
onclick={() => {
cover = img.url;
activeTab = 'url';
}}
title={img.filename}
>
<img src={img.url} alt={img.filename} loading="lazy" />
</div>
{/each}
</div>
{#if hasMore}
<button type="button" class="btn-load-more" onclick={() => loadLibrary()} disabled={isLoadingLibrary}>
<button
type="button"
class="btn-load-more"
onclick={() => loadLibrary()}
disabled={isLoadingLibrary}
>
{isLoadingLibrary ? '加载中...' : '加载更多'}
</button>
{/if}
@@ -259,7 +297,9 @@
font-family: inherit;
box-sizing: border-box;
border-radius: 0;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.full-width-input:focus {
@@ -280,7 +320,7 @@
}
.upload-area label:hover {
background: rgba(0,0,0,0.03);
background: rgba(0, 0, 0, 0.03);
}
.upload-area.disabled label {
src/lib/components/admin/Tabs.svelte
+4 -4
View File
@@ -21,8 +21,8 @@
}
</script>
<div class="tabs-header" class:full-width={fullWidth} class:small={small}>
{#each tabs as tab}
<div class="tabs-header" class:full-width={fullWidth} class:small>
{#each tabs as tab (tab.id || tab)}
<button
type="button"
class="tab-btn"
@@ -38,7 +38,7 @@
.tabs-header {
display: flex;
gap: 20px;
border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1));
border-bottom: 2px solid var(--border-color, rgba(0, 0, 0, 0.1));
margin-bottom: 20px;
}
@@ -67,7 +67,7 @@
font-size: 1rem;
font-family: inherit;
font-weight: 600;
color: var(--text-muted, rgba(0,0,0,0.5));
color: var(--text-muted, rgba(0, 0, 0, 0.5));
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
src/lib/hugoParser.ts
+23 -14
View File
@@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { parse as parseToml } from 'smol-toml';
import { parse as parseYaml } from 'yaml';
@@ -25,7 +27,7 @@ function parseOrCurrentDate(val: unknown): string {
return new Date().toISOString();
}
return dateObj.toISOString();
} catch {
} catch (err: any) {
return new Date().toISOString();
}
}
@@ -75,7 +77,7 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim();
meta = parseToml(frontmatter) as Record<string, unknown>;
meta = parseToml(frontmatter) as Record<string, any>;
}
}
// 2. 检识常规 YAML (以 --- 开头包络)
@@ -84,16 +86,20 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
if (endIndex !== -1) {
const frontmatter = text.substring(3, endIndex).trim();
bodyContent = text.substring(endIndex + 4).trim();
meta = parseYaml(frontmatter) as Record<string, unknown>;
meta = parseYaml(frontmatter) as Record<string, any>;
}
}
} catch (err) {
console.error('解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:', err);
} catch (err: any) {
console.error(
'解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:',
err
);
// 当解析受卡出错，空字典依然不阻挠对下方日期与稿费正文字面的顺利捕拾
}
// 取值并完成映射：除以下对应参数处，诸如 draft/twemoji/lightgallery 等全在空载转储里随水蒸丢！
const title = typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName;
const title =
typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName;
let slug = typeof meta.slug === 'string' ? meta.slug.trim() : '';
if (!slug) {
@@ -108,17 +114,20 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
}
// 特色图片字段识别（首挑 featuredImage，也兼备处理 cover/image）
const cover = typeof meta.featuredImage === 'string'
? meta.featuredImage.trim()
: typeof meta.cover === 'string'
? meta.cover.trim()
: typeof meta.image === 'string'
? meta.image.trim()
: '';
const cover =
typeof meta.featuredImage === 'string'
? meta.featuredImage.trim()
: typeof meta.cover === 'string'
? meta.cover.trim()
: typeof meta.image === 'string'
? meta.image.trim()
: '';
// 时间字段转化：严格按需求约定“一旦转换错漏或是全无，采用目前时刻填满”
const published_at = parseOrCurrentDate(meta.date || meta.published_at);
const updated_at = parseOrCurrentDate(meta.lastmod || meta.updated_at || meta.date || meta.published_at);
const updated_at = parseOrCurrentDate(
meta.lastmod || meta.updated_at || meta.date || meta.published_at
);
return {
title: title || '无名小贴',