feat(ticket): redesign user-center ticket center UI/UX

- Status stat cards double as quick filters; debounced search with stale-response guard
- Card list with status stripe, windowed pagination, skeleton/empty/error states
- Detail dialog as chat timeline with in-place refresh, quote preview, Ctrl+Enter send
- Create form with department chips, inline validation, multi-image upload, success notice
- Split shared helpers into ticket-center-core.js and enqueue it before the panel script
- Drop dead data-aksrt-ticket-config and legacy colorful modal header

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

inc/helpers/user-center-renderers/profile-tickets.php

@@ -2,8 +2,8 @@
 /**
  * User center ticket (工单) panel.
  *
- * 数据全部来自 /aksrt/v1/tickets* REST；本文件只输出容器与挂载点，
- * 交互在 assets/js/ticket-center.js。
+ * 数据全部来自 /aksrt/v1/tickets* REST；本文件只输出容器、筛选控件与首屏骨架，
+ * 交互在 assets/js/ticket-center.js（附件 / 公告 / 催单配置取自 aksrtData.ticket）。
  *
  * @package AKSRT
  */
@@ -30,9 +30,6 @@ $statuses = class_exists('\AKSRT\Ticket\TicketStatusService')
 $types = class_exists('\AKSRT\Ticket\TicketTypeService')
 	? \AKSRT\Ticket\TicketTypeService::public_list()
 	: [];
-$attachment_max = class_exists('\AKSRT\Ticket\TicketSettings')
-	? \AKSRT\Ticket\TicketSettings::attachment_max()
-	: 5;
 ?>
 <div class="aksrt-tickets-page uc-tickets-panel" data-aksrt-ticket-center>
 	<header class="uc-tickets-panel__head">
@@ -42,24 +39,37 @@ $attachment_max = class_exists('\AKSRT\Ticket\TicketSettings')
 				<i class="fa fas fa-headset uc-tickets-panel__title-icon" aria-hidden="true"></i>
 				<?php esc_html_e('工单中心', 'aksrt'); ?>
 			</div>
-			<p class="muted-2-color em09 mt3"><?php esc_html_e('提交问题工单，跟踪处理进度并与管理员沟通。', 'aksrt'); ?></p>
+			<p class="muted-2-color em09 mt3"><?php esc_html_e('提交问题工单，跟踪处理进度并与客服沟通。', 'aksrt'); ?></p>
 		</div>
-		<button class="btn-primary" type="button" data-aksrt-ticket-create><?php esc_html_e('提交工单', 'aksrt'); ?></button>
+		<button class="btn-primary aksrt-tickets-page__create" type="button" data-aksrt-ticket-create>
+			<i class="fa fas fa-plus" aria-hidden="true"></i><?php esc_html_e('提交工单', 'aksrt'); ?>
+		</button>
 	</header>
 
-	<div class="aksrt-tickets-page__stats" data-aksrt-ticket-stats>
+	<?php // 统计卡同时是状态快捷筛选：点击按该状态过滤，再次点击取消。 ?>
+	<div class="aksrt-tickets-page__stats" data-aksrt-ticket-stats role="group" aria-label="<?php esc_attr_e('按状态筛选', 'aksrt'); ?>">
+		<button type="button" class="aksrt-tickets-page__stat is-active" data-aksrt-ticket-stat="" aria-pressed="true">
+			<span><?php esc_html_e('全部', 'aksrt'); ?></span><strong>0</strong>
+		</button>
 		<?php foreach ($statuses as $status) : ?>
-			<div class="aksrt-tickets-page__stat" data-aksrt-ticket-stat="<?php echo esc_attr((string) $status['status_key']); ?>">
-				<span><?php echo esc_html((string) $status['name']); ?></span><strong>0</strong>
-			</div>
+			<button
+				type="button"
+				class="aksrt-tickets-page__stat"
+				data-aksrt-ticket-stat="<?php echo esc_attr((string) $status['status_key']); ?>"
+				style="--aksrt-ticket-color: <?php echo esc_attr((string) $status['color']); ?>"
+				aria-pressed="false"
+			>
+				<span><i class="aksrt-tickets-page__stat-dot" aria-hidden="true"></i><?php echo esc_html((string) $status['name']); ?></span><strong>0</strong>
+			</button>
 		<?php endforeach; ?>
 	</div>
 
-	<form class="aksrt-tickets-page__search" data-aksrt-tickets-search>
-		<label class="screen-reader-text" for="aksrt-ticket-keywords"><?php esc_html_e('按工单号或标题查找', 'aksrt'); ?></label>
-		<i class="fa fas fa-search" aria-hidden="true"></i>
-		<input id="aksrt-ticket-keywords" maxlength="60" placeholder="<?php esc_attr_e('输入工单号或标题查找', 'aksrt'); ?>">
-		<button class="btn-primary" type="submit"><?php esc_html_e('查找', 'aksrt'); ?></button>
+	<form class="aksrt-tickets-page__search" data-aksrt-tickets-search role="search">
+		<label class="aksrt-tickets-page__search-box">
+			<span class="screen-reader-text"><?php esc_html_e('按工单号或标题查找', 'aksrt'); ?></span>
+			<i class="fa fas fa-search" aria-hidden="true"></i>
+			<input type="search" maxlength="60" autocomplete="off" placeholder="<?php esc_attr_e('搜索工单号或标题', 'aksrt'); ?>">
+		</label>
 		<select data-aksrt-ticket-filter="status" aria-label="<?php esc_attr_e('工单状态', 'aksrt'); ?>">
 			<option value=""><?php esc_html_e('全部状态', 'aksrt'); ?></option>
 			<?php foreach ($statuses as $status) : ?>
@@ -74,17 +84,23 @@ $attachment_max = class_exists('\AKSRT\Ticket\TicketSettings')
 				<?php endforeach; ?>
 			</select>
 		<?php endif; ?>
+		<button class="aksrt-tickets-page__reset" type="button" data-aksrt-ticket-reset hidden><?php esc_html_e('清除筛选', 'aksrt'); ?></button>
 	</form>
 
-	<div class="aksrt-tickets-page__list" data-aksrt-ticket-list>
-		<div class="aksrt-tickets-page__empty">
-			<i class="fa fas fa-headset" aria-hidden="true"></i>
-			<h3><?php esc_html_e('还没有工单', 'aksrt'); ?></h3>
-			<p><?php esc_html_e('遇到问题时提交工单，我们会尽快处理。', 'aksrt'); ?></p>
+	<div class="aksrt-tickets-page__list" data-aksrt-ticket-list aria-live="polite" aria-busy="true">
+		<?php // 首屏骨架：沿用全站 .post_ajax_loader + .is-loading 契约，JS 拿到数据后整体替换。 ?>
+		<div class="post_ajax_loader is-loading" aria-hidden="true">
+			<?php for ($i = 0; $i < 3; $i++) : ?>
+				<div class="aksrt-tickets-page__card is-placeholder">
+					<div class="placeholder s1"></div>
+					<div class="placeholder k1"></div>
+					<div class="placeholder k3" style="width: 42%;"></div>
+				</div>
+			<?php endfor; ?>
 		</div>
 	</div>
 
-	<nav class="aksrt-tickets-page__pagination" data-aksrt-ticket-pagination hidden></nav>
+	<nav class="aksrt-tickets-page__pagination" data-aksrt-ticket-pagination aria-label="<?php esc_attr_e('工单分页', 'aksrt'); ?>" hidden></nav>
 
 	<?php
 	// 人机验证挂载点（提交工单 / 回复）：场景未启用时 aksrt_render_captcha 无输出，
@@ -94,7 +110,4 @@ $attachment_max = class_exists('\AKSRT\Ticket\TicketSettings')
 		aksrt_render_captcha('ticket_reply');
 	}
 	?>
-	<span class="hidden" data-aksrt-ticket-config="<?php echo esc_attr(wp_json_encode([
-		'attachmentMax' => $attachment_max,
-	])); ?>"></span>
 </div>