seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(admin): 优化后台设置界面布局并增加 R2 绑定状态展示
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 将“图片上传”和“API 与 AI 集成”卡片调整为双列同行显示
- 移除“系统与安全环境”面板中无需展示的“主题风格”项
- 服务端增加对 R2 环境变量的读取，并在面板中展示 R2 存储绑定状态
This commit is contained in:
seahi committed 2026-09-26 14:38:56 +08:00
1 parent fe8ea56d9b
commit d5ae0d392b
2 files changed
+96 -77
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/routes/admin/settings/+page.server.ts
+2
View File
@@ -6,6 +6,7 @@ import { fetchAnalytics } from '$lib/server/cloudflare';
export const load: PageServerLoad = async ({ locals, platform }) => {
const db = platform?.env?.DB;
const r2 = platform?.env?.R2;
const settings: Record<string, string> = {};
if (db) {
@@ -22,6 +23,7 @@ export const load: PageServerLoad = async ({ locals, platform }) => {
return {
user: locals.user,
platformEnv: db ? 'Cloudflare D1 (Connected)' : 'Local Mock',
r2Env: r2 ? 'Cloudflare R2 (Connected)' : 'Local Mock',
settings,
analytics: fetchAnalytics(platform) // Streaming promise
};
src/routes/admin/settings/+page.svelte
+94 -77
View File
@@ -121,10 +121,6 @@
<div class="settings-card">
<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>
@@ -137,6 +133,10 @@
<span class="label">数据库绑定</span>
<span class="value"><span class="badge">{data.platformEnv}</span></span>
</div>
<div class="info-row">
<span class="label">R2存储绑定</span>
<span class="value"><span class="badge">{data.r2Env}</span></span>
</div>
<div class="info-row">
<span class="label">鉴权模式</span>
<span class="value">Cloudflare Access (Zero Trust)</span>
@@ -144,80 +144,83 @@
</div>
</div>
<div class="settings-card full-width">
<h3>图片上传</h3>
<form
method="POST"
action="?/updateUploads"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
class="alias-form"
>
<label class="toggle-label">
<input type="checkbox" name="upload_auto_webp" value="true" bind:checked={autoWebp} />
<span class="toggle-text">上传图片时自动转换为 WebP</span>
</label>
<p class="desc">
默认关闭。开启后，后台各入口上传的 JPEG / PNG 图片会在浏览器中以 80% 质量转换为
WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
</p>
<div class="form-actions">
<Button type="submit" variant="primary">保存上传设置</Button>
</div>
</form>
</div>
<div class="settings-card full-width">
<h3>API 与 AI 集成</h3>
<p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
</p>
<form
method="POST"
action="?/updateApiToken"
use:enhance={() => {
return async ({ update }) => {
update({ reset: false });
};
}}
class="alias-form"
>
<div class="form-group">
<label for="agent_api_token">API Token</label>
<div style="display: flex; gap: 10px; align-items: center; width: 100%;">
<TextInput
type={showApiToken ? 'text' : 'password'}
id="agent_api_token"
name="agent_api_token"
bind:value={apiToken}
placeholder="留空则禁用对外 API 访问"
/>
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={() => (showApiToken = !showApiToken)}
>
{showApiToken ? '隐藏' : '显示'}
</Button>
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={generateApiToken}>自动生成</Button
>
<div class="two-columns-row">
<div class="settings-card">
<h3>图片上传</h3>
<form
method="POST"
action="?/updateUploads"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
class="alias-form"
>
<label class="toggle-label">
<input type="checkbox" name="upload_auto_webp" value="true" bind:checked={autoWebp} />
<span class="toggle-text">上传图片时自动转换为 WebP</span>
</label>
<p class="desc">
默认关闭。开启后，后台各入口上传的 JPEG / PNG 图片会在浏览器中以 80% 质量转换为
WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
</p>
<div class="form-actions" style="margin-top: auto;">
<Button type="submit" variant="primary">保存上传设置</Button>
</div>
</div>
<div class="form-actions">
<Button type="submit" variant="primary">保存 Token</Button>
</div>
</form>
</form>
</div>
<div class="settings-card">
<h3>API 与 AI 集成</h3>
<p class="desc">
配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
</p>
<form
method="POST"
action="?/updateApiToken"
use:enhance={() => {
return async ({ update }) => {
update({ reset: false });
};
}}
class="alias-form"
style="height: 100%; display: flex; flex-direction: column;"
>
<div class="form-group">
<label for="agent_api_token">API Token</label>
<div style="display: flex; gap: 10px; align-items: center; width: 100%;">
<TextInput
type={showApiToken ? 'text' : 'password'}
id="agent_api_token"
name="agent_api_token"
bind:value={apiToken}
placeholder="留空则禁用对外 API 访问"
/>
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={() => (showApiToken = !showApiToken)}
>
{showApiToken ? '隐藏' : '显示'}
</Button>
<Button
type="button"
variant="secondary"
style="white-space: nowrap;"
onclick={generateApiToken}>自动生成</Button
>
</div>
</div>
<div class="form-actions" style="margin-top: auto;">
<Button type="submit" variant="primary">保存 Token</Button>
</div>
</form>
</div>
</div>
{/if}
@@ -387,6 +390,20 @@
}
}
.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;
}