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
+86 -84
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/settings/+page.svelte
+86 -84
View File
@@ -63,8 +63,8 @@
<div class="settings-container">
{#if activeTab === 'basic'}
<div class="basic-top-row">
<div class="settings-card">
<div class="settings-card full-width">
<div class="settings-section">
<h3>站点基础信息</h3>
<form
@@ -122,39 +122,43 @@
</div>
</div>
<div class="form-actions">
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存</Button>
</div>
</form>
</div>
<div class="settings-card">
<hr class="section-divider" />
<div class="settings-section">
<h3>系统与安全环境</h3>
<div class="info-row">
<div class="info-grid">
<div class="info-item">
<span class="label">驱动框架</span>
<span class="value">SvelteKit 5 + Cloudflare</span>
</div>
<div class="info-row">
<div class="info-item">
<span class="label">当前管理员</span>
<span class="value">{data.user?.email || '未知用户'}</span>
</div>
<div class="info-row">
<div class="info-item">
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="info-row">
<div class="info-item">
<span class="label">R2存储绑定</span>
<span class="value"><span class="badge">{data.r2Env}</span></span>
</div>
<div class="info-row">
<div class="info-item">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</div>
</div>
<div class="two-columns-row">
<div class="settings-card">
<hr class="section-divider" />
<div class="settings-section">
<h3>图片上传</h3>
<form
method="POST"
@@ -175,13 +179,15 @@
WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
</p>
<div class="form-actions" style="margin-top: auto;">
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存上传设置</Button>
</div>
</form>
</div>
<div class="settings-card">
<hr class="section-divider" />
<div class="settings-section">
<h3>API 与 AI 集成</h3>
<p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
@@ -197,9 +203,8 @@
};
}}
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>
<div style="display: flex; gap: 10px; align-items: center; width: 100%;">
<TextInput
@@ -225,14 +230,15 @@
>
</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>
</div>
</form>
</div>
</div>
<div class="settings-card full-width" style="margin-top: 25px;">
<hr class="section-divider" />
<div class="settings-section">
<h3>Cloudflare Web Analytics</h3>
<p class="desc">
填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写
@@ -264,10 +270,12 @@
</div>
</form>
</div>
</div>
{/if}
{#if activeTab === 'appearance'}
<div class="settings-card full-width">
<div class="settings-section">
<h3>首页顶部主图与外观偏好</h3>
<form
@@ -295,7 +303,7 @@
{#if avatarEnabled}
<div class="form-group">
<label for="picker">主页显示图片</label>
<div class="picker-container">
<div class="picker-container" style="max-width: 300px;">
<ImagePicker
bind:cover={avatarUrl}
title=""
@@ -308,15 +316,17 @@
<input type="hidden" name="site_avatar_url" value={avatarUrl} />
{/if}
<div class="form-actions">
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存外观偏好</Button>
</div>
</form>
</div>
</div>
{/if}
{#if activeTab === 'terms'}
<div class="settings-card full-width">
<div class="settings-section">
<h3>个性化术语设定</h3>
<p class="desc">
您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。
@@ -388,11 +398,12 @@
</div>
</div>
<div class="form-actions">
<div class="form-actions" style="justify-content: flex-start;">
<Button type="submit" variant="primary">保存</Button>
</div>
</form>
</div>
</div>
{:else if activeTab === 'analytics'}
<AnalyticsPanel analyticsPromise={data.analytics} />
{/if}
@@ -418,34 +429,6 @@
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 {
grid-column: 1 / -1;
}
@@ -458,49 +441,68 @@
flex-direction: column;
}
.settings-card h3 {
margin: 0 0 12px 0;
font-size: 1.2rem;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
padding-bottom: 10px;
color: var(--text-color);
.settings-section {
display: flex;
flex-direction: column;
padding: 10px 0;
}
.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;
color: var(--text-muted, rgba(0, 0, 0, 0.6));
margin-bottom: 24px;
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 {
display: flex;
flex-direction: column;