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-27 15:30:58 +08:00
1 parent 5a2f55a872
commit 8c38723947
1 file changed
+136 -140
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/settings/+page.svelte
+136 -140
View File
@@ -64,29 +64,27 @@
<div class="settings-container"> <div class="settings-container">
{#if activeTab === 'basic'} {#if activeTab === 'basic'}
<div class="settings-card full-width" style="margin-bottom: 25px;"> <div class="settings-card full-width" style="margin-bottom: 25px;">
<div class="settings-section" style="padding: 0;"> <h3>系统与安全环境</h3>
<h3>系统与安全环境</h3> <div class="info-grid">
<div class="info-grid"> <div class="info-item">
<div class="info-item"> <span class="label">驱动框架</span>
<span class="label">驱动框架</span> <span class="value">SvelteKit 5 + Cloudflare</span>
<span class="value">SvelteKit 5 + Cloudflare</span> </div>
</div> <div class="info-item">
<div class="info-item"> <span class="label">当前管理员</span>
<span class="label">当前管理员</span> <span class="value">{data.user?.email || '未知用户'}</span>
<span class="value">{data.user?.email || '未知用户'}</span> </div>
</div> <div class="info-item">
<div class="info-item"> <span class="label">数据库绑定</span>
<span class="label">数据库绑定</span> <span class="value"><span class="badge">{data.platformEnv}</span></span>
<span class="value"><span class="badge">{data.platformEnv}</span></span> </div>
</div> <div class="info-item">
<div class="info-item"> <span class="label">R2存储绑定</span>
<span class="label">R2存储绑定</span> <span class="value"><span class="badge">{data.r2Env}</span></span>
<span class="value"><span class="badge">{data.r2Env}</span></span> </div>
</div> <div class="info-item">
<div class="info-item"> <span class="label">鉴权模式</span>
<span class="label">鉴权模式</span> <span class="value">Cloudflare Access (Zero Trust)</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -234,134 +232,130 @@
{#if activeTab === 'appearance'} {#if activeTab === 'appearance'}
<div class="settings-card full-width"> <div class="settings-card full-width">
<div class="settings-section"> <h3>首页顶部主图与外观偏好</h3>
<h3>首页顶部主图与外观偏好</h3>
<form <form
method="POST" method="POST"
action="?/updateAppearance" action="?/updateAppearance"
use:enhance={() => { use:enhance={() => {
return async ({ update }) => { return async ({ update }) => {
update({ reset: false }); update({ reset: false });
}; };
}} }}
class="alias-form" class="alias-form"
> >
<div class="form-group">
<label class="toggle-label">
<input type="checkbox" name="site_avatar_enabled_cb" bind:checked={avatarEnabled} />
<input
type="hidden"
name="site_avatar_enabled"
value={avatarEnabled ? 'true' : 'false'}
/>
<span class="toggle-text">在网站首页顶部标题栏显示主图 / 站点头像</span>
</label>
</div>
{#if avatarEnabled}
<div class="form-group"> <div class="form-group">
<label class="toggle-label"> <label for="picker">主页显示图片</label>
<input type="checkbox" name="site_avatar_enabled_cb" bind:checked={avatarEnabled} /> <div class="picker-container" style="max-width: 300px;">
<input <ImagePicker
type="hidden" bind:cover={avatarUrl}
name="site_avatar_enabled" title=""
value={avatarEnabled ? 'true' : 'false'} inputName="site_avatar_url"
aspectRatio="1/1"
/> />
<span class="toggle-text">在网站首页顶部标题栏显示主图 / 站点头像</span>
</label>
</div>
{#if avatarEnabled}
<div class="form-group">
<label for="picker">主页显示图片</label>
<div class="picker-container" style="max-width: 300px;">
<ImagePicker
bind:cover={avatarUrl}
title=""
inputName="site_avatar_url"
aspectRatio="1/1"
/>
</div>
</div> </div>
{:else}
<input type="hidden" name="site_avatar_url" value={avatarUrl} />
{/if}
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存外观偏好</Button>
</div> </div>
</form> {:else}
</div> <input type="hidden" name="site_avatar_url" value={avatarUrl} />
{/if}
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存外观偏好</Button>
</div>
</form>
</div> </div>
{/if} {/if}
{#if activeTab === 'terms'} {#if activeTab === 'terms'}
<div class="settings-card full-width"> <div class="settings-card full-width">
<div class="settings-section"> <h3>个性化术语设定</h3>
<h3>个性化术语设定</h3> <p class="desc">
<p class="desc"> 您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。
您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。 </p>
</p>
<form <form
method="POST" method="POST"
action="?/updateAliases" action="?/updateAliases"
use:enhance={() => { use:enhance={() => {
return async ({ update }) => { return async ({ update }) => {
update({ reset: false }); update({ reset: false });
}; };
}} }}
class="alias-form" class="alias-form"
> >
<div class="form-row"> <div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="alias_post">文章</label> <label for="alias_post">文章</label>
<TextInput <TextInput
type="text" type="text"
id="alias_post" id="alias_post"
name="alias_post" name="alias_post"
value={data.settings['alias.post'] || '文章'} value={data.settings['alias.post'] || '文章'}
required required
/> />
</div>
<div class="form-group">
<label for="alias_page">页面</label>
<TextInput
type="text"
id="alias_page"
name="alias_page"
value={data.settings['alias.page'] || '页面'}
required
/>
</div>
</div> </div>
<div class="form-group">
<label for="alias_page">页面</label>
<TextInput
type="text"
id="alias_page"
name="alias_page"
value={data.settings['alias.page'] || '页面'}
required
/>
</div>
</div>
<div class="form-row"> <div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="alias_category">分类</label> <label for="alias_category">分类</label>
<TextInput <TextInput
type="text" type="text"
id="alias_category" id="alias_category"
name="alias_category" name="alias_category"
value={data.settings['alias.category'] || '分类'} value={data.settings['alias.category'] || '分类'}
required required
/> />
</div>
<div class="form-group">
<label for="alias_tag">标签</label>
<TextInput
type="text"
id="alias_tag"
name="alias_tag"
value={data.settings['alias.tag'] || '标签'}
required
/>
</div>
<div class="form-group">
<label for="alias_series">系列</label>
<TextInput
type="text"
id="alias_series"
name="alias_series"
value={data.settings['alias.series'] || '系列'}
required
/>
</div>
</div> </div>
<div class="form-group">
<label for="alias_tag">标签</label>
<TextInput
type="text"
id="alias_tag"
name="alias_tag"
value={data.settings['alias.tag'] || '标签'}
required
/>
</div>
<div class="form-group">
<label for="alias_series">系列</label>
<TextInput
type="text"
id="alias_series"
name="alias_series"
value={data.settings['alias.series'] || '系列'}
required
/>
</div>
</div>
<div class="form-actions" style="justify-content: flex-start;"> <div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存</Button> <Button type="submit" variant="primary">保存</Button>
</div> </div>
</form> </form>
</div>
</div> </div>
{:else if activeTab === 'analytics'} {:else if activeTab === 'analytics'}
<AnalyticsPanel analyticsPromise={data.analytics} /> <AnalyticsPanel analyticsPromise={data.analytics} />
@@ -448,14 +442,16 @@
word-break: break-word; word-break: break-word;
} }
.settings-card h3 { .settings-card > h3 {
margin: 0 0 16px 0; margin: 0 0 12px 0;
font-size: 1.2rem; font-size: 1.2rem;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
padding-bottom: 10px;
color: var(--text-color); color: var(--text-color);
font-weight: 600;
} }
.settings-section .desc { .settings-section .desc,
.settings-card > .desc {
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-muted, rgba(0, 0, 0, 0.6)); color: var(--text-muted, rgba(0, 0, 0, 0.6));
margin-bottom: 24px; margin-bottom: 24px;