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-21 19:58:05 +08:00
1 parent ecbae7dc6a
commit 59841528fc
1 file changed
+104 -83
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/settings/+page.svelte
+104 -83
View File
@@ -51,96 +51,98 @@
<div class="settings-container">
{#if activeTab === 'basic'}
<div class="settings-card full-width">
<h3>站点基础信息</h3>
<div class="basic-top-row">
<div class="settings-card">
<h3>站点基础信息</h3>
<form
method="POST"
action="?/updateSiteInfo"
use:enhance={() => {
return async ({ update }) => {
update({ reset: false });
};
}}
class="alias-form"
>
<div class="form-row">
<div class="form-group">
<label for="site_title">网站标题</label>
<TextInput
type="text"
id="site_title"
name="site_title"
value={data.settings['site.title'] || 'BlogFlare'}
required
/>
<form
method="POST"
action="?/updateSiteInfo"
use:enhance={() => {
return async ({ update }) => {
update({ reset: false });
};
}}
class="alias-form"
>
<div class="form-row">
<div class="form-group">
<label for="site_title">网站标题</label>
<TextInput
type="text"
id="site_title"
name="site_title"
value={data.settings['site.title'] || 'BlogFlare'}
required
/>
</div>
<div class="form-group">
<label for="site_description">站点描述</label>
<TextInput
type="text"
id="site_description"
name="site_description"
value={data.settings['site.description'] ||
'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
required
/>
</div>
</div>
<div class="form-group">
<label for="site_description">站点描述</label>
<TextInput
type="text"
id="site_description"
name="site_description"
value={data.settings['site.description'] ||
'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
required
/>
<div class="form-row">
<div class="form-group">
<label for="r2_public_domain">R2 自定义域名</label>
<TextInput
type="text"
id="r2_public_domain"
name="r2_public_domain"
value={data.settings['r2.public_domain'] || 'https://assets.yourdomain.com'}
placeholder="例如: https://assets.mydomain.com"
/>
</div>
<div class="form-group">
<label for="site_launch_date">建站日期</label>
<DatePicker
id="site_launch_date"
name="site_launch_date"
value={data.settings['site.launch_date'] || ''}
/>
</div>
</div>
<div class="form-actions">
<Button type="submit" variant="primary">保存</Button>
</div>
</form>
</div>
<div class="settings-card">
<h3>系统与安全环境</h3>
<div class="info-row">
<span class="label">主题风格</span>
<span class="value">Typecho Theme VOID</span>
</div>
<div class="form-row">
<div class="form-group">
<label for="r2_public_domain">R2 自定义域名</label>
<TextInput
type="text"
id="r2_public_domain"
name="r2_public_domain"
value={data.settings['r2.public_domain'] || 'https://assets.yourdomain.com'}
placeholder="例如: https://assets.mydomain.com"
/>
</div>
<div class="form-group">
<label for="site_launch_date">建站日期</label>
<DatePicker
id="site_launch_date"
name="site_launch_date"
value={data.settings['site.launch_date'] || ''}
/>
</div>
<div class="info-row">
<span class="label">驱动框架</span>
<span class="value">SvelteKit 5 + Cloudflare</span>
</div>
<div class="form-actions">
<Button type="submit" variant="primary">保存</Button>
<div class="info-row">
<span class="label">当前管理员</span>
<span class="value">{data.user?.email || '未知用户'}</span>
</div>
<div class="info-row">
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="info-row">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</form>
</div>
<div class="settings-card full-width">
<h3>系统与安全环境</h3>
<div class="info-row">
<span class="label">主题风格</span>
<span class="value">Typecho Theme VOID</span>
</div>
<div class="info-row">
<span class="label">驱动框架</span>
<span class="value">SvelteKit 5 + Cloudflare</span>
</div>
<div class="info-row">
<span class="label">当前管理员</span>
<span class="value">{data.user?.email || '未知用户'}</span>
</div>
<div class="info-row">
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="info-row">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
</div>
</div>
<div class="settings-card full-width">
<h3>API 与 AI 集成 (Agent/MCP)</h3>
<h3>API 与 AI 集成</h3>
<p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
@@ -169,11 +171,17 @@
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={() => (showApiToken = !showApiToken)}
>
{showApiToken ? '隐藏' : '显示'}
</Button>
<Button type="button" variant="secondary" onclick={generateApiToken}>自动生成</Button>
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={generateApiToken}>自动生成</Button
>
</div>
</div>
<div class="form-actions">
@@ -327,11 +335,24 @@
}
.settings-container {
display: flex;
flex-direction: column;
gap: 25px;
width: 100%;
}
.basic-top-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: 2fr 1fr;
gap: 25px;
align-items: stretch;
max-width: 860px;
width: 100%;
}
@media (max-width: 1024px) {
.basic-top-row {
grid-template-columns: 1fr;
}
}
.full-width {