refactor: 优化后台文章与页面编辑器的表单提交及侧边栏显隐逻辑
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-15 11:16:22 +08:00
1 parent e379a97163
commit dff0972400
4 files changed
+56 -42

No files matched your search

+4 -12
View File
@@ -26,12 +26,8 @@
<div class="admin-page-header">
<h2>编辑{$page.data.aliases?.page || '页面'}</h2>
<div class="header-actions">
<Button
href={resolve('/[slug]', { slug: data.page.slug })}
target="_blank"
variant="secondary"
style="margin-right: 12px;"
>
<Button type="submit" form="page-form" variant="primary">保存修改</Button>
<Button href={resolve('/[slug]', { slug: data.page.slug })} target="_blank" variant="secondary">
前台预览
</Button>
<Button href={resolve('/admin/pages')} variant="secondary">&larr; 返回</Button>
@@ -42,7 +38,7 @@
<Alert message={form.error} />
{/if}
<form action="?/update" method="POST" class="post-form">
<form action="?/update" method="POST" id="page-form" class="post-form">
<div class="form-grid">
<div class="form-main">
<div class="form-group">
@@ -101,11 +97,6 @@
/>
{#if sidebarTab === 'settings'}
<div class="sidebar-box">
<h3>更新</h3>
<Button type="submit" variant="primary" fullWidth class="submit-btn">保存修改</Button>
</div>
<div class="sidebar-box">
<h3>别名 *</h3>
<TextInput
@@ -147,6 +138,7 @@
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.editor-header {
+10 -6
View File
@@ -43,14 +43,17 @@
<div class="admin-page-header">
<h2>新建独立{$page.data.aliases?.page || '页面'}</h2>
<div class="header-actions">
<Button type="submit" form="page-form" variant="primary">发布</Button>
<Button href={resolve('/admin/pages')} variant="secondary">&larr; 返回</Button>
</div>
</div>
{#if form?.error}
<Alert message={form.error} />
{/if}
<form method="POST" class="post-form">
<form method="POST" id="page-form" class="post-form">
<div class="form-grid">
<div class="form-main">
<div class="form-group">
@@ -110,11 +113,6 @@
/>
{#if sidebarTab === 'settings'}
<div class="sidebar-box">
<h3>发布</h3>
<Button type="submit" variant="primary" fullWidth class="submit-btn">发布</Button>
</div>
<div class="sidebar-box">
<h3 style="display: flex; justify-content: space-between; align-items: center;">
<span>别名 *</span>
@@ -164,6 +162,12 @@
color: var(--text-color);
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.editor-header {
display: flex;
justify-content: space-between;
+20 -11
View File
@@ -112,6 +112,7 @@
<div class="admin-page-header">
<h2>编辑</h2>
<div class="header-actions">
<Button type="submit" form="post-form" variant="primary">保存</Button>
<Button href={resolve('/admin/posts')} variant="secondary">&larr; 返回</Button>
</div>
</div>
@@ -120,7 +121,7 @@
<Alert message={form.error} />
{/if}
<form method="POST" action="?/update" class="post-form">
<form method="POST" action="?/update" id="post-form" class="post-form">
<input type="hidden" name="published_at" value={publishedAt} />
<input type="hidden" name="updated_at" value={updatedAt} />
<div class="form-grid">
@@ -185,11 +186,6 @@
/>
{#if sidebarTab === 'settings'}
<div class="sidebar-box">
<h3>保存</h3>
<Button type="submit" variant="primary" fullWidth class="submit-btn">保存</Button>
</div>
<div class="sidebar-box">
<h3>别名 *</h3>
<TextInput
@@ -237,7 +233,7 @@
</div>
<div class="sidebar-box">
<h3>标签</h3>
<h3>{$page.data.aliases?.tag || '标签'}</h3>
<div class="selected-tags-vertical">
{#each selectedTags as tagId (tagId)}
{#if tagsList.find((t) => t.id === tagId)}
@@ -248,7 +244,7 @@
type="button"
class="remove-tag-btn"
onclick={() => toggleTag(tagId)}
title="移除标签"
title="移除{$page.data.aliases?.tag || '标签'}"
><svg
viewBox="0 0 24 24"
width="14"
@@ -276,7 +272,7 @@
<TextInput
type="text"
class="tag-input-new"
placeholder="+ 添加标签..."
placeholder="+ 添加{$page.data.aliases?.tag || '标签'}..."
bind:value={newTagInput}
onkeydown={handleAddTag}
onfocus={() => (showTagDropdown = true)}
@@ -307,7 +303,10 @@
{/if}
</div>
</div>
{:else}
{/if}
<!-- 媒体面板始终挂载(仅切换显隐),确保特色图的隐藏表单项在表单提交时始终存在 -->
<div class="sidebar-panel" class:is-hidden={sidebarTab !== 'media'}>
<div class="sidebar-box">
<FeaturedImagePicker bind:cover adaptiveHeight previewable />
</div>
@@ -315,7 +314,7 @@
<h3>当前文章附件</h3>
<ArticleAttachments bind:content bind:sessionUploads />
</div>
{/if}
</div>
</div>
</div>
</form>
@@ -405,6 +404,16 @@
z-index: 10;
}
.sidebar-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.sidebar-panel.is-hidden {
display: none;
}
@media (max-width: 900px) {
.form-grid {
grid-template-columns: 1fr;
+22 -13
View File
@@ -130,6 +130,9 @@
<div class="admin-page-header">
<h2>新{$page.data.aliases?.post || '文章'}</h2>
<div class="header-actions">
<Button type="submit" form="post-form" variant="primary">
发布{$page.data.aliases?.post || '文章'}
</Button>
<Button href={resolve('/admin/posts')} variant="secondary">&larr; 返回</Button>
</div>
</div>
@@ -138,7 +141,7 @@
<Alert message={form.error} />
{/if}
<form method="POST" class="post-form">
<form method="POST" id="post-form" class="post-form">
<input type="hidden" name="published_at" value={publishedAt} />
<input type="hidden" name="updated_at" value={updatedAt} />
<div class="form-grid">
@@ -203,13 +206,6 @@
/>
{#if sidebarTab === 'settings'}
<div class="sidebar-box">
<h3>发布</h3>
<Button type="submit" variant="primary" fullWidth class="publish-btn">
发布{$page.data.aliases?.post || '文章'}
</Button>
</div>
<div class="sidebar-box">
<h3 style="display: flex; justify-content: space-between; align-items: center;">
<span>别名 *</span>
@@ -269,7 +265,7 @@
</div>
<div class="sidebar-box">
<h3>标签</h3>
<h3>{$page.data.aliases?.tag || '标签'}</h3>
<div class="selected-tags-vertical">
{#each selectedTags as tagId (tagId)}
{#if tagsList.find((t) => t.id === tagId)}
@@ -280,7 +276,7 @@
type="button"
class="remove-tag-btn"
onclick={() => toggleTag(tagId)}
title="移除标签"
title="移除{$page.data.aliases?.tag || '标签'}"
><svg
viewBox="0 0 24 24"
width="14"
@@ -308,7 +304,7 @@
<TextInput
type="text"
class="tag-input-new"
placeholder="+ 添加标签..."
placeholder="+ 添加{$page.data.aliases?.tag || '标签'}..."
bind:value={newTagInput}
onkeydown={handleAddTag}
onfocus={() => (showTagDropdown = true)}
@@ -339,7 +335,10 @@
{/if}
</div>
</div>
{:else}
{/if}
<!-- 媒体面板始终挂载(仅切换显隐),确保特色图的隐藏表单项在表单提交时始终存在 -->
<div class="sidebar-panel" class:is-hidden={sidebarTab !== 'media'}>
<div class="sidebar-box">
<FeaturedImagePicker bind:cover adaptiveHeight previewable />
</div>
@@ -347,7 +346,7 @@
<h3>当前文章附件</h3>
<ArticleAttachments bind:content bind:sessionUploads />
</div>
{/if}
</div>
</div>
</div>
</form>
@@ -437,6 +436,16 @@
z-index: 10;
}
.sidebar-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.sidebar-panel.is-hidden {
display: none;
}
@media (max-width: 900px) {
.form-grid {
grid-template-columns: 1fr;