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

feat: 添加系列的行内编辑功能并重构管理界面布局

Browse Source
This commit is contained in:
seahi committed 2026-08-15 14:35:33 +08:00
1 parent 5affda0889
commit c84c9cb4e8
1 file changed
+273 -145
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/series/+page.svelte
+273 -145
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
import { resolve } from '$app/paths';
import type { ActionData, PageData } from './$types'; import type { ActionData, PageData } from './$types';
import { createSlugAutoHandler } from '$lib/utils/slugify'; import { createSlugAutoHandler } from '$lib/utils/slugify';
import { confirmState } from '$lib/stores/confirm.svelte'; import { confirmState } from '$lib/stores/confirm.svelte';
@@ -11,6 +10,8 @@
let isSlugUserModified = $state(false); let isSlugUserModified = $state(false);
let isGenerating = $state(false); let isGenerating = $state(false);
let editingId = $state<number | null>(null);
const slugHandler = createSlugAutoHandler({ const slugHandler = createSlugAutoHandler({
getSlug: () => slug, getSlug: () => slug,
setSlug: (val) => (slug = val), setSlug: (val) => (slug = val),
@@ -37,99 +38,153 @@
{/if} {/if}
<div class="series-grid-layout"> <div class="series-grid-layout">
<section class="create-series-card"> <div class="create-series-card">
<h3>新{$page.data.aliases?.series || '系列'}</h3> <h3>新{$page.data.aliases?.series || '系列'}</h3>
<form method="POST" action="?/create"> <form method="POST" action="?/create">
<label for="name">名称 *</label> <div class="form-group">
<input <label for="name">名称 *</label>
id="name" <input
name="name" id="name"
type="text" name="name"
bind:value={name} type="text"
oninput={handleNameInput} bind:value={name}
required oninput={handleNameInput}
/> required
/>
</div>
<label for="slug" style="display: flex; justify-content: space-between; align-items: center;"> <div class="form-group">
<span>URL 别名 *</span> <label
<button for="slug"
type="button" style="display: flex; justify-content: space-between; align-items: center;"
style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
onclick={() => slugHandler.forceGenerate(name)}
disabled={isGenerating}
> >
{isGenerating ? '正在生成...' : '重新生成'} <span>URL 别名 *</span>
</button> <button
</label> type="button"
<input style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
id="slug" onclick={() => slugHandler.forceGenerate(name)}
name="slug" disabled={isGenerating}
type="text" >
bind:value={slug} {isGenerating ? '正在生成...' : '重新生成'}
oninput={handleSlugInput} </button>
required </label>
/> <input
id="slug"
name="slug"
type="text"
bind:value={slug}
oninput={handleSlugInput}
required
/>
</div>
<button type="submit" class="btn btn-primary">创建</button> <button type="submit" class="btn btn-primary">创建</button>
</form> </form>
</section> </div>
<section class="series-list"> <div class="table-container">
{#if data.series.length === 0} {#if data.series.length === 0}
<div class="empty-state">暂无系列</div> <div class="empty-state">
<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
</div>
{:else} {:else}
{#each data.series as item (item.id)} <table class="data-table">
<article class="series-editor"> <thead>
<form method="POST" action="?/update"> <tr>
<input type="hidden" name="id" value={item.id} /> <th>ID</th>
<div class="editor-heading"> <th>{$page.data.aliases?.series || '系列'}名称</th>
<strong>{item.name}</strong> <th>别名</th>
<span class="badge">{item.post_count} 篇文章</span> <th>关联文章数</th>
</div> <th>操作</th>
<div class="field-row"> </tr>
<div> </thead>
<label for="name-{item.id}">名称</label> <tbody>
<input id="name-{item.id}" name="name" type="text" value={item.name} required /> {#each data.series as item (item.id)}
</div> <tr>
<div> <td>{item.id}</td>
<label for="slug-{item.id}">URL 别名</label> <td>
<input id="slug-{item.id}" name="slug" type="text" value={item.slug} required /> {#if editingId === item.id}
</div> <input
</div> type="text"
<button type="submit" class="action-btn">保存修改</button> name="name"
<a value={item.name}
href={resolve('/series/[slug]', { slug: item.slug })} form="edit-form-{item.id}"
target="_blank" required
class="action-btn">查看</a class="edit-input"
> />
</form> {:else}
<form <strong>{item.name}</strong>
method="POST" {/if}
action="?/delete" </td>
class="delete-form" <td>
onsubmit={async (event) => { {#if editingId === item.id}
if ((event.target as HTMLFormElement).dataset.confirmed === 'true') { <input
(event.target as HTMLFormElement).removeAttribute('data-confirmed'); type="text"
return; name="slug"
} value={item.slug}
event.preventDefault(); form="edit-form-{item.id}"
const form = event.target as HTMLFormElement; required
const submitter = event.submitter; class="edit-input"
const confirmed = await confirmState.show( />
`确定删除系列“${item.name}”吗？相关文章会保留，但不再属于任何系列。` {:else}
); <span class="badge">{item.slug}</span>
if (confirmed) { {/if}
form.dataset.confirmed = 'true'; </td>
form.requestSubmit(submitter); <td><span class="badge">{item.post_count} 篇文章</span></td>
} <td>
}} {#if editingId === item.id}
> <form
<input type="hidden" name="id" value={item.id} /> id="edit-form-{item.id}"
<button type="submit" class="action-btn delete">删除</button> action="?/update"
</form> method="POST"
</article> class="inline-form"
{/each} onsubmit={() => {
setTimeout(() => {
editingId = null;
}, 0);
}}
>
<input type="hidden" name="id" value={item.id} />
<button type="submit" class="action-btn">保存</button>
</form>
<button type="button" class="action-btn" onclick={() => (editingId = null)}>
取消
</button>
{:else}
<button type="button" class="action-btn" onclick={() => (editingId = item.id)}>
编辑
</button>
<form
action="?/delete"
method="POST"
class="inline-form"
onsubmit={async (event) => {
if ((event.target as HTMLFormElement).dataset.confirmed === 'true') {
(event.target as HTMLFormElement).removeAttribute('data-confirmed');
return;
}
event.preventDefault();
const form = event.target as HTMLFormElement;
const submitter = event.submitter;
const confirmed = await confirmState.show(
`确定删除系列“${item.name}”吗？相关文章会保留，但不再属于任何系列。`
);
if (confirmed) {
form.dataset.confirmed = 'true';
form.requestSubmit(submitter);
}
}}
>
<input type="hidden" name="id" value={item.id} />
<button type="submit" class="action-btn delete">删除</button>
</form>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
{/if} {/if}
</section> </div>
</div> </div>
<style> <style>
@@ -138,123 +193,196 @@
border-bottom: 2px solid var(--text-color); border-bottom: 2px solid var(--text-color);
padding-bottom: 12px; padding-bottom: 12px;
} }
.admin-page-header h2 { .admin-page-header h2 {
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
color: var(--text-color);
} }
.error-alert { .error-alert {
padding: 12px 16px; padding: 12px 16px;
border-left: 4px solid #d9534f; background-color: #fdf7f7;
border: 2px solid #d9534f;
color: #d9534f; color: #d9534f;
margin-bottom: 24px; margin-bottom: 20px;
font-weight: 600; font-weight: 600;
} }
.series-grid-layout { .series-grid-layout {
display: grid; display: grid;
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;
gap: 30px; gap: 30px;
align-items: start;
} }
@media (max-width: 768px) {
.series-grid-layout {
grid-template-columns: 1fr;
}
}
.create-series-card {
background: transparent;
border: none;
padding: 0;
height: fit-content;
}
.create-series-card h3 { .create-series-card h3 {
margin: 0 0 20px; margin: 0 0 20px 0;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-color);
border-bottom: none;
} }
label {
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block; display: block;
margin: 28px 0 4px;
font-size: 0.85rem;
font-weight: 700; font-weight: 700;
margin-bottom: 12px;
color: var(--text-color);
font-size: 0.9rem;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
input {
.form-group input[type='text'] {
width: 100%; width: 100%;
box-sizing: border-box;
padding: 10px 0; padding: 10px 0;
border: 0; border: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.12); border-bottom: 2px solid rgba(0, 0, 0, 0.1);
background: transparent; background: transparent;
font-family: inherit;
font-size: 1.05rem;
color: var(--text-color); color: var(--text-color);
font: inherit; box-sizing: border-box;
transition: border-bottom-color 0.3s ease;
} }
input:focus {
.form-group input[type='text']:focus {
outline: none; outline: none;
border-color: var(--accent-color, #419b38); border-bottom-color: var(--accent-color, #419b38);
} }
.btn { .btn {
display: inline-block;
width: 100%; width: 100%;
margin-top: 20px;
padding: 10px 20px; padding: 10px 20px;
border: 1px solid var(--text-color); text-decoration: none;
background: var(--text-color); font-size: 0.95rem;
color: var(--bg-color);
font: inherit;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
border: 1px solid var(--text-color);
background-color: transparent;
color: var(--text-color);
font-family: inherit;
text-transform: uppercase;
letter-spacing: 1px;
} }
.btn:hover {
background: var(--accent-color, #419b38); .btn-primary {
background-color: var(--text-color);
color: var(--bg-color, #ffffff);
}
.btn-primary:hover {
background-color: var(--accent-color, #419b38);
border-color: var(--accent-color, #419b38); border-color: var(--accent-color, #419b38);
color: white; color: white;
} }
.series-list {
display: grid; .table-container {
gap: 18px; background: transparent;
}
.series-editor {
position: relative;
border: 2px solid var(--text-color); border: 2px solid var(--text-color);
padding: 18px; overflow-x: auto;
} }
.editor-heading {
display: flex; .data-table {
justify-content: space-between; width: 100%;
gap: 16px; border-collapse: collapse;
align-items: center; text-align: left;
} }
.field-row {
display: grid; .data-table th,
grid-template-columns: 1fr 1fr; .data-table td {
gap: 18px; padding: 14px 18px;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
} }
.data-table th {
background-color: transparent;
color: var(--text-color);
font-weight: 700;
font-size: 0.95rem;
border-bottom: 2px solid var(--text-color);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.inline-form {
display: inline-block;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.action-btn { .action-btn {
display: inline-block; display: inline-block;
margin: 16px 14px 0 0;
padding: 0;
border: 0;
background: transparent; background: transparent;
border: none;
padding: 0;
margin: 0;
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
line-height: 1;
vertical-align: baseline;
color: var(--text-color); color: var(--text-color);
font: inherit;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition:
color 0.2s,
text-decoration-color 0.2s;
} }
.action-btn:hover {
color: var(--accent-color, #419b38); .action-btn.delete:hover {
color: #d9534f;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.delete-form {
position: absolute;
right: 4px;
bottom: 18px;
}
.action-btn.delete:hover {
color: #d9534f;
}
.empty-state { .empty-state {
border: 2px solid var(--text-color);
padding: 50px 20px; padding: 50px 20px;
text-align: center; text-align: center;
color: var(--text-muted); color: var(--text-muted, rgba(0, 0, 0, 0.6));
} }
@media (max-width: 800px) {
.series-grid-layout, .edit-input {
.field-row { width: 100%;
grid-template-columns: 1fr; padding: 6px 8px;
} border: 1px solid rgba(0, 0, 0, 0.2);
.delete-form { background: transparent;
position: static; font-family: inherit;
} font-size: 0.95rem;
color: var(--text-color);
box-sizing: border-box;
border-radius: 4px;
}
.edit-input:focus {
outline: none;
border-color: var(--accent-color, #419b38);
} }
</style> </style>