feat: 添加系列的行内编辑功能并重构管理界面布局
This commit is contained in:
seahi committed
1 parent
5affda0889
commit
c84c9cb4e8
1 file changed
+273
-145
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { resolve } from '$app/paths';
|
||||
import type { ActionData, PageData } from './$types';
|
||||
import { createSlugAutoHandler } from '$lib/utils/slugify';
|
||||
import { confirmState } from '$lib/stores/confirm.svelte';
|
||||
@@ -11,6 +10,8 @@
|
||||
let isSlugUserModified = $state(false);
|
||||
let isGenerating = $state(false);
|
||||
|
||||
let editingId = $state<number | null>(null);
|
||||
|
||||
const slugHandler = createSlugAutoHandler({
|
||||
getSlug: () => slug,
|
||||
setSlug: (val) => (slug = val),
|
||||
@@ -37,99 +38,153 @@
|
||||
{/if}
|
||||
|
||||
<div class="series-grid-layout">
|
||||
<section class="create-series-card">
|
||||
<div class="create-series-card">
|
||||
<h3>新{$page.data.aliases?.series || '系列'}</h3>
|
||||
<form method="POST" action="?/create">
|
||||
<label for="name">名称 *</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
bind:value={name}
|
||||
oninput={handleNameInput}
|
||||
required
|
||||
/>
|
||||
<div class="form-group">
|
||||
<label for="name">名称 *</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
bind:value={name}
|
||||
oninput={handleNameInput}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label for="slug" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>URL 别名 *</span>
|
||||
<button
|
||||
type="button"
|
||||
style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
|
||||
onclick={() => slugHandler.forceGenerate(name)}
|
||||
disabled={isGenerating}
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="slug"
|
||||
style="display: flex; justify-content: space-between; align-items: center;"
|
||||
>
|
||||
{isGenerating ? '正在生成...' : '重新生成'}
|
||||
</button>
|
||||
</label>
|
||||
<input
|
||||
id="slug"
|
||||
name="slug"
|
||||
type="text"
|
||||
bind:value={slug}
|
||||
oninput={handleSlugInput}
|
||||
required
|
||||
/>
|
||||
<span>URL 别名 *</span>
|
||||
<button
|
||||
type="button"
|
||||
style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
|
||||
onclick={() => slugHandler.forceGenerate(name)}
|
||||
disabled={isGenerating}
|
||||
>
|
||||
{isGenerating ? '正在生成...' : '重新生成'}
|
||||
</button>
|
||||
</label>
|
||||
<input
|
||||
id="slug"
|
||||
name="slug"
|
||||
type="text"
|
||||
bind:value={slug}
|
||||
oninput={handleSlugInput}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">创建</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="series-list">
|
||||
<div class="table-container">
|
||||
{#if data.series.length === 0}
|
||||
<div class="empty-state">暂无系列</div>
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#each data.series as item (item.id)}
|
||||
<article class="series-editor">
|
||||
<form method="POST" action="?/update">
|
||||
<input type="hidden" name="id" value={item.id} />
|
||||
<div class="editor-heading">
|
||||
<strong>{item.name}</strong>
|
||||
<span class="badge">{item.post_count} 篇文章</span>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div>
|
||||
<label for="name-{item.id}">名称</label>
|
||||
<input id="name-{item.id}" name="name" type="text" value={item.name} required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="slug-{item.id}">URL 别名</label>
|
||||
<input id="slug-{item.id}" name="slug" type="text" value={item.slug} required />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="action-btn">保存修改</button>
|
||||
<a
|
||||
href={resolve('/series/[slug]', { slug: item.slug })}
|
||||
target="_blank"
|
||||
class="action-btn">查看</a
|
||||
>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/delete"
|
||||
class="delete-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>
|
||||
</article>
|
||||
{/each}
|
||||
<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)}
|
||||
<tr>
|
||||
<td>{item.id}</td>
|
||||
<td>
|
||||
{#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>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
value={item.slug}
|
||||
form="edit-form-{item.id}"
|
||||
required
|
||||
class="edit-input"
|
||||
/>
|
||||
{:else}
|
||||
<span class="badge">{item.slug}</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td><span class="badge">{item.post_count} 篇文章</span></td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<form
|
||||
id="edit-form-{item.id}"
|
||||
action="?/update"
|
||||
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"
|
||||
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}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -138,123 +193,196 @@
|
||||
border-bottom: 2px solid var(--text-color);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.admin-page-header h2 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.error-alert {
|
||||
padding: 12px 16px;
|
||||
border-left: 4px solid #d9534f;
|
||||
background-color: #fdf7f7;
|
||||
border: 2px solid #d9534f;
|
||||
color: #d9534f;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.series-grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
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 {
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
label {
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin: 28px 0 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-color);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
input {
|
||||
|
||||
.form-group input[type='text'] {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
border: 0;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 1.05rem;
|
||||
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;
|
||||
border-color: var(--accent-color, #419b38);
|
||||
border-bottom-color: var(--accent-color, #419b38);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid var(--text-color);
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color);
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
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);
|
||||
color: white;
|
||||
}
|
||||
.series-list {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
.series-editor {
|
||||
position: relative;
|
||||
|
||||
.table-container {
|
||||
background: transparent;
|
||||
border: 2px solid var(--text-color);
|
||||
padding: 18px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.editor-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
.field-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
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 {
|
||||
display: inline-block;
|
||||
margin: 16px 14px 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
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);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
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-underline-offset: 4px;
|
||||
}
|
||||
.delete-form {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 18px;
|
||||
}
|
||||
.action-btn.delete:hover {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
border: 2px solid var(--text-color);
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
color: var(--text-muted, rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.series-grid-layout,
|
||||
.field-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.delete-form {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: transparent;
|
||||
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>
|
||||
Reference in new issue
Block a user