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"> <div class="settings-container">
{#if activeTab === 'basic'} {#if activeTab === 'basic'}
<div class="settings-card full-width"> <div class="basic-top-row">
<h3>站点基础信息</h3> <div class="settings-card">
<h3>站点基础信息</h3>
<form <form
method="POST" method="POST"
action="?/updateSiteInfo" action="?/updateSiteInfo"
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="site_title">网站标题</label> <label for="site_title">网站标题</label>
<TextInput <TextInput
type="text" type="text"
id="site_title" id="site_title"
name="site_title" name="site_title"
value={data.settings['site.title'] || 'BlogFlare'} value={data.settings['site.title'] || 'BlogFlare'}
required 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>
<div class="form-group">
<label for="site_description">站点描述</label> <div class="form-row">
<TextInput <div class="form-group">
type="text" <label for="r2_public_domain">R2 自定义域名</label>
id="site_description" <TextInput
name="site_description" type="text"
value={data.settings['site.description'] || id="r2_public_domain"
'A high-performance blog powered by Cloudflare D1, R2, and KV.'} name="r2_public_domain"
required 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>
<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>
<div class="info-row">
<div class="form-row"> <span class="label">驱动框架</span>
<div class="form-group"> <span class="value">SvelteKit 5 + Cloudflare</span>
<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>
<div class="info-row">
<div class="form-actions"> <span class="label">当前管理员</span>
<Button type="submit" variant="primary">保存</Button> <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>
</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> </div>
<div class="settings-card full-width"> <div class="settings-card full-width">
<h3>API 与 AI 集成 (Agent/MCP)</h3> <h3>API 与 AI 集成</h3>
<p class="desc"> <p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header 配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。 中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
@@ -169,11 +171,17 @@
<Button <Button
type="button" type="button"
variant="secondary" variant="secondary"
style="white-space: nowrap;"
onclick={() => (showApiToken = !showApiToken)} onclick={() => (showApiToken = !showApiToken)}
> >
{showApiToken ? '隐藏' : '显示'} {showApiToken ? '隐藏' : '显示'}
</Button> </Button>
<Button type="button" variant="secondary" onclick={generateApiToken}>自动生成</Button> <Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={generateApiToken}>自动生成</Button
>
</div> </div>
</div> </div>
<div class="form-actions"> <div class="form-actions">
@@ -327,11 +335,24 @@
} }
.settings-container { .settings-container {
display: flex;
flex-direction: column;
gap: 25px;
width: 100%;
}
.basic-top-row {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: 2fr 1fr;
gap: 25px; gap: 25px;
align-items: stretch; align-items: stretch;
max-width: 860px; width: 100%;
}
@media (max-width: 1024px) {
.basic-top-row {
grid-template-columns: 1fr;
}
} }
.full-width { .full-width {