refactor: 重构评论区回复提示框

- 重新设计 HTML 结构，更清晰的布局
- 新增回复图标和用户名高亮显示
- 关闭按钮改为圆形，悬停时旋转动画
- 使用 CSS 动画替代 jQuery slideDown/slideUp
- 添加渐变背景和阴影效果
- 优化深色模式适配

argontheme.js

@@ -955,6 +955,11 @@ if (argonConfig.waterflow_columns != "1") {
 !function(){
 	//回复评论
 	let replying = false , replyID = 0;
+	
+	/**
+	 * 显示回复框
+	 * @param {number} commentID - 评论ID
+	 */
 	function reply(commentID){
 		cancelEdit(false);
 		replying = true;
@@ -978,17 +983,33 @@ if (argonConfig.waterflow_columns != "1") {
 		$("body,html").animate({
 			scrollTop: $('#post_comment').offset().top - 100
 		}, 400, 'easeOutCirc');
-		$('#post_comment_reply_info').slideDown(350, 'easeOutCirc');
+		
+		// 使用 CSS 动画显示回复框
+		let replyInfo = $('#post_comment_reply_info');
+		replyInfo.removeClass('reply-leaving').css('display', 'block');
+		// 触发重排以确保动画生效
+		replyInfo[0].offsetHeight;
+		replyInfo.addClass('reply-entering');
+		
 		setTimeout(function(){
 			$("#post_comment_content").focus();
-		}, 350);
+		}, 300);
 	}
+	
+	/**
+	 * 取消回复
+	 */
 	function cancelReply(){
 		replying = false;
 		replyID = 0;
-		$('#post_comment_reply_info').slideUp(250, 'easeOutCirc');
+		let replyInfo = $('#post_comment_reply_info');
+		replyInfo.removeClass('reply-entering').addClass('reply-leaving');
+		setTimeout(function(){
+			replyInfo.css('display', 'none').removeClass('reply-leaving');
+		}, 200);
 		$("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off");
 	}
+	
 	$(document).on("click" , ".comment-reply" , function(){
 		reply(this.getAttribute("data-id"));
 	});
@@ -998,7 +1019,7 @@ if (argonConfig.waterflow_columns != "1") {
 	$(document).on("pjax:click" , function(){
 		replying = false;
 		replyID = 0;
-		$('#post_comment_reply_info').css("display", "none");
+		$('#post_comment_reply_info').css("display", "none").removeClass('reply-entering reply-leaving');
 		$("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off");
 	});
 	//编辑评论

comments.php

@@ -314,9 +314,19 @@ function resetGeetestCaptcha() {
 			<span class="hide-on-comment-not-editing"><?php echo apply_filters("argon_comment_title_editing", __('编辑评论', 'argon'))?></span>
 		</h2>
 		<div id="post_comment_reply_info" class="post-comment-reply" style="display: none;">
-			<span><?php _e('正在回复', 'argon');?> <b><span id="post_comment_reply_name"></span></b><?php _e(' 的评论', 'argon');?> :</span>
+			<div class="post-comment-reply-header">
+				<div class="post-comment-reply-icon">
+					<i class="fa fa-reply"></i>
+				</div>
+				<div class="post-comment-reply-meta">
+					<span class="post-comment-reply-label"><?php _e('正在回复', 'argon');?></span>
+					<span class="post-comment-reply-name" id="post_comment_reply_name"></span>
+				</div>
+				<button id="post_comment_reply_cancel" class="post-comment-reply-close" type="button" title="<?php _e('取消回复', 'argon');?>">
+					<i class="fa fa-times"></i>
+				</button>
+			</div>
 			<div id="post_comment_reply_preview" class="post-comment-reply-preview"></div>
-			<button id="post_comment_reply_cancel" class="btn btn-outline-primary btn-sm"><?php _e('取消回复', 'argon');?></button>
 		</div>
 		<form>
 			<div style="display:none;">

style.css

@@ -6010,77 +6010,147 @@ html.darkmode #post_comment.card:hover {
 
 }
 
+/* ---------- 评论回复提示框 ---------- */
 .post-comment-reply {
-
 	margin-top: 12px;
 	margin-bottom: 12px;
-
+	border-radius: 12px;
+	overflow: hidden;
+	background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.08) 0%, rgba(var(--themecolor-rgbstr), 0.03) 100%);
 	border: 1px solid rgba(var(--themecolor-rgbstr), 0.15);
+	transform-origin: top center;
+}
 
-	border-radius: 10px;
+.post-comment-reply-header {
-
+	display: flex;
+	align-items: center;
 	padding: 12px 16px;
+	gap: 12px;
+	background: rgba(var(--themecolor-rgbstr), 0.05);
+	border-bottom: 1px solid rgba(var(--themecolor-rgbstr), 0.1);
+}
 
-	background: rgba(var(--themecolor-rgbstr), 0.03);
+.post-comment-reply-icon {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: var(--themecolor);
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+	flex-shrink: 0;
+	box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3);
+}
 
+.post-comment-reply-meta {
+	flex: 1;
+	min-width: 0;
+}
+
+.post-comment-reply-label {
+	font-size: 12px;
+	color: var(--color-text-light, #8898aa);
+	display: block;
+	line-height: 1.2;
+}
+
+.post-comment-reply-name {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--themecolor);
+	display: block;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.post-comment-reply-close {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: none;
+	background: rgba(var(--themecolor-rgbstr), 0.1);
+	color: var(--themecolor);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	flex-shrink: 0;
+	transition: all 0.2s ease;
+}
+
+.post-comment-reply-close:hover {
+	background: var(--themecolor);
+	color: #fff;
+	transform: rotate(90deg);
 }
 
 .post-comment-reply-preview {
-
+	padding: 12px 16px;
-	margin-top: 10px;
-
-	border-left: 3px solid var(--themecolor);
-
-	padding: 10px 14px;
-
-	max-height: 150px;
-
-	overflow: hidden;
-
-	position: relative;
-	
-	background: rgba(var(--themecolor-rgbstr), 0.02);
-	
-	border-radius: 0 8px 8px 0;
-	
 	font-size: 13px;
-
+	line-height: 1.6;
+	color: var(--color-text, #525f7f);
+	max-height: 80px;
+	overflow: hidden;
+	position: relative;
+	background: rgba(255, 255, 255, 0.5);
 }
 
-#post_comment_reply_preview:after {
+html.darkmode .post-comment-reply-preview {
+	background: rgba(0, 0, 0, 0.2);
+}
 
+.post-comment-reply-preview::after {
 	content: "";
-
-	background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%);
-
-	display: block;
-
-	left: 0;
-
-	right: 0;
-
-	bottom: 0;
-
-	height: 30px;
-
 	position: absolute;
-
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 30px;
+	background: linear-gradient(180deg, transparent 0%, rgba(var(--themecolor-rgbstr), 0.05) 100%);
 	pointer-events: none;
+}
 
-	transition: all 0.3s ease;
+/* 回复框动画 */
+@keyframes replySlideIn {
+	from {
+		opacity: 0;
+		transform: scaleY(0.8) translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: scaleY(1) translateY(0);
+	}
+}
 
+@keyframes replySlideOut {
+	from {
+		opacity: 1;
+		transform: scaleY(1) translateY(0);
+	}
+	to {
+		opacity: 0;
+		transform: scaleY(0.8) translateY(-10px);
+	}
+}
+
+.post-comment-reply.reply-entering {
+	animation: replySlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.post-comment-reply.reply-leaving {
+	animation: replySlideOut 0.2s ease-out forwards;
 }
 
 #post_comment_reply_cancel {
-
 	margin-top: 10px;
-	
 	border-radius: 8px;
-	
 	padding: 6px 14px;
-	
 	font-size: 13px;
-
 }
 
 #post_comment_content {