refactor: 在分类、系列和标签管理页面中应用通用组件
This commit is contained in:
seahi committed
1 parent
b784901110
commit
32a87ebc61
3 files changed
+289
-612
No files matched your search
@@ -4,6 +4,9 @@
|
||||
import { createSlugAutoHandler } from '$lib/utils/slugify';
|
||||
import { confirmState } from '$lib/stores/confirm.svelte';
|
||||
import TextInput from '$lib/components/admin/TextInput.svelte';
|
||||
import Button from '$lib/components/admin/Button.svelte';
|
||||
import DataTable from '$lib/components/admin/DataTable.svelte';
|
||||
import Alert from '$lib/components/admin/Alert.svelte';
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
|
||||
@@ -36,9 +39,7 @@
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="error-alert">
|
||||
{form.error}
|
||||
</div>
|
||||
<Alert message={form.error} />
|
||||
{/if}
|
||||
|
||||
<div class="categories-grid-layout">
|
||||
@@ -84,120 +85,110 @@
|
||||
variant="underline"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">创建</button>
|
||||
<Button type="submit" variant="primary" fullWidth>创建</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：{$page.data.aliases?.category || '分类'}列表 -->
|
||||
<div class="table-container">
|
||||
{#if data.categories.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.category || '分类'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
{#if data.categories.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.category || '分类'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<DataTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{$page.data.aliases?.category || '分类'}名称</th>
|
||||
<th>别名</th>
|
||||
<th>关联文章数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.categories as category (category.id || category)}
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{$page.data.aliases?.category || '分类'}名称</th>
|
||||
<th>别名</th>
|
||||
<th>关联文章数</th>
|
||||
<th>操作</th>
|
||||
<td>{category.id}</td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={category.name}
|
||||
form="edit-form-{category.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{category.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="slug"
|
||||
value={category.slug}
|
||||
form="edit-form-{category.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<span class="badge">{category.slug}</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td><span class="badge">{category.post_count} 篇文章</span></td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<form
|
||||
id="edit-form-{category.id}"
|
||||
action="?/update"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={() => {
|
||||
// will submit naturally, just reset editingId
|
||||
setTimeout(() => {
|
||||
editingId = null;
|
||||
}, 0);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={category.id} />
|
||||
<Button type="submit" variant="action">保存</Button>
|
||||
</form>
|
||||
<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
|
||||
{:else}
|
||||
<Button variant="action" onclick={() => (editingId = category.id)}>编辑</Button>
|
||||
<form
|
||||
action="?/delete"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={async (e) => {
|
||||
if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
|
||||
(e.target as HTMLFormElement).removeAttribute('data-confirmed');
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitter = e.submitter;
|
||||
const confirmed = await confirmState.show(
|
||||
`确定要删除${$page.data.aliases?.category || '分类'} "${category.name}" 吗？删除后相关文章将归为未${$page.data.aliases?.category || '分类'}。`
|
||||
);
|
||||
if (confirmed) {
|
||||
form.dataset.confirmed = 'true';
|
||||
form.requestSubmit(submitter);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={category.id} />
|
||||
<Button type="submit" variant="action" class="delete">删除</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.categories as category (category.id || category)}
|
||||
<tr>
|
||||
<td>{category.id}</td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={category.name}
|
||||
form="edit-form-{category.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{category.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="slug"
|
||||
value={category.slug}
|
||||
form="edit-form-{category.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<span class="badge">{category.slug}</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td><span class="badge">{category.post_count} 篇文章</span></td>
|
||||
<td>
|
||||
{#if editingId === category.id}
|
||||
<form
|
||||
id="edit-form-{category.id}"
|
||||
action="?/update"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={() => {
|
||||
// will submit naturally, just reset editingId
|
||||
setTimeout(() => {
|
||||
editingId = null;
|
||||
}, 0);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={category.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 = category.id)}
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<form
|
||||
action="?/delete"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={async (e) => {
|
||||
if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
|
||||
(e.target as HTMLFormElement).removeAttribute('data-confirmed');
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitter = e.submitter;
|
||||
const confirmed = await confirmState.show(
|
||||
`确定要删除${$page.data.aliases?.category || '分类'} "${category.name}" 吗？删除后相关文章将归为未${$page.data.aliases?.category || '分类'}。`
|
||||
);
|
||||
if (confirmed) {
|
||||
form.dataset.confirmed = 'true';
|
||||
form.requestSubmit(submitter);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={category.id} />
|
||||
<button type="submit" class="action-btn delete">删除</button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</tbody>
|
||||
</DataTable>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -213,15 +204,6 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.error-alert {
|
||||
padding: 12px 16px;
|
||||
background-color: #fdf7f7;
|
||||
border: 2px solid #d9534f;
|
||||
color: #d9534f;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.categories-grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
@@ -264,68 +246,6 @@
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
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-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;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: transparent;
|
||||
border: 2px solid var(--text-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -333,37 +253,6 @@
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
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);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.2s,
|
||||
text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--accent-color, #419b38);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
color: #d9534f;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
import { createSlugAutoHandler } from '$lib/utils/slugify';
|
||||
import { confirmState } from '$lib/stores/confirm.svelte';
|
||||
import TextInput from '$lib/components/admin/TextInput.svelte';
|
||||
import Button from '$lib/components/admin/Button.svelte';
|
||||
import DataTable from '$lib/components/admin/DataTable.svelte';
|
||||
import Alert from '$lib/components/admin/Alert.svelte';
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
let name = $state('');
|
||||
@@ -35,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="error-alert">{form.error}</div>
|
||||
<Alert message={form.error} />
|
||||
{/if}
|
||||
|
||||
<div class="series-grid-layout">
|
||||
@@ -80,114 +83,108 @@
|
||||
variant="underline"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">创建</button>
|
||||
<Button type="submit" variant="primary" fullWidth>创建</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
{#if data.series.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
{#if data.series.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<DataTable>
|
||||
<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>
|
||||
<th>ID</th>
|
||||
<th>{$page.data.aliases?.series || '系列'}名称</th>
|
||||
<th>别名</th>
|
||||
<th>关联文章数</th>
|
||||
<th>操作</th>
|
||||
<td>{item.id}</td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={item.name}
|
||||
form="edit-form-{item.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{item.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="slug"
|
||||
value={item.slug}
|
||||
form="edit-form-{item.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{: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" variant="action">保存</Button>
|
||||
</form>
|
||||
<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
|
||||
{:else}
|
||||
<Button variant="action" 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" variant="action" class="delete">删除</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.series as item (item.id)}
|
||||
<tr>
|
||||
<td>{item.id}</td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={item.name}
|
||||
form="edit-form-{item.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{item.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if editingId === item.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="slug"
|
||||
value={item.slug}
|
||||
form="edit-form-{item.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{: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}
|
||||
</div>
|
||||
{/each}
|
||||
</tbody>
|
||||
</DataTable>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -203,15 +200,6 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.error-alert {
|
||||
padding: 12px 16px;
|
||||
background-color: #fdf7f7;
|
||||
border: 2px solid #d9534f;
|
||||
color: #d9534f;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.series-grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
@@ -254,68 +242,6 @@
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
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-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;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: transparent;
|
||||
border: 2px solid var(--text-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -323,37 +249,6 @@
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
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);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.2s,
|
||||
text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--accent-color, #419b38);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
color: #d9534f;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
import type { PageData, ActionData } from './$types';
|
||||
import { confirmState } from '$lib/stores/confirm.svelte';
|
||||
import TextInput from '$lib/components/admin/TextInput.svelte';
|
||||
import Button from '$lib/components/admin/Button.svelte';
|
||||
import DataTable from '$lib/components/admin/DataTable.svelte';
|
||||
import Alert from '$lib/components/admin/Alert.svelte';
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
|
||||
@@ -15,9 +18,7 @@
|
||||
</div>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="error-alert">
|
||||
{form.error}
|
||||
</div>
|
||||
<Alert message={form.error} />
|
||||
{/if}
|
||||
|
||||
<div class="tags-grid-layout">
|
||||
@@ -37,100 +38,94 @@
|
||||
variant="underline"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">创建</button>
|
||||
<Button type="submit" variant="primary" fullWidth>创建</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：现有{$page.data.aliases?.tag || '标签'}列表 -->
|
||||
<div class="table-container">
|
||||
{#if data.tags.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.tag || '标签'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
{#if data.tags.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>暂无任何{$page.data.aliases?.tag || '标签'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<DataTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{$page.data.aliases?.tag || '标签'}名称</th>
|
||||
<th>关联文章数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.tags as tag (tag.id || tag)}
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{$page.data.aliases?.tag || '标签'}名称</th>
|
||||
<th>关联文章数</th>
|
||||
<th>操作</th>
|
||||
<td>{tag.id}</td>
|
||||
<td>
|
||||
{#if editingId === tag.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={tag.name}
|
||||
form="edit-form-{tag.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{tag.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td><span class="badge">{tag.post_count} 篇文章</span></td>
|
||||
<td>
|
||||
{#if editingId === tag.id}
|
||||
<form
|
||||
id="edit-form-{tag.id}"
|
||||
action="?/update"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={() => {
|
||||
setTimeout(() => {
|
||||
editingId = null;
|
||||
}, 0);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.id} />
|
||||
<Button type="submit" variant="action">保存</Button>
|
||||
</form>
|
||||
<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
|
||||
{:else}
|
||||
<Button variant="action" onclick={() => (editingId = tag.id)}>编辑</Button>
|
||||
<form
|
||||
action="?/delete"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={async (e) => {
|
||||
if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
|
||||
(e.target as HTMLFormElement).removeAttribute('data-confirmed');
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitter = e.submitter;
|
||||
const confirmed = await confirmState.show(
|
||||
`确定要删除${$page.data.aliases?.tag || '标签'} "${tag.name}" 吗？`
|
||||
);
|
||||
if (confirmed) {
|
||||
form.dataset.confirmed = 'true';
|
||||
form.requestSubmit(submitter);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.id} />
|
||||
<Button type="submit" variant="action" class="delete">删除</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.tags as tag (tag.id || tag)}
|
||||
<tr>
|
||||
<td>{tag.id}</td>
|
||||
<td>
|
||||
{#if editingId === tag.id}
|
||||
<TextInput
|
||||
type="text"
|
||||
name="name"
|
||||
value={tag.name}
|
||||
form="edit-form-{tag.id}"
|
||||
required
|
||||
size="sm"
|
||||
/>
|
||||
{:else}
|
||||
<strong>{tag.name}</strong>
|
||||
{/if}
|
||||
</td>
|
||||
<td><span class="badge">{tag.post_count} 篇文章</span></td>
|
||||
<td>
|
||||
{#if editingId === tag.id}
|
||||
<form
|
||||
id="edit-form-{tag.id}"
|
||||
action="?/update"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={() => {
|
||||
setTimeout(() => {
|
||||
editingId = null;
|
||||
}, 0);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.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 = tag.id)}>
|
||||
编辑
|
||||
</button>
|
||||
<form
|
||||
action="?/delete"
|
||||
method="POST"
|
||||
class="inline-form"
|
||||
onsubmit={async (e) => {
|
||||
if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
|
||||
(e.target as HTMLFormElement).removeAttribute('data-confirmed');
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitter = e.submitter;
|
||||
const confirmed = await confirmState.show(
|
||||
`确定要删除${$page.data.aliases?.tag || '标签'} "${tag.name}" 吗？`
|
||||
);
|
||||
if (confirmed) {
|
||||
form.dataset.confirmed = 'true';
|
||||
form.requestSubmit(submitter);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={tag.id} />
|
||||
<button type="submit" class="action-btn delete">删除</button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</tbody>
|
||||
</DataTable>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -146,15 +141,6 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.error-alert {
|
||||
padding: 12px 16px;
|
||||
background-color: #fdf7f7;
|
||||
border: 2px solid #d9534f;
|
||||
color: #d9534f;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tags-grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
@@ -197,68 +183,6 @@
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
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-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;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: transparent;
|
||||
border: 2px solid var(--text-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -266,37 +190,6 @@
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
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);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.2s,
|
||||
text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--accent-color, #419b38);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
color: #d9534f;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
|
||||
Reference in new issue
Block a user