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:11:25 +08:00
1 parent 7039939f1a
commit bf304cee0f
1 file changed
+237 -235
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/settings/+page.svelte
+237 -235
View File
@@ -63,8 +63,8 @@
<div class="settings-container"> <div class="settings-container">
{#if activeTab === 'basic'} {#if activeTab === 'basic'}
<div class="basic-top-row"> <div class="settings-card full-width">
<div class="settings-card"> <div class="settings-section">
<h3>站点基础信息</h3> <h3>站点基础信息</h3>
<form <form
@@ -122,39 +122,43 @@
</div> </div>
</div> </div>
<div class="form-actions"> <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 class="settings-card"> <hr class="section-divider" />
<div class="settings-section">
<h3>系统与安全环境</h3> <h3>系统与安全环境</h3>
<div class="info-row"> <div class="info-grid">
<span class="label">驱动框架</span> <div class="info-item">
<span class="value">SvelteKit 5 + Cloudflare</span> <span class="label">驱动框架</span>
</div> <span class="value">SvelteKit 5 + Cloudflare</span>
<div class="info-row"> </div>
<span class="label">当前管理员</span> <div class="info-item">
<span class="value">{data.user?.email || '未知用户'}</span> <span class="label">当前管理员</span>
</div> <span class="value">{data.user?.email || '未知用户'}</span>
<div class="info-row"> </div>
<span class="label">数据库绑定</span> <div class="info-item">
<span class="value"><span class="badge">{data.platformEnv}</span></span> <span class="label">数据库绑定</span>
</div> <span class="value"><span class="badge">{data.platformEnv}</span></span>
<div class="info-row"> </div>
<span class="label">R2存储绑定</span> <div class="info-item">
<span class="value"><span class="badge">{data.r2Env}</span></span> <span class="label">R2存储绑定</span>
</div> <span class="value"><span class="badge">{data.r2Env}</span></span>
<div class="info-row"> </div>
<span class="label">鉴权模式</span> <div class="info-item">
<span class="value">Cloudflare Access (Zero Trust)</span> <span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</div> </div>
</div> </div>
</div>
<div class="two-columns-row"> <hr class="section-divider" />
<div class="settings-card">
<div class="settings-section">
<h3>图片上传</h3> <h3>图片上传</h3>
<form <form
method="POST" method="POST"
@@ -175,13 +179,15 @@
WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。 WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
仅影响新上传图片；直接调用上传 API 的客户端需自行转换。 仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
</p> </p>
<div class="form-actions" style="margin-top: auto;"> <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 class="settings-card"> <hr class="section-divider" />
<div class="settings-section">
<h3>API 与 AI 集成</h3> <h3>API 与 AI 集成</h3>
<p class="desc"> <p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header 配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
@@ -197,9 +203,8 @@
}; };
}} }}
class="alias-form" class="alias-form"
style="height: 100%; display: flex; flex-direction: column;"
> >
<div class="form-group"> <div class="form-group" style="max-width: 500px;">
<label for="agent_api_token">API Token</label> <label for="agent_api_token">API Token</label>
<div style="display: flex; gap: 10px; align-items: center; width: 100%;"> <div style="display: flex; gap: 10px; align-items: center; width: 100%;">
<TextInput <TextInput
@@ -225,173 +230,179 @@
> >
</div> </div>
</div> </div>
<div class="form-actions" style="margin-top: auto;"> <div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存 Token</Button> <Button type="submit" variant="primary">保存 Token</Button>
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="settings-card full-width" style="margin-top: 25px;"> <hr class="section-divider" />
<h3>Cloudflare Web Analytics</h3>
<p class="desc"> <div class="settings-section">
填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写 <h3>Cloudflare Web Analytics</h3>
Site Tag；它是查询标识，不能用于浏览器采集。后台查询还需配置 CF_ACCOUNT_ID， 并确保 <p class="desc">
CF_API_TOKEN 具有该账户的 Account Settings Read 和 Account Analytics Read 权限。 填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写
</p> Site Tag；它是查询标识，不能用于浏览器采集。后台查询还需配置 CF_ACCOUNT_ID， 并确保
<form CF_API_TOKEN 具有该账户的 Account Settings Read 和 Account Analytics Read 权限。
method="POST" </p>
action="?/updateWebAnalytics" <form
use:enhance={() => { method="POST"
return async ({ update }) => { action="?/updateWebAnalytics"
update({ reset: false }); use:enhance={() => {
}; return async ({ update }) => {
}} update({ reset: false });
class="alias-form" };
> }}
<div class="form-group" style="max-width: 500px;"> class="alias-form"
<label for="web_analytics_token">Web Analytics Token</label> >
<TextInput <div class="form-group" style="max-width: 500px;">
type="text" <label for="web_analytics_token">Web Analytics Token</label>
id="web_analytics_token" <TextInput
name="web_analytics_token" type="text"
value={data.settings['site.web_analytics_token'] || ''} id="web_analytics_token"
placeholder="留空则禁用数据拉取和自动注入" name="web_analytics_token"
/> value={data.settings['site.web_analytics_token'] || ''}
</div> placeholder="留空则禁用数据拉取和自动注入"
<div class="form-actions" style="justify-content: flex-start;"> />
<Button type="submit" variant="primary">保存统计设置</Button> </div>
</div> <div class="form-actions" style="justify-content: flex-start;">
</form> <Button type="submit" variant="primary">保存统计设置</Button>
</div>
</form>
</div>
</div> </div>
{/if} {/if}
{#if activeTab === 'appearance'} {#if activeTab === 'appearance'}
<div class="settings-card full-width"> <div class="settings-card full-width">
<h3>首页顶部主图与外观偏好</h3> <div class="settings-section">
<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 for="picker">主页显示图片</label> <label class="toggle-label">
<div class="picker-container"> <input type="checkbox" name="site_avatar_enabled_cb" bind:checked={avatarEnabled} />
<ImagePicker <input
bind:cover={avatarUrl} type="hidden"
title="" name="site_avatar_enabled"
inputName="site_avatar_url" value={avatarEnabled ? 'true' : 'false'}
aspectRatio="1/1"
/> />
</div> <span class="toggle-text">在网站首页顶部标题栏显示主图 / 站点头像</span>
</label>
</div> </div>
{:else}
<input type="hidden" name="site_avatar_url" value={avatarUrl} />
{/if}
<div class="form-actions"> {#if avatarEnabled}
<Button type="submit" variant="primary">保存外观偏好</Button> <div class="form-group">
</div> <label for="picker">主页显示图片</label>
</form> <div class="picker-container" style="max-width: 300px;">
<ImagePicker
bind:cover={avatarUrl}
title=""
inputName="site_avatar_url"
aspectRatio="1/1"
/>
</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>
</form>
</div>
</div> </div>
{/if} {/if}
{#if activeTab === 'terms'} {#if activeTab === 'terms'}
<div class="settings-card full-width"> <div class="settings-card full-width">
<h3>个性化术语设定</h3> <div class="settings-section">
<p class="desc"> <h3>个性化术语设定</h3>
您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。 <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"> <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} />
@@ -418,34 +429,6 @@
width: 100%; width: 100%;
} }
.basic-top-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 25px;
align-items: stretch;
width: 100%;
}
@media (max-width: 1024px) {
.basic-top-row {
grid-template-columns: 1fr;
}
}
.two-columns-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
align-items: stretch;
width: 100%;
}
@media (max-width: 1024px) {
.two-columns-row {
grid-template-columns: 1fr;
}
}
.full-width { .full-width {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -458,49 +441,68 @@
flex-direction: column; flex-direction: column;
} }
.settings-card h3 { .settings-section {
margin: 0 0 12px 0; display: flex;
font-size: 1.2rem; flex-direction: column;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)); padding: 10px 0;
padding-bottom: 10px;
color: var(--text-color);
} }
.settings-card .desc { .settings-section h3 {
margin: 0 0 16px 0;
font-size: 1.2rem;
color: var(--text-color);
font-weight: 600;
}
.section-divider {
border: 0;
border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
margin: 25px 0;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px 20px;
background: rgba(0, 0, 0, 0.02);
padding: 24px;
border-radius: 8px;
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}
.info-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-item .label {
color: var(--text-muted, rgba(0, 0, 0, 0.6));
font-size: 0.85rem;
font-weight: 500;
}
.info-item .value {
color: var(--text-color);
font-weight: 600;
font-size: 0.95rem;
word-break: break-word;
}
.settings-card h3 {
margin: 0 0 16px 0;
font-size: 1.2rem;
color: var(--text-color);
font-weight: 600;
}
.settings-section .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;
line-height: 1.5; line-height: 1.5;
} }
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px dashed var(--border-color, rgba(0, 0, 0, 0.08));
font-size: 0.95rem;
gap: 15px;
}
.info-row:last-child {
border-bottom: none;
}
.info-row .label {
color: var(--text-muted, rgba(0, 0, 0, 0.6));
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.info-row .value {
color: var(--text-color);
font-weight: 600;
text-align: right;
word-break: break-word;
}
.alias-form { .alias-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;