From d5ae0d392bc8b9e0d5f4e59843e848e3dd68a367 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 26 Sep 2026 14:38:56 +0800
Subject: [PATCH] =?UTF-8?q?ui(admin):=20=E4=BC=98=E5=8C=96=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E8=AE=BE=E7=BD=AE=E7=95=8C=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=B9=B6=E5=A2=9E=E5=8A=A0=20R2=20=E7=BB=91=E5=AE=9A=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将“图片上传”和“API 与 AI 集成”卡片调整为双列同行显示
- 移除“系统与安全环境”面板中无需展示的“主题风格”项
- 服务端增加对 R2 环境变量的读取，并在面板中展示 R2 存储绑定状态
---
 src/routes/admin/settings/+page.server.ts |   2 +
 src/routes/admin/settings/+page.svelte    | 171 ++++++++++++----------
 2 files changed, 96 insertions(+), 77 deletions(-)

diff --git a/src/routes/admin/settings/+page.server.ts b/src/routes/admin/settings/+page.server.ts
index 7d1ed57..7c58918 100644
--- a/src/routes/admin/settings/+page.server.ts
+++ b/src/routes/admin/settings/+page.server.ts
@@ -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
 	};
diff --git a/src/routes/admin/settings/+page.svelte b/src/routes/admin/settings/+page.svelte
index 081212c..5cad776 100644
--- a/src/routes/admin/settings/+page.svelte
+++ b/src/routes/admin/settings/+page.svelte
@@ -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;
 	}