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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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