refactor: 优化后台设置页面与文章大纲的卡片样式和布局

src/lib/components/admin/ArticleOutline.svelte

@@ -54,7 +54,6 @@
 		width: 100%;
 		border: 0;
 		border-left: 2px solid transparent;
-		border-radius: 3px;
 		padding: 8px 10px;
 		background: transparent;
 		color: var(--text-color);

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

@@ -63,8 +63,8 @@
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
-		<h3 class="section-title">系统与安全环境</h3>
-		<div class="settings-card full-width" style="margin-bottom: 25px; padding: 0; border: none;">
+		<div class="settings-card full-width">
+			<h3 class="section-title">系统与安全环境</h3>
 			<div class="info-grid" style="margin: 0;">
 				<div class="info-item">
 					<span class="label">驱动框架</span>
@@ -99,8 +99,8 @@
 			}}
 			class="alias-form"
 		>
-			<h3 class="section-title">站点基础信息</h3>
 			<div class="settings-card full-width">
+				<h3 class="section-title">站点基础信息</h3>
 				<div class="form-row">
 					<div class="form-group">
 						<label for="site_title">网站标题</label>
@@ -147,8 +147,8 @@
 				</div>
 			</div>
 
-			<h3 class="section-title" style="margin-top: 25px;">图片上传</h3>
 			<div class="settings-card full-width">
+				<h3 class="section-title">图片上传</h3>
 				<label class="toggle-label">
 					<input type="checkbox" name="upload_auto_webp" value="true" bind:checked={autoWebp} />
 					<span class="toggle-text">上传图片时自动转换为 WebP</span>
@@ -160,8 +160,8 @@
 				</p>
 			</div>
 
-			<h3 class="section-title" style="margin-top: 25px;">API 与 AI 集成</h3>
 			<div class="settings-card full-width">
+				<h3 class="section-title">API 与 AI 集成</h3>
 				<p class="desc">
 					配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
 					中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
@@ -194,8 +194,8 @@
 				</div>
 			</div>
 
-			<h3 class="section-title" style="margin-top: 25px;">Cloudflare Web Analytics</h3>
 			<div class="settings-card full-width">
+				<h3 class="section-title">Cloudflare Web Analytics</h3>
 				<p class="desc">
 					填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写
 					Site Tag；它是查询标识，不能用于浏览器采集。后台查询还需配置 CF_ACCOUNT_ID， 并确保
@@ -223,8 +223,8 @@
 	{/if}
 
 	{#if activeTab === 'appearance'}
-		<h3 class="section-title">首页顶部主图与外观偏好</h3>
 		<div class="settings-card full-width">
+			<h3 class="section-title">首页顶部主图与外观偏好</h3>
 			<form
 				method="POST"
 				action="?/updateAppearance"
@@ -271,8 +271,8 @@
 	{/if}
 
 	{#if activeTab === 'terms'}
-		<h3 class="section-title">个性化术语设定</h3>
 		<div class="settings-card full-width">
+			<h3 class="section-title">个性化术语设定</h3>
 			<p class="desc">
 				您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。
 			</p>
@@ -385,11 +385,13 @@
 	}
 
 	.settings-card {
-		border: none;
-		padding: 0 0 35px 0;
-		background: transparent;
+		border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+		padding: 24px;
+		background: var(--bg-surface, #ffffff);
+		border-radius: 6px;
 		display: flex;
 		flex-direction: column;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 	}
 
 	.info-grid {
@@ -430,7 +432,7 @@
 	.alias-form {
 		display: flex;
 		flex-direction: column;
-		gap: 20px;
+		gap: 25px;
 	}
 
 	.form-row {