From 59e036af0e158b6bd7d1e65777cc22e747e4fe34 Mon Sep 17 00:00:00 2001 From: seaHi Date: Wed, 29 Jul 2026 23:03:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E7=89=B9=E8=89=B2=E5=9B=BE=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=90=8E=E5=8F=B0=E5=9B=BE=E5=BA=93=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- schema.sql | 1 + src/app.css | 35 +++ .../admin/FeaturedImagePicker.svelte | 264 ++++++++++++++++++ src/lib/components/admin/Tabs.svelte | 85 ++++++ src/routes/+page.server.ts | 2 +- src/routes/+page.svelte | 7 +- src/routes/admin/api/images/+server.ts | 53 ++++ src/routes/admin/api/upload/+server.ts | 66 +++++ src/routes/admin/files/+page.svelte | 17 +- src/routes/admin/posts/[id]/+page.server.ts | 9 +- src/routes/admin/posts/[id]/+page.svelte | 11 +- src/routes/admin/posts/new/+page.server.ts | 7 +- src/routes/admin/posts/new/+page.svelte | 15 +- src/routes/admin/settings/+page.svelte | 44 +-- src/routes/posts/[slug]/+page.server.ts | 13 +- src/routes/posts/[slug]/+page.svelte | 5 + 16 files changed, 568 insertions(+), 66 deletions(-) create mode 100644 src/lib/components/admin/FeaturedImagePicker.svelte create mode 100644 src/lib/components/admin/Tabs.svelte create mode 100644 src/routes/admin/api/images/+server.ts create mode 100644 src/routes/admin/api/upload/+server.ts diff --git a/schema.sql b/schema.sql index 6e13c23..0755e31 100644 --- a/schema.sql +++ b/schema.sql @@ -29,6 +29,7 @@ CREATE TABLE posts ( category_id INTEGER, published_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP, + cover TEXT, FOREIGN KEY (author_id) REFERENCES users(id), FOREIGN KEY (category_id) REFERENCES categories(id) ON DELETE SET NULL ); diff --git a/src/app.css b/src/app.css index b8424fd..8f37ef6 100644 --- a/src/app.css +++ b/src/app.css @@ -1189,3 +1189,38 @@ footer section p:first-child { content: "#"; margin-right: 2px; } + +/* Featured Image Styles */ +.post-cover { + width: 100%; + height: 300px; + overflow: hidden; + border-bottom: 1px dashed var(--line-color, rgba(0,0,0,0.1)); +} + +.post-cover img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.5s ease; +} + +.card-link:hover .post-cover img { + transform: scale(1.03); +} + +.article-content.has-cover .content-wrap { + padding-top: 20px; +} + +.detail-cover { + height: 400px; + border-bottom: none; + border-radius: 8px; + margin-bottom: 30px; +} + +.detail-cover img { + border-radius: 8px; +} diff --git a/src/lib/components/admin/FeaturedImagePicker.svelte b/src/lib/components/admin/FeaturedImagePicker.svelte new file mode 100644 index 0000000..fd7563c --- /dev/null +++ b/src/lib/components/admin/FeaturedImagePicker.svelte @@ -0,0 +1,264 @@ + + +
+

特色图

+ + {#if cover} +
+ 特色图预览 + +
+ {/if} + + + +
+ {#if activeTab === 'url'} + + {:else if activeTab === 'upload'} +
+ +
+ {:else if activeTab === 'library'} +
+ {#each images as img} + + +
{ cover = img.url; activeTab = 'url'; }} title={img.filename}> + {img.filename} +
+ {/each} +
+ {#if hasMore} + + {/if} + {#if !isLoadingLibrary && images.length === 0} +
附件库暂无图片
+ {/if} + {/if} +
+ + + +
+ + diff --git a/src/lib/components/admin/Tabs.svelte b/src/lib/components/admin/Tabs.svelte new file mode 100644 index 0000000..d2c9337 --- /dev/null +++ b/src/lib/components/admin/Tabs.svelte @@ -0,0 +1,85 @@ + + +
+ {#each tabs as tab} + + {/each} +
+ + diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 6de9ad8..2b8b5b6 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -27,7 +27,7 @@ export const load: PageServerLoad = async ({ platform }) => { try { const { results } = await db.prepare( - `SELECT p.id, p.slug, p.title, p.content, p.published_at as date + `SELECT p.id, p.slug, p.title, p.content, p.cover, p.published_at as date FROM posts p ORDER BY p.published_at DESC LIMIT 10` ).all(); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5c82df6..678ec4e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,7 +12,12 @@
{#each data.posts as post} -
+
+ {#if post.cover} +
+ {post.title} +
+ {/if}
diff --git a/src/routes/admin/api/images/+server.ts b/src/routes/admin/api/images/+server.ts new file mode 100644 index 0000000..d9d43f4 --- /dev/null +++ b/src/routes/admin/api/images/+server.ts @@ -0,0 +1,53 @@ +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; + +export const GET: RequestHandler = async ({ url, platform }) => { + const db = platform?.env?.DB; + + if (!db) return json({ error: '数据库未连接' }, { status: 500 }); + + const page = parseInt(url.searchParams.get('page') || '1'); + const limit = parseInt(url.searchParams.get('limit') || '20'); + const offset = (page - 1) * limit; + + try { + // Get R2 domain setting + const domainRes = await db.prepare('SELECT value FROM settings WHERE key = ?').bind('r2.public_domain').first(); + const r2Domain = domainRes?.value || 'https://assets.yourdomain.com'; + + // Count total images + const countRes = await db.prepare("SELECT count(*) as total FROM attachments WHERE mime_type LIKE 'image/%'").first(); + const total = (countRes?.total as number) || 0; + + // Fetch paginated images + const { results } = await db.prepare(` + SELECT id, filename, key, mime_type, size, created_at + FROM attachments + WHERE mime_type LIKE 'image/%' + ORDER BY created_at DESC + LIMIT ? OFFSET ? + `).bind(limit, offset).all(); + + const images = results.map(r => ({ + ...r, + url: `${r2Domain}/${r.key}` + })); + + return json({ + success: true, + images, + pagination: { + total, + page, + limit, + totalPages: Math.ceil(total / limit) + } + }); + } catch (err: any) { + if (err?.message?.includes('no such table')) { + return json({ success: true, images: [], pagination: { total: 0, page: 1, limit, totalPages: 0 } }); + } + console.error('Error fetching images:', err); + return json({ error: '读取图片列表失败' }, { status: 500 }); + } +}; diff --git a/src/routes/admin/api/upload/+server.ts b/src/routes/admin/api/upload/+server.ts new file mode 100644 index 0000000..7fd2d8f --- /dev/null +++ b/src/routes/admin/api/upload/+server.ts @@ -0,0 +1,66 @@ +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; + +async function ensureAttachmentsTable(db: any) { + try { + await db.prepare(` + CREATE TABLE IF NOT EXISTS attachments ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + filename TEXT NOT NULL, + key TEXT NOT NULL UNIQUE, + mime_type TEXT, + size INTEGER, + created_at DATETIME DEFAULT CURRENT_TIMESTAMP + ) + `).run(); + } catch (e) { + console.error('Failed to ensure attachments table:', e); + } +} + +export const POST: RequestHandler = async ({ request, platform }) => { + const db = platform?.env?.DB; + const r2 = platform?.env?.R2; + + if (!db || !r2) return json({ error: '数据库或 R2 存储未连接' }, { status: 500 }); + + const formData = await request.formData(); + const file = formData.get('file') as File; + + if (!file || !(file instanceof File)) { + return json({ error: '没有提供有效的文件' }, { status: 400 }); + } + + // Generate timestamp-based filename and robust physical key + const ext = file.name.split('.').pop() || ''; + const randomStr = Math.random().toString(36).substring(2, 8); + const now = new Date(); + const yearMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`; + const yyyymmdd = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`; + const hhmmss = `${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`; + const newFilename = `${yyyymmdd}_${hhmmss}.${ext}`; + const key = `uploads/${yearMonth}/${yyyymmdd}_${hhmmss}_${randomStr}.${ext}`; + + try { + // Upload to R2 + await r2.put(key, file.stream(), { + httpMetadata: { contentType: file.type } + }); + + // Save metadata to DB + await ensureAttachmentsTable(db); + await db.prepare( + 'INSERT INTO attachments (filename, key, mime_type, size) VALUES (?, ?, ?, ?)' + ).bind(newFilename, key, file.type, file.size).run(); + + // Get r2Domain + const domainRes = await db.prepare('SELECT value FROM settings WHERE key = ?').bind('r2.public_domain').first(); + const r2Domain = domainRes?.value || 'https://assets.yourdomain.com'; + const url = `${r2Domain}/${key}`; + + return json({ success: true, url, key, filename: newFilename }); + } catch (err: any) { + console.error('Error uploading file API:', err); + return json({ error: '文件上传失败: ' + err.message }, { status: 500 }); + } +}; diff --git a/src/routes/admin/files/+page.svelte b/src/routes/admin/files/+page.svelte index 16029b9..a9f830f 100644 --- a/src/routes/admin/files/+page.svelte +++ b/src/routes/admin/files/+page.svelte @@ -40,8 +40,6 @@ function handleFileChange() { if (fileInput.files && fileInput.files.length > 0) { - isUploading = true; - // HTML5 form submit automatically triggers enhance fileInput.form?.requestSubmit(); } } @@ -73,15 +71,14 @@

{isUploading ? '正在上传...' : '点击或拖拽文件上传'}

存储于 Cloudflare R2

- +
diff --git a/src/routes/admin/posts/[id]/+page.server.ts b/src/routes/admin/posts/[id]/+page.server.ts index 88c5136..19a0061 100644 --- a/src/routes/admin/posts/[id]/+page.server.ts +++ b/src/routes/admin/posts/[id]/+page.server.ts @@ -11,8 +11,8 @@ export const load: PageServerLoad = async ({ params, platform }) => { try { const post = await db.prepare( - 'SELECT id, title, slug, content, category_id FROM posts WHERE id = ?' - ).bind(postId).first<{ id: number; title: string; slug: string; content: string; category_id: number | null }>(); + 'SELECT id, title, slug, content, cover, category_id FROM posts WHERE id = ?' + ).bind(postId).first<{ id: number; title: string; slug: string; content: string; cover: string | null; category_id: number | null }>(); if (!post) { throw error(404, '文章不存在'); @@ -48,6 +48,7 @@ export const actions: Actions = { const title = formData.get('title')?.toString().trim(); const slug = formData.get('slug')?.toString().trim() || ''; const content = formData.get('content')?.toString() || ''; + const cover = formData.get('cover')?.toString().trim() || null; const categoryId = formData.get('category_id') ? Number(formData.get('category_id')) : null; const selectedTags = formData.getAll('tags').map(t => Number(t)); @@ -59,9 +60,9 @@ export const actions: Actions = { // 更新文章表 await db.prepare( `UPDATE posts - SET title = ?, slug = ?, content = ?, category_id = ?, updated_at = CURRENT_TIMESTAMP + SET title = ?, slug = ?, content = ?, cover = ?, category_id = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?` - ).bind(title, slug, content, categoryId, postId).run(); + ).bind(title, slug, content, cover, categoryId, postId).run(); // 清除原有标签并重新绑定 await db.prepare('DELETE FROM post_tags WHERE post_id = ?').bind(postId).run(); diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte index 6c6c0e9..1562940 100644 --- a/src/routes/admin/posts/[id]/+page.svelte +++ b/src/routes/admin/posts/[id]/+page.svelte @@ -3,12 +3,14 @@ import type { PageData, ActionData } from './$types'; import { deserialize } from '$app/forms'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; + import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); let title = $state(data.post.title); let slug = $state(data.post.slug); let content = $state(data.post.content || ''); + let cover = $state(data.post.cover || ''); let mode = $state<'edit' | 'preview'>('edit'); let selectedTags = $state(data.selectedTagIds || []); let tagsList = $state(data.tags || []); @@ -236,6 +238,8 @@
+ +

别名 *

Number(t)); @@ -38,10 +39,10 @@ export const actions: Actions = { try { const res = await db.prepare( - `INSERT INTO posts (title, slug, content, author_id, category_id, published_at, updated_at) - VALUES (?, ?, ?, 1, ?, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP) + `INSERT INTO posts (title, slug, content, cover, author_id, category_id, published_at, updated_at) + VALUES (?, ?, ?, ?, 1, ?, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP) RETURNING id` - ).bind(title, slug, content, categoryId).first<{ id: number }>(); + ).bind(title, slug, content, cover, categoryId).first<{ id: number }>(); const postId = res?.id; diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte index 0f4d30b..9e085e7 100644 --- a/src/routes/admin/posts/new/+page.svelte +++ b/src/routes/admin/posts/new/+page.svelte @@ -3,12 +3,14 @@ import type { PageData, ActionData } from './$types'; import { deserialize } from '$app/forms'; import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'; + import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte'; let { data, form }: { data: PageData; form: ActionData } = $props(); let title = $state(''); let slug = $state(''); let content = $state(''); + let cover = $state(''); let mode = $state<'edit' | 'preview'>('edit'); let tagsList = $state(data.tags || []); @@ -239,10 +241,12 @@

发布

- +
+ + -
+

别名 *

系统设置
-
- - - -
+
@@ -135,36 +139,6 @@ color: var(--text-color); } - .tabs-header { - display: flex; - gap: 20px; - margin-bottom: 30px; - border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1)); - } - - .tab-btn { - background: none; - border: none; - padding: 10px 15px; - font-size: 1rem; - font-weight: 600; - color: var(--text-muted, rgba(0,0,0,0.5)); - cursor: pointer; - border-bottom: 3px solid transparent; - margin-bottom: -2px; - transition: all 0.2s; - } - - .tab-btn:hover { - color: var(--text-color); - } - - .tab-btn.active { - color: var(--text-color); - border-bottom-color: var(--accent-color, #419b38); - } - - .settings-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); diff --git a/src/routes/posts/[slug]/+page.server.ts b/src/routes/posts/[slug]/+page.server.ts index 353b4d7..8b3f8b3 100644 --- a/src/routes/posts/[slug]/+page.server.ts +++ b/src/routes/posts/[slug]/+page.server.ts @@ -41,13 +41,18 @@ export const load: PageServerLoad = async ({ platform, params }) => { } try { - const post: any = await db.prepare( - `SELECT p.id, p.title, p.content, p.published_at as date, u.username as author - FROM posts p - JOIN users u ON p.author_id = u.id + const postRes = await db.prepare( + `SELECT p.id, p.slug, p.title, p.content, p.cover, p.published_at as date, + c.name as category_name, c.slug as category_slug, + u.username as author_name + FROM posts p + LEFT JOIN categories c ON p.category_id = c.id + LEFT JOIN users u ON p.author_id = u.id WHERE p.slug = ?` ).bind(slug).first(); + const post: any = postRes; + if (!post) { error(404, 'Post not found'); } diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte index f7c0247..b3821dc 100644 --- a/src/routes/posts/[slug]/+page.svelte +++ b/src/routes/posts/[slug]/+page.svelte @@ -63,6 +63,11 @@
+ {#if data.post.cover} +
+ {data.post.title} +
+ {/if}