Files
wordpress-theme-aksrt/inc/helpers/user-center-renderers/profile-tickets.php
T
kate522andClaude Fable 5 3bd15feccb 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>
2026-10-26 23:06:34 +08:00

114 lines
5.2 KiB
PHP

<?php
/**
* User center ticket (工单) panel.
*
* 数据全部来自 /aksrt/v1/tickets* REST;本文件只输出容器、筛选控件与首屏骨架,
* 交互在 assets/js/ticket-center.js(附件 / 公告 / 催单配置取自 aksrtData.ticket)。
*
* @package AKSRT
*/
defined('ABSPATH') || exit;
$context = is_array($args['context'] ?? null) ? $args['context'] : [];
$user_id = (int) ($context['user_id'] ?? get_current_user_id());
if ($user_id <= 0) {
echo '<div class="uc-panel-empty muted-2-color">' . esc_html__('请先登录', 'aksrt') . '</div>';
return;
}
$enabled = class_exists('\AKSRT\Ticket\TicketSettings') && \AKSRT\Ticket\TicketSettings::enabled();
if (!$enabled) {
echo '<div class="uc-panel-empty muted-2-color">' . esc_html__('工单功能暂未开启', 'aksrt') . '</div>';
return;
}
$statuses = class_exists('\AKSRT\Ticket\TicketStatusService')
? \AKSRT\Ticket\TicketStatusService::all()
: [];
$types = class_exists('\AKSRT\Ticket\TicketTypeService')
? \AKSRT\Ticket\TicketTypeService::public_list()
: [];
?>
<div class="aksrt-tickets-page uc-tickets-panel" data-aksrt-ticket-center>
<header class="uc-tickets-panel__head">
<div class="uc-tickets-panel__title-wrap">
<p class="aksrt-tickets-page__eyebrow"><?php esc_html_e('我的服务', 'aksrt'); ?></p>
<div class="uc-tickets-panel__title font-bold em12">
<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>
</div>
<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>
<?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) : ?>
<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 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) : ?>
<option value="<?php echo esc_attr((string) $status['status_key']); ?>"><?php echo esc_html((string) $status['name']); ?></option>
<?php endforeach; ?>
</select>
<?php if ($types !== []) : ?>
<select data-aksrt-ticket-filter="ticket_type_id" aria-label="<?php esc_attr_e('工单部门', 'aksrt'); ?>">
<option value=""><?php esc_html_e('全部部门', 'aksrt'); ?></option>
<?php foreach ($types as $type) : ?>
<option value="<?php echo esc_attr((string) $type['id']); ?>"><?php echo esc_html((string) $type['name']); ?></option>
<?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 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 aria-label="<?php esc_attr_e('工单分页', 'aksrt'); ?>" hidden></nav>
<?php
// 人机验证挂载点(提交工单 / 回复):场景未启用时 aksrt_render_captcha 无输出,
// ticket-center.js 以挂载点存在与否决定是否先过验证。
if (function_exists('aksrt_render_captcha')) {
aksrt_render_captcha('ticket_create');
aksrt_render_captcha('ticket_reply');
}
?>
</div>