refactor: 优化后台设置页面布局与样式

src/routes/admin/settings/+page.svelte

@@ -51,7 +51,8 @@
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
-		<div class="settings-card full-width">
+		<div class="basic-top-row">
+			<div class="settings-card">
 				<h3>站点基础信息</h3>
 
 				<form
@@ -115,7 +116,7 @@
 				</form>
 			</div>
 
-		<div class="settings-card full-width">
+			<div class="settings-card">
 				<h3>系统与安全环境</h3>
 				<div class="info-row">
 					<span class="label">主题风格</span>
@@ -138,9 +139,10 @@
 					<span class="value">Cloudflare Access (Zero Trust)</span>
 				</div>
 			</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 {