From 21bf48d34ef818d7b3a9fc43b464eb903ba39e0c Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Mon, 12 Jan 2026 10:03:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=A1=E7=89=87=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=AB=99=E9=95=BF=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增毛玻璃饱和度设置 (argon_card_saturate)，默认 180%
- 更新默认值为最优设置：
  - 卡片透明度: 0.7 (原 1)
  - 毛玻璃模糊: 20px (原 8px)
  - 毛玻璃饱和度: 180%
- CSS 使用变量 --card-opacity, --card-blur, --card-saturate
- 玻璃风格样式改用 CSS 变量，跟随站长设置
- 所有页面(首页/文章页/页面模板)统一应用相同设置
- 设置页预览支持饱和度实时预览
- 暗色模式卡片背景色统一为 rgba(66,66,66,opacity)
---
 header.php   | 98 +++++++++++++++++++++++++---------------------------
 settings.php | 46 +++++++++++++++++-------
 style.css    | 35 ++++++++++---------
 3 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/header.php b/header.php
index 84de056..7c9e365 100644
--- a/header.php
+++ b/header.php
@@ -614,6 +614,26 @@
 
 </style>
 
+<?php
+// 卡片毛玻璃效果设置
+$card_opacity = get_option('argon_post_background_opacity', '0.7');
+$card_blur = get_option('argon_card_blur', '20');
+$card_saturate = get_option('argon_card_saturate', '180');
+
+// 如果透明度为空或为1，使用推荐默认值
+if ($card_opacity == '' || $card_opacity == '1') {
+	$card_opacity = '0.7';
+}
+?>
+
+<style id="theme_card_effect_css">
+	:root {
+		--card-opacity: <?php echo $card_opacity; ?>;
+		--card-blur: <?php echo $card_blur; ?>px;
+		--card-saturate: <?php echo $card_saturate; ?>%;
+	}
+</style>
+
 <?php
 // 动画效果设置
 $animation_style = get_option('argon_animation_style', 'material3');
@@ -1165,17 +1185,16 @@ if ($animation_style == 'apple') {
 
 		<?php } ?>
 
-		/* 文章背景透明度 - 包含文章和评论区 */
+		/* 卡片透明度和毛玻璃效果 - 使用 CSS 变量 */
 		<?php 
-		$post_bg_opacity = get_option('argon_post_background_opacity');
-		$card_blur = intval(get_option('argon_card_blur', '8'));
+		$post_bg_opacity_inline = get_option('argon_post_background_opacity', '0.7');
+		$card_blur_inline = intval(get_option('argon_card_blur', '20'));
+		$card_saturate_inline = intval(get_option('argon_card_saturate', '180'));
 		
-		// 如果开启了毛玻璃但没设置透明度，自动应用推荐透明度
-		if ($card_blur > 0 && ($post_bg_opacity == '' || $post_bg_opacity == '1')) {
-			$post_bg_opacity = max(0.75, 0.92 - $card_blur * 0.008);
+		// 如果透明度为空或为1，使用推荐默认值
+		if ($post_bg_opacity_inline == '' || $post_bg_opacity_inline == '1') {
+			$post_bg_opacity_inline = '0.7';
 		}
-		
-		if ($post_bg_opacity != '' && $post_bg_opacity != '1') { 
 		?>
 		article.post.card,
 		#comments.card,
@@ -1183,7 +1202,9 @@ if ($animation_style == 'apple') {
 		.post-navigation.card,
 		.related-posts.card,
 		.card.bg-white {
-			background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity; ?>) !important;
+			background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_inline; ?>) !important;
+			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
 		}
 		html.darkmode article.post.card,
 		html.darkmode #comments.card,
@@ -1191,49 +1212,34 @@ if ($animation_style == 'apple') {
 		html.darkmode .post-navigation.card,
 		html.darkmode .related-posts.card,
 		html.darkmode .card.bg-white {
-			background-color: rgba(23, 25, 35, <?php echo $post_bg_opacity; ?>) !important;
+			background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_inline; ?>) !important;
 		}
-		<?php } ?>
-
-		/* 卡片毛玻璃效果 */
-		<?php 
-		if ($card_blur > 0) {
-			$blur_value = $card_blur . 'px';
-		?>
-		article.post.card,
-		#comments.card,
-		#post_comment.card,
-		.post-navigation.card,
-		.related-posts.card,
 		#leftbar .card,
 		#leftbar_part1,
-		#leftbar_part2,
-		.card.bg-white {
-			backdrop-filter: blur(<?php echo $blur_value; ?>) saturate(120%);
-			-webkit-backdrop-filter: blur(<?php echo $blur_value; ?>) saturate(120%);
+		#leftbar_part2 {
+			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
 		}
-		<?php } ?>
 
 	</style>
 
 <?php } ?>
 
-<!-- 毛玻璃效果 - 独立于背景图片设置 -->
+<!-- 毛玻璃效果 - 独立于背景图片设置（无背景图时也生效） -->
 <?php 
-$card_blur_standalone = intval(get_option('argon_card_blur', '8'));
-$post_bg_opacity_standalone = get_option('argon_post_background_opacity');
+$card_blur_standalone = intval(get_option('argon_card_blur', '20'));
+$card_saturate_standalone = intval(get_option('argon_card_saturate', '180'));
+$post_bg_opacity_standalone = get_option('argon_post_background_opacity', '0.7');
 
 // 只有在没有背景图片时才输出毛玻璃样式（有背景图片时上面已经输出了）
-if (apply_filters('argon_page_background_url', get_option('argon_page_background_url')) == '' && $card_blur_standalone > 0): 
-	// 如果开启了毛玻璃但没设置透明度，自动应用推荐透明度
+if (apply_filters('argon_page_background_url', get_option('argon_page_background_url')) == ''): 
+	// 如果透明度为空或为1，使用推荐默认值
 	if ($post_bg_opacity_standalone == '' || $post_bg_opacity_standalone == '1') {
-		$post_bg_opacity_standalone = max(0.75, 0.92 - $card_blur_standalone * 0.008);
+		$post_bg_opacity_standalone = '0.7';
 	}
-	$blur_value_standalone = $card_blur_standalone . 'px';
 ?>
 <style id="theme_blur_css">
-	/* 文章背景透明度 */
-	<?php if ($post_bg_opacity_standalone != '' && $post_bg_opacity_standalone != '1'): ?>
+	/* 卡片透明度和毛玻璃效果 */
 	article.post.card,
 	#comments.card,
 	#post_comment.card,
@@ -1241,6 +1247,8 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	.related-posts.card,
 	.card.bg-white {
 		background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_standalone; ?>) !important;
+		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
 	}
 	html.darkmode article.post.card,
 	html.darkmode #comments.card,
@@ -1248,28 +1256,18 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	html.darkmode .post-navigation.card,
 	html.darkmode .related-posts.card,
 	html.darkmode .card.bg-white {
-		background-color: rgba(23, 25, 35, <?php echo $post_bg_opacity_standalone; ?>) !important;
+		background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_standalone; ?>) !important;
 	}
-	<?php endif; ?>
-	
-	/* 卡片毛玻璃效果 */
-	article.post.card,
-	#comments.card,
-	#post_comment.card,
-	.post-navigation.card,
-	.related-posts.card,
 	#leftbar .card,
 	#leftbar_part1,
-	#leftbar_part2,
-	.card.bg-white {
-		backdrop-filter: blur(<?php echo $blur_value_standalone; ?>) saturate(120%);
-		-webkit-backdrop-filter: blur(<?php echo $blur_value_standalone; ?>) saturate(120%);
+	#leftbar_part2 {
+		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
 	}
 </style>
 <?php endif; ?>
 
 
-
 <?php if (get_option('argon_show_toolbar_mask') == 'true') { ?>
 
 	<style>
diff --git a/settings.php b/settings.php
index aa0e735..0b2f2ce 100644
--- a/settings.php
+++ b/settings.php
@@ -1226,20 +1226,30 @@ function themeoptions_page(){
 									<div style="margin-bottom: 20px;">
 										<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('卡片透明度', 'argon');?></label>
 										<div style="display: flex; align-items: center; gap: 12px;">
-											<input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '1' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;">
-											<span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '1.00' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span>
+											<input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '0.7' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;">
+											<span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '0.70' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span>
 										</div>
-										<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度', 'argon');?></p>
+										<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度，推荐 0.7', 'argon');?></p>
 									</div>
 
 									<!-- 毛玻璃模糊 -->
-									<div style="margin-bottom: 10px;">
+									<div style="margin-bottom: 20px;">
 										<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃模糊', 'argon');?></label>
 										<div style="display: flex; align-items: center; gap: 12px;">
-											<input type="range" name="argon_card_blur" min="0" max="20" step="1" value="<?php echo (get_option('argon_card_blur', '8')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;">
-											<span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '8')); ?>px</span>
+											<input type="range" name="argon_card_blur" min="0" max="30" step="1" value="<?php echo (get_option('argon_card_blur', '20')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;">
+											<span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '20')); ?>px</span>
 										</div>
-										<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 8px', 'argon');?></p>
+										<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 20px', 'argon');?></p>
+									</div>
+
+									<!-- 毛玻璃饱和度 -->
+									<div style="margin-bottom: 10px;">
+										<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃饱和度', 'argon');?></label>
+										<div style="display: flex; align-items: center; gap: 12px;">
+											<input type="range" name="argon_card_saturate" min="100" max="250" step="10" value="<?php echo (get_option('argon_card_saturate', '180')); ?>" id="argon_card_saturate_slider" style="flex: 1; cursor: pointer; height: 6px;">
+											<span id="argon_card_saturate_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_saturate', '180')); ?>%</span>
+										</div>
+										<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('毛玻璃背景的色彩饱和度，推荐 180%', 'argon');?></p>
 									</div>
 								</div>
 
@@ -1252,7 +1262,7 @@ function themeoptions_page(){
 										<img id="effect_preview_bg" src="<?php echo esc_url($page_bg_url); ?>" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: <?php echo get_option('argon_page_background_opacity', '1'); ?>;">
 										<?php } ?>
 										<div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
-											<div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '1'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);">
+											<div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '0.7'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);">
 												<span style="font-size: 12px; font-weight: 500; color: #333;"><?php _e('卡片效果', 'argon'); ?></span>
 												<span id="blur_preview_info" style="font-size: 10px; color: #666; margin-top: 4px;"></span>
 											</div>
@@ -1272,6 +1282,8 @@ function themeoptions_page(){
 								var postBgValue = document.getElementById('argon_post_bg_opacity_value');
 								var blurSlider = document.getElementById('argon_card_blur_slider');
 								var blurValue = document.getElementById('argon_card_blur_value');
+								var saturateSlider = document.getElementById('argon_card_saturate_slider');
+								var saturateValue = document.getElementById('argon_card_saturate_value');
 								
 								var previewBg = document.getElementById('effect_preview_bg');
 								var previewCard = document.getElementById('blur_preview_card');
@@ -1279,16 +1291,17 @@ function themeoptions_page(){
 								
 								function updatePreview() {
 									var pageBgOpacity = pageBgSlider ? pageBgSlider.value : 1;
-									var postBgOpacity = postBgSlider ? postBgSlider.value : 1;
-									var blur = blurSlider ? blurSlider.value : 8;
+									var postBgOpacity = postBgSlider ? postBgSlider.value : 0.7;
+									var blur = blurSlider ? blurSlider.value : 20;
+									var saturate = saturateSlider ? saturateSlider.value : 180;
 									
 									if (previewBg) {
 										previewBg.style.opacity = pageBgOpacity;
 									}
 									if (previewCard) {
 										previewCard.style.background = 'rgba(255,255,255,' + postBgOpacity + ')';
-										previewCard.style.backdropFilter = 'blur(' + blur + 'px)';
-										previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px)';
+										previewCard.style.backdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
+										previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
 									}
 									if (previewInfo) {
 										previewInfo.textContent = '<?php _e("透明度", "argon"); ?> ' + parseFloat(postBgOpacity).toFixed(2) + ' / <?php _e("模糊", "argon"); ?> ' + blur + 'px';
@@ -1316,6 +1329,13 @@ function themeoptions_page(){
 									});
 								}
 								
+								if (saturateSlider) {
+									saturateSlider.addEventListener('input', function() {
+										saturateValue.textContent = this.value + '%';
+										updatePreview();
+									});
+								}
+								
 								updatePreview();
 							})();
 							</script>
@@ -5234,6 +5254,8 @@ function argon_update_themeoptions(){
 
 		argon_update_option('argon_card_blur');
 
+		argon_update_option('argon_card_saturate');
+
 		argon_update_option('argon_page_background_banner_style');
 
 		argon_update_option('argon_hide_name_email_site_input');
diff --git a/style.css b/style.css
index 9ef67b7..c8aa1a6 100644
--- a/style.css
+++ b/style.css
@@ -15345,31 +15345,32 @@ html.darkmode .segmented-control-item:hover {
 
 /* ========================================
    主题变体 - 玻璃拟态 (Glassmorphism)
+   使用 CSS 变量，由站长设置控制
    ======================================== */
 
 html.style-glass .card,
 html.style-glass #fabtn_blog_settings_popup {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    background: rgba(255, 255, 255, var(--card-opacity, 0.7));
+    backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
+    -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 html.style-glass .card:hover {
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1));
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
 }
 
 html.darkmode.style-glass .card,
 html.darkmode.style-glass #fabtn_blog_settings_popup {
-    background: rgba(66, 66, 66, 0.7);
+    background: rgba(66, 66, 66, var(--card-opacity, 0.7));
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
 html.darkmode.style-glass .card:hover {
-    background: rgba(66, 66, 66, 0.8);
+    background: rgba(66, 66, 66, calc(var(--card-opacity, 0.7) + 0.1));
 }
 
 /* ========================================
@@ -15441,17 +15442,17 @@ html.style-neumorphism #fabtn_blog_settings_popup {
 
 
 /* ========== 玻璃风格下文章/页面卡片样式统一 ========== */
-/* 确保文章页卡片与首页卡片样式一致，继承全局 .card 样式 */
+/* 使用 CSS 变量，确保与首页卡片一致 */
 html.style-glass article.post.post-full.card {
-    background: rgba(255, 255, 255, 0.7) !important;
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
+    backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
+    -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 html.darkmode.style-glass article.post.post-full.card {
-    background: rgba(66, 66, 66, 0.7) !important;
+    background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
@@ -16130,15 +16131,15 @@ html.darkmode.style-glass article.post.post-full.card {
 /* ========== 移动端玻璃风格文章卡片 ========== */
 @media screen and (max-width: 900px) {
     html.style-glass article.post.post-full.card {
-        background: rgba(255, 255, 255, 0.7) !important;
-        backdrop-filter: blur(20px) saturate(180%);
-        -webkit-backdrop-filter: blur(20px) saturate(180%);
+        background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important;
+        backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
+        -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
     }
     
     html.darkmode.style-glass article.post.post-full.card {
-        background: rgba(66, 66, 66, 0.7) !important;
-        backdrop-filter: blur(20px) saturate(180%);
-        -webkit-backdrop-filter: blur(20px) saturate(180%);
+        background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important;
+        backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
+        -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%));
     }
 }