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
+221 -93
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/series/+page.svelte
+221 -93
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,9 +38,10 @@
{/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">
<div class="form-group">
<label for="name">名称 *</label> <label for="name">名称 *</label>
<input <input
id="name" id="name"
@@ -49,8 +51,13 @@
oninput={handleNameInput} oninput={handleNameInput}
required required
/> />
</div>
<label for="slug" style="display: flex; justify-content: space-between; align-items: center;"> <div class="form-group">
<label
for="slug"
style="display: flex; justify-content: space-between; align-items: center;"
>
<span>URL 别名 *</span> <span>URL 别名 *</span>
<button <button
type="button" type="button"
@@ -69,43 +76,87 @@
oninput={handleSlugInput} oninput={handleSlugInput}
required 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}
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>{$page.data.aliases?.series || '系列'}名称</th>
<th>别名</th>
<th>关联文章数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{#each data.series as item (item.id)} {#each data.series as item (item.id)}
<article class="series-editor"> <tr>
<form method="POST" action="?/update"> <td>{item.id}</td>
<input type="hidden" name="id" value={item.id} /> <td>
<div class="editor-heading"> {#if editingId === item.id}
<input
type="text"
name="name"
value={item.name}
form="edit-form-{item.id}"
required
class="edit-input"
/>
{:else}
<strong>{item.name}</strong> <strong>{item.name}</strong>
<span class="badge">{item.post_count} 篇文章</span> {/if}
</div> </td>
<div class="field-row"> <td>
<div> {#if editingId === item.id}
<label for="name-{item.id}">名称</label> <input
<input id="name-{item.id}" name="name" type="text" value={item.name} required /> type="text"
</div> name="slug"
<div> value={item.slug}
<label for="slug-{item.id}">URL 别名</label> form="edit-form-{item.id}"
<input id="slug-{item.id}" name="slug" type="text" value={item.slug} required /> required
</div> class="edit-input"
</div> />
<button type="submit" class="action-btn">保存修改</button> {:else}
<a <span class="badge">{item.slug}</span>
href={resolve('/series/[slug]', { slug: item.slug })} {/if}
target="_blank" </td>
class="action-btn">查看</a <td><span class="badge">{item.post_count} 篇文章</span></td>
> <td>
</form> {#if editingId === item.id}
<form <form
id="edit-form-{item.id}"
action="?/update"
method="POST" method="POST"
class="inline-form"
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" action="?/delete"
class="delete-form" method="POST"
class="inline-form"
onsubmit={async (event) => { onsubmit={async (event) => {
if ((event.target as HTMLFormElement).dataset.confirmed === 'true') { if ((event.target as HTMLFormElement).dataset.confirmed === 'true') {
(event.target as HTMLFormElement).removeAttribute('data-confirmed'); (event.target as HTMLFormElement).removeAttribute('data-confirmed');
@@ -126,10 +177,14 @@
<input type="hidden" name="id" value={item.id} /> <input type="hidden" name="id" value={item.id} />
<button type="submit" class="action-btn delete">删除</button> <button type="submit" class="action-btn delete">删除</button>
</form> </form>
</article>
{/each}
{/if} {/if}
</section> </td>
</tr>
{/each}
</tbody>
</table>
{/if}
</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>