From 59841528fcdbdf87bc8652c38c234d426102045a Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Mon, 21 Sep 2026 19:58:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/settings/+page.svelte | 187 ++++++++++++++-----------
 1 file changed, 104 insertions(+), 83 deletions(-)

diff --git a/src/routes/admin/settings/+page.svelte b/src/routes/admin/settings/+page.svelte
index 52d91e0..f44c83b 100644
--- a/src/routes/admin/settings/+page.svelte
+++ b/src/routes/admin/settings/+page.svelte
@@ -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 {